A great way to add interest to a website is by adding animated gifs, and they are easy to create in Photoshop. This is one of the many dynamic functions we look at in our Photoshop courses. First create a new file – the dimensions will vary according to the appearance of your web pages – check with your web designer if you are unsure. An example would be: 170 x 115 pixels at a resolution of 72 ppi. Fill the background colour, for example RGB 35, 275, 211.
Next create four text layers using fonts Arial Narrow or Arial Black. Type M on one layer, C on another, A on another, and Museum of Contemporary Art on the last layer. Go to Window > Animation > and drag the lower left button to expand it. Click the “Duplicate Selected Frames” button once (next to the Trash can). In Layers select the M layer > drag the M shape upwarsd while holding Shift (to constrain to the vertical) > also use the up arrow on your keyboard to nudge the M till it’s ALMOST out of sight. Be careful not to drag it completely outside the image though. Then select the C layer and repeat the process. And repeat again for the A layer.
Select the Museum of Contemporary Art layer and reduce its Opacity in layers to 0%. Also select the M layer & reduce Opacity to 10%. Repeat for the other layers. Then go to File > Save As: MCA-animation.psd
Frames: This will be our 0 or first frame. Tweening: adding intermediate frames. Then Drag Frame 2 to the left of Frame 1 (or vice versa). Click from one frame to the other to see the transitioning on screen – these will now be our first and last frames. Select frame 1 and click the Tween button (looks like a chain). And set the following options: Choose Tween With: Next Frame > For Frames to Add: 5 > Layers: All Layers > Parameters: tick all the options > OK. Now click the Play button to test the animation – note that it may seem a bit jerky but it’ll be fine in your browser.
Adding effects: Add a Glow: select frame 7 > Duplicate Selected button to add a frame (8). In Layers > select the M layer > click the fx styles on bottom of the layers palette. Choose Outer Glow > Blend Mode: Screen > Opacity 55% > Spread 0% > Size 5 > Colour: click on the colour box to open the Colour Picker > choose a bright Yellow > OK. To copy this effect, press Alt and drag the fx icon from the M to the C and A layers. Select frame 7 > click the Tween button > Frames to add: 2 > make sure Effects is ticked > OK. Then select frame 7 (ie. FX off) and click Duplicate Selected Frame button. Drag this new frame 8 to the end of the animation – it becomes frame 11 (ie. glow will turn on and off). At the bottom left of the Animation palette select Once or Other > 3 (to play 3 times). Finally click the Play button to review it.
If you’re happy with the result, go to File > Save. You could also change the opacity of the glow if you like. File > Save for Web & Devices > 2-Up tab at the top. Choose the preset (on the right): JPEG Medium (good for photos) or GIF 32 Dithered (good for solid colours and vector images like logos). Which preset you choose depends on which gives the best balance between image quality & file size > Save. Name it: mca-logo-animation.html > Type: HTML & Images > Save. To test it, go to where you saved the file and double-click it to open up in a web browser. The file is now ready to send on to your web designer to upload onto your company’s website. Happy animating!
Many more tips and techniques can be found at the Adobe website.
See many examples of our clients’ work on our Facebook page.
Other related Photoshop Blog Posts:

• Photoshop interface
  
• Photoshop basics