Fluid Designer Overview

The ResponsiveAds Studio Fluid Designer is the application to build single and multi-sized ad units.

Designing Creatives

The ResponsiveAds Studio Fluid Designer is a space to build Creatives.

A single Creative can be funneled into a variety of shapes, sizes, and formats, much like how water can flow into many different cups.

To start working on a new Creative, use this start guide: Creative Set-up Wizard (coming soon).

Fluid Designer Tools

When you’re in the Fluid Designer, if you’ve chosen a blank canvas, your space will look like this:

Right in the center of your screen is your canvas. This is where you can create designs by laying out images, text, and other elements.

The Fluid Designer can be broken into five sections:

• The Center Panel, which encompasses the Canvas
• The Top Panel, which has the Device Simulator and the Element Properties (when some element is selected)
• The Right-Hand Sidebar, which has the Creative Properties Block, the Layouts & Formats Block and the Elements Block
• The Left-Hand Sidebar, which houses the Navigation, Copy Functions, PSD file upload, and Custom Code Editor
• The Bottom Panel, which is the Animation Timeline

Center Panel

The Center Panel is your canvas. It has a height and width ruler giving measurements in pixels bordering the top and left side.

On the bottom right side, you see a Slider.

The slider empowers you to see different sizes of your creative, and view how the layout is altered as the size changes.

Numbers in the blue box indicate the currently displaying size of a creative.

Top Panel

Device Simulator

First is the device simulator.

It allows you to quickly preview an ad within different screen sizes without leaving Fluid Designer.

Guidelines

Next are Guidelines.

You can set your custom guidelines to align elements more precisely. You can always make guidelines invisible.

Element Settings Bar

The element properties bar will be blank when you first open up a new, blank canvas. Once you add an element and select it, the element settings bar will appear.

Learn more about all types of elements settings: Element settings.

Right-Hand Sidebar

Creative Properties Block

The top block shows the name, weight, and other key stats about your Creative as a whole, as well as extra Creative Settings.

Layouts & Formats Block

This block shows you all layouts that were added in the creative, as well as formats used.

Read about differences between Formats and Layouts here: Format & Layout - Overview.

Elements Block

Under the Layouts and Formats block is the Elements Block.

The Elements Block lists all the elements you’re using in your Creative. Your elements are stacked with the foremost element layer at the top of the list, and the background elements at the bottom.

For more information on elements, their properties, and how to use them in the Fluid Designer (Editor), see: 

• Elements Types (coming soon)
• Elements - Add, Duplicate, Delete, Group
• Element settings 

Left-Hand Sidebar

The sidebar on the left side of your canvas houses Navigation tools, Copy Functions, the PSD-file upload button, and the Custom Code Editor.

This sidebar empowers you to navigate between sizes in your format, copy your layout as a whole, or apply alterations to the entire creative.

Navigation

Includes: zoom to enlarge or shrink your creative, undo/redo to control your actions, navigation from size to size in the selected format.

Copy Functions

The Copy Functions are a set of three icons: the Copy Layout tool, the Copy Element’s Settings tool, and the Copy Styles tool. These functions allow you to apply changes and adjustments made in one creative size across all sizes.

Learn more:

• Copy layout
• Copy element settings
• Copy styles

PSD file upload

This tool lets you take a design made originally in photoshop, then directly upload the file as a creative in the Fluid Designer.

Instead of saving all assets separately and uploading them one at a time, all photoshop layers will become elements layers in Fluid Designer automatically.

Learn more: PSD Upload (coming soon).

Custom Code Editor

The Custom Code Editor is the place to add or change CSS rules and custom JavaScript code to your creative.

Customized code adds new functions to a creative, or enables complex functionality. Using the Custom Code Editor within the Fluid Designer empowers unique, flexible, advanced design techniques.

Learn more: Custom Code Editor (coming soon).

Bottom Panel

This panel is the Animation Timeline. It empowers you to alter frames of your Creative and add animated properties to your elements.

To learn more see:

• Animation Overview (coming soon)
• Animation Timeline (coming soon)