I claim the copyright to this tutorial.  You are free to do whatever you please with what you make, but please do not take my tutorial.  Do not send the tutorial through email.  Only share my link.

This tutorial is intended for a beginner to learn about animation and making blinkies.  If you have any questions, please feel free to email me.

To do this tutorial you will also need Photoshop CS.  You may download a free trial at Adobe.

Remember to save as a .psd file often!

1.  Open a new, transparent image, size 300 x 150. 

NOTE:  you can make templates with different sizes, too.

2.  In top menu, click Layers > New > Layer.

3.  Choose the brush tool.  Click on the drop-down arrow next to the brush name in the tool options bar at the top.  Set the brush tip = 10 px, and hardness= 100%.

4.  Left-click and place dots evenly spaced apart all around your rectangle.  This tut is written to use 3 colors in the dots, so make sure you have a number of dots across and down that is a multiple of 3 (3, 6, 9, 12, etc.)

5.  In top menu, select Layer > Duplicate Layer

6.  Repeat Step 5 one more time so that you have 3 layers of these dots.  Then click on the bottom layer of dots.  This should be the 2nd from the bottom (Remember the bottom layer is a blank layer)

7.  Save this as a template:  File > Save As.  Filename:  BlinkyTemplate  File type:  .psd

8.  Choose the magic wand tool set to tolerance = 0 (set that in the top tool options menu).  Click on the first dot in the top left corner.  HOLD the SHIFT key down and then click on every 3rd dot after that, going around the box.  (That is, skip two dots, click on the 3rd, skip two dots, click on the 3rd, . . . )

9.  Set your foreground color to your first color choice.  In top menu, click Edit > Fill > Foreground.

10.  In the Layer Palette, click on the layer above that one (2nd one from top).  Change your foreground color to your Second Color Choice.  In top menu, click Edit > Fill > Foreground.

11.  In the Layer Palette, click on the top layer.  Change your foreground color to your third Color Choice.  In top menu, click Edit > Fill > Foreground.

12.  In top menu, click Select > Deselect

13.  In the Layer Palette, click on the 3rd layer down (again).  Select the magic wand.  Click on the second dot, and HOLD down the SHIFT key while selecting all the "second" dots (the dots after the ones we filled with Color 1)

14.  Change your foreground color to your Second Color Choice.  In top menu, click Edit > Fill> Foreground.

15.  In the Layer Palette, click on the second layer down.  Change your foreground color to your third Color Choice.  In top menu, click Edit > Fill > Foreground.

16.  In the Layer Palette, click on the top layer.  Change your foreground color to your first Color Choice.  In top menu, click Edit > Fill > Foreground.

17.  In top menu, click Select > Deselect

18.  In the Layer Palette, click on the 3rd layer down (again).  Select the magic wand.  Click on the second dot, and HOLD down the SHIFT key while selecting all the "third" dots (the dots after the ones we filled with Color 2)

19.  Change your foreground color to your third Color Choice.  In top menu, click Edit > Fill> Foreground.

20.  In the Layer Palette, click on the second layer down.  Change your foreground color to your first Color Choice.  In top menu, click Edit > Fill > Foreground.

21.  In the Layer Palette, click on the top layer.  Change your foreground color to your second Color Choice.  In top menu, click Edit > Fill > Foreground.

22.  Now check your work.  The colors in the first three dots of the top of the box should go like this in order:

Top layer:  Color 3, Color 1, Color 2

2nd layer down:  Color 2, Color 3, Color 1

3rd layer down:   Color 1, Color2, Color 3

4th layer down (bottom):  blank

23.  In Layer Palette, click on the bottom layer to highlight it.

24.  In top menu, click Edit > Fill.  Choose the color that you want to be your background color of your blinky.

25.  Add whatever Text  you want to this layer by clicking on the text tool, choose your font, size and color.

26.  (Optional)  If you want to add a picture to your blinky:  Open the image in photoshop.  In top menu, click Image > Size.  Make the pixel size no larger than 280 pixels.

27.  In top menu, click Select > All.

28  In top menu, click Edit > Copy.

29.  Now click on blinky image to select it.  In top menu, click Edit > Paste

30.  If you want to place the same image on the other side, right-click on the graphic layer and choose Duplicate.  With the mover tool, move those graphics into position.

31.  Click on the eyes of the top 3 layers to hide the dots.

32.  In top menu, click Layers > Merge Visible.

Right now your layers should look like this:

Top Layer:  Dots (as in Step 22)

2nd layer down:  Dots (as in Step 22)

3rd layer down:  Dots (as in Step 22)

4th layer down:  merged background/text/graphics layer

33.  In the tool menu, click on the bottom Icon:  Edit in ImageReady.  This will send your blinky image to Image Ready, the animation program.

34.  In IMAGE READY, click on the drop-down menu of the Palette (circled).  Choose Palette Options.

35.  Place a check next to Include Animation Frames.  And choose a thumbnail size.

36.  In top menu, click Window > Animation to show the animation window.

37.  In the animation frame window, click on the bottom of the frame image, so that the time box comes up.  Choose 0.1 seconds, and Forever.

38.  In the drop down-arrow of the frame box, choose Copy Frame.

39.  In the drop down arrow, choose Paste Frame.

40.  Choose Paste After Selection

41.  Repeat this so that you have 3 frames.

42.  Click on the first frame.  In the Layer Palette, click on the eyes of the top 2 layers to HIDE them.

43.  Click on the second frame.  In the Layer Palette, click on the top layer and the third layer to HIDE them.

44.  Click on the third frame.  In the Layer Palette, click on the 2nd and third layer to HIDE them.

45.  Click on the Play arrow to watch your animation.  Adjust your times if necessary.

46.  Now choose File > Save As Optimized.  And save.

 Please do not remove this tutorial from my site.  Share my url.