Happiness is Chic: blinkie

Hello there,

I have been feeling pretty smug for the last couple of days and you will find the source of my self-congratulatory behavior to your right. As you can see, I taught myself how to make "blinkies" or animated pictures in Photoshop and the applications are endless in the blogging world. The blinkie on my right sidebar is my blog's badge. If you copy the code beneath it and paste it in an html widget in your blog's sidebar, your readers can click on it and it will link back to my blog. Cough, cough, hint, hint.

On the downside, this small accomplishment led me to delusions of grandeur. I decided that I was surely gifted coder as well, and my internet modem crashed after my first ever attempt to add my own line of code into my blog ㅠ_ㅠ

Blinkie Tutorial

It took me a long time to find a good tutorial online about making blinkies. I wasn't sure if I would need to transfer my pictures to Adobe Flash and was delighted that I could do it solely in Photoshop, which is much easier to navigate. This video tutorial on Howcast was a godsend. Because the Howcast tutorial wasn't exactly for blinkies, I'll explain my process below:

First, create the picture you would like to use in the background of your blinkie, leaving out the text or any other object that will be animated. Click the Layer-> Merge Visible and then create a duplicate layer of the background main picture.

Now you can add your final touches as new layers on top of the main picture and each sequential copy of the main picture. For example, I added the word "Happiness" to my first main picture layer, and "is" to the second, etc.

Now, go to Window->Animations create a new layer for each change in your picture that will occur. My picture has three animations, so I will use three layers.

Make sure the first frame is highlighted and then go to your layers window and hide (by clicking on the eye icon) each layer that you don't want visible at first. In my first frame, only the word "Happiness" is visible. Now, click on the second frame and follow the same steps.

Make sure to select forever in the Animation drop down menu and anywhere between one to five seconds per frame, depending on the effect you are going for. The picture used in this tutorial changes every second so you can read the sentence at a natural pace but my blog's badge is set for five seconds to add an element of surprise when it changes. Anything less than a second is overkill, you don't want to make the reader feel nauseated, like this Korean site often does to me.

When you are satisfied with your results, go to File ->Save for Web & Devices. There you can resize your picture or test how it will look in your favorite browser. Make sure it is saved as a .gif file.

This is an important step I had to learn the hard way. I upload all of the pictures for my blog on Picasaweb but unfortuantely they don't support .gif files, which you need for the animations. After doing some snooping around on Flickr and other photo sharing sites, I'm now a proud member of Photobucket. You can easily upload your animated .gif file like you would a regular JPEG.

The picture created in this post was greatly inspired by the Sing Your Life Tutorial at one of my favorite design blogs, Pugly Pixel. You can find a link to the background color palette and retro people Photoshop brushes there.

Keep your eyes peeled for freebie sidebar blinkies I will post soon. Thanks for reading and have a great day!

-Genevieve

Giveaway: Red Velvet Cupcake Blinkie

Photoshop Tutorial #2: Animated "Blinkie" Pictures

My Society6 Art

Find Me

Popular Posts

Flickr

Facebook

Labels

Flickr Images