TutsArena

Create Colorful Jumbo Avatars in Photoshop

by TutsArena - Tutorials

Avatars are useful on just about any website. They give you an identity apart from just your username. We’re going to show you how to create some cool and colorful oversized avatars in Photoshop that will make you stand out! The colors are also very easy to change, it’s almost too simple, really.

This Photoshop tutorial focuses on an under appreciated web element – avatars. An avatar is your online identity giving people thousands of miles away an idea of who you are. We’re going to show you how to take your avatar to the next level. These colorful avatars will make you stick out and they’re perfect for displaying your image with your name. Download the PSD at the end of this tutorial and use them however you’d like!

Final Product:

Step One: Creating the Bottom

Create a new Photoshop document, whatever size you’d like to use as it really doesn’t matter. We used a document size of 800×600 px just for the sake of this tutorial. Fill it with your choice of a color, although this tutorial works best on a light background.

The first step is to create our avatar’s basic shape. Select the Rounded Rectangle Tool (U) and create a selection with a similar size to the one below.  Fill the selection with #5262BB.

To make our shape an actual layer you need to click the Paths box and right click “Work Path” then select “Make Selection”. This will make a new selection based on the shape of your path and you’ll see the marching ants. Make sure to create a new layer for this shape (Layer > New > Layer)!

Apply these layer styles to the bottom shape of the avatar:

Step Two: Creating the Top

Now that we have the bottom shape layer ready to go, it’s time to create the top.  The top area is where you’ll put your picture.

Once you’ve created the top shape and filled it with #e9e1cf, go to Filter > Artistic > Underpainting and apply these settings:

• Brush size: 6
• Texture coverage: 16
• Texture: Canvas
• Scaling: 55%
• Relief: 2
• Light: Top
• Click OK

Apply these layer styles to the top shape:

If done correctly you should have something like:

Time to finish off the bottom of the avatar by adding some “sun rays” that will blend into the background.  First start off by creating some thin white lines.  Then go to Edit > Free Transform and while holding [shift], rotate each line one click (it snaps at 45°).  You can just do half then duplicate it and flip it horizontally.

Place your rays above the bottom shape and place them so it’s symmetric.  Go to Filters > Blur > Gaussian Blur and blur the rays to a 3.0 pixel radius.  Set the Blending Mode of the rays to Overlay and set the Opacity to 15%.

Step Three: Personalization

The rest is pretty easy, throw in a picture of yourself or a cartoon image and that part is finished.  I just used a random image I found on Google.  Adding the text requires some styling.  Let’s tackle that now.

For the “Big Text” apply these layer styles:

For the “Little Text” apply these styles:

Done!  Now, to change the colors simply use a different color for the bottom shape of the avatar.  Back in Step One, we used #5262BB just use a different color and the result will be different! (The PSD includes 4 colors; blue, green, red and purple)

What the heck is this?  Check out how we intended for this avatar to be used:

Thanks for reading!  Hope this is useful to you.

Check out these other tutorials we’ve written:

• Classy Glassy Navigation Buttons in Photoshop
• Design a Dark, Contrasted Layout in Photoshop
• Design a Clean and Colorful Portfolio in Photoshop
• Design a Dark, Contemporary Minifolio in Photoshop
• Awesome 3D Box Effect in Photoshop

(avatars.psd)