Blinkie Tutorial
KStar Design.com provides both FREE blinkies and a FREE Tutorial. :) If you've always been curious about how to make blinkies, please read on!
Blinkie Tutorial #1: An easy, 2-image blinkieBlinkie Tutorial #2: A multi-image blinkie
If you found this tutorial helpful, please help others find us by linking to us.
Blinkie Tutorial #1 : An easy, 2-image blinkie
- Step #1: Open your graphics design program (Adobe Illustrator or Photoshop work well).
- Step #2: Create a rectangle for the base of your blinkie. 150 x 20 pixels is standard. Choose a colour (e.g. green).
- Step #3: If you would like your blinkie to have a
border, create an inner box of a different colour (e.g. white). 144 x
14 is a good size.
Alternatively, you can also make a box that is 146x16 and give it a 2
pixel border.
- Step #4: For the blinking "lights", choose either circles or rectangles, and evenly space them around your border.
- Step #5: To create the blinking effect, group together every 2nd "light" and then again with the opposing "lights". You should have 2 groups.
- Step #6: Choose colours for the two groups of "lights" (e.g. blue and white).
- Step #7: Choose what you'd like your blinkie to say (our example = "I (heart) Blinkies").
- Step #8: Save a copy of your (still) blinkie. * see below
iloveblinkies1.gif
Closeup #1 - Step #9: Switch the colours of the "lights" (e.g. blue becomes white and vice versa).
- Step #10: Save a copy of this (still) blinkie with a different file name.
iloveblinkies2.gif
Closeup #2 - Step #11: Open your animation program (e.g. Microsoft GIF Animator).
- Step #12: Insert the two blinkie files. Change the settings so that the animation repeats/loops forever.
- Step #13: Choose how fast/slow you would like your blinkie to be, in one-hundredths-of-a-second.
- Step #14: Save your animated blinkie.
blinkie_iloveblinkies.gif
Blinkie Tutorial #2 : A multi-image blinkie
- Step #1: Open your graphics design program (Adobe Illustrator or Photoshop work well).
- Step #2: Create a rectangle for the base of your blinkie. 150 x 20 pixels is standard. Choose a colour (e.g. green).
- Step #3: If you would like your blinkie to have a
border, create an inner box of a different colour (e.g. white). 144 x
14 is a good size.
Alternatively, you can also make a box that is 146x16 and give it a 2
pixel border.
- Step #4: For the blinking "lights", choose either circles or rectangles, and evenly space them around your border.
- Step #5: To create the blinking effect, group together every 2nd "light" and then again with the opposing "lights". You should have 2 groups.
- Step #6: Choose colours for the two groups of "lights" (e.g. blue and white).
- Step #7: Choose what you'd like your blinkie to say (our example = "I (heart) Blinkies").
- Step #8: Save a copy of your (still) blinkie. * see below
iloveblinkies1.gif
Closeup #1 - Step #9: Switch the colours of the "lights" (e.g. blue becomes white and vice versa).
- Step #10: Save a copy of this (still) blinkie with a different file name.
iloveblinkies2.gif
Closeup #2 - Step #11: Switch the colours of the "lights" and make
other changes (e.g. change the colour of the heart). Save a copy of this (still) blinkie with yet another
unique file name.
iloveblinkies3.gif
Closeup #3 - Step #12: Continue to create different blinkie
pieces, taking care to flip the colours of the "lights" each time. Each
blinkie piece should have it's own file name.
iloveblinkies4.gif
Closeup #4 - Step #13: Open your animation program (e.g. Microsoft GIF Animator).
- Step #14: Insert the blinkie files from the bottom: #4, #3, #4, #3, #4, #3, #2, #1, #2, #1, #2, #1. Change the settings so that the animation repeats/loops forever.
- Step #15: Choose how fast/slow you would like your blinkie to be, in one-hundredths-of-a-second.
- Step #16: Save your animated blinkie.
blinkie_iloveblinkies2.gif
Become a "Fan" of KStar on our new FaceBook page!
