FrankenFan's Photoshop Fundamentals — Avatar Tutorial

Collector Freaks Forum

Help Support Collector Freaks Forum:

This site may earn a commission from merchant affiliate links, including eBay, Amazon, and others.

FrankenFan

Abnormal Brain
Joined
Sep 3, 2005
Messages
823
Reaction score
1
Location
Sleeping in a jar
In this tutorial, we'll be building a basic animation featuring a simple pulse/glow effect.

We're going to learn to make these Iron Man avatars...

im_avatar.gif
imavataraltpl7.gif


...using this image:

imlo1.jpg


I chose this Iron Man image because it already contains some of the data readout text we added in the Iron Man sig tutorial, so it will nicely complement the sig, and be less work for us at the same time!

This tutorial is aimed at the beginning- to intermediate-level Photoshop user, and we'll be using the Pen and Rectangular Marquee tools, Layer Blending Modes, a Custom Brush, and the Animation palette to create our avatar.

I'm using Photoshop CS3, but I've tried to limit tools and commands retroactive to Photoshop 7. I'm also using a Mac, so Windows users should substitute all references to the Command Key (Mac) with the Control Key (PC), all references to the Option Key (Mac) to the Alt Key (Windows), and all references to the Delete Key (Mac) to the Backspace Key (Windows).

If I use a Command or Filter that is unavailable in your version of Photoshop, LMK and I'll try to suggest an alternative for you.

Note: If you're not using Photoshop CS3, you'll need to have a copy of ImageReady installed if you want to proceed with creating the animation beginning in Step 10. When Adobe acquired Macromedia, ImageReady got the boot in favor of the much more feature-rich Fireworks, and ImageReady's basic feature-set was added to Photoshop CS3's toolkit.

There are 17 steps in this lesson, so don't forget to save your work early and often!

Ready? Let's begin!
 
Last edited:
Step 1

Open the im.jpg image in Photoshop, and Zoom-in (Space Command Click) to Iron Man's helmet lens on the left side of the image (his right lens). I zoomed-in 700%.

Select the Pen tool from the Tools bar and set up the Options bar to look like this:

f01vq6.jpg


The Illustrator users among us will be very familiar with the Pen tool, but if you've never used it before, don't be intimidated by it. It's an essential tool and it's really easy to learn. In this lesson, you are going to create corner points, smooth curves, and convert a smooth curve to a corner point.

Click once with the Pen tool on the upper left corner (1) of the lens, and again on the lower left corner (2). You've just created two corner points.

Now click on the lower right corner (3) and drag out and up slightly to the right, to follow the curve of the bottom of the lens. Note: Do not release your mouse button! Click-hold-drag in one continuous motion!. You have now created a smooth curve.

Your Pen tool selection should look like this:

f02hd0.jpg


Next, release your mouse button, and hold down the Option key to convert the Pen tool to the Convert Point tool. Note: You should see the forward slash to the right of the Pen tool icon change to an inverted "V" pointing slightly to the left.

Now click on point 3 again to convert it from a smooth curve to a corner point.

Next, click on the upper right corner (4) of the lens.

Finally, click and drag up and to the left on point 1 to follow the upper curve of the lens and close the path.

See? Easy!

Your completed Pen tool selection should now look like this:

f03po5.jpg


From the main Photoshop Menu, go to Windows>Paths to open the Paths palette. Double-click the Work Path path layer and rename it Lens Path.

Save your PSD document and name it im_avatar.psd.
 
Last edited:
Step 2

Press Command Option 0 (zero) to view your image at actual size.

From the main Photoshop menu, go to Windows>Layers to open the Layers palette.

Press Command Shift N to open the New Layer dialog, name the layer Lens Glow, and press Enter to create a new layer above the background layer.

Next, select the Brush tool from the Tools palette and choose a 3-pixel brush with a Hardness of 100% from the Brushes palette.

f03agw7.jpg


Now click the Set Foreground Color swatch on the Tools palette and enter the RGB values 0 174 239. Click OK to exit the Color Picker.

With the Lens Glow Layer active, go to the Paths palette, and click on the Lens Path path to select it, then click on the Stroke path with brush icon on the bottom of the palette (second icon from the left).

Click in the empty space under the Lens Path path to deselect it.

f03bku2.jpg


Your im_avatar.psd file should look like this:

f04to9.jpg
 
Last edited:
Step 3

With the Lens Glow layer active, click the FX icon on the bottom of the Layers palette and select Outer Glow from the pop-up.

Enter the settings shown, below, and click on the color swatch and enter the RGB values 0 174 239 in the Color Picker.

f05mp8.jpg


Now change the Lens Glow layer's Blending Mode to Screen.

Your file and Layers palette should look like this:

f06lu7.jpg
 
Last edited:
Step 4

Next, with the Lens Glow layer active, press Command J to duplicate it. Name this new layer Lens Pulse.

Your file and Layers palette should now look like this:

f07lp7.jpg
 
Last edited:
Step 5

Press the letter D on your keyboard to set the foreground and background colors to their default black and white, then press X to change the foreground color to white.

Select Layer>New>Layer... from the main Photoshop menu to create a new, empty layer above the Lens Pulse layer. Name this layer Lens.

Return to the Paths palette, Click the Lens Path path to make it active, then click the Load path as a selection icon (third icon from the left) on the bottom of the Paths palette.

In the Layers palette, select the Lens layer, then press Option Delete on your keyboard to fill the selection with white. Alternately, from the main Photoshop menu, you can select Edit>Fill... to fill the selection.

Your file and palettes should look like this:

f08ak8.jpg
 
Last edited:
Step 6

We're now ready to reduce our image to the maximum 80 x 80-pixel dimensions the Draconian Darklord Dave has mandated for all avatars that dare to pass into his forbidden realm.

VERY IMPORTANT! If you want to create an avatar in which both lenses pulsate, go to File>Save As... in the main Photoshop menu and save a copy of your file in its current state under a new name, and repeat Steps 1-5 for Iron Man's other lens. I'm going to focus on one lens and crop the image.

Press Command Option I to open the Image Size dialog box and under Document Size change the measurements units pop-up to Percent and enter 75 for the the width and height. Click OK or press Enter to confirm your changes.

Press M to select the Rectangular Marquee tool, and enter the following settings in the Options bar:

f09ag5.jpg


Click anywhere in the image to create the selection, and move it into place like this:

f10ro1.jpg


From the main Photoshop menu, select Image>Crop.

Your file should now look like this:

f11jj8.jpg
 
Last edited:
Step 7

Next, double-click the Background to open the New Layer dialog and type IM in the name field. Click OK to convert the Background layer to a regular, editable layer.

With the new IM layer active, click the FX icon on the bottom of the Layers palette and choose Stroke... from the Blending Options... menu to open the Layer Styles dialog box. In the Size field, enter 1, from the Position pop-up, choose Inside, and for Fill Type: Color, click on the Color Swatch and enter 0 0 0 for the RGB values.

The cropped image is looking a little dark to me, and if you think so too, here's a quick trick to brighten a dark image: Select the Background layer and press Command J to duplicate the IM layer. Change its Blending Mode to Screen and adjust the Opacity of the layer to your liking. I reduced mine to 50%.

Your file and Layers palette should now look something like this:

f12zf2.jpg
 
Last edited:
Step 8

We're almost ready to create the individual frames we need to animate our avatar, but first, we're going to create a Custom Brush to add some additional flair to our animation, by adding... a flare!

Custom brushes are a great way to create and archive graphical elements that you can use over and over again in your images, without having to go through the motions of creating them each time from scratch. And, if you create your original image for your custom brush at a large size, you then have the option to reduce its size to make your brush even more versatile.

Download and open the flare_brush.jpg image, below:

flarebrushvm4.jpg


With the flare_brush.jpg file active, press Command A to select the entire canvas, then, from the main Photoshop menu, go to Edit>Define Brush Preset... and name the new brush Flare.

Your Options bar should now look like mine, below, and when you click on the Brush pop-up, your new Flare brush should be the last brush in the palette. Change the Master Diameter to 62 px.

f13hd4.jpg
 
Last edited:
Step 9

Next, create a new, empty layer above the Lens layer and name it Flare.

Check to see that your Foreground Color is still set to White, and click once on the the upper left corner of Iron Man's helmet lens with the Flare brush in the Flare layer.

Your file and layers palette should now look like this (I also added my board name by clicking on the Flare layer with the Type tool. I used a pale yellow color RGB 252 243 20 and set the Opacity to 40%.):

f14.jpg
 
Last edited:
Step 10

OK. Now for the fun part — we're ready to animate this thing and then get on with our lives!

If you're using Photoshop CS3, select Window>Animation from the main Photoshop menu to open the Animation palette. If you are using an older version of Photoshop, open your file in ImageReady.

Note: All images of palettes, etc., in steps 10-16 are from Photoshop CS3, but are very similar to what you will see if you are working in ImageReady.

Click the Eye (Layer Visibility) icon next to the Flare, Lens, Lens Pulse, and Lens Glow layers to to toggle visibility off.

Your image, Animation and Layers palettes should look something like this:

f15zb6.jpg
 
Last edited:
Step 11

Next, in the Animation palette, click the Duplicates selected frames icon on the bottom of the Animation palette (first icon to the left of the Trash icon on the bottom of the palette) to create a duplicate of the first frame.

In the Layers palette, click in the empty box next to the Lens and Lens Glow layers to toggle visibility back on.

Your image, Animation and Layers palettes should look like this:

f16ub7.jpg
 
Last edited:
Step 12

Next, return to the Animation palette, click the Duplicates selected frames icon again to create a duplicate of the second frame.

In the Layers palette, click in the empty box next to the Lens Pulse to toggle visibility back on.

Your image, Animation and Layers palettes should now look like this:

f17lp2.jpg
 
Last edited:
Step 13

In the Animation palette, click the Duplicates selected frames icon again to create a duplicate of the third frame.

In the Layers palette, click in the empty box next to the Flare to toggle visibility back on. All of your layers should now be visible.

Your image, Animation and Layers palettes should look like this:

f18df0.jpg
 
Last edited:
Step 14

In the Animation palette, click the Duplicates selected frames icon again to create a duplicate of the fourth frame.

In the Layers palette, click the Eye icon next to the Flare and Lens Pulse layers to turn them off.

Note: Frame 5 is a duplicate of frame 2. As an alternative to duplicating frame 4 to create frame 5, click on frame 2 to make it active, duplicate it, then click and drag it to the right of frame 4.

Your image, Animation and Layers palettes should look like this:

f19.jpg
 
Last edited:
Step 15

With Frame 5 still selected, hold down the Shift key and Click on Frame 1 to select all of the frames in the animation.

Now Click on the Down Arrow next to 0 sec. in any frame and choose 0.2 sec. from the Selects frame delay time pop-up. The delay time for all of your frames should now be 0.2 seconds.

Your Animation palette should look like this:

f20dm4.jpg
 
Last edited:
Step 16

Now let's fire this thing up and see what we've got!

Click on the Play button to preview the animation. The Animation palette should begin to cycle through the individual frames, and you should be able to observe the results in your Photoshop file.

Here's another look at the finished avatars:

im_avatar.gif
imavataraltpl7.gif


Experiment with different frame delay times and adding and deleting frames to see how it affects your animation. Be mindful of file size, however. The more frames you add, the larger your file becomes, and the longer it takes to download; You want people to easily see and enjoy your work, not be frustrated by lengthy download times. Try to keep your frame count to a minimum; You'll be surprised at what you can achieve with just a handful of frames. After all, it's an animated GIF, not a Pixar feature. We managed to create a fairly realistic pulse/glow effect with only five frames and brought the weight of the file in at under 13K.
 
Last edited:
Step 17

Finally, we need to save our finished animation for the Web.

If you are using Photoshop CS3:

From the main Photoshop menu, go to File>Save For Web & Devices..., and enter the following settings in the dialog box:

Note: You can preview your animation in your browser by clicking the Globe/? icon on the bottom of the dialog box, or preview it in the dialog, itself, by using the playback buttons under the color table.

f21xi9.jpg


If you are using ImageReady:

Your file and Options palette settings should look something like this:

f22dz0.jpg


From the main ImageReady menu, go to File>Save Optimized As... and name and save your file to your hard drive.
 
Last edited:
Well, that's all for this lesson; I hope you found this tutorial fun as well as informative!

Please let me know what you though of this session by posting your comments in this thread, and, if you come across any typos or other errors or keyboard/menu commands that don't work in Windows, LMK and I'll fix 'em ASAP!

Happy Photoshopping! :duff
 
Last edited:
Back
Top