How to make a gif

Notable: Gifs are easily share-able, perfect for advertising or creating buttons on a blog

Point: I teamed up with Handmade Harbour to show how to make pretty and versatile Gifs. If you're here from Handmade Harbour or Totally Tutorials feel free to stick around or subscribe, I post DIY projects weekly. Today will be the technical version. Later this week, Part II and Part III will cover a method that doesn't require too much technical skill, so be sure to tune in then.

1. a image or digital stamp
2. Photoshop

To create the effect similar to the "Be Bright" gif:
1. Open image into photoshop
2. Left click the original layer and select the option duplicate layer
3. Copy and paste font from a different image or add text using photoshop's text option
4. Select the paint brush tool and change its opacity to around 40%
5. Paint the section where you what the color of the image to start lightly
6. Duplicate the layer
7. Continue to paint a small section of the image and duplicate the last layer so the overall color grows each time

To create the animation:
1. Click the box in the far left corner that sets what type of project Photoshop is orientated for to motion
2. A bar at the bottom of the screen should appear
3. Click the triangle in the middle of the bar and make sure it is set to create frame animation
4. Click make frame animation and make as many frames as you have image layers
5. Select the first frame then go to the layers section and make sure you can only see the first layer or the layer the animation will start with
6. Select the second frame and the view option for the second layer, the third frame and view the third layer until you have gone through all the frames and layers
7. At the bottom of the animation bar there are options to change the animation to loop forever, one time, and three times, change this option to your preference
8. At the bottom of each frame there is a window to adjust how long each frame plays
9. There is also a play button try clicking it to see how your animation will play
10. To save a version for the web click file>save for the web
11. This will open up a window where you can adjust the size and color of your animation. Adjusting these options will change the size of your gif file, but if your using a digital stamp you really don't need to worry about this since they start out as really small files.
12. When you are done click save and you have made a gif.

Here is a good video on the animation process if you need extra help:

This is my first time doing a more technical DIY. So, if I have left anything out or if you any questions do not hesitate to comment below and ask them.

Note: If you came here from totally tutorials or handmade harbor, I'm happy to have you here. If you enjoyed this post please subscribe. I create DIYs almost every week, most are less technical than this one. Part II and Part III of this DIY will be posted later this week.


  1. Gifs are so fun to make but Ive never seen a more beautiful or creative gif than that cat in the window image. So beautiful! I love it!

    1. Going to share this on twitter. Are you on Twitter?

  2. Thank you! and yes I just got one the other day... you can find me @ARTPOLITICSLife

  3. What if you do not have Photoshop? Can you do this with a another program? I only have Picasa.

  4. I just upgraded to photoshop, so I feel your pain. You can also use gimp (a free software similar to photoshop) or get the free month trial of photoshop. Thanks for reading!

  5. Very cool!! Will definitely try this one!!


Comments are always appreciated. Be sure to subscribe if you found this post interesting.