Post: How to create a Adobe CS4 icon styled avatar
12-24-2009, 07:41 AM #1
moondog7
IWILL$IN
(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 Smile
(adsbygoogle = window.adsbygoogle || []).push({});

The following 7 users say thank you to moondog7 for this useful post:

Cuddler, Jomow, KilllerPanda, King LocoManiac, RiDiCuL0uSs, schaffinosx, TehLynch
12-31-2009, 10:43 PM #2
Cuddler
I<3you!
Very Easy and helpful Smile. +Repped and Thanked.
01-05-2010, 11:48 PM #3
KilllerPanda
Wanted Dead or Alive
I Did it , very easy and looks clean.
<------L O O K
01-05-2010, 11:55 PM #4
DBA
Pokemon Trainer
wow that sucks for him lol, nice tutorial though.
01-06-2010, 09:30 AM #5
you forgot adobe bridge :P
01-18-2010, 07:08 PM #6
VendettaX
Bounty hunter
Moondog, please can you give a tut on how to make ur dripping text? Smile
01-18-2010, 07:18 PM #7
xXDymationXx
Junior Ranger
Originally posted by VendettaX View Post
Moondog, please can you give a tut on how to make ur dripping text? Smile


Just a splatter brush.
01-18-2010, 07:38 PM #8
VendettaX
Bounty hunter
Please may you get me that brush ? - If its a download??
01-19-2010, 09:25 AM #9
moondog7
IWILL$IN
Originally posted by xXDymationXx View Post
Just a splatter brush.


It's not a brush, it's a plugin.

---------- Post added at 05:25 AM ---------- Previous post was at 05:24 AM ----------

Originally posted by VendettaX View Post
Please may you get me that brush ? - If its a download??


It isn't a brush.
01-19-2010, 04:41 PM #10
VendettaX
Bounty hunter
Ah, ok, still should make a tutorial its awesome Smile

Copyright © 2026, NextGenUpdate.
All Rights Reserved.

Gray NextGenUpdate Logo