Tutorial - Make a Blog Blinkie!

You may have noticed my *ahem* cute blinkie on the right side of my blog. Yes. I did that. Yes. I'm proud of myself ;) And YES it was easy!! Do you want to make one? With Photoshop and a FREE animation program? If you do - you've come to the right place! I am so excited to share this with you!

1. Open Photoshop. You'll want to create a new document about 200px by 200px at 100dpi (or a size close to that). You do not want a HUGE image, right? Okay. So go to File>New then enter the values in the spaces. You can name your document "Blinkie" or "Blinkie1" or whatever, or just leave it as untitled and name it when you save it.

2. Here is where you get creative and decorate your document to look how you want it to look. For this example, I'll just do a simple background using a digital scrapbook paper. Remember, when you open a digital scrapbook paper, it will be sized at 12inX12in at 300 dpi. You'll want to resize (Image>Image Size)whatever papers and accents you'll be using to 100dpi and 200px X 200px. Otherwise you'll have a ginormous paper when you drag and drop it onto your document. Right? Okay. Drag your papers and elements onto your document and decorate like you might a digital scrapbook page. Remember to NOT save the changed to your papers and accents when you close them, or they'll stay at that small size.


3.Think about your blinkie and what part of it you actually want to have "blink". Leave that part off of the document for now. Think of it as those old flip books you used to make when you were young (or last week). You will need to create a few documents that, when animated, will look like they move. Does that make sense? For this example, I'm keeping it simple and Just adding words. So, save each frame as a different file. I saved each file as "blinkie1" "blinkie2" and so forth, until I have all of my frames saved - just save as a jpeg file.



4. This is the part where you will need some kind of animation software. I used a free program called "Movies" and it can be downloaded HERE. Just scroll down until you see where it says "Movies 13". Click on the title and a screen will pop up. Click "Save" then save the program to your computer. Once it's saved, go to where you saved it, and double click on it and install the program. You can choose to have the program open when it's done installing. Once it's installed, open the program and click where it says "Files" (where the arrow is pointing).5. You will see a menu where you can click on your saved images. Click on them in the order you want them to animate. like below:
6. Now, you can play with the settings on the program. If you look at the top, you'll see a little stopwatch icon. This controls the length of time each frame shows before the next one pops up. It controls the delay. Click once on the frame you want to control, then click on the stopwatch and enter in the delay number. Usually I find 100 to be a good number, but play around. Do this for each frame, then to view how it will look, click on the icon that looks like a piece of film, which ill animate your blinkie for you. This will help you see where you need to make adjustments in the timing.

7. When you are happy with your blinkie, then click on the little icon that looks like a floppy disc with GIF beside it. This will save your blinkie as an animated file! Choose where you want to save it and name your blinkie and click "Save". DONE AND DONE!

8. Now you can upload it to your favorite image hosting site (like photobucket) then treat it as you would a photo file.


I hope this tutorial made sense (sometimes my verbal skills are severely lacking). If you create a blinkie, I'd love a link so I can check it out!

ETA: If you aren't sure how to use digital papers and elements in photoshop, feel free to check out these past tutorials I've done on the subject:

Working with Digital Elements

Blog Header Tutorial

Digital Scrapbooking Tutorial