Making a Rotating Image in Photoshop CS4

Laura Gibbs over at Coursera Fantasy asked me how I modified a Walter Crane image to make it rotate, so I put together a step-by-step guide for anyone interested in creating GIFs.

Here it goes...

Step 1 – Creating and Sizing the Image

  

a) Open your initial image in Photoshop

b) Make sure you have the “Layers” window open. If not, Click on “Window” and “Layers”

c) duplicate your Background layer by dragging the layer to the Duplicate icon

d) The size of the image should be the same size you want to display in your website; you can check what the original size looks like by clicking on “View” and “Actual Pixels”

e) Change the size and weight of your image by clicking on “Image” and “Image Size”

f) Make sure your resolution is 72 pixels/inch

Step 2 – Transforming and Rotating

a) Select the Eliptical Marquee Tool on the side panel

b) Use the Marquee tool to select the area you plan on rotating

c) Save selection by clicking on “Select” and “Save Selection”

d) Name your saved selection

e) Copy and paste selection (control C and V on a PC, command C and V on a Mac); Now you will have three layers

f) Click on “Edit” and “Free Transform”

g) A new (Transform) tab will appear on the top. Change the angle as shown in the image (say, from 0 to 10 or 20)

h) Merge the two top layers by clicking “Layer” and “Merge Down”

 

i) In the Layers panel, click on the eye next to the top layer to hide it, then click on the original, bottom layer to work on it.

j) Repeat 1c

k) Repeat 2a and 2b

l) Load your saved selection by clicking “Select” and “Load Selection”

m) Repeat 2e and 2f

n) Repeat 2g, but multiply the last angle option you chose by 2 (for instance, if you first chose 20, now chose 40)

o) Repeat 2h

p) Repeat 2i, but note that now you should click on the eyes next to both top layers

q) Repeat 2j – 2p until you are just one repetition behind re-creating the original image. Your Photoshop workspace should look something like the image above.

Step 3 – Making an Animation

a) Click on “Window” and “Animation” and an animation panel will pop up

b) Make sure the “Animation (Frames)” tab is displayed

c) In the Layers panel, select every single layer by clicking on them while holding the Shift key (or by clicking on the Top then Bottom layer while holding the Shift key)

 

d) Click on the icon on the top right-hand corner of the Animation panel, then click “Make Frames From Layers”

e) In the Animation panel, select all frames (again using the Shift key) and click on the Black Arrow on any of them. Then choose exposure time for each frame (I tend to go with .2 seconds)

f) Click “File” and “Save for Web & Devices”  

g) Choose GIF on the top right-hand form and check “Forever” under the looping options. Then click Save.

You’re done! Now all you have to do is upload it to your web page.