HTML5 Banner Ad Template - Photoshop
For designers supplying creative artwork, please use the following Photoshop template as a guide for laying out your banner artwork. All PSD artboards in the file are double the size of the ad unit sizes (MPU 300x250 uses artboards set to 600x500). This setup simplifies the export of retina (x2) assets, ensuring imagery and copy are the correct quality.
Note: If your assets look sharp with an artboard scaled to a 100% window view, we can be confident they will look sharp on high density displays.
Important Considerations
-
Avoid Layer Blend Modes. Please refrain from using layer blend modes such as ‘Screen’ to mask/cut away backgrounds (especially black) around graphics. These modes are not directly exportable and add considerable production time as we will then need to set those layer modes back to ‘normal’ and manually alter graphics to reach a similar appearance. Use – layer masks instead.
-
Avoid Multiple Smart Objects. When integrating stock images and logos, please reduce any stock image to max 4000px by 4000px, then import the asset to a Photoshop library to reuse the resource across different ad sizes. This will reduce the overall size of your file, which can be exported as a package before delivery. For logo vector files resizing isn’t an issue but still import the asset to a Photoshop library to avoid bloating the PSD.
-
Keep Layer Names Tidy. You will notice that some layers are named 300x250/text1.png etc. This tells Photoshop's generate assets plugin to export those layers to a specified path and filename. You do not need to append file extensions to your layer names but keeping your layer names descriptive is appreciated.
-
Delete Unused Artboards. Please delete or hide any artboards for sizes that are not on your media plan. If in doubt, hide instead of deleting.
Note: If you import assets/smart objects into your PSD and they have filenames as layers, please remove the file extensions from the layer names (remove .jpg, .png).
For any questions or concerns regarding how to use this template, please contact Keston via email or phone.