Step-by-Step Instructions: 970x808 Example PSD Upload
On this page, you can follow a detailed walkthrough of the steps to take when uploading a Primary PSD file created for use with the full range of IAB sizes.
You can look at an example end result on our preview page.
Use 970x808 Design Size with an IAB Pack
IAB packs and formats, for example the IAB Pack (Fully-Fluid™), are used when you are targeting IAB slots. Designing for IAB involves working with smaller ad slots, and thus a different size of PSD is better.
Starting from a layout that is close to a square aspect will speed up generating all the other aspect ratios included in the IAB standard, so we recommend targeting the 300x250px.
As the IAB standard also includes sizes ranging from 970x250 to 300x600, we recommend building the ad design in Photoshop at 970x808px size. This gives you assets that are large enough to display beautifully in all the IAB sizes.
Getting Started
Follow the below instructions to import the 3 times larger size correctly to the 300x250 size in your IAB Pack.
Start a new creative using the IAB Pack (Fully-Fluid)
If you're unsure of how to start a new creative, the steps are described in our section on Setting up an Ad from Scratch.
To create IAB ads, either use the IAB Pack (Fully-Fluid) from ResponsiveAds or select a custom IAB Pack, if your account has one.
In this tutorial, we are using the IAB Pack (Fully-Fluid).
Select the 300x250 size
When the Fluid Ad Creator loads, the size for 970x250 will be automatically selected. As your PSD file is designed for a square aspect ratio, you need to select and activate a different size.
Select the size 300x250.
For best results later on, you should only have the square layout for the size 300x250 selected and active. Go back to the 970x250 size and remove this layout from the button on the canvas, below the scrubber and the blue size indicator.
You will be moved to the 300x250 size, and are now ready to upload your PSD file.
If you don't see the full layout on the canvas, click the Zoom reset button in the zoom controls on the top bar twice to center the ad on your canvas.
Set the generated group to the correct size
Your layout will import at 3 times the size of the active layout, so it will not display fully.
In the Size section of the Design Tab, you will be able to adjust this with one click.
Click the crosshairs icon next to the title "Size" to set the imported group to be 100% width and 100% height.
Adjust the Imported Text
Now your first size looks as it was designed in Photoshop, except for the fact that the text layers have generated both rasterised image layers and text layers. If you don't need editable text in your ad unit, you should rather use the "Add Photoshop PSD file as a Group of Images" option to avoid this step.
You will need to consider for each of the text layers whether you need to use editable (live) text, or if the rasterized image will be good enough.
Setting up Text elements
The default settings for text elements are currently applied to imported text layers. This means that the text is always set to Shrink mode, where the text will always fit into the marquee bounding box that it is in. If you want the text to wrap to multiple rows, this setting needs to be changed, along with changing the font from our default font Lato.
In the end, you will use the image of the same text to verify your text element settings match the PSD.
The below steps are for the text layer called "Content" in the Example PSD file. Repeat these for any other text that should wrap freely depending on the size of the ad.
Set the font size
Apply the maximum font size that should be used for this text in the Max size field.
The text element will always try to display the text as large as possible inside of the bounding box, so you can limit your body text to sensible upper limit to make sure it is never larger than the Title font.
We will use the maximum size of 24 px
If you hover over the text element in the canvas, you will see what the actual px size of the font is in this small 300x250 size.
Set the font family and weight
We support Google fonts out of the box, but you can upload your own fonts to use if you have a license to use the font in the ad.
Select the font family drop down to begin
If you need to upload a font from your computer, click the button on the bottom of the font family picker.
For this example, use the font Poppins (offered in Google Fonts) and set it to "Extra Light" as defined in the example file.
Adjust the container size if needed
Sometimes, the way that a web font is presented is slightly different from the presentation in Photoshop. Turn on the image asset "IMG - Content" and compare it to the text set up.
You will need to adjust the size of the text box slightly to create exactly the same size text as is in the original. Drag the middle handle of the bounding box up a little, until the font jumps to a matching size. Next, reposition the element so that the texts line up again. 
The slight variation in fonts is normal.
It is good design practice to verify that the design created for a triple sized layout makes sense in 300x250 size. It turns out that this text should be made slightly larger to be properly visible in a small ad. When you hover over the text on the canvas, you can see that it is displayed at 7px, which is too small.
Set the element to display at 10px size by dragging the container to a larger size.
TIP: You can use the anchor buttons to align
Now you can delete the element "IMG - Content" or move it to the group "Background 1", which will hide it from the ad.
Working with Images of text
For example in this case, the Title text always needs to be displayed on one row, so the image of the text is good enough.
Last updated
Was this helpful?