> For the complete documentation index, see [llms.txt](https://docs.responsiveads.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.responsiveads.com/quick-start-guides/platform-overview-video-walkthrough.md).

# Platform Overview (Video Walkthrough)

A 38-minute walkthrough of Creative Studio: building an IAB pack from a PSD, previewing and sharing it, exporting HTML5 files and generating ad tags.

## Platform Overview (Video Walkthrough)

New to ResponsiveAds? This video walks you through the full workflow in Creative Studio, from logging in to getting an ad tag.

You'll follow along as we take a 970x808 master PSD, add a looping background video, and lay it out across a full IAB pack. Then we preview the creative, share it with a client, export it for Google Ad Manager and generate a Fully-Fluid ad tag.

{% embed url="<https://www.loom.com/share/2d33441fb918413097329b3463435d08>" %}

### Key concepts

{% hint style="info" %}
**Creatives are like water, formats are like cups.** A Fully-Fluid creative has no fixed size. The format you add gives it its shape, whether that's an IAB pack, a high-impact responsive format or your own custom set of sizes.
{% endhint %}

* **Creative:** your fluid design file, which becomes your ad.
* **Format:** the set of sizes and responsive behaviour the creative fills.
* **Layout:** how elements are arranged on a given size or aspect ratio. Sizes shown in grey have no layout yet.
* **Template:** a ready-made creative (for example, a video experience) that you can start from and add formats to.

{% hint style="danger" %}
**Deleting a creative is permanent.** To tidy up your Creatives page without losing work, use **Archive** instead.
{% endhint %}

### Chapters

Jump to any section of the video, or follow the links for the detailed guide on each topic.

| Time  | Chapter                                                   | Learn more                                          |
| ----- | --------------------------------------------------------- | --------------------------------------------------- |
| 00:00 | The Dashboard and the Fully-Fluid concept                 | Dashboard, How to Use Fully-Fluid                   |
| 01:00 | Finding the Help Center                                   | Help Center                                         |
| 02:33 | Preparing your assets: 970x808 vs 1920x1080 PSDs          | PSD Design Size and Why it Matters                  |
| 04:12 | The Creatives page: tags, archive and delete              | Creatives, Tagging                                  |
| 06:20 | Creating a new creative and choosing a format             | Setting up an Ad from Scratch, Formats              |
| 08:16 | Editor basics: sizes, layouts, the top bar and autosave   | Interface and Tools, How to Use Formats and Layouts |
| 12:28 | Design vs Setup panels, notes and creative load           | Notes                                               |
| 14:17 | Uploading a PSD                                           | How to Upload Your PSD File                         |
| 17:06 | Adding a background video and choosing video renditions   | Custom Video (HTML)                                 |
| 19:22 | Anchoring, contain/cover/fill and grouping elements       | Group Element                                       |
| 23:28 | Laying out the remaining sizes                            | How to Generate Responsive Sizes                    |
| 26:33 | Image renditions and reducing ad weight                   | Image                                               |
| 28:51 | The Preview page: breakout view, share links and proofing | Preview Page, Comments                              |
| 31:05 | The Summary page                                          | Summary Page                                        |
| 33:00 | Adding more formats to a Fully-Fluid creative             | How to Use Fully-Fluid                              |
| 34:13 | Exporting HTML5 files for Google Ad Manager               | HTML5 Export                                        |
| 35:40 | Generating and publishing an ad tag                       | Ad Serving Tags                                     |
| 37:54 | Checking performance in Analytics                         | Analytics Overview                                  |

### What's covered

#### Getting started

The Dashboard lets you start a new creative from a blank canvas, from a template or from your own assets. You can also open the Help Center from the **?** icon.

Before you build, prepare your assets. You can work with raw assets (images, fonts, video) or a master PSD. We recommend two master sizes:

* **970x808** for IAB packs. It shares the 300x250 aspect ratio at a much higher resolution, so every IAB size stays sharp.
* **1920x1080** for large-format work such as digital out-of-home screens.

#### Building the creative

In the editor, you upload the PSD and position its layers. Then you add a looping background video and use anchoring and grouping so elements stay in place as the ad resizes. Finally, you adjust the layouts for each aspect ratio in the IAB pack.

Image and video renditions let you serve lighter files at smaller sizes. The **creative load** indicator shows the ad weight for each size as you work.

{% hint style="success" %}
**Tip:** Autosave stores local backups of your work on a timer you can adjust. Shorter intervals give you more restore points if something goes wrong. You can also save manually at any time.
{% endhint %}

#### Previewing and sharing

The **Preview page** shows your creative across all sizes and devices. From here you can:

* Share a customised preview link with clients, hiding any interface elements you don't need.
* Start proofing, so reviewers can leave comments.
* View the ad placed at the top, middle or bottom of a mobile page.

#### Exporting and serving

The **Summary page** holds your creative's details, sizes, save history and notes. From here you can:

* Export HTML5 zip packages (for example, for Google Ad Manager), video or images.
* Generate a **Fully-Fluid ad tag**. One tag serves into all your IAB slots, filling each one the way water fills a cup.
* Download or copy tags for your ad server, including Google Ad Manager, third-party and custom tag types.
* Open Analytics to see how your creative is performing once it's live.

{% hint style="warning" %}
Planning to serve a single Fully-Fluid tag across multiple slots? Contact us first so we can confirm it will work where you're delivering. SafeFrames must be enabled.
{% endhint %}

### Next steps

* Build your first ad from a template: [Template Tutorials](/quick-start-guides/template-tutorials.md)
* Follow the written version of this workflow: [Step-by-Step Instructions: 970x808 Example PSD Upload](/creating-ads/setting-up-ads/using-psd-files-with-responsive-ads/how-to-upload-your-psd-file-into-responsiveads/step-by-step-instructions-970x808-example-psd-upload.md)
* Browse more walkthroughs: [Video Tutorials](/help-and-faq/video-tutorials-loom.md)

### Need help?

Contact us at <support@responsiveads.com>.
