How to Upload Your PSD File into ResponsiveAds
To ensure your PSD works correctly with the ResponsiveAds platform, please follow our guidelines
PSD Document Setup Requirements
File Size
We recommend keeping your file size as small as possible. Very large files may fail to upload or take a long time to process. Recommended Size: under 20 MB.
Design Size
Design your PSD at a size that matches the aspect ratio and/or largest dimensions of the ad unit, for example 1920x1080 pixels. Learn why here.
Check the type of format you are targeting and pick the correct canvas size (Not sure what the correct canvas size is? Click here)
Color Settings
Color Profile: Use sRGB IEC61966-2.1.
Color Space: Set to RGB/8.
Learn how to check and change the Color Settings
Layer Preparation
Rasterize Layers with unsupported features (Layer Styles, Adjustment layers, Layer Blend Modes). Learn how to do it here:
Preparing LayersFor detailed instructions on how to set up your PSD file, read the page:
How to Prepare your Photoshop PSD files for the Fluid Ad CreatorOur suggested workflow for a company relying on designs in Photoshop files is to set up a PSD Template that would be used to generate correctly prepared PSD files to be uploaded in to our tool.
These can also be used to collect assets that follow the Asset Specs from any clients you may be working with. Learn more:
Primary PSDs & PSD Templates and When Are They Needed?
Uploading Your PSD File
A PSD file can be uploaded to ResponsiveAds Studio to jumpstart the creative process. This section outlines the options for uploading a PSD file to the Fluid Ad Creator.
PSD Upload Drop-down
Find the button on the top bar of the Fluid Ad Creator:
There are two main ways to upload a Photoshop PSD file to the Fluid Ad Creator, adding assets as a new group, and uploading to replace assets:
Replacing assets - when you start from a Template or are updating an existing creative with new assets / versions of assets
Replace or create elements with layers from PSD
Add a Photoshop PSD file as a Group
The two menu options for adding as a group will create new elements from the (supported) layers in your Photoshop file. These elements will appear inside a group that is set to the pixel size defined in your Photoshop file, and named with the PSD file name.
The size and position of the elements inside the group will be defined in percentages, and will match one to one with the designed layout in Photoshop.
After selecting either of the two options, you will be presented with a dialog to choose a file by using the file browser, or by dragging and dropping a PSD file to the dialog.
Add as a Group of Images
Our original functionality, which adds all the layers into the Fluid Ad Creator as image elements.
This means that all supported layers will be rasterized - they will become images. The group structure will be preserved, and the size and position of all the elements will match the original PSD file.
You will need to adjust some settings to finalize the transition from a static layout to a responsive design:
Main Group setting
Select the main group added (name of your PSD file) and look at the Size section of the Design Panel. Change the size units from px to % by clicking on the unit button.
If your size values are not 100% and 100%, click on the target icon to reset the group to the size you are working on.
Now the Fluid Ad Creator understands that you want this group of elements to always fully cover the whole ad slot, no matter if the ad displays at 1920x1080 px or 1900x1000. All of your design values are set to relative, percentage values, and every element will resize accordingly.
Image settings
Image settings need to be changed for background image(s) and text images.
Set any background images that are meant to always cover the entire area of the element to *cover* mode.
This mode will not stretch or skew the image, but it will crop out any parts of the image that flow out of the element boundaries. Use the “focal point” feature to guide which part of your image will always be visible.
Images of text or buttons that you wish to keep aligned should be set to the same alignment value, but kept at the *contain* setting. In the example, all the left hand content could be set to be left aligned, so as the size of the element containers shift with the responsively resizing canvas, the elements are all contained on the left side, and stay aligned.
In addition, you may want to lock some groups of elements (like the car and the shadow in the example), so that they resize “together” without changing position or size in relation to each other. Locked elements should be anchored so that they keep their intended position on the canvas.
Add as a Group of Images & Text
In this option, the type layers defined in your Photoshop file will also generate text elements, along with the rasterized image version of the text. Otherwise these options are the same in all functionality.
Follow the steps above to set up the main group and images.
The text element is always above the image element. The names start with “Text - “ for text and “IMG - “ for the rasterized image of the text layer.
The text comes in set to “Shrink” and our default font size. It will use the main color defined in the Photoshop file, but it will not bring in any additional styles or colors.
Next, set up the live text as you want to have it in your responsive creative. Use the rasterized image to check that your settings look like the design defined in Photoshop.
Also remember to change the text alignment options if necessary.
Hide the rasterized image of the text when you are done, by clicking on the eye icon in the Element list or the Design panel. You can also delete the image element, when you have no need for the reference image.
Replace or Create Elements
If you want to update an existing creative, for example replace placeholder images with final designs, you can use this function. This is also the correct method to use when starting from a Template.
For best results, start by selecting a size and/or aspect ratio that matches your PSD file in the Formats section. Then select the replace function from the PSD options drop-down.
First, you will be asked to select a file to upload. Selecting or dragging in a file will start the upload process.
Next, select what to do with each (supported) layer in the file - replace existing contents or create a new element.
On the left you will see each layer in your Photoshop file showing the name of the layer, the size of the image asset (if used to replace an image), and a visualization of that layer.
The first items in the “Select an element” drop down are all the image elements in this creative. Select one of these, when you wish to replace an existing image with an asset generated from the layer shown on the left.
The seconds items are the text elements included in this creative. Selecting one of these will replace the text characters in the text element with the characters from the PSD file. It will keep the text settings that are defined in the creative.
The third option will create a new element based on the selected layer type (either image or text). That new element will be added at the position and size defined in the PSD file. These are set to percentages, and anchored to the top left corner.
Depending on how well your creative and PSD align to each other, you are either done immediately, or will need to do some final tweaks to organize and finalize the design. Copy settings to other sizes to reflect these changes to all your sizes.
Last updated
Was this helpful?
