As always, every photoshopper will have a different way of doing
things. this is the type of route i take, so anyone who thinks my way
sucks..thinks too much.
So without further ramblings.. Enjoy my tutorial on the Animation of Giffy the
WunderDog!
Step one:
you need the dog on a layer by himself. To select this bitch, I use the
Pen Tool, which has been conveniently circled in this photo.
It's acurate and can save hoardes of time in instances.
After you have put your points in thier specific places, ( for example,
anywhere there is a change in curvature, direction of curvature, or a curve
turns into a straight section) make sure to connect that back to the first
node. This is important for the next step..Here's what mine looked
like after getting those points selected on poochie and her shadow. This
outline is called a Path:
Now still using the Pen Tool, get in between 2 points you have
already created, and a little (+) will show up. If you click that line,
another node will appear. When it does, this will be the node you use to
create the curves. Hold down CTRL and click on that node and move it
around.. Long handles will appear. once you stop moving it, you can grab
those handle to alter the curve of the line even more as shown with arrows
in the following:
Once you have finished putting the curves into the path line, (which takes
a bit of getting used to - but will forever come in handy) you will need to
turn these paths into a selection. To do this.. CTRL and click the path, it
should show all the nodes you have put on it. If you have more than one
path (which i have in this one) while holding down CTRL also hold down
SHIFT and select the second path. Both will now have thier nodes showing.
to change it to a selection, let go of the CTRL and SHIFT buttons and
select the Path paletteon the left of the screen. There you will see
the teensy version of the paths you have selected.. Simply hold down CTRL
again, and click on the path shown in the palette and the "marching
ants will appear around poochie... Exactly where you placed them. Just
like this:
At this point you need to Copy and Paste poochie to her own layer. Simply
Control C, then Control V to do this. Now poochie must be taken off the
bottom layer. So, firstly..Make sure you select the bottom layer
again..not poochies layer(asterisk)!! and using the Clone Tool,
get rid of poochie. (if you have never used this Clone Tool before(circled)
- select the tool and then hold down ALT and click an area of the drawing
you want to use to replace poochie. Then start to cover up doggiemuffin:
With poochie gone, now get rid of those sport faggots. Using the same
method used on poochie...Clone out the dudes..maybe try using the area
circled in this:
Once done, make sure poochies layer is turned on (click the
'eye') and you should have this:
Now using the Lasso Tool(arrow) select the shadow of poochie. Make
sure you are on poochies layer for this..or you wont get the shadow, then
just before, CTRL C and CTRL V to put poochies shadow on it's own
layer:
Nows a good time to make sure you name your layers.. Just double click
'Layer 1'in the Layers Palette and rename it relative to
what it is. With this one, label it 'Shadow' and put it below the
dog. (click and drag it down) After that, select poochies layer and hit
CTRL T and then slightly rotate the pooch so that it looks like its anus in
square to the ground and hit enter:
Then using the Eraser Tool erase poochies rear legs:
Now..using the Lasso Tool select the poochies front leg, make sure
your on Poochies layer, then CTRL C and CTRL V it onto a new layer:
after that, Name it near front leg, then do the same for the far leg(you
may have to fudge it a little) and then make sure you name that one far
front leg) then place it under the dog layer in your palette. Then go back
to the dog layer and erase his front legs, as he doesnt need them anymore
on his layer:
now CTRL T the near leg layer, and rotate it slightly to its position (as
if the dog were in mid stride) and hit enter. Repeat this step with the far
leg layer as well...except obviously going in the other direction:
Now you have to duplicate these same two layers (near and far legs)and
rename them so you know which one is which. then CTRL T each layer
seperately and reverse rotate the leg as if in mid stride the opposite way.
You will have to move the legs a teensy bit after rotation so they look
like they are attached to poochies body again:
now click on the 'dog' layer and put a chain link in the boxes
that are related to poochie. As shown in the photo with an arrow. you do
not need one on the background layer. Then you can move him around and all
layers will stay with him:
now your ready for ImageReady.. Photoshop's animation sub-program..so
click the button shown here:
once it opens... your drawing will automatically open itself. Make sure you
have the 'Animation' window open.. If it's not... go to
'Window>Animation' and it should appear below your photo, with
frame 1 already there. Then while on the dog layer, move the pooch off the
visable screen area, just push the bitch right out:
then using the button circled, create a second frame:
now for the animation of it...create a bunch of frames, in each frame you
will have to move poochie (making sure they are all still chained
together!!) select frame 2, and with the SHIFT button held down(keeps
poochie in her horizontal plane) push the right arrow key 5 times... this
will advance poochie into the frame. In this frame, make sure you have the
copies of the near and far legs turned off, and in the 3rd frame swap them.
turn off the ones that are on, and turn on the ones that are off, as shown
here:
continue doing this until poochie completely disappears on the far side of
the screen making sure to hold shift each time you move poochie, otherwise
she'll move all over the place with no straight line:
now you have to alter the timing...real easy.. look at the arrow here, and
select the last frame.. on this frame, click where it shows 5 sec
and make it 5 seconds(or longer if you want... this only prevents the gif
from reloading on a constant loop and gives it an "end of gif"
feel to it)...for the others, you can highlight all the frames by clicking
on the first frame, and the using the slider go to the second last frame
and holding down SHIFT select it. All frames will highlight and then click
the area on one of the frames that says ".2 or .3 sec" and make
it a slight delay...2 is usually perfect...sometimes .1 is best though. Hit
ok and all layers will change:
The animation is complete. Now for saving the file...
click the 2-up panel(shown circled). It will then show the picture
twice. The one on the left will show the original photoshop file and the
size of the file... The one on the right will show the file if it were
saved as a GIF(arrow):
Should this file size be too big, there are a couple ways to reduce that
number, however, both hinder the quality of the file, so be slight about
it....Firstly, go to the top bar and select the dropdown box
'Image>Image Size'. A box will show,... change the
'percent' to say 90% and hit OK. The 2-uppanel will
refresh itself with a new filesize for the GIF. if it's still a tad
too big, you could try reducing the number of colours in the GIF, by going
to the right side of the screen and in the 'Optimize' window
panel, change the number of colors from 200 or 256(which it may be) to a
smaller number say, 150. Then hit enter, the 2-up again will refresh
itself with a new filesize:
Tinker with these until it's under the b0g standard of 200kb. It can
be a pain sometimes....and if you are REALLY high over the limit, try
erasing a few frames...(which can be very dangerous!!) - always wise to be
very careful in frame numbers to avoid massive filesize.
Hopefully this is somewhat helpful to anyone who would like to try using
photoshop to create some animated Gifs.
If anything isnt clear, or you want more info, ask, an ye shall receiveth.
posted by tikklemynuts on Sunday 21st May 2006, 22:35:35
in my experience with photoshop....yea totally.. I personally have
much better control with it. Not only that... but once yo uget used to
using the Pen tool and fudging around with the nodes and the node
handles... you can be so precise!
ahh yes....after you have selected the pen tool..at the
top of the screen, left side, you'll see the pen
tool icon, beside that is a square box icon with nodes
on each corner, and then besdie that is a square box
icon with a pen tool in it - Click on the icon with
the pen tool in it! that will solve the problem!!
yup, some are tried and true lasso'ers... and others like making
a paint mask, or magic wanding it.. I use the pen only because over
the years i have become used to it, and love the precision i can
attain..
Many thanks, dude, for taking the time to explain all of this, much
appreciated. Your knowledge of Photoshop is fuckin astounding! Made me
realise how little I know about it! haha. :o)
even still, you have been posting Gifs before... even if they are only
2 frames... you have the idea right, and they manage to get the point
across perfectly!
I would more say that flash is more a bit of my program, but
flash doesnt support so much (aprox nothing) bitmap-editing etc..
Anyhow, vector is always the nicest ;)
vector is great for small files.. if only Illustrator had a
ImageReady type program in it, that would be sweet. I use
flash every so often, used to be quite proficient with it,
but in the last 3 years i have barely touched it.
23 EASY steps to .GIFism (DIAL UP BEWARE!!!)
