Blinkie Making - Animation

Blinkie Making - Animation (done in Adobe Photoshop CS3)

............................................................................................................................................................................

Do you want to have these blinkies in your website? There are several software which are very excellent in making blinkies and other slideshows like the Adobe Flash but unfortunately i don't have yet any background in using Flash that's why i am really dying to learn it. Hopefully someday i can afford to have this software. Yet, i do not feel bad about it because at least i know how to make a very simple blinkie for my website using the Photoshop CS3. And I will share to you how i made my blinkies in Photoshop animation. So let's start..

1. Open a blanc document of 150 x 50 pixels with 72 in resolution. This is the usual size of the blinkies.

2. Add new layer and i will load pattern to be used as my background. Click the Add New Fill or Adjustment Layer button at the bottom of the Layer palette and choose pattern.

3. And i place ribbons up and down with my Text on top and the pattern fill at the bottom layer. These are the layers. So, Select these four layers, press CTRL key and click each layer. After you have selected the layers, click the small down arrow being encircled in the figure below and choose New Group from Layers. And this is how it looks:

4. I group these layers for easy identification and it must be group when we do the animation later. So, named this group as Group1.

5. I will going to use the same background and elements so i will just duplicate this group. And i named it as Group 2. This is looks of the this group. They are exactly the same, the only difference is the text. And my Group 2 look like this:

6. Minimize the layers within the group so in the layer palette will be like this:

7. It's time to make the animation. Go to Windows>Animation. It will look like this. Since we have two group, so we must add another animation frame. Click the Duplicate Selected Frame button, the one being encircled below.

8. After adding frame, back to Frame 1 select it and hide the Group 1. Click the visibility eye to hide it. It means that in the frame 1 only the Group 2 is selected.

9. Next, select the Frame 2, reveal the Group 1. This time hide the Group 2, meaning only Group 1 is selected in the Frame 2.

10. Set now the time of interval. Select again Frame 1. Click the Frame Delay time small down arrow and set choose 2.0 sec.

11. Now for the Frame 2, select it and do the same thing. Set also the time to 2.0 sec.

12. Lets try the animation. Click the Play button.

13. It will be like this now:

14. It looks okay now. Save it. Go to File>Save for Web & Devices. Set into this then click SAVE. This setting is located at the upper right of the screen.

15. Then set it to .gif file. Click OK. You can post it now anywhere in your webpage. Check out also the other blinkies i made with this kind of animation.

Now that you already read and leraned in this tutorial, enjoy now