How to Make Animated Blinkies

December 20th, 2004

This tutorial was given to me by my friend Maddy to use.

Firstly I’m Teaching how to make a blinkie using ‘Adobe Photoshop‘ and ‘Adobe Imageready‘ . You can also use other programs too if you don’t have these two.

Let’s start. Open Photoshop and got to ‘File‘ > ‘New‘ and in the Dimension asked Use ‘Width‘ as 100 and ‘Height‘ as 11.

Now Select the Pencil tool and choose the brush ‘Hard Round 1 Pixel

making blinkies

Now select the ‘Zoom Tool(Z)‘ and Zoom ‘Layer1′ to your own Convenience.

You can Draw something similar to the following picture using the Pencil tool on the layer (usually) named ‘layer1′ .

making blinkies

Now make another new layer and fill it with a lighter color than the border like the picture below. Always make sure that ‘Layer1‘ is always on top of the other layers.

making blinkies

Now we have to fill in the letters.Make a new layer, Take the same pencil tool , choose a different color and write down the letters on the new layer like this.

making blinkies

Now is the part that is important for Animating the Blinkie. We have to make new layers for each of the letters with a different color or any other effect that you’d like. Each letter should be in a new layer.

making blinkies

Now ‘Jump To Imageready (Ctrl+Shift+M)‘ , If you see the Animation window, then it’s all right if not, then go to ‘Window‘ > ‘Show Animation

Now to the Animating part. On the Animation Window, click on the ‘Animation‘ Tab. You’ll see a slide there with all the layers. Remove all the Layers that you don’t want on your first slide (i.e.., The eye should disappear on the layers window.)

Then on the ‘Animation Window’ Press the Button on the below image

making blinkies

A new layer is formed. Now add the layer of the individual letter that you made in ‘Photoshop‘ (The eye should appear on the layers Tab) Leave the other layers as it is. Now go on making new slides and adding and Removing layers as you like.When you are finished Press the ‘Play‘ Button and you can see your new blinkie.

It should look something like this

Hope this helped. This is only a simple Tutorial on how to make simple Blinkies. making blinkies

  • Share/Bookmark
divider

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

divider

11 Comments »

Molly on November 13th, 2006 at 7:47 am
  1. thank you SOOOOO much for this. i’m new to Photoshop and Imageready and this was sooo awesome! thanks

elsa on July 12th, 2007 at 6:32 pm
  1. hmm.. i dont quite understand this tutorial though..o.O everytime i click on a new layer for animations in Imageready, it simply duplicates the whole thing. and in the end every layer makes no difference. is it possible to help me ? thanks and i can see ur efforts in this tutorial :D

    thanks alot anyway !

Amber on November 14th, 2007 at 7:44 am
  1. :shock: :wink: ty was just what i needed… took me a min to figure out the Imageready but i got it thanx a bunch!!!

KimberlyRae on February 25th, 2008 at 12:23 am
  1. Hey! Thank you very much….that’s a start BUT what about these Blinkies I see that are transitional and with graphics or photos? Please, how do I do that?? THANKS

pabilipo on August 26th, 2008 at 7:24 pm
  1. wow.! thanks.! that really helped me.! :razz:

Dawn on September 16th, 2008 at 6:07 pm
  1. hey there! thanks so much for the tutorial, it’s really really useful and helpful for a beginner for a basic name blinkie. :D

meimei on January 12th, 2009 at 4:55 am
  1. Hi! Thanx a BUNCH! I’ve been looking through websites that i know of for tutorials of working in Adobe Imageready and i finally find a GOOD one in your website! <3 Thanx again!!

Yumingrace on May 16th, 2009 at 7:31 am
  1. Hi!!!
    THanks for the tutorial it really helps me how to make my own blinkies but how to make blinkies like this???

    Thanks!!!!

Ginger on May 20th, 2009 at 7:26 am
  1. Oh, this is so great! I always got suck at the part where you had to animate it, but now I know how. You can see it if you go on my website, then click the affie part, then link buttons. Thank you so much for this!

    ^____^
    Ginger

Ahmed on September 5th, 2009 at 12:07 am
  1. Hey, thank you so much for this tutorial, it helped me alot! :smile:

Sari on December 24th, 2009 at 12:05 pm
  1. Its so interesting. Have to try this. Nice and thank you.

RSS feed for comments on this post. TrackBack URL

Leave a comment

divider