Prudently done, animated logos attract the attention of visitors to your website and entice them to view the rest of the page. Photoshop's Layers panel, Transformation tool and Timeline panel work together to create animated GIF images you can add to any Web page. You can make your logo spin clockwise or counterclockwise.
Step 1
Open the image file of the logo. Use any file format, but if the file is a multilayered PSD, merge the layers.
Video of the Day
Step 2
Create a canvas large enough to completely contain the logo you want to rotate. For example, if your logo is 300 pixels wide and 200 pixels in height, click "File," "New" and then make the image height and width larger than 300 pixels. Select a solid background that works with your logo and website. For example, if logo is on a white background, chose "White" for the "Background Contents."
Step 3
Type a name for the new file and click "OK" to add a blank image canvas.
Step 4
Click the "Window" menu and then select the window containing the logo.
Step 5
Press "Ctrl-A" to select the whole image and then "Ctrl-C" to copy it into the clipboard.
Step 6
Click the "Window" menu and then select the window containing the blank canvas you created to hold the logo.
Step 7
Press "Ctrl-V" to paste the logo into the blank canvas.
Step 8
Press "Ctrl-E" to merge the pasted image into the background image leaving only one layer instead of two.
Step 9
Create three duplicates of the current layer. Click the "Layers" menu, "Duplicate Layer," and then "OK" to create each new layer containing a copy of the original, merged image. Photoshop names the layers for you.
Step 10
Select the first layer from the listing starting at the top of Layers panel, click the "Edit" menu, "Transform" and then "Rotate 90º Clockwise."
Step 11
Select the second layer in the listing, click the "Edit" menu, "Transform" and then "Rotate 180º."
Step 12
Select the third layer in the listing, click the "Edit" menu, "Transform" and then "Rotate 90º Counter Clockwise." Save your work.
Step 13
Click the "Window" menu, "Timeline" and then the "Create Video Timeline" button to add the Timeline panel to your project. The Timeline panel contains all four layers of the logo. If you see only three layers, unlock the original layer.
Step 14
Reduce the display time for each layer by setting its duration to five frames. Click and hold your mouse on the right edge of each layer in the timeline and drag the edge toward the left until the "Duration" setting is "00.05." The fewer the frames, the faster the animation appears to spin.
Step 15
Leave the bottom layer on the timeline where it is. Click and hold the mouse on the center of the layer just above the bottom layer on the timeline and drag the whole layer to the right until its left side aligns with the right edge of the bottom layer. If the layer resizes instead of moves, press "Ctrl-Z" and try again.
Step 16
Click and hold the mouse on the second layer above the bottom layer on the timeline and move the layer to the right until the left side of the layer aligns with the right edge of the layer beneath it.
Step 17
Click and hold the mouse on the top layer on the timeline and drag the layer to the right until the left side of the layer aligns with the right edge of the layer beneath it.
Step 18
Press the "Play" button to preview the animation.
Step 19
Click "File" and then "Save for Web."
Step 20
Click the drop-down list labeled "Looping Options" and select "Forever" to generate an animated logo that never stops spinning.
Step 21
Click "Save" and then "Save" on the "Save Optimized As" dialog box. To view the animation, open the GIF file you created with your Web browser.
Video of the Day