Guide: Simple Stylish Avatar in Minutes

[Size=4]What you will need:

- Photoshop (Or gimp)
- An internet connection

Step 1 -

First off we need to create a new photoshop canvas. Click 'File > New' and input these settings:



Then click ok.

Press D to set the colours to default.

Step 2 -

Now we need to find a picture, I suggest using stock websites such as deviant art or www.sxc.hu... (registration is free).

Browse through until you find a picture that interests you. If found this picture of a chess pawn on www.sxc.hu...:

www.sxc.hu...

Open the full image, then copy it by right clicking on it and selecting copy image like so:




Step 3 -

Paste the image into your photoshop canvas using either Edit > Paste or Ctrl + V (It's a good idea to get used to keyboard shortcuts).

Resize the image using the tranform tool (ctrl T) until it fits into your canvas;



You should end up with something like this;




Step 4 -

Now we've got to make this image look even snazzier, sounds hard... but it can be quiet an easy task.
With this image we have a big white rectangle at the bottom, we want to get rid of that. Theres a few ways we can do that. For this example we will fill the background layer black.;



We need the bottom of our chosen picture to blend in with this, so grab the rectangular marque tool and select a small part of the bottom;



Now grab the gradient tool (if you don't see it in the tools panel click and hold the paint bucket and it will appear). In the top left click the dropdown box and set the gradient to go from black to transparent;



Create a new layer above the layer with our picture on. Then use the gradient tool to draw a line from the bottom of the selection box to the stop. Hold shift whilst doing this to make the line straight;





Now that the bottom blends in we want the top to do the same. So copy this gradient rectangle (by either duplicating the layer of just hitting Copy (ctrl + c) then Paste (Ctrl + V) then rotate it 180 degrees (use the tranform tool [ctrl + t] then holdshift and rotate the gradient) and then drag it to the top. If done correctly you should end up with this;



Already it's looking good enough for use, but we want to put more into it don't we?


Step 5 -

Time to add some text. Now text is in a whole league of it's own, and theres thousands of text effects out there to use. But don't be intimidated, you don't need to spend hours to make decent text, simple can be effective too. First off we need to consider what we want our message to be. This is a completely personal choice which makes everyones avatar different. I am going to put 'just another pawn' on mine (use bold 808080 grey veranda text);



Play with the text alignment. It's completely up to you how to position it, I've gone for the messy but stylish look. Now we're going to jazz up the text. This may get a little confusing butfollow the instructions and all should turn out well.

Ctrl + Click on the big T in the layers pallete then create a new layer;



In the bar at the top click 'Select > Modify > Contract' and set the value to 1. Then fill your selection with white;



Create a layer mask, then select the gradient tool. We want to go back to where we set the gradient to go from lack to transparent and change it back to defaul;



Then, drag the gradient tool from the top of the text to the bottom giving you this;



Repeat the exact same steps as above again but this time fill the selection with BLACK and drag the gradient from the bottom of the text to the top. If done correctly you should get this;



Now we will ad a stroke or an 'outline'. Select the original text layer in the layers pallette and click the little f at the bottom left. Then select out line and input the shown settings;



Almost done. Click the little f again and select 'drop shadow. Set the distance to 1 and the size to 5. leave the rest default. You should now have something looking like this:



Now you done. Sit back and admire your simple yet stylish design.


[Size=4]Additional effects:

Not satisfied with it yet? I don't blame you. Heres a few Dead Easy effects to spruce up your image:

Desaturation -

As wierd as it sounds, I find desaturating the original picture by about 50 makes is look good. Do this by selecting the layer with your image on and then hitting Ctrl + U. Drag the saturation bar left till it is at -50 and press ok.

Dark Bleed -

So you want your avatr to be a bit darker and subtle? Theres an real easy effect for this. Duplicate your images layer. Select the top of the two layers and go to Filter > Blur > Gaussin blur, set this to about 5 and press ok. Now in the layers pallette, in the drop down ox that says 'normal', change it to darken.

Additional blend in -

It's nice to have the sides blend in a little aswel. Create a new layer above everything and hit ctrl + A to select all. Go to Select > Modify > Border and set it to about 4. fill the selection with black. To make it look tidy drag your top gradient from earlier down a bit till it looks right.

Heres the final Product:



[edit on 7-1-2007 by CaptainLazy]

[Size=4]Afternote:

Don't be bound by the instructions in this guide. Go off and find some effects of you own, it's the best way to learn. For example, take the initiative, go to a site like good-tutorials.com... and find text to better suit you picture. If YOU don't think that desaturating the image looks good, don't do it.

If there is anything you don't understand (I'm not the best guide writer), just post it/PM me and I will amend the section in a reply. Your feedback will make the guide better.

PS- There will be some spelling mistakes in the guide that I just couldn't take out because of the character limit.

[edit on 7-1-2007 by CaptainLazy]

WATS Vote for you my friend. Great information and a great amount of effort went into it.

However, Deviant Art is a site that holds a lot of Copyrighted material. Taking their images and putting them up as our own is a violation. I would recommend you take on a Google search instead, I believe that is acceptable. Although I've been contacted in the past by the creator of an image, claiming I had taken their work. The image I had uncovered turned up in a Google search, so I was unaware at the time. I deleted the image and removed it from the boards. That was the end of it.

Taking it right from DA may cause some troubles if the artist comes across it.

Oh I see. Good point. I don't actually use Deviant myself. But they have a section which are solely royalty free stock images;

browse.deviantart.com...

Sorry if there was any confusion. I recommend Stock Exchange anyway because they will make you fill in a form if the author of the image requires permission before use

Thanks so much for the WATS vote

Good Post

Also, you can try www.sxc.hu.... That's a site I was using for royalty free images when I was trying my hand at freelance web development.