dude what? you're afraid to hug the bisexual guy? (jaen_lee) wrote,
dude what? you're afraid to hug the bisexual guy?
jaen_lee

  • Mood:

BLINKIE TUTORIAL NO.1


I will be showing you how to make this,



*Note: This tutorial will be image heavy and there will be alot of writing to read. PSD is included.

There have been many questions upon how to create "blinkies" and many tutorials out there but most seem vague and hard to follow. Creating blinkies are actually easier than they seem, it's just that they are TIME CONSUMING. The more complicated the style the more time is needed to put into it. Plus people who have learned how to create blinkies did not do it all in one day, so understand that for us to sit and google and ask and get rejected then finally learn how to make these it's alot of effort. So the idea of making a tutorial so that you can learn in one day is, iffy. But I know it's a pain finding a tutorial that makes sense, put in step by step, and well explained, is hard. So, I've decided to write up a what I hope is a good enough tutorial on how to "blink" text.

This tutorial is a pretty basic blinkie, I believe to learn how to create super fancy blinkies, first you gotta learn the basics.
We will be making a "color fill" type of blinkie 
This is done in Photoshop CS2 and ImageReady.
Basic knowlege of the progam is needed.
For you fancy CS3 users I believe you have an animation window instead of ImageReady so it will apply to CS3 also.


So here we go.

The first step into making a blinkie, create a new canvas about 300x100.
This might seem a little big, but it's a nice size to work with.
Choose a color in which you want the base text to be, in my case I used a gray(#A3A3A3)

*When creating blinkies you want to start out with pixel fonts, here I'm using the pixel font Handy00 by Cal Henderson. 
This font can be download at dafont.com (HERE)
When using pixel fonts make sure your settings are what the creator intend them to be,
here Handy00 is at 10pt, some pixel fonts can be at a size of 8pt. 
Your setting of the anti-aliasing is also important, for pixel fonts always have it at none.
This is to prevent any of the "fuzzy" outline you might see.



After the settings of the font, I typed in jaenlee. This will be your base text.
Now zoom into your canvas about 400%. This will make it easier to work with your blinkie.

 


Choose the color which you want your text to "turn" into. I chose a nice turquoise blue (#2199A4) 
Then begin to individually type in each letter, making one letter, one layer.
Place these single letter layer on top of your base text, so that is covers it completely.

  

Next I will be adding a nice effect of a little "dust" traveling and coloring in the text.
Simply make a new layer, name it DOT.
Then using my Pencil Tool ( simple press Shift+B and it should replace your brush tool)
The color of the "dot" will of course be the turqoise blue I used on the individual lettering.

Using my Pencil Tool I place the "dot" on the upper left hand corner of my text.
It doesn't matter where, but placing it at the upper right hand corner will give us the effect of a traveling dust.
Then, duplicate these layer and place the little "dots" in a way that it is traveling to your first letter.



Now, we're done with the font and it's time to animate our blinkie, zoom out back to 100%
Hide all of the layers except for your Background and you base text.



Note: I know in the layers picture I have the base text jaenlee highlighted, make sure it is your Background that is highlighted.
Go to File>>Edit In ImageReady or Shift+Ctrl+M
For CS3 simply open up your animation window.

Now this is the part where things get a little confusing.

To create your blinkie it is a frame by frame change.
For this I first duplicated my current frame in the animation box. 
Simply click on the paper next to the trash can ()
Go to your layers in ImageReady and show your first DOT, you should be able to see it in your canvas.



To make the "traveling dust" duplicate your frame again.
Go to the layers and click to show you second dot and hide you first dot.



Repeat this until you have gotten to your last dot, so for me by the seventh frame I should have the last dot hovering over my first letter J.



Now it's time to "color in" our base text.
Duplicate another frame and hide your last dot.
You can now show your first letter, for me of course it's the J.
Every letter you begin to show, should have separate frames, so duplicate a frame everytime you show a letter.
Unlike the traveling dust we won't be hiding any of the text layers.



Repeat this until you have all of the text layers shown or your base text is completely covered.
Depending on the length of your text is how many frames you will have. I in total have 14 frames.

Now, go back to your first frame.
Go to your layers and hide the Background, this will make the blinkie Background transparent.
Do this for all of your frames.



So now we will crop the blinkie. There is a cropping tool in ImageReady.
Go back to your second frame where you showed the first dot, this is so you won't crop out the dots.
Determine how long you want it and simply crop.



For the timing of the blinkie, it is all up to you.
Simply click on the double >> on the animation box>SELECT ALL FRAMES
Then click on the little down arrow under any of the your frames and set the timing.
If you're curious I setted mines to OTHER>0.15 seconds





Now it's time to save the blinkie. 
Note: Blinkies tend to be small in size so optimize setting should not have any lossy and colors to the max.
If your curious this is my setttings:



Finally save your blinkie
File>>Save Optimized As>>Save


AND WE'RE DONE.



First off, I hope you enjoyed the tutorial! This is as I said a prety simple tutorial, I have mastered most blinkie techniques. I will think about writing up another tutorial, remember this is a basic blinkie and I hope you got the idea of how these are made and that they aren't hard at all.

+PLEASE. Do not re-distribute this tutorial, it took a long time to write up and screencap.
If you want to, link back to my journal
+If you don't understand something, do not HESITATE to ask me. I will answer all your questons upon this.
+If you are curious about any style of blinkie comment and ask, if there is enough people asking, I will try to write up a tutorial

The PSD can be download here: http://www.box.net/shared/hltitv90vm 
*Note: The PSD is only for guidance! 

+Comments are nice...after all this work (; 
Tags: !tutorial:blinkies
Subscribe

  • Post a new comment

    Error

    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 18 comments