How to Create a Pulsing Light Animated GIF

This nifty PhotoShop Tutorial will show you how to create a pulsing, glowing light in an animated GIF file for use on the web or in any html file. Good for banner ads, email accents or website decor. We will be also using the ImageReady feature built into PhotoShop to create the animation.This tutorial is for intermediate to advanced users who have a understanding of basic PhotoShop tools and techniques. For PhotoShop 6.0 and above.

We start by opening a new file, in this case 3 inches wide by 3 inches high, at 72 dpi., with a black background area.
On a new layer use the filled area tool to create a circle with red fill, in the center of the area.

Now let's give it some dimension. Select 'Layer Styles' from the menu bar at top, then 'Bevel and Emboss'. For most of the settings you will be using the defaults, so don't be too put-off by the following list:

Set the parameters thus: In Structure; Style: Inner Bevel, Technique: Smooth, Depth: 100%, Direction: Up, Size: 50 px, Soften: 0.

In Shading; Angle: O, Use Global Light, Gloss Contour: (Default), Highlight Mode: Normal, Opacity: 100%, Shadow Mode: Multiply, Opacity: 100%

We will make two more layers with this same image. Right click on layer one in the layers palette. Select 'Duplicate Layer'.
A new, identical layer is created. Repeat the process for one more layer.

Next, the layers will be individually adjusted to dark, medium and light versions, which will be the primary sequences of the animation.

Select layer 1. Click on your circular image to select it. From the top menu bar choose 'Adjustments' then, 'Brightness and Contrast'. Set the Contrast to 100 and the brightness to -50. This is the darkest pulse-phase of your light- it looks like it's fading out.

Select layer 2. Click on your circular image to select it. From the top menu bar choose 'Adjustments' then, 'Brightness and
Contrast'. Set the Contrast to 100 and the brightness to -50. This is the medium phase, to look like it's beginning to glow

Select layer 3. Click on your circular image to select it. From the top menu bar choose 'Adjustments' then, 'Brightness and
Contrast'. Set the Contrast to 100 and the brightness to 100. This is the brightest pulse phase of your light, like it is on full.

Now we will move to ImageReady. The icon is at the bottom of the toolbar. Clicking on the icon will open up a separate window. Make sure you have the Layer palette visible. You will be switching the visibility of the layers on and off to change the appearance of the animation frames. Also ensure that you have the animation palette visible.

The first frame of the animation is displayed. Click the 'Duplicate Frame' icon at the bottom of th animation strip three times. For each of the four frames you just created, you will display a different layer from the Layer Palette above. Clicking on the small 'eye' icon on the left of the layer title will cause that layer to turn invisible.

So, with the first frame selected, you will clear, or "wink out" the top two layers, leaving the 'dark' layer at bottom visible. Select the second frame, and clear only the top layer, leaving the 'medium' layer visible. The third frame needs to have the top, or 'bright' layer visible.The fourth frame returns to the dark phase by clearing the top three layers again.

Just a few more steps to go! Set the frame time to 0.1 seconds on each of the 3 frames. Then select the first two frames, by clicking on frame 1 and press/hold the 'Shift' key and click frame 2. Then click on the small tweening icon at the animation strip bottom. (If you don't know which icon it is, just hover over a few until you see the identifying text appear.) When the pop-up dialoge box appears, enter 10 tween frames. They will appear in the animation strip below.

Next you will select frame 12 and frame 13 which are the original medium phase and bright phase (they've been moved over by the tween frames). Click the tweening icon again and enter 10 for the number of frames again.

For the Last step you will select frame 23 and frame 24 which are the original bright phase and the last, dark phase frames (they've also been moved over by the tween frames). Click the tweening icon again and enter 10 for the number of frames once more.

Your animated gif is almost ready! Go to File, then Save Optimized As. Make sure you select GIF as the type. Name and save your file, and it's ready to use!