Blinkies 1--Using the Template

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 your blinky template.  In top menu, click Image > Duplicate.  Close the original.

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

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

4.  In layer palette, click on the first dot layer (above the background layer).  Hold the Shift Key down, and with the magic wand, click on a blank area on that layer.

5.  In top menu, click Select > Invert.  Now the dots on that layer should be selected.

6.  In the top menu, click Edit > Fill.  Flood-fill these dots with color 1.

7.  In the Layer Palette, right-click on this layer and choose Duplicate.

8.  In top menu, click Edit > Fill, and Fill with dot color 2.

9.  Drag this layer up to the very top.

10.  Right-click on this top layer and choose Duplicate.

11.  In top menu, click Edit > Fill and Fill with dot color 3.

12.  Now in Layer Palette, click on the 3rd layer from BOTTOM to highlight it.

13.  With magic wand click somewhere in the blank space in the middle. 

14.  In the top menu, click select > Invert.

15.  In the top menu, click Edit > Fill.  Fill this with dot color 2.

16.  In Layer Palette, right-click on this layer and choose duplicate.

17.  In Layer Palette, drag this layer up to between the 1st and 2nd layer.

18.  In the top menu, click Edit > Fill. Fill this with dot color 3.

19.  In the Layer Palette, right-click on this layer and choose duplicate.

20.  Drag this layer up to the TOP.

21.  In the top menu, click Edit > Fill.  Fill this with dot color 1.

22.  In the Layer Palette, now click on the fourth layer from BOTTOM.

23.  With the magic wand click in the blank space in the middle.   In the top menu, click Select > Invert.

24.  In the top menu, click Edit > Fill.  Now fill this with dot color 3.

25.  In the Layer Palette, right-click on this layer and choose Duplicate.

26.  Drag this layer up BETWEEN layers 2 and 3.

27.  In the top menu, click Edit > Fill.  Fill this layer with dot color 1.

28.  In the Layer Palette, right-click on this layer and choose Duplicate.

29.  Drag this layer up to the top.

30.  In top menu, click Edit > Fill.  Now fill this with dot color 2.  Your layers should look like below.

31.  Now click on the eyes of EVERY layer BELOW Layer 3.  This hides those layers.

32.  In top menu, click Layer > Merge Visible

33.  Now click on the eye of the top layer to hide that merged layer.  Then click on the next three layers to UNHIDE them.

34.  In top menu, click Layer > Merge Visible.

35.  Now click on the eye of that merged layer to hide it.  Then click on the next three layers to UNHIDE them.

36.  In top menu, click Layer > Merge Visible.

37.  In Layer Palette, click on all eyes to unhide the layers.  Now click on the bottom layer to highlight it.

38.  (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.

39.  In top menu, click Select > All.

40.  In top menu, click Edit > Copy.

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

42.  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.

43.  Add some text to your blinky, by choosing the text tool and a font size that is appropriate for the blinky. 

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

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

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

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

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

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

50.  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.

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

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

53.  Choose Paste After Selection

54.  Repeat this so that you have 3 frames.

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

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

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

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

 

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


Email

Tutorial Index

Home

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