?

Log in

Come Thirsty
Drink deeply
Blinkie Box Tutorial 
16th-Jul-2007 05:54 pm
Me; b static heart [TEXT]
Yay a blinkie box tutorial.

Programs Used:
Adobe Image Ready 7.0
Animation Shop 3.0


you will be learning to make this:




before you make that, you gotta make the first box.

Step one:

open up Image Ready.
Create a new document.
Size 15px by 15px
VIEW

Then you add desired color.
I used shade of blue, cause i'm just .... obsessed.

VIEW

I used a different layer for each color strip.
So I can recolor it later and get my exact results I want.

You can use the marque tool, located in the tool bar
on the left hand side, right next to the move tool and above the
lasso tool.

Holding down 'shift' while you click and drag new spots will add spots.
Holding down 'alt' while you click and drag will delete spots.

when you have your colors how ever you do it.
you need to add new layers.
and add 'the blinkie' space.
In tut 3 I have circled in white the layer tab on the right hand side.
find that tool on the animation frames.

VIEW

now you have added your white spots.
I started with the corner.
five pixels for each corner.
then i worked my way to the right(clockwise)
grabbing the last white pixel and using the marque tool
adding four more spaces, creating a new layer
and using the brush tool, filling in the selected.

on your first layer. put your first white.
on your second layer put you second white
and on your third layer put your third white.
next you need to set the animation.

VIEW

click the first animation box and hold shift, clicking the last one.
highlighting all of them.
then click 'forever' and it will bring up a box.
click 0.2
make sure when you save it.
that in the upper right hand corner
it says 'adaptive' under 'gif'
or it will make it a funky color and you don't want that.
Be sure to save it as a .gif, it will either be under 'save as' or 'save as optimized''.

giving you this:



now you have a box!!
now let's say you want a row of boxes.
read on.



Open up Animation Shop.

open your box.
create a new document.
400x20

with your new document open hit 'ctrl' and 'a' on the keyboard.
this will select all the frames.
do the same with your box.
make sure that you have the optimization on. (in white circle at top)

VIEW

next go to your box.
and hit 'ctrl' and 'c' (copy)on your keyboard.
go into your new document and hit 'ctrl' and 'e' (paste into selection)

position it. then add 6 more boxes.
crop it with the crop tool.
VIEW

when you save it in animation shop you have to be
careful. Hit 'shift' and 'z' on your keyboard bringing this up.

VIEW

hit next

VIEW

it will say seven colors.
click customize.
VIEW

change it to 255 colors.
VIEW

uncheck all the boxes
VIEW

make sure these settings are set. then click okay. and next until you get to finish.
now go and save your animation boxes.

end result:

then load them back into IR.

make sure your first frame is highlighted (aka clicked).
then making sure your thrid frame on the right hand panel
is clicked. bring up text.
use Ernest set at size 9.
indiviually write e.x.a.m.p.l.e.

VIEW

then go to the add a layer style.
and click stroke.
i used the outer part of the box for my stroke.
which is #1A4A8A
set it's size to 1.
then drag it over all of the letters.
position them in the middle.
change the optimize settings to 'adaptive' once again.
save.
VIEW

to get this:
Comments 
23rd-Mar-2009 12:41 am (UTC)
Hi i just wanted to say what a wonderful tutorial this is. I have been looking for a differnt way to make blinkie boxes.

I have credited you at Here

Thanks again.
24th-Sep-2011 02:39 am (UTC)
This is a great tutorial. I've got the box figured out BUT when I open it in Animation Shop all I get is 4 frames with the box color one frame with the first set of white dots. And I can't figure out what I did wrong.
24th-Sep-2011 02:42 am (UTC)
Did you create the other two layers to make it blink?
24th-Sep-2011 02:43 am (UTC)
Also if you did do the animation, you've got to make sure to save it as a .gif, not a jpeg/jpg or a png or it won't blink.
24th-Sep-2011 02:53 am (UTC)
I did. It blinks in Image Ready but the single box wouldn't blink in Animation.

I ended up having to make three seperate boxes for each stage of the blink to get it to work right in Animation Shop but at least it works. =0)
24th-Sep-2011 02:52 am (UTC)
I figured out at least one way to do it.

Thank you so much for letting me use your tutorials.
24th-Sep-2011 05:02 am (UTC)
Here you go. My first attempt at making something with the boxes.

Photobucket
24th-Sep-2011 05:19 am (UTC)
Very nice for a beginner, is there a reason why the image is moving?
24th-Sep-2011 01:47 pm (UTC)
I couldn't figure that out. I think maybe I have something not quite lined up right but I couldn't figure it out. I'm going to try again today to see if I can get it settled right.
This page was loaded Jul 26th 2017, 3:22 am GMT.