How to Make a Spinning Logo in Photoshop
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.
Open the image file of the logo. Use any file format, but if the file is a multilayered PSD, merge the layers.
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."
Type a name for the new file and click "OK" to add a blank image canvas.
Click the "Window" menu and then select the window containing the logo.
Press "Ctrl-A" to select the whole image and then "Ctrl-C" to copy it into the clipboard.
Click the "Window" menu and then select the window containing the blank canvas you created to hold the logo.
Press "Ctrl-V" to paste the logo into the blank canvas.
Press "Ctrl-E" to merge the pasted image into the background image leaving only one layer instead of two.
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.
Select the first layer from the listing starting at the top of Layers panel, click the "Edit" menu, "Transform" and then "Rotate 90º Clockwise."
Select the second layer in the listing, click the "Edit" menu, "Transform" and then "Rotate 180º."
Select the third layer in the listing, click the "Edit" menu, "Transform" and then "Rotate 90º Counter Clockwise." Save your work.
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.
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.
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.
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.
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.
Press the "Play" button to preview the animation.
Click "File" and then "Save for Web."
Click the drop-down list labeled "Looping Options" and select "Forever" to generate an animated logo that never stops spinning.
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.
Tips & Warnings
- Make the logo appear to spin smoothly by adding additional layers with smaller incremental changes between images.
- Information in this article applies to Photoshop CC 14.2.1. It may vary slightly or significantly with other versions of Photoshop.