Graphic Design CoursesCreating banner ads in Photoshop involves utilizing mainly the layers and text functions of Photoshop. We talk you through the whole process in all of our Adobe Photoshop training courses.
In the example shown here on the right we have a total of eight layers, which are then merged together and exported as a flattened image. This could then be uploaded to your website, or embedded into a newsletter or e-marketing mail out. Here’s how it’s done …
Setting up the file
First of all we open Photoshop and go to File > New document. We are then presented with a series of commonly-used templates. To see the full range click on the drop-down arrow at the bottom of the list to Show All templates. In older versions of Photoshop you have the various Preset templates shown at the top of the screen. Note the presets vary depending on whether you intend to export for printing purposes, or for web, for digital devices, or film & media.
In this case choose the Web category – we are then given a series of common web banner sizes, which are all measured in pixels. Photoshop will set the resolution up at the default of 72 ppi (or pixels per inch). Note that even though, in all other regards we work in metric units of millimeters, we still measure screen resolution in pixels per inch. Just an odd historical quirk!
Choose one of the web banner sizes – you could check in advance from your IT people, or your company style guide, which one you should use. In our case we’ll select 800×600 px. Note that a new file opens with a default Background Layer.
Adding a new image
Next we import our main image (the hero shot) – open the image, then go to Window > Arrange > and choose one of the Tile options. This allows you to see the images side by side. Select your Move tool (V is the shortcut) and drag the photograph across into your blank banner canvas. In this way we never work on the original images – close your original photograph. You will probably need to scale the imported image, so go to Edit > Free Transform, then press Shift to keep the width and height proportionate, and drag a corner anchor point in towards the centre of your blank canvas. Hit Enter (Mac: Return) to complete the scaling operation. Note that you also have a new layer – you could double-click on its title to rename it photo – it’s a good idea to rename layers as you go.
Saving the file
It’s a good idea to save the file early on – in this way the Autosave function will kick in: File > Save, give it a name like web-banner-ad-working-file, and note the file format will be the Photoshop default of PSD file.
Adding a logo
We can create any of the layers in any order – it doesn’t really matter. But we’ll add our company logo. We could use the same method as we did above to add our company logo, but an alternative is to go to the File menu and choose Import. Then browse to where the logo resides on your system and hit Open. Note that you can import most file formats into Photoshop; logos are often EPS or AI files, but JPEGs and PNGs are fine too. We can scale this size and hit Enter to finish the operation. Most file formats support transparency, meaning that the background will be invisible; a JPEG will always have a white or colored background, so it’s the least favored format for logos.
Adding a footer shape
Note that Photoshop has several basic shape tools near the bottom of the toolbox. The foremost is the Rectangle tool – select this and click and drag across the bottom of the banner. The Properties panel will then open, allowing you to select a Fill colour – in this case we’ve stayed with a white fill, and no Stroke (outline). You can also see these properties displayed at the top of the screen.
Cutting out images
Next we want to bring some cut-out graphics – the two people and the paper aeroplane. So open a few new images. If the image has been photographed on a white (or coloured) background it’s an easy manner to cut it out. Simply select the Magic Wand tool, or the Quick Selection tool, and click on the background. Note the top left options for adding to, and subtracting from, the selection. When you have selected the whole background go to the top Select menu and choose Select > Inverse. The person (or object) should now be the selected item. Copy it across into your banner as before (using the Move tool), close the original image (without saving changes), and scale it it fit your banner ad as above (Free Transform). Repeat this with the other images.
Another method, especially good for geometrical shapes like the aeroplane, or furniture, or machines, is to use the Polygonal Lasso tool. With this one we simply click around the outline of the object. You can adjust the selection at the top Refine buttons, or in the Select drop-down menu (Modify Selection, etc).
Adding an effect
We can add effects like Drop Shadows, Strokes (outlines), Glows, etc. In this case we adding a small white stroke to the people. To do so click on the small fx button at the bottom of the Layers panel – note the various options in the pop-up list. Choose one and modify the properties. Tick the Preview checkbox on the bottom left to see the effect on the screen.
Transparent objects
We now want to add the blue semi-transparent circle. Press down (or right-click) on the Rectangle tool, and choose the Ellipse tool. Then click and drag to create a circular object, pressing Shift to keep the width and height proportionate. Select a colour for the fill – in this case we chose a cyan colour. The shape can be scaled as above. To give it a semi-transparent fade effect click on the Add Layer Mask icon at the bottom of the Layers panel – this adds a white icon indicating that at present nothing is hidden. The golden rule of layer masks is that black hides and white reveals. Therefore we must add black to the mask in order to hide parts of the layer. We can do this with a black Brush, or by applying a Gradient blend.
We will use the latter method. So choose your Gradient tool from the toolbox, and choose the default colours of black & white – click on the small default colours icon at the base of the toolbox, or hit D on your keyboard. Note that the mask icon is highlighted in the layers panel. Then click and drag across the circle on your banner ad. Doing this adds a black to white gradient on the mask icon, and results in part of that layer being hidden. You can click and drag as many times as you want, to get the result you like.
Exporting the file for web
Go to File > Export > Save for Web (Legacy). This opens a new dialog box – choose the 4-Up option form the top tabs. This shows us the Original image (top left) plus three options. Our aim is to choose the option which has the smallest file size whilst keeping good image quality. So you could change the top right to JPEG High Quality, the lower right image to JPEG Medium Quality, and the lower left to JPEG Low Quality. Then inspect the differences of quality and image size. The High Quality is probably the best option, therefore choose the Preview button (bottom left) to open the image in a virtual browser. If it looks good close the browser and hit the Save button (bottom right of the panel). Give the file a name and hit OK.
Conclusion
You now have two versions of the file: your working file is a PSD file with layers which can be edited and reused in future (by adding new images). And you have the flattened JPEG (or PNG) file which has good quality but which is a smaller size for uploading to your website, or to be included in your newsletter or email campaign.
Many more tips and techniques can be found at the Adobe website. And see many examples of our clients’ work on our Facebook page.
