PSD Artboard Build and Upload Process

This process is for multiple Artboards in your PSD file.
If you are designing within 1 size in you Photoshop file, refer to the How to Prepare PSD File for Uploading tutorial.

Building the Artboard Layout

To start…

1. The first step is to create a Photoshop document that contains all the banner sizes to design in the ResponsiveAds platform.
2. Start by creating a new Photoshop document with the dimensions of one of the banner sizes. Next, go up to the top menu, select Layer > New > Artboard.  

3. IMPORTANT! Label the artboard name with the exact height and width dimensions applied.

4. Select OK, and now the original canvas will convert into an artboard.

5. Repeat these steps with all artboards you wish to add to the Photoshop file.

Next…

1. The goal is to keep the Photoshop file under 20MB before uploading it into the ResponsiveAds platform.

2. Design the content within the artboard at a resolution no larger than 2x the actual banner size.

3. Design everything using fonts, Smart Objects, or vector graphics. Don't be afraid to have graphics and images that bleed well past the artboard dimensions, for they will help support your design in a Fully-Fluid ResponsiveAds environment.  

4. Once the final layout for each banner has been achieved, save this file as your master Photoshop layout.

5. From the completed master Photoshop file, combine all text layers into a single Smart Object. Text that lies upon a button should be combined with that button as a Smart Object. The text and button images will be leveraged for visual reference when laying down live text or interactive buttons in ResponsiveAds.

6. Make sure to label each layer in each artboard layout. Utilize the same layer names for objects that are repeated within each of the artboards.  

7. Save this file as a secondary master file before rasterization.

8. After following the steps above, the banners are ready to be rasterized. From the Photoshop layers panel, select all layers from all artboards, right-click and select Rasterize Layers.

9. Save this file as a new Photoshop document with the word "rasterized" as part of its file name title.

10. Locate the file that has been rasterized, right-click and select Get Info. If the file is under 20MB, everything is ready. If the file is over 20MB, consider going back into the master file and scale/trim  down higher-resolution images.

Last…

1. Create and set up a new ResponiveAds project that carries the banner sizes that match your Photoshop artboards.

2.  From the ResponsiveAds creative edit section, select the "Upload a PSD artboard" icon.

3. Drag and drop or select "Choose File" and upload the rasterized version of the Photoshop artboard into Responsive Ads.

4. Once uploaded, ResponsiveAds will request the artboard names to be assigned to the actual banner sizes within the platform.

5. Once assigned, the images will load into the appropriate banner layout. Whichever format is in view, the banner contents will be visible. Other banner formats should not be visible. If they are, turn them off. Toggle close all non visible formats within the elements panel.

6. If the currently selected format elements are out of order, select and rearrange to correct their position in the layout.

7. Go through each format and repeat steps 5 and 6.