(adsbygoogle = window.adsbygoogle || []).push({});
Hi, today I'll be showing you how to make an avatar like +tA. Krunch's used to be.
Here is what we'll be creating:
You must login or register to view this content.
Step 1
To start off, create a new document of the dimensions 100px by 100px. Set your background color to #2f64a8, and then press Ctrl + Backspace (or Command+Delete on a Mac) to fill the “Background” layer with it.
You must login or register to view this content.
Step 2
Now we will add that nice gradient lighting effect that this icon uses. However, since we want to be able to reuse this effect for all of the other CS4 icons, we need a way to add this lighting effect “indestructively”. To do this, first create a new layer above the background layer, fill it with #808080, and set its blending mode to Overlay. As you can see, this didn’t change the background color at all, and that’s because the color is a perfect medium-gray.
To add the lighting effects, make sure that your new gray layer is selected, and go to Filter > Render > Lighting Effects. Enter these settings:
You must login or register to view this content.
And that will give you this:
You must login or register to view this content.
Step 3
That’s it for the background! Now on to the text. Take the Text Tool (T), click anywhere in the document, and type in a capital P and a lowercase s (or whatever you want). Set the font to Myriad Pro, the size to 72pt, and the color to #28201d. To center the text to the background, press Ctrl + A (Command+Delete on a Mac)to select everything, get the Move Tool (V), and press the “Align Vertical Centers” and “n Centers” width=”647″ heighAlign Horizontal Centers” in the menu:
You must login or register to view this content.
That should give you this:
You must login or register to view this content.
Step 4
For the final step, we will ad some subtle layer effects to the text. To do this, right-click on the text layer and click on Blending Options. Use these settings:
Inner Shadow
You must login or register to view this content.
Bevel and Emboss
You must login or register to view this content.
That’s it!
Here is our image:
You must login or register to view this content.
How to Create the Other Icons
Creating the rest of the CS4 icons is rather straight-forward. There are really only two steps the you need to take, and I have listed them below:
Step 1
Select your background layer, and set your foreground color to the color of the new icon. I am creating the Adobe Illustrator icon, so I will choose #ec8e24. Press Alt + Backspace to fill the background layer with that color. Here’s what I have:
You must login or register to view this content.
Step 2
Now we just need to change the text to fit the new program’s name. In my case, this is Ai. Just take the Text Tool (T), click on your text, delete the original text, and type in the new text. Then you are done! Here is the Illustrator icon:
You must login or register to view this content.
Now that you know how to recreate the icons, you can create any of them that you want, including custom ones. Below are the icons that I have created, each followed by the background color I used for that icon.
Adobe Flash CS4:
You must login or register to view this content.
Color Code: #c13636
Adobe DreamWeaver CS4:
You must login or register to view this content.
Color Code:#a9c244
Adobe After Effects CS4:
You must login or register to view this content.
Color Code:#939cb3
Adobe Premier Pro CS4:
You must login or register to view this content.
Color Code:#ad89b6
Adobe InDesign CS4:
You must login or register to view this content.
Color Code:#aa5378
Adobe Lightroom CS4:
You must login or register to view this content.
Color Code:#778894
Well that's all I got for now.
Thanks for reading this tutorial. If you liked this tutorial and/or it was helpful, please Thank, +Rep, and Nominate