Photoshop Animated GIFs

Websites can often be enhanced by adding animated elements like animated GIFs. These are very easy to create in Adobe Photoshop. First we create a new file, the dimensions of which will vary according to the web page appearance. In this matter it's best to first check with your web designer about the recommended pixel dimensions of animations. One example could be: 180 x 120 pixels at a resolution of 72 pixels per inch. Next add a background colour.

We now create four text layers using your preferred fonts; Arial and Verdana are often used in web design. Type the letter A on one layer, B on another, and C on another. Then type your company title on the last layer. Now go to the Window drop-down menu and choose Animation. Drag the lower left button to expand it, and click the Duplicate Selected Frames button once (this sits next to the Trash can). In the Layers menu select the A layer and drag the A shape upwards while holding down the Shift key to constrain the movement to the vertical. You may also use the up arrow on your keyboard to nudge the letter until it's almost out of sight. Don't drag it completely outside the image however. Then select the B layer and repeat the process. Then repeat again for the C layer.

Now select the layer with your company title and reduce the layer's opacity to 0%. Also select the A layer and reduce its opacity to 10%. And repeat the process for the other layers. Finally go to the File drop-down menu and choose Save As and give it a name. This will be a PSD (Photoshop Default) file.

Frames: What is now shown on our screens will be our 0 or the first frame. The process of adding intermediate frames is called tweening in animation parlance. Now drag Frame 2 to the left of Frame 1, or vice versa. Click from one of these frames to the other to see the transition happening on the screen. These are now our first and last frames. Next select frame 1 and click the Tween button, which looks like a chain. Then set the following options: choose Tween With: Next Frame; For Frames to Add: 5; and in Layers: All Layers > Parameters: check all these options. And finally hit the OK button. To test the animation click the Play button; you may notice that the animation is a bit jerky, but it will look fine in your browser.

We can also add effects like glows. Select frame 7 and click the Duplicate Selected button in order to add a frame (number 8). In Layers select the A layer and click the FX styles at the bottom of the Layers panel. Select Outer Glow and set the layer blending mode to Screen with an opacity of 55%. Change the Spread to 0% and the Size to 5. For Colour click on the colour box - this opens the Colour Picker allowing us to choose a bright blue, for example. And hit OK. If we wish to copy the effect, simply press Alt (Mac: Option) and drag the FX icon from the A to the B and C layers. Then select frame 7 and click the Tween button. In Frames to add type 2 and ensure that the Effects button is ticked; and hit OK. Then select frame 7 (that is, with effects off) and click the Duplicate Selected Frame button. Now drag this new frame 8 towards the end of the animation whereupon it becomes frame 11, meaning that the glow will turn on and off. On the bottom left of the Animation panel select either Once or Other and type 3, in order to play the movie three times. Lastly click the Play button in order to review it.

We could also change the opacity of the glow if desired. Then choose File and Save for Web, and choose the 2-Up tab at the top. Select the preset on the right of JPEG Medium, which is good for photos, or the GIF 32 Dithered option, which is good for solid colours and vector shapes like logos. Save the file and name it: abc-logo-animation.html. Change the type to HTML & Images and hit Save. The file is now ready to upload onto your company's website.

Tom Gillan has been training Photoshop to corporate clients in Sydney for seven years.Visit Design Workshop Sydney to know more information about Photoshop .

This article was published on 30 May 2016 and has been viewed 531 times
EasyPublish™ - re-publish this article for free
Featured Slideshare