It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Graphic Photoshop Forum Photoshop Tutorials

Photoshop Tutorial: Make a 'DEVPPL' avatar

Comments and Questions for the tutorials in the tutorial-archives.

Photoshop Tutorial: Make a 'DEVPPL' avatar

Postby webmaster on Sat Apr 16, 2005 10:51 pm

An avatar is a little image for your profile in forums. Here on DEVPPL, the avatar is displayed below the username to the left in every thread. I'm going to show you how to make a simple, but nice avatar that you can use there in the DEVPPL forums. If you aren't a member already, click here to register.

Most avatars are 80x80 pixels, so I will use that format when I do this avatar. First of all, make a new image in Photoshop (ctrl+n), set width and height to 80 pixels and click OK.


Click on the foreground color and enter EFEFEF in the # -field, then click OK.
Image


You should now make the whole image in that color, press CTRL+Backspace to do that.


Press on the Rectanguar Tool (Hotkey: U), then select the Rounded Rectanguar Tool form the top of the screen.
Image

Then set radius to: 8px
You will find the radius field right next to the Rounded Rectangular Tool which you just clicked on.


Click and drag to draw an rectangle in your image, try to get only one pixel on every side of the rectangual (press CTRL+Z and do it again until you are pleased). Your image should now look like this:
Image

Now click on Layer > Layer Style > Stroke (or doubleclick on the layer and click on Stroke)
Set size to 1 px and set hte color to black, then click OK.


You should now have black border around your rectangular. If the border looks wierd, is it probably Photoshpo that is showing the outlines of the rectangular, press CTRL+H to get rid of it.


We should now do a box that you can write your name in. Click on the Rectangular Marquee Tool (Hotkey: M). Click, drag and release so you get an area like this selected:
Image


Add a new layer by clicking on the little 'Create a new layer' -icon down right:
Image


Press 'D' to reset the colors (black/white), press CTRL+Backspace to fill your new selection with black.


CTRL+Click on the layer with the rectangular box in to select it, press CTRL+SHIFT+I to inverse the selection, press DELETE to delete the black color that's outsite the rectangular box, press CTRL+D to deselect. You should now have an image that looks something like this:
Image


You can find a Opacity field in the top-right cornor of the layer-window that you can find in the bottom-right cornor of your screen, set the opacity to 33% and press ENTER.


We will now make a border in the top of the grey field we just created. Right-click on the layer you just changed the opacity for, click on Duplicate Layer then OK.


CTRL+Click on the new layer to select it, press DOWNARROW once to move the selection 1 pixel down. Press DELETE. Your image should now look like this:
Image

Add some text (for example your Username here on DEVPPL) in the grey field and maybe some image above that, and you're done.


Here is my final result:

Image

IF YOU LIKED THIS TUTORIAL, PLEASE REGISTER AND HELP DEVPPL GROW
Last edited by webmaster on Tue Jul 12, 2005 10:35 am, edited 4 times in total.
User avatar
webmaster
Site Admin
 
Posts: 2695
Joined: Tue Aug 17, 2004 1:07 pm
Location: Sweden

Postby Phate on Sun Apr 17, 2005 12:26 am

sweet man!

but i like the picture of me better!
Web-Developing since '03
Image
User avatar
Phate
500+ Club
 
Posts: 826
Joined: Sun Nov 21, 2004 4:12 am
Location: 127.0.0.1

Postby Pure_Graphix on Sun Apr 17, 2005 4:41 am

lol.. yeah, that hair is pretty sweet i must admit

- pure -
Image
User avatar
Pure_Graphix
100+ Club
 
Posts: 240
Joined: Thu Sep 09, 2004 11:53 pm
Location: US

Postby Phate on Sun Apr 17, 2005 4:42 am

it has gotten a lot bigger too!! i will try and upload a new one soon!
Web-Developing since '03
Image
User avatar
Phate
500+ Club
 
Posts: 826
Joined: Sun Nov 21, 2004 4:12 am
Location: 127.0.0.1

Postby ReFredzRate on Sun Apr 17, 2005 6:33 am

Cool...

I'll be doing one too :D

Edit: Razz, you made a mistake. You said CTRL+I to inverse selection. It should be CTRL+SHIFT+I.
ReFredzRate
1000+ Club
 

Postby webmaster on Sun Apr 17, 2005 8:40 am

ReFredzRate wrote:Cool...

I'll be doing one too :D

Edit: Razz, you made a mistake. You said CTRL+I to inverse selection. It should be CTRL+SHIFT+I.
You're right, its fixed now, thanks.
Make sure to check out our TNX Review and Link Vault Review
User avatar
webmaster
Site Admin
 
Posts: 2695
Joined: Tue Aug 17, 2004 1:07 pm
Location: Sweden

Postby webmaster on Sun Apr 17, 2005 8:52 am

Phate wrote:sweet man!

but i like the picture of me better!


Made two new images, isn't this what you are looking for =)
Image


Or if you really want to keep that photo:
Image

But I think that smilie looks like you :)
User avatar
webmaster
Site Admin
 
Posts: 2695
Joined: Tue Aug 17, 2004 1:07 pm
Location: Sweden

Postby ReFredzRate on Sun Apr 17, 2005 9:33 am

Razz, could you find me a matching smilie as well? :)
ReFredzRate
1000+ Club
 

Postby webmaster on Sun Apr 17, 2005 1:26 pm

ReFredzRate wrote:Razz, could you find me a matching smilie as well? :)
Well, we got ReFredz the Modder:
Image

And we got ReFredz the Lover:
Image
Image
Make sure to check out our TNX Review and Link Vault Review
User avatar
webmaster
Site Admin
 
Posts: 2695
Joined: Tue Aug 17, 2004 1:07 pm
Location: Sweden

Postby ReFredzRate on Sun Apr 17, 2005 1:42 pm

LOL! Where do you find high quality icons like that?
ReFredzRate
1000+ Club
 

Next

Who is online

Users browsing this forum: No registered users and 0 guests