Pinterest Stumbleupon Whatsapp
Ads by Google

photoshop cs5 tutorialsAs a tech blogger, I am often asked to write about software and application walkthroughs. Screenshots are the way we take to illustrate what the specific web app, software, or a step-by-step guide is supposed to do. I have often found this to be a bit inconvenient when it comes to emphasize things like tabbed software, an action that changes in stages, or anything else that would be served better with a step-by-step illustrated example.

A screencast is one way to artfully describe a tutorial. Using an animated GIF could be a simpler option if you don’t want to climb the learning curve of a screencast tool. Let’s check out how we can use Photoshop (I am using version CS5) to create a quick GIF animation. I am no graphics guru, but the simple steps are easy to follow and can help to enhance our work as bloggers.

Also Download: Our Idiot’s Guide To Photoshop Part 1 & Part 2

Example of an Animated GIF:

Let’s take the example of the Firefox Options window to show how we can use animated GIFs to show all the tabs that have their own individual settings.

The Fast and Simple Way To Create An Animated GIF

1. An animated GIF is a series of images that plays in succession. We need to take screenshots of all the images we want to use for the sequence of the animation.

2. Take the screenshots and place the images that you want to use for the animated GIF in a folder. You can optimize the individual images at this stage.

Ads by Google

3. In Photoshop CS5, create a new image that is a fit for the raw images you have in the folder. Here we are using an image size of 397px x 400px.

photoshop cs5 tutorials

4. Drag all the images you had saved in the folder into the new document in Photoshop. When you drop the images into the new document, the first image displays an overlaid cross. Now, click the Commit Transform checkmark on the top-right or press Enter to position the images as separate layers. Keep clicking till all the images are loaded and visible in the Layers panel.

cs5 tutorial photoshop

5. You can rearrange the layers according to the sequence of the animation.

cs5 tutorial photoshop

6. Go to Window – Animation, to open the Animation palette.

cs5 tutorial photoshop

7. From the Animation palette menu (the downward arrow on the top-right of the palette), click Make Frames from Layers. You can also click Reverse Frames if needed. The layered file is placed on the Animation palette which each layer changing into an individual frame for the animation.

adobe photoshop cs5 tutorials

8. Click the small icon in the bottom-right corner to change the view of the palette from Timeline view to Frame (Convert to Frame Animation) view. Select all the frames in the animation palette.

adobe photoshop cs5 tutorials

9. In the next step, we set the time delay for each frame according to the animation we want to produce. Click the drop down button just below each frame. Custom delays can be set up in the menu which pops up. Each frame can be set individually with specific time delays. If all frames are selected, all frames can be set to the same time. You can also use the pop-up (marked Forever) to set the animation loops. Forever can be used if you want it to loop indefinitely or any specific amount from the pop-up.

adobe photoshop cs5 tutorials

10. The animation is ready to be saved as a GIF file. Go to File – Save As (alternatively, Save for Web & Devices). The complete animation looks like this:

photoshop cs5 tutorials

More advanced Photoshop animation techniques can involve tweening but the basic principles of animation remain the same. The method described here is short and sweet and could come handy for bloggers without advanced animation skills.

  1. Billy
    May 19, 2015 at 3:38 pm

    Does anybody use this website anymore? Seems like the last time anybody was on this website was back in 2012

  2. Billy
    May 11, 2015 at 3:21 pm

    Go away Asher! Go eat a porcupine

  3. Billy
    May 8, 2015 at 3:04 pm

    This article suks balls.. Big fat hairy bwalls

    • Asher
      May 11, 2015 at 3:20 pm

      okay that's good to know billy

  4. Tara
    June 20, 2012 at 2:08 pm

    Thank you, but do you have a tutorial on how to make gifs using a video, in photoshop cs5?

  5. Frédéric COIGNOT - Auteur Photographe
    April 26, 2012 at 11:29 pm

    Hello There. I found your blog the use of msn. That is an extremely smartly written article. I will be sure to bookmark it and return to read more of your helpful information. Thank you for the post. I will definitely comeback.

  6. Siya Mava
    February 20, 2012 at 4:54 am

    Hi, Saikat nice tutorial but I couldnt get it to work. followed every step except for 8, i cuoldnt see that icon. I am using PS 7.

    • Saikat Basu
      February 27, 2012 at 3:47 am

      Hi Siyanda,

      I don't exactly recall the interface in PS7 as it was quite some while ago. But you must be using Image Ready as in the older versions, Image Ready was used to prepare the animations. There is a 
      Make Frames from Layers command under the little flyout arrow. You can use that. The Image Ready help file I am sure contains a simple tutorial explaining the process. You can also Google for it.

  7. Mridul Godha
    February 16, 2012 at 11:39 am

    Mr. Saikat, I wish to receive makeuseof newsletters on my e-mail containing only the posts of the category 'Makeuseof Lists'. Can you tell me how to do this? Thanks a lot.

    • James Bruce
      February 17, 2012 at 10:06 am

      Thats not possible I'm afraid. 

Leave a Reply

Your email address will not be published. Required fields are marked *