HOME | DD

Description
So you have Photoshop CS3 and want to make an animated avatar? I've been dishing them out like crazy and I can tell you that the process can become a bit technical. But fear not! My step by step instructions will insure your survival throughout your endeavor. My numbered screenshots corespond to each of the steps' numbers. Refer to the snapshots if you're in a bind.

Step 1: Make the File

First off, you should make a new file (obviously.) The dimensions should be 50 pixels X 50 pixels (the avatar size for deviantART.) Be sure that the size is pixels, lest you make a 4foot 2inch avatar! The resolution should be 72 pixels/inch, but you really need not worry about that. The color mode is "RGB color" and the box beside it should be 8 bit (although it really could be higher, it's the setting I use all of the time.) Finally, the background content should be transparent.

Step 2: Zoom In

Personally, when I zoom in and out in CS3, I use the mousewheel while holding down the alt key (hold alt first.) The good zoom setting is around 1000% for this avatar. To get any exact resolution when making any photoshop piece, you can type directly in the zoom percentage box. You can also zoom with the slider in the navigation bar.

Step 3: Color the Shape

Before you make any shapes, you should first ascertain the color you want (although you can change it later.) Click on the foreground color box. Since the first shape is the border, I chose a dull color blue. The hexadecimal value for the particular color is 89B0CE.

Step 4: Shape Me Away!

Now you can construct the shape. I chose the rounded rectangle as a base shape because it's not just a plain rectangle and you can have a transparent background that gives it a nice effect in the end. The first thing you do when making a shape span the entirety of the workspace is match the crosshair (the little "plus thing" as the cursor that makes the shape) to the top left of the transparent square (a), click and hold, then drag (b) to the bottom right of the square (c). You should end up with a shape that fills the span of the 50 X 50 area. (d)

Step 5: Replicate the Shape

Next, right click the space where the shape's name is in the layers menu and click "Duplicate Layer..."

Step 6: Names, Names

You could create a name for it like "Slime" or "Animated" or even "Shoes" if you really want. But whatever you want to call it, type it in (or leave it the way it was before) and hit OK.

Step 7: Color It

Now the center part that will be animated is made. Time to make this one a pretty color too. Double click the box by the shape in the layers menu. I thought a nice acid green would look nice so I chose hex value D8FF00.

Step 8: Sizing It Down
This next part can get a bit technical, so a good eye is key. We're going to transform the green part. You can do this one of two ways. The first way is to go to Edit>Free Transform path. I just use (Ctrl + T). It's easier and faster. Now that you have the shape selected (a), hold Shift down, or click the chain link in between the width and height, and drag the bottom right corner up to the top left a little bit (b). Holding shift when transforming an object or clicking the chain link locks its proportions and lets you transform without them being inproportionate (unless you personally want them to be. What you do want is to have the back color (blue in this case) to be two times the size of the border you want to have. The height and width percentage is normally 75%.

Step 9: Center It

This is a hard part if your Photoshop CS3 doesn't automatically snap shapes. Drag your transformed shape to the center. It should snap into place. If not, just drag it to the visual center to the best of your ability.

Step 10: Resatirize the Border

Making the border a border gets somewhat unconventional, so I'll be sure to give you the best method. Now, I want you to right click the space with the name of the border. Hit "Convert to Smart Object" (a) then do "Resatirize Layer" (b). This converts the shape into a regular layer. You won't be able to adjust the shape like a conventional shape, so this action becomes final when you edit other parts of the avatar. You could undo everything you'd do to it to change the color, but I'll show you how to change the color of the new layer later.

Step 11: Border Bound

The reason I wanted you to Resatirize the border is because you are going to subtract the inner space of the border so that the bevel will behave correctly on it when the time comes. Now, hold Ctrl and click on the green shape's image in the layers screen. The green shape should be selected in the workspace (a). Then, while the border shape is selected, press delete. You should see a little invisibility in the space between green and blue. That's okay. We're going to fix that!

Step 12: Fixing Leaks

Duplicate the green layer this time and bring it to the lowest point in the layers menu (a). Click on the "fx" icon on the bottom row and go to "Color Overlay..." (b). Next, click on the color swatch in the Color Overlay's menu and change it to black (c). Finally, go to "Stroke" and change it to 2px black (d). The "leak" is fixed. The transparency no longer shows (e).

Step 13: Bevel, My Bevel

Select the border again, click on the fx icon, and choose "Bevel and Emboss..." (a). Drag the whole menu so that you can see most of the bevel on the image (b). Now change the angle and altitude of the shading. Both are generally towards the center top left when I make objects. This particular scenario is angle 135, altitude 69 (c).This makes the lighting show up on top of the object. Please note that angle and altitude of lighting effects all layers that have the "Use Global Light" option checked. When lighting is changed and this is checked, all layers copy those settings as well. Now click on the Gloss Contour box below the angle/shading group (d). You should see a new pop-up menu with a small grid. Move the line on the grid to the lower right and watch the shading's contrast deepen (e). I chose Input: 77% and Output: 46%. The final change would be to turn the softness to 2. This makes the border more plastic-like instead of it shimmering so much (f).

Step 14: Border's Shadow

Let's shape the vat of green inside. Select the top green shape and go to its "Inner Shadow..." menu (a). Long story short: Opacity - 71%, Distance - 2px, Choke - 7px, Size - 5px. This makes the drop shadow for the border (b).

Step 15: It's Contourlicious

Now it's slime time. One of the most basic examples would be the "water spread" effect. But for this tutorial, it will look more like morphing goo. In the same menu, select Bevel and Emboss (a). From there, select "Contour" in the drop down from Bevel and Emboss on the left (b). Now click on the actual contour and make the bottom left point go to the top left and create a point with input and output both 20%, a point with input and output at 50%, and a point with input at 80% and output at 20% (c). Finally make the range 100% (d).

Step 16: It's Bevelicious

You can see how it animates if you go to the Bevel and Emboss section and drag the size bar slowly from left to right (a). Pretty cool huh? But it still needs a bit more work to be truely eye catching. In order for it to look more gooey and less plastic-like, the contour of the gloss needs to be changed. So before you go to Gloss Contour, change the size to 18%. At size 18%, you can see how light shines on the Bevel more clearly. I've changed the gloss to have three new points. Point1: Input and Output is 15%. Point2: Input - 45%, Output - 56%, Point3: Input - 78%, Output - 73% (b). Now in the Bevel and Emboss menu, put the Highlight opacity 100% and the Shadow opacity 46% (c). Now slide the size to the left and right again. It looks like putty doesn't it? But wait, there's more! For a better looking form, change the Shadow Mode to "Linear Light." This makes the color slightly better (d).

Step 17: Goo Gradient

It still looks like putty rather than goo, so let's go to the Gradient Overlay (a). Click on the gradient itself. A menu comes up with the gradient's pattern (b). Select the top right notch and make its opacity 0% and click on the notch below and make its color black (c). Now click OK and select the Reverse checkbox along with making the Opacity 38%. Make the scale 91% and you're done with the gradient (d). You can go back to Bevel and Emboss to change the size and see the difference.

Step 18: Chunky Slime and Me

Before the animation goes, we should make it a bit less smooth and more... chunky. First go to the Texture menu under Bevel and Emboss (a). Your starting texture might be different than mine, but the end product will be the same. Go to the texture's drop down menu and select the little circle with a rightward pointing arrow. Now select "Texture Fill" from the patterns (b). The pop-up will ask you if you want to replace the patterns. Hit OK. When I use the textures menu, I append all of the textures together. This makes finding and selecting a desired texture easier. But for the tutorial's sake, I've chosen OK to replace. To make the course rougher, I chose "Clouds" as my texture (c). You can instantly see the bumpiness. But if you want to see how other textures affect it, be my guest. To make the bumps subtle, I made the scale 87% and depth -6% (d). After that, hit Snap to Origin. It makes my copy and yours the same (for consistancy) and makes the texture snap into its top left most position as its starting point. You won't see much now, but play with the size slider again and see the difference!

Step 19: Yay! Animation!

After you're done marveling at the motions of slime, you can finally animate! Before you do anything, make the zoom go to 100%. This will make your avatar the proper avatar size. Go to Window>Animation and you'll see the animation menu (a). Now go to the Bevel and Emboss menu for the slime again. You'll need to re-position the styles menu to see the avatar and the animation menu (b). Now change the size to 57px (c). Notice how both the avatar and animation cell changed? That is because you are editing in that animation cell. To make things smoother from here on, change the seconds from 0.0 to 0.1.

Step 20: Frame by Frame

Copy the first animation cell by clicking the small paper icon (a). Now go to the slime's Bevel and Emboss menu again. Make the size 50px now (b). See how only frame 2 changed? This is good. Press the play button and see the bulge from frame 1 and 2. Congratulations, you've made your first animation. Now continue by making more copies until 12 frames exist. Now here are the specifications for size on each frame: 1 - 57px, 2 - 50px, 3 - 42px, 4 - 36px, 5 - 29px, 6 - 26px, 7 - 21px, 8 - 15px, 9 - 11px, 10 - 8px, 11 - 5px, 12 - 0px (c). So that might have been a lot of work, but now press play. It moves now!

Step 21: Looping Back

Now duplicate frame 11 and send the copy to the end (right most point.) Then do the same for 10, 9, 8, etc. all the way down to 2. Don't copy 1. The result should make the animation mirror itself. You should now have 22 frames.

Step 22: Fixing it

It looks kind of wierd now doesn't it? We should probably take out some frames. Select frames 10-13. Now click on the trash can symbol (a). The frames are now gone and the animation is slightly shorter than before at only 18 frames (b). To round everything off, go to the first frame and change its timing to 2.0 seconds (c). Too long, but not the choice you want? Go to the same menu, only this time select "other..." Now you have a pop-up for the frame delay. Make it 1.5 seconds.

When creating something other than this avitar, be sure to play out the animation often and fix even the slightest abnormality in the way it moves.

Step 23: Change It

There are two things you can change now without having to do extensive work. You can change the border color and the slime color. To change the slime, select the slime's shape color (because it's still a shape, right?) I want it to be a magenta. I chose hex code FF0084 (a). When you confirm your choice... they all change colors (b). Neat huh? Getting the border a different color isn't all that hard to do either. Just select the brush tool and select a hard brush like size 38. Now select the foreground color swatch and choose a color. I chose hex code 6F2501. It's a light red (c). Select the blue border and click on the checkerboard button. This will make it so that the transparency isn't lost on painting the border (d). Now paint it (e). The finished product will be a light red border (f). Now that you have this knowledge, feel free to make color changes as you please.

Step 24: Conversion

I'd suggest saving the PSD file before saving the avatar. After you do that, go to File>Save for Web & Devices... (a). You should get a screen with your avatar on the left and a bunch of colors on the right. The first thing to do is change the matte to 9AAD9C (b). This is the deviantART background color. Now look at the bottom left of the interface that says GIF and has a number with a K under it and more information under that. The number with a K is the amount of data the file that will be created will consume. The deviantART website requires all avatars to be 15K or less. But this one is 21.46K (yours might be bigger or smaller.) So how do we reduce the size to less than 15? There are a number of choices actually. You could change the property that says "Lossy" to a higher percentage. Doing so will cause the image to become more noisy or grainy. This particular avatar would have to be at 22 (c). You could also reduce the color count. All GIF's have a maximum color capacity of 256 colors. Reducing colors reduces size, but the effect is a bit less desirable. it has a sort of cartoon color effect which looks less professional than lossy. At No Dithering, only 83 colors can be used (d). It would look even worse if the goo and border were more separate colors. There is another option with "Web Snap" which snaps certain colors to the internet's defaults. But the effect is worse still (e). The image would have to be an 85% web snap. So what do you do? Combine all of the options for the best effect possible. Fine tune each setting until you think it looks good. My personal settings are Lossy - 9, colors - 113, Web snap - 0% with a total save space of 14.56K(f).

Step 25: Save and enjoy!

Now you can save your avatar. But before saving, make sure that the Looping Options are on "Forever." Otherwise, you'll only have the animation once per load or another value that limits the avatar's animation.

Also, please check out my Styles filter Tutorial for information on Styles Filters with avitars using Photoshop.

Description
So you have Photoshop CS3 and want to make an animated avatar? I've been dishing them out like crazy and I can tell you that the process can become a bit technical. But fear not! My step by step instructions will insure your survival throughout your endeavor. My numbered screenshots corespond to each of the steps' numbers. Refer to the snapshots if you're in a bind.

Step 1: Make the File

First off, you should make a new file (obviously.) The dimensions should be 50 pixels X 50 pixels (the avatar size for deviantART.) Be sure that the size is pixels, lest you make a 4foot 2inch avatar! The resolution should be 72 pixels/inch, but you really need not worry about that. The color mode is "RGB color" and the box beside it should be 8 bit (although it really could be higher, it's the setting I use all of the time.) Finally, the background content should be transparent.

Step 2: Zoom In

Personally, when I zoom in and out in CS3, I use the mousewheel while holding down the alt key (hold alt first.) The good zoom setting is around 1000% for this avatar. To get any exact resolution when making any photoshop piece, you can type directly in the zoom percentage box. You can also zoom with the slider in the navigation bar.

Step 3: Color the Shape

Before you make any shapes, you should first ascertain the color you want (although you can change it later.) Click on the foreground color box. Since the first shape is the border, I chose a dull color blue. The hexadecimal value for the particular color is 89B0CE.

Step 4: Shape Me Away!

Now you can construct the shape. I chose the rounded rectangle as a base shape because it's not just a plain rectangle and you can have a transparent background that gives it a nice effect in the end. The first thing you do when making a shape span the entirety of the workspace is match the crosshair (the little "plus thing" as the cursor that makes the shape) to the top left of the transparent square (a), click and hold, then drag (b) to the bottom right of the square (c). You should end up with a shape that fills the span of the 50 X 50 area. (d)

Step 5: Replicate the Shape

Next, right click the space where the shape's name is in the layers menu and click "Duplicate Layer..."

Step 6: Names, Names

You could create a name for it like "Slime" or "Animated" or even "Shoes" if you really want. But whatever you want to call it, type it in (or leave it the way it was before) and hit OK.

Step 7: Color It

Now the center part that will be animated is made. Time to make this one a pretty color too. Double click the box by the shape in the layers menu. I thought a nice acid green would look nice so I chose hex value D8FF00.

Step 8: Sizing It Down
This next part can get a bit technical, so a good eye is key. We're going to transform the green part. You can do this one of two ways. The first way is to go to Edit>Free Transform path. I just use (Ctrl + T). It's easier and faster. Now that you have the shape selected (a), hold Shift down, or click the chain link in between the width and height, and drag the bottom right corner up to the top left a little bit (b). Holding shift when transforming an object or clicking the chain link locks its proportions and lets you transform without them being inproportionate (unless you personally want them to be. What you do want is to have the back color (blue in this case) to be two times the size of the border you want to have. The height and width percentage is normally 75%.

Step 9: Center It

This is a hard part if your Photoshop CS3 doesn't automatically snap shapes. Drag your transformed shape to the center. It should snap into place. If not, just drag it to the visual center to the best of your ability.

Step 10: Resatirize the Border

Making the border a border gets somewhat unconventional, so I'll be sure to give you the best method. Now, I want you to right click the space with the name of the border. Hit "Convert to Smart Object" (a) then do "Resatirize Layer" (b). This converts the shape into a regular layer. You won't be able to adjust the shape like a conventional shape, so this action becomes final when you edit other parts of the avatar. You could undo everything you'd do to it to change the color, but I'll show you how to change the color of the new layer later.

Step 11: Border Bound

The reason I wanted you to Resatirize the border is because you are going to subtract the inner space of the border so that the bevel will behave correctly on it when the time comes. Now, hold Ctrl and click on the green shape's image in the layers screen. The green shape should be selected in the workspace (a). Then, while the border shape is selected, press delete. You should see a little invisibility in the space between green and blue. That's okay. We're going to fix that!

Step 12: Fixing Leaks

Duplicate the green layer this time and bring it to the lowest point in the layers menu (a). Click on the "fx" icon on the bottom row and go to "Color Overlay..." (b). Next, click on the color swatch in the Color Overlay's menu and change it to black (c). Finally, go to "Stroke" and change it to 2px black (d). The "leak" is fixed. The transparency no longer shows (e).

Step 13: Bevel, My Bevel

Select the border again, click on the fx icon, and choose "Bevel and Emboss..." (a). Drag the whole menu so that you can see most of the bevel on the image (b). Now change the angle and altitude of the shading. Both are generally towards the center top left when I make objects. This particular scenario is angle 135, altitude 69 (c).This makes the lighting show up on top of the object. Please note that angle and altitude of lighting effects all layers that have the "Use Global Light" option checked. When lighting is changed and this is checked, all layers copy those settings as well. Now click on the Gloss Contour box below the angle/shading group (d). You should see a new pop-up menu with a small grid. Move the line on the grid to the lower right and watch the shading's contrast deepen (e). I chose Input: 77% and Output: 46%. The final change would be to turn the softness to 2. This makes the border more plastic-like instead of it shimmering so much (f).

Step 14: Border's Shadow

Let's shape the vat of green inside. Select the top green shape and go to its "Inner Shadow..." menu (a). Long story short: Opacity - 71%, Distance - 2px, Choke - 7px, Size - 5px. This makes the drop shadow for the border (b).

Step 15: It's Contourlicious

Now it's slime time. One of the most basic examples would be the "water spread" effect. But for this tutorial, it will look more like morphing goo. In the same menu, select Bevel and Emboss (a). From there, select "Contour" in the drop down from Bevel and Emboss on the left (b). Now click on the actual contour and make the bottom left point go to the top left and create a point with input and output both 20%, a point with input and output at 50%, and a point with input at 80% and output at 20% (c). Finally make the range 100% (d).

Step 16: It's Bevelicious

You can see how it animates if you go to the Bevel and Emboss section and drag the size bar slowly from left to right (a). Pretty cool huh? But it still needs a bit more work to be truely eye catching. In order for it to look more gooey and less plastic-like, the contour of the gloss needs to be changed. So before you go to Gloss Contour, change the size to 18%. At size 18%, you can see how light shines on the Bevel more clearly. I've changed the gloss to have three new points. Point1: Input and Output is 15%. Point2: Input - 45%, Output - 56%, Point3: Input - 78%, Output - 73% (b). Now in the Bevel and Emboss menu, put the Highlight opacity 100% and the Shadow opacity 46% (c). Now slide the size to the left and right again. It looks like putty doesn't it? But wait, there's more! For a better looking form, change the Shadow Mode to "Linear Light." This makes the color slightly better (d).

Step 17: Goo Gradient

It still looks like putty rather than goo, so let's go to the Gradient Overlay (a). Click on the gradient itself. A menu comes up with the gradient's pattern (b). Select the top right notch and make its opacity 0% and click on the notch below and make its color black (c). Now click OK and select the Reverse checkbox along with making the Opacity 38%. Make the scale 91% and you're done with the gradient (d). You can go back to Bevel and Emboss to change the size and see the difference.

Step 18: Chunky Slime and Me

Before the animation goes, we should make it a bit less smooth and more... chunky. First go to the Texture menu under Bevel and Emboss (a). Your starting texture might be different than mine, but the end product will be the same. Go to the texture's drop down menu and select the little circle with a rightward pointing arrow. Now select "Texture Fill" from the patterns (b). The pop-up will ask you if you want to replace the patterns. Hit OK. When I use the textures menu, I append all of the textures together. This makes finding and selecting a desired texture easier. But for the tutorial's sake, I've chosen OK to replace. To make the course rougher, I chose "Clouds" as my texture (c). You can instantly see the bumpiness. But if you want to see how other textures affect it, be my guest. To make the bumps subtle, I made the scale 87% and depth -6% (d). After that, hit Snap to Origin. It makes my copy and yours the same (for consistancy) and makes the texture snap into its top left most position as its starting point. You won't see much now, but play with the size slider again and see the difference!

Step 19: Yay! Animation!

After you're done marveling at the motions of slime, you can finally animate! Before you do anything, make the zoom go to 100%. This will make your avatar the proper avatar size. Go to Window>Animation and you'll see the animation menu (a). Now go to the Bevel and Emboss menu for the slime again. You'll need to re-position the styles menu to see the avatar and the animation menu (b). Now change the size to 57px (c). Notice how both the avatar and animation cell changed? That is because you are editing in that animation cell. To make things smoother from here on, change the seconds from 0.0 to 0.1.

Step 20: Frame by Frame

Copy the first animation cell by clicking the small paper icon (a). Now go to the slime's Bevel and Emboss menu again. Make the size 50px now (b). See how only frame 2 changed? This is good. Press the play button and see the bulge from frame 1 and 2. Congratulations, you've made your first animation. Now continue by making more copies until 12 frames exist. Now here are the specifications for size on each frame: 1 - 57px, 2 - 50px, 3 - 42px, 4 - 36px, 5 - 29px, 6 - 26px, 7 - 21px, 8 - 15px, 9 - 11px, 10 - 8px, 11 - 5px, 12 - 0px (c). So that might have been a lot of work, but now press play. It moves now!

Step 21: Looping Back

Now duplicate frame 11 and send the copy to the end (right most point.) Then do the same for 10, 9, 8, etc. all the way down to 2. Don't copy 1. The result should make the animation mirror itself. You should now have 22 frames.

Step 22: Fixing it

It looks kind of wierd now doesn't it? We should probably take out some frames. Select frames 10-13. Now click on the trash can symbol (a). The frames are now gone and the animation is slightly shorter than before at only 18 frames (b). To round everything off, go to the first frame and change its timing to 2.0 seconds (c). Too long, but not the choice you want? Go to the same menu, only this time select "other..." Now you have a pop-up for the frame delay. Make it 1.5 seconds.

When creating something other than this avitar, be sure to play out the animation often and fix even the slightest abnormality in the way it moves.

Step 23: Change It

There are two things you can change now without having to do extensive work. You can change the border color and the slime color. To change the slime, select the slime's shape color (because it's still a shape, right?) I want it to be a magenta. I chose hex code FF0084 (a). When you confirm your choice... they all change colors (b). Neat huh? Getting the border a different color isn't all that hard to do either. Just select the brush tool and select a hard brush like size 38. Now select the foreground color swatch and choose a color. I chose hex code 6F2501. It's a light red (c). Select the blue border and click on the checkerboard button. This will make it so that the transparency isn't lost on painting the border (d). Now paint it (e). The finished product will be a light red border (f). Now that you have this knowledge, feel free to make color changes as you please.

Step 24: Conversion

I'd suggest saving the PSD file before saving the avatar. After you do that, go to File>Save for Web & Devices... (a). You should get a screen with your avatar on the left and a bunch of colors on the right. The first thing to do is change the matte to 9AAD9C (b). This is the deviantART background color. Now look at the bottom left of the interface that says GIF and has a number with a K under it and more information under that. The number with a K is the amount of data the file that will be created will consume. The deviantART website requires all avatars to be 15K or less. But this one is 21.46K (yours might be bigger or smaller.) So how do we reduce the size to less than 15? There are a number of choices actually. You could change the property that says "Lossy" to a higher percentage. Doing so will cause the image to become more noisy or grainy. This particular avatar would have to be at 22 (c). You could also reduce the color count. All GIF's have a maximum color capacity of 256 colors. Reducing colors reduces size, but the effect is a bit less desirable. it has a sort of cartoon color effect which looks less professional than lossy. At No Dithering, only 83 colors can be used (d). It would look even worse if the goo and border were more separate colors. There is another option with "Web Snap" which snaps certain colors to the internet's defaults. But the effect is worse still (e). The image would have to be an 85% web snap. So what do you do? Combine all of the options for the best effect possible. Fine tune each setting until you think it looks good. My personal settings are Lossy - 9, colors - 113, Web snap - 0% with a total save space of 14.56K(f).

Step 25: Save and enjoy!

Now you can save your avatar. But before saving, make sure that the Looping Options are on "Forever." Otherwise, you'll only have the animation once per load or another value that limits the avatar's animation.

Also, please check out my Styles filter Tutorial for information on Styles Filters with avitars using Photoshop.