Full Icon Tutorial for Photoshop 7 and ImageReady 7 - Part 2.

We're making this:



In the previous part of the tutorial, we made this PSD file:

Select the layer called 'Background Copy' , and make a rectangular selection:

Now go to Select>Feather...

Put '3' in the text box, and click OK:

Now the selection should have rounded edges. Delete this selection of the 'Background Copy' layer by hitting the delete key. There wont be any visible difference on the icon, but if you look in the layer palette, there will be a cut out on that layer:

 

Now we're going to tackle the animation. Now for this, I'm going to use the following bases:

Again, all of which were made sometime last year. Copy and paste each of these layers below the 'Background Copy' layer.

Position each new layer so that you can see Jack & Daniel through the cut out of the layer above:

Now, copy each of these three layers, so you've got two of each layer.

Now, on each of the copied layers, we want to do a motion blur. So in turn, select Layer 4 Copy, Layer 5 Copy, and Layer 6 Copy, and go to Motion blur. We want to make the blur about 45°, and somewhere around 35 for the distance:

Now the layer palette should look like this:

Right then, save the PSD file as abyssani.PSD. Now open ImageReady. Now, you need to have the Layer Palette, Animation, Optimize, and Preview windows open. My workspace looks like [THIS].

Now, your first frame is already there:

This is because all the layers are opaque, and that's what it looks like from the very top of the layers. What we need to do is hide each of the animation frames and click the little icon that looks like this:

So, we push that button, and then click the little eye next to 'Layer 6 Copy' in order to hide it. Then we push again, and hide 'Layer 6', and then push again... and so on, until you get down to 'Layer 4', and your animation is 6 frames long:

Now, without changing the time delay on each frame, the animation looks like this:

Which is far too fast! So we need to change the delay. We're going to set all the blurred frames to 0.1 second, and all the normal frames to 2.0 seconds. Now, in order do do that, you click on where it says '0 sec.' - a drop down menu will appear so you can choose the delay on each frame:

Now that's all done, you're almost there - all that's left is to optimize and save it!

Now, we need to save it as a GIF, in order to keep it animated. Play around with the settings under the 'Optimize' tab - on this icon, I went for 0 Lossy, Adaptive, 128 Colours, and No Dithering. But I must stress that different settings look good for different icons, so do have a play around with it.

Once you've got the preview looking somewhat alright, just go to File>Save Optimized As...

And there you have it, your finished icon!

To Make The Base>>>


Syndarys.net, Designed by Syndarys©2003-2008