Log in

No account? Create an account
06 September 2009 @ 10:33 pm
Animated Icon Tutorial  
this tutorial is for [info]birdgirl78 (forgive what will be my numerous typos as this is unedited) i'm going to do this in two parts: the basic animated gif which is a couple of pictures that flick past and then the 'movie-style' gif that looks like a scene from a movie. they're a bit different. You can find a list of useful keyboard short cuts here.

Your Basic Animated Gif

(we're going to make this ^)
Create your icon document in Photoshop. I'm using PS7 but as far as I understand, the models of photoshop are basically the same. If you can't find an option that I've listed, try the 'HELP' button on the main menu - it's pretty good at finding things for you. Right, your document should be 100x100px and be 300px/inch like so:

Quick Check: not all options are default so make sure you have everything that i've circled in yellow: it doesn't matter if you have more things (i often hide option i don't need) but the things in yellow are essential to making an animated gif.

1: Little grey box in the top left hand corner. if you don't have it, click somewhere on the blank canvas and then press, 'CTRL H' what does it do? it allows you to see the edges of the images you're resizing - really useful though i guess not absolutely essential... lol

2: Your quick button to open open Adobe Image Ready (and make your static document animated). If you don't have this, the short-cut to open the document automatically is: 'CTRL SHFT M' If that doesn't work, you can do it manually but you'll have to look it up in the 'Help' thing - and check that you have 'Adobe Image Ready'... lol. Please check this because if you don't have this program you can't make an animated image.

3. Layers... essential tha tyou see this option. if you don't have it visible, go to your top navigation bar - window - layers and it should appear.

4. Your little quick option extras. They should be there automatically. If they're not, let me know. Right, checks done - time to start. Before doing anything else, you need to create a 'new set'. To do this, go to the toolbar i circled as 'number 4' and hunt out this icon:

Click it - and it should look like this:

ignore your 'layer 1' - it can just sit there and keep to its self lol. if you feel the need to delete it - you may do so at a later date :D Right, time to hunt down some images! We're just going to use some that I made earlier but in the next tutorial you won't be so lucky... *sinister laugh* okay okay - go to my gallery and pick pictures: 6, 7 & 8 (open them to full resolution - right click save as) Back to photoshop. Open all three photos as separate documents and then copy ( 'CTSL A' then 'CTRL C' ) and paste ( 'CTRL V' ) into your icon document one at a time


Okay, now grab a hold of each one and drag it over the 'Set 1' as if you were copying documents between files. It should move itself into the set. (sometimes tricky) - a tip is to wait for the 'Set 1' to be highlight black like below

they won't look any different unless you click on the button i've circled in yellow. if you've done it correctly - all they images should vanish.

By putting all of our images in a set - we can edit them simultaneously. When your document looks like the second image above ^ (set 1 visible but images inside) hit ' CTRL T' to transform and re-size all the images at the same time.

Those grey lines are the outline of the image. grab hold of the corner and, holding down the SHIFT key, resize it. I usually zoom out before doing this so that I can see the whole document and then zoom back in when i've got the original image down to a manageable size. zooming does not affect the transform option. short cut for zooming: 'CTRL +' or 'CTRL -'

press ENTER to finish the re-size. if you're like me, you'll have a blank bit at the top of your image and an annoying logo in the corner. these are easy to get rid of... Use that button from above that hides and shows the layer set. make it so that you can see all the images in the set. like so: make sure you click on the top one so that it's highlight blue like shown below.

okay, now - create a new layer by 'ctrl N' and make sure it's sitting inside the set, above (what's my layer 4). from the toolbar, pick the paintbrush and set it's colour to BLACK. now colour out the gap and the logo like so -

okay, next bit is nit-picking and you can skip it if you want to... ((( IF YOU DON'T WANT TO DO THIS, SCROLL TO 'ANIMATE IT!' )) Remember that bottom bar i circled in yellow and labelled '4' - well, on that you'll see a circle that's half black and half white and when you hover over it it'll say something like, 'create a new fill or adjustment to layer'. click that. This hideous thing will pop up:

Pick 'CURVES' and then you get even more fun...

You can either play - or enter the values i have into the input and output boxes. when you're done, click 'OK' and you'll see a new layer has appeared in your layerset. make sure this one is ONTOP. Right - now here's the finicky bit you really don't have to do so i'll just skip through it quickly... create three new layers and colour them grey (any grey). sandwich them on top of each of the original images as shown. Then, one by one, set their layer style to 'COLOUR' - you'll notice your icon goes black and white. Once you've done that, hide all layers (by clicking on those weird 'eye' things) except the first two and the last two.

Make sure the grey layer (in my case, layer 6) is selected, then hunt down the ERASER tool. we're going to erase the grey layer from wherever the 'light' is on the icon - like shown below...

When you're done - go back to ther layers on the right side bar and make sure you've highlight the grey one you've just been erasing. now press, 'CTRL M' to MERGE THAT LAYER DOWN. You should now have have this:

Repeat process on remaing layers until you are left with this:

************************************* ANIMATING IT !

Now you're ready! SAVE IT IF YOU'RE PARANOID LOL Go to that 'Launch Adobe Image Ready' Button I circled earlier. Whatever you do, be patient and don't touch anything until it's finished. Photoshop is going to launch a whole new program and import all your files. when it's finished doing it's thing, you'll be in IMAGE READY and it'll look something like this:

Don't panic... let me run you through it.

1: is a preview of what your image will look like.

2: is the only button you really need to worry that. by hiding layers, you change the preview image. you'll see in a minute.

3: the duration each frame of you image stays up. default is 0.0 (useless, obviously - but we'll change that first)

4: is the button that creates new frames. and those are the only things you need to know about adobe image ready for the moment. Right, so, first things first - let's fix that time duration at 3

next, you need to check that you've got the right image showing on your preview. it should be this one: (i've zoomed in a little)

Right, time for your next frame. go to where i wrote that giant yellow '4' lol when you click that button, a new frame will appear identical to the first.

Now - you've got to hide that first layer by clicking the eye (easier just to look at the pic below)

And then repeat for the last frame. You will now have three frames. Check that your loop is set to 'FOREVER' (see picture below)

And you're almost done. This bit is CRUCIAL from the main menu at the top pick FILE - SAVE OPTIMISED AS

i saved mine as 'demoicon' lol - and here it is: hahaha omg lol - i probably should have made that speed a bit slower - like, 0.5 but you get the idea...

birdgirl78: dorkbirdgirl78 on September 6th, 2009 10:51 am (UTC)
OMG you are the most amazing friend EV-AR!!!!!!!!!
I've been meaning to check this out, but work is getting in the way (damnit!) Now, I have a definite incentive to finish reading all my student essays and doing lesson plans today!
I will show you anything I come up with.
PS--I'm using Photoshop Elements, so i hope it's the same, but if not, I think I can download Creative suite overnight. (I love having University access LOL)
*great BIG hugs*
ellymelly: oreally?ellymelly on September 6th, 2009 11:08 am (UTC)
LOL i've been meaning to do this walkthrough for ages and just never got around to it so you kind of prompted me to get off my arse and finish it :D

um - as far as i know, Elements is pretty similar to PS7 - the only thing you have to watch out for is that it has 'Adobe Image Ready' - if not, you'll have to download the suite. but don't worry, it took me YEARS to realise that i actually had that program. i accidentally hit 'CTRL SHFT M' one day and it opened and i was like "OMG I CAN MAKE ANIMATED GIFS!!!" promptly followed by... "i am such a dumbass..."
birdgirl78: dorkbirdgirl78 on September 7th, 2009 11:40 pm (UTC)
I'm so gutted that I *still* haven't gotten time to pull up my photoshop....I'm hoping for some time at the end of the week--currently I'm teaching my class and subbing for a friend, plus trying to get my prospectus in some sort of order for a Friday meeting.
I'm sooooo glad to see you on 394. We need to find some time we can chat there!
ellymelly: childrenellymelly on September 8th, 2009 12:07 am (UTC)
lol i know the feeling - i am SO behind on these websites it's just sad. but at least i'm signing off on one in about an hour and i can start to chip away at the enormously hideous buildup in my inbox LOL

394 is evil - it eats away at the hours in my day. seriously - especially that 'new photos' section. *sigh*

what do you teach?