How to Prepare PSD File for Uploading

This process is suitable for 1 size PSD file.
If you are designing within Photoshop Artboards refer to the PSD Artboard Build and Upload Process tutorial.

For the PSD to work correctly, you must take the following steps:

• Your layered PSD must be under 20 MB, less than 10 MB is ideal
• Your layered PSD should be designed as the largest retina quality desktop ad size. Other smaller sizes will be made from this.
• Typical design MAX size for Fully-Fluid 1920x1080
• Typical design MAX size for Fluid 250 or Fluid 400 formats 2560x600
• Best practices: include additional elements for mobile sizes
• Best practices: include reference images of the complete design for all sizes
• Use sRGB IEC61966-2.1 Color Profile
• Use RGB/8 Color Space
• Prepare all Layers:
  • Merge layers when necessary
  • Delete hidden layers
  • Rasterize all Layers (e.g. smart objects, vectors) and all Layer Styles
  • Rasterize all unsupported features

Color Profile

When creating new PSD file:

To check Color Profile in the existing PSD file click Edit > Assign Profile:

Color Space

The .PSD file must use RGB/8 color space. If not sure, check the Mode submenu of the Image menu to make sure that RGB Color and 8bits per channel are enabled.

How to Prepare all Layers in Photoshop

Merging several layers

• In Photoshop you can have as many layers as you want. Often one visual element will consist of multiple layers. It is important to merge these layers in Photoshop, so you have a single element to manipulate in the ResponsiveAds Fluid Designer. Click Layers > Merge Layers or CTRL+E (CMD+E on Mac)

For example:
[1] you might have an element in your ad of a hand holding a smartphone, where one layer is the smartphone device, one layer that is the smartphone's screen and one layer is the hand holding the device.

[2] Another example would be several layers of text that make up a final one text element. Merge all the layers to have one layer with text.

[3] 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.

• If you only have one layer in the .PSD file, export it as a JPG or PNG file and upload as a single Image Element.

Background layer

• If you have a layer in the .PSD file that is set as "Background", you need convert it to a regular layer (Layer > New > Layer from Background).

Alternatively, double-click on the “Background” layer and confirm the action.

Hidden layers

If you have hidden layers in the .PSD, these will be added to the ad too, but set as hidden by default. If you're not using these layers in the final ad, we recommend deleting them in the editor to decrease ad weight and increase performance.

Rasterize all Layers, Layer Styles and Text elements

• To rasterize smart objects, vectors, layer styles and text layers right-click on the layer and select Rasterize Layer or Rasterize Layer Style or Rasterize Type.

• Best Practice for Text elements: to have your text crisp on retina displays, before rasterizing make your text twice the original size.

Rasterize all unsupported features

ResponsiveAds service does not currently support some of the more advanced features in Photoshop. Therefore you need to rasterize them before uploading to ResponsiveAds. These features include:

• Layer styles (e.g. drop shadow or stroke)
• Layer masks & vector masks
• Layers as clipping masks
• Layer blend modes (e.g. darken, multiply or overlay)
• Adjustment layers

If you don’t have any of the below features used - you are all set and can upload your .PSD file.

Layer styles (e.g. drop shadow or stroke)

Create a new empty layer (Layer > New > Layer OR click on plus button on the layers tab) on top of the layer with layer style. Merge the empty layer and the layer with layer style by clicking Layers > Merge Layers or CTRL+E (CMD+E on Mac)

Layer masks & vector masks

To rasterize masks, right-click on the mask in the layer list and select Apply mask.

Layers as clipping masks

Right-click on the clipping mask in the layer list and select Release a Clipping mask.

Layer blend modes (e.g. darken, multiply or overlay)

Layer blend modes are a bit tricky to rasterize as these don't affect the layer itself but instead how the layer interacts with the other layers below it. However, it's possible to include the blend mode effect in a single layer.

1. If you have blend modes in multiple different layers, start rasterizing them from the topmost layer.

2. Select the content of the layer with the blend mode. Easiest way to do this is to select the layer from the layer list and select all (CTRL+A or CMD+A). Then select the Move tool (V) and nudge once to any direction with the arrow keys and nudge back to the opposite direction. This will change the selection to the actual content of the layer instead of the whole canvas.

3. In the layer list, toggle the layer with the blend mode and ALL the layers above it to invisible

4. Click active the layer directly below the layer with the blend mode. Select Edit > Copy merged and Edit > Paste special > Paste in place.

5. Select the new layer that was created (it will be directly below the layer with the blend mode) and the layer with the blend mode and merge the two layers (Layers > Merge Layers or CTRL+E / CMD+E)

Adjustment layers

Adjustments layers are not supported in ResponsiveAds and can't be rasterized as their visual effect is not related to a single layer. You can add the adjustment to each layer under the adjustment layer either by selecting each layer one by one and adding the same adjustment to that layer from Image> Adjustment.

Another way is duplicate the adjustment layer multiple times (right-click on the adjustment layer and select Duplicate layer) so that there is a copy above each layer that you want to add the adjustment and then one-by-one right click on all the adjustment layers and select Create clipping mask. You can then merge the clipping mask and the layer beneath it by right-clicking on the adjustment layer in the layer list and select Merge Down, or by selecting them from the layer list and selecting Layers > Merge Layers or CTRL+E / CMD+E.