Luke O'Neill runs through the basics of creating a simple but striking banner ad using Photoshop.
Learn how to make this simple animated ad banner in our tutorial.
Every designer will be asked to create a banner ad at some point in their career, whether its a stand alone advert or just one deliverable within a much larger campaign. On a very basic level, this is like any other design job if you wish to simply create a static banner which for many purposes is fine. But if you wish to really catch the eye of the viewer or indeed have a lot of information to convey, then you'll need to create an animated banner.
Through this 10 step tutorial I'll run through the very basics of creating an animated banner ad in Creative Suite or Creative Cloud versions of Photoshop using the layers panel in conjunction with the animation timeline. This is simple animation work but once you get your head around working with a timeline and the layers panel together, it can quickly lead onto more complex animation work.
01. Setting Up
Firstly we need to set up our document to the right spec. Navigate to photoshop, create a new document and int he new document dialog box ensure the dimensions are set to pixels and enter 728 for the width and 90 for the height end ensure that the colour mode is set to RGB. As we're working in pixels, don't worry about the resolution. This is the standard size for a horizontal leader board banner ad.
02. Start designing
Now to start designing the ad. This is going to be a typography led design so I want to keep it bold and graphic using Creative Bloqs brand colours, but feel free to use your own colours and graphic elements to best suit your project.
First create a new layer in the layers panel and make a perfect square selection by holding shift whilst using the rectangular marquee tool. Now fill this with a colour using the paint bucket tool and name the layer something suitable, in this case I've called it "colour block 01".
03. Fill the banner
Now hover over the square with the move tool and whilst holding alt, drag and duplicate the square so that it snaps to the edges of the original square. Snap will need to be turned on under the view menu.
Keep duplicating the squares until you've filled the banner, then select them all by holding shift and ensure that they're centred in the document. Now simply delete every other orange square to create a simple square grid to base our design and animation on. With all the squares still selected hit Cmd+E to merge all the square layers.
04. Create type elements
Now to start creating the type elements. Hit T to bring up the type tool and draw a square over the first orange square. Make sure white is selected in the foreground colour, type a character and select the font you'd like to use, the bolder and more graphic the better. Use the keyboard shortcut Cmd+Shift+. to quickly increase the point size.
Once you're happy hit the move tool and then use the cursor keys to centrally position the type within the orange frame. Duplicate the text frame and repeat the process filling all the orange squares with different characters.
05. Duplicate and merge
Now duplicate one of the text frames and repeat the process in step 4 filling the white squares with orange type as shown above. Now we want to create a single layer out of the orange type and the white type.
To do this simply hold shift and select all the white type and then hit Cmd+E to merge the layers. Repeat this process for the orange type and name them something appropriate such as "white type 01" in the layers panel. This will rasterise the type and you won't be able to edit it anyone so make sure you're happy with it.
06. Create Frames
Repeat this process until you have three sets of white type and three sets of orange type. Now we need to create two frames for the advert copy. Simply create a new layer, fill it with a colour and then type your message, in this case 'The 100 best free fonts'. Merge the colour layer and type layer and then repeat the process for the final branding frame, in this case I'm simply using the Creative Bloq logo.
07. Animate the layers
Now that we have all the layers named up and neatly organised, its time to start animating them. If you're using CS6 or above then navigate to Window>Timeline and then choose 'Create Frame Animation' from the drop down. If you're pre CS6 then simply choose Animation from the Window menu.
Now turn all your layers off apart from the background, the coloured blocks and the first set of orange and white type. Duplicate the frame and turn off the first set of orange and white type and turn on the second set. Repeat this process for the final set of type and create separate frames for the copy and logo layers as shown above.
08. Play with the frame rate
You'll notice that all the frames in the timeline are set to 0 sec and if you press play then they'll cycle through at super fast speed. Now what we need to do is start playing around with the rate at which the animation cycles through each frame, bearing in mind that we'll probably want to linger longer on the actual advertising message and branding.
This stage is very much a matter of trial and error but be careful to ensure that the final message(s) are left static long enough for the viewer to engage with the message. for the purposes of this job I've chosen a 0.75 second frame rate to cycle through the graphic letterforms and then 2 seconds per frame for the final messages.
09. Check the animation
To check your animation simply hit the play button in the timeline panel and ensure that 'Forever' is selected from the drop down if you want the animation to loop continually.
You may wish to experiment with some of the type cycling through at different frame rates or creating more sets of type so there are a greater number of character to cycle through. However, always keep in mind that the more complex the animation then the greater the file size will be. Check with your client what the maximum files size is as this can greatly affect the complexity and options you have when creating your animated banner.
10. Save as...
Finally, we need to save out the animation as a GIF. navigate to 'Save for Web and Devices' under the file menu and ensure that GIF is selected. Here you have a number of options but the main ones that will affect the file size are the number of colours you choose to use and the Lossy slide bar.
Play around with these settings and you'll see an estimated file size beneath the image preview window. Bear in mind that there will be a loss of quality if you drastically reduce those two options but the flatter the colours then the better the results. For example, photographic work will noticeably suffer.
Now all that's left to do is save out the file and drag it into your browser to test it.
Words: Luke O'Neill