A still edit you have already made (in this case I’m using a header).
Another image to animate on top (doodles, clip art, text - ideally png).
Photoshop (I’ll be using Photoshop 2021 and Elements 18).
Difficulty rating: ★☆☆☆☆
This is a tutorial for people who have never made a gif in their life and have no idea what to do. What I’m about to show you is as basic as it gets but it can lead you down a very creative path. We’ll be going from this:
To this:
The final result from both versions of Photoshop will be exactly the same.
Tutorial under the cut:
Photoshop
(Scroll down for Photoshop Elements.)
Open both your edit (I’ll be calling this my header)...
And the image you want to animate on top of your header. I have a helicopter!
Duplicate the image onto your header using either the Move Tool or by going to Layer > Duplicate Layer...
Go to Edit > Free Transform or use the relevant shortcut (CMD + T for Mac).
I chose to change the blending mode of the helicopter to Soft Light because I thought it looked nicer. Make position, colour and blending mode decisions now before you move on to the next step.
Once you’re happy with all of those things it’s time to create the basic animation frames! Duplicate the layer with your helicopter or whatever it is.
Edit > Free Transform again, only this time we’re only going to move the helicopter by a few pixels. I thought that a slight rotation would would best so I rotated the helicopter by 1°.
A slight difference between the helicopters is all you need.
Once you’re happy with that, duplicate the header layer and drag the copy up until it is in-between the two helicopters.
Click on your helicopter and go to Layer > Merge Down (CMD + E). Do this with both helicopters and you should be left with something like this:
Now let’s animate these frames! Go to Window > Timeline.
This should appear. Click on Create Frame Animation.
Now the Timeline box should look like this:
But wait! There’s only one frame! Go to the hamburger icon on the top right side of the timeline window and click on Make Frames From Layers.
Now we have two frames. Make sure they are set to loop Forever like in the screenshot below. The numbers underneath each frame are the Frame Delay and shows how fast your gif will move. 0 sec is very fast indeed, I prefer my gifs to move at a more leisurely pace.
0 sec speed:
1 sec speed:
To change the speed of your gif you can select both of the frames as if you were selecting layers and click on the v. This menu will appear. I usually try a few of these options first but if they don’t feel right I will try Other...
You can be very precise with this. Trial and error here are your friends!
I was happy with 0.4 so I am now I need to save my gif ready for posting. Go to File > Export > Save For Web (Legacy)...
This window will pop up. I just stick to the default settings as they seem to work well for me and I don’t understand what a lot of these things mean. I do like to click on Preview... at the bottom left just to see what the gif looks like in my browser before I finally click on Save... and name my gif.
And that’s it! A very basic animated gif.
Photoshop Elements
With Photoshop Elements, follow all of the steps above up until I open the Timeline window as Elements doesn’t have this feature.
Instead go to File > Save for Web...
This window will appear.
Make sure to check this box:
Set the Looping Options to Forever.
And set your Frame Delay to whatever you want. To check if your Frame Delay is working for your gif, click on the Preview... button at the bottom left of the window. This will open and play your gif in your default browser.
And when you’re happy, click on Save, name your gif, and you’re done! It looks exactly the same as the Photoshop version but this one was saved on Elements:
Other Examples
I made this gif using the same method as above, only this time I just moved the duplicated hearts upwards a few pixels.
This one uses a lot more frames. With each layer I moved the arm down and left by two or three pixels.
And this one is animated in a similar way. You can experiment with opacity to create fading effects like this.
Thank you for reading this tutorial! I hope you found it useful. Happy editing!
Grand Duchess Maria Nikolaevna of Russia (1899-1918), the third daughter of Tsar Nicholas II and Tsarina Alexandra Feodorovna of Russia.
It is said that one of the gentleman at the Imperial court remarked that the infant Maria “had the face of one of Botticelli’s angels."
Original black and white photograph coloured in Photoshop Elements.
I hate it though. I’m so tired and I hate the way everyone looks- Aary surprisingly turned out okay.
But if the description you come up with is good enough I might finish it
OR If you guys would prefer I can crop Feral out and add details and such to Aary instead.
But anyways I spent far to long on this and I have NO IDEA WHY because I groaned through the entire thing and for why?! The lineart is so thick, its choppy looking, the colors are lazy, the anatomy sucks- but you know what?! Im just happy I produced something T__T Maybe my artblock is leaning out of the way for a bit? Im actually being positive here believe it or not.
Anyways! Give me a short description of what YOU think is going on in this pick? Whats being said?