The Photo Extremist YouTube ChannelThe Photo Extremist Twitter Account

29Sep/094

How To Make A Photorealistic Pixelated Animated GIF in Photoshop

These animations are great for avatars and ID's for websites.

Ok, so here is how you make these things.

  1. Open up your image in photoshop.
  2. Resize the image (Image > Image Size) to something similar to the examples. Animated GIFs aren't supposed to be huge. I'd say no more than 500x500 pixels.
  3. Crop the image if necessary.
  4. Sharpen the image if you want to (Filter > Sharpen > Sharpen)
  5. Here is the fun part. In order to get the pixelated look, go up to Image > Mode > Indexed Color. Select Local (Adaptive) for the pallet. 3 for the Colors. Then set your Dither setting and the dither amount: DSC_3308
  6. Now, change the color back to RGB mode. Image > Mode > RGB Color
  7. If you want to make the image have a transparent background,  erase the background to be completely white. Then  Select the Magic Wand Tool, set the Tolerance to 0, and untick Anti-Aliasing and Contagious. Click on the background and hit the DELETE key.
  8. If you want the dissolving animation look, go up to Window > Animation. Duplicate your frame by clicking the little page icon on the bottom right of the Animation window.
  9. Select the FIRST FRAME, make it invisible by unticking the little eye icon by the layer in the Layers window.
  10. Now select just the SECOND FRAME, and make sure the eye icon is activated.
  11. Now, select both frames by holding down the CTRL key while clicking on both of them. They should both be highlighted.
  12. Next, click the Tween button Twine on the bottom of the animation window.
  13. Depending on how long you want the dissolve effect to last, a short number amount of frames (like 10) will dissolve the image quickly. A larger number (like 30) will make the dissolving effect last longer. Set the frame rate by selecting all the frames and then there is a button in the lower right.
  14. Select the second frame, then, while holding down the SHIFT key, select your last frame (this will select all your frames except the 1st one)
  15. In the layers window, set the blending mode to Dissolve.
  16. You're pretty much done! You can add other things as well, like multiple frames.
  17. To save the animation properly, click File > Save For Web... Make sure "GIF" is selected in the second drop down box in the top right.
  18. Save it.

original,pixel,both

Comments (4) Trackbacks (0)
  1. Very cool effect, Evan – nicely done! Animated gifs are always fun to play around with. I used to love making them in ImageReady, before Adobe merged it into Photoshop like it is now.

  2. Greatings, Interesting, I`ll quote it on my site later.
    Have a nice day
    Worker

  3. Hi, Everything dynamic and very positively! :)
    Worker

  4. Cool. Another neat thing to do with Photoshop. I have added a backlink to your site on my Animated GIF site.


Leave a comment


5 + = 8

Current month ye@r day *

No trackbacks yet.