I did this for another forum long time back and I also know there is a tutorial already done by Nabhan, but I thought of sharing my tutorial, too. It's very detailed, so please don't let the number of steps scare you lol.

Bism Allah =)

Introduction:

Avatars are conventionally considered to be an iconic digital artwork since the canvas of an avatar is usually small. Making one is not the hardest work to do, however, to some extent a designer can come up with something exceptional. These all depend on the designer's creativity and imagination on how to make something extraordinary just from a small canvas of a designing worksheet.

As designing techniques differ from a designer to another; I'm going to go step by step on how to make an avatar on my way. This tutorial is merely for Photoshop beginners/newbies, so please anyone who couldn't understand a point or step can simply ask for clarification(s).

Description:
Making an avatar with borders using external image.

Objectives:
Accustom with; Marquee tools, Crop tool, dragging images from one workplace to another, adding text and borders to the canvas.

Software: Adobe Photoshop 7+

Level: Beginners

Final result expected from the tutorial:

http://img.photobucket.com/albums/v410/34708/temp_forums/10-sabla.gif

--------------------------
NOTE: I'm using Adobe Photoshop 8 CS ME on this tutorial.

Procedures:

Step 1: Start your Photoshop and go to File>New (or alternatively click Ctrl+N) and make the settings as illustrated (I did it 130w x 130h pixels). Please notice that the allowable dimensions at EnglishSabla are 115w x 125h pixles. Make sure that the color mode is set on RGB (Red Green Blue), because in this mode you'll be able to create a colored image avatar.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/1.gif

Step 2: Open your desired image from the destination you saved it by going to File>Open>Your image destination.

Step 3: I presume you have something like this (click here (http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/2.gif)). Now go and click on the Crop Tool icon from the tools panel.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/3.gif

Step 4: Using the Crop Tool needs somehow proficiency, but since on this tutorial we are working on a small canvas then it's not that difficult to crop your desired spot from your image. I, for example, study the image that I want to crop and I ask my self which perspective should I crop the image, what feelings and touches do I want to add, etcetera etcetera. These all depend on the designer's imagination and creativity. For the sake of this tutorial and the image I chose, I cropped the image as shown and I pressed Enter as acceptance of all the parameters I set. Keep in mind that the cropping area becomes brighter and it is eligible to change in width, height and position. Try playing around and see how it goes.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/4.gif

Step 5: Your cropped area should be on new window (This is automatically done by Photoshop itself when using the Crop Tool). Now, to easily drag your cropped image into your avatar workplace, go to Windows>Tile and you should have something like this (click here (http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/5.gif)).

Step 6: Simply use the Move Tool http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/movetool.gif to drag the cropped image into the avatar workplace and it will be automatically in a new single layer (click here (http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/6.gif)).

Step 7: You don't need the cropped image window anymore, so just close it and maximize the Avatar window. Now, your cropped image is in one single layer but it doesn't dimensionally fit your avatar dimensions. In this case, we're going to resize the cropped image so it can 'approximately' match the size you specified for your avatar. Go to Edit>Free Transform (or alternatively Ctrl+T) and you'll have something like this (click here (http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/7.gif)).

Step 8: When resizing any image, the image potentially loses some chemical amd physical properties and consequently its quality. To maintain maximum quality while resizing and using the Free Transform tool click on the chain icon at the top bar. The chain icon will enable you to resize your image while maintaining the aspect ratio.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/8.gif

Step 9: Before playing with the ratio parameters, try to move the cropped image to the center of the canvas as shown. Not precisely in the center, but do your best.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/9.gif

Step 10: Play with the ratio parameters (either the height or width doesn't matter, 'cause they'll change relatively) till the image almost fits the dimension of your avatar workplace. Everyone will be having different parameters; the resized cropped image will not perfectly fit the avatar workplace, so your common sense should rise up here so the cropped image would fits best. When you're done, just click Enter.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/10.gif

Step 11: You're almost done, but you need to border the edges of your workplace. To do so, create new layer by going to Layer>New>Layer (or alternatively Shift+Ctrl+N) and name it borders.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/11.gif

Step 12: Before start making borders, you first need to choose what color to use for the borders, because later we'll fill the marquees with either foreground color or background color. By default, foreground color is black and background color is white.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/fbgrounds.gif

Step 13: Dealing with pixels, I suggest you to zoom in more into your workplace, to do so, go to View>Zoom in (or alternatively Ctrl++). For such iconic design like avatars, designers usually make a one pixel borders to the avatar. Hence, go to the Marquee tools icon and right click to see the different Marquee Tools from the drop menu. For bordering the upper and bottom edges, we'll be using the Single Row Marquee Tool and for the right and left edges will be using the Single Column Marquee Tool.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/12.gif

Step 14: Choose the Single Row Marquee tool and click on the upper edge and you'll have something like this:

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/13.gif

Step 15: Go to Edit>Fill…(or alternatively Shift+F5) and you'll see something as shown. For the Contents, there are many uses to fill as can be seen in the drop menu, so basically choose either foreground or background (whatever color suits you). You can also pick the option Color if you don't want to change your foreground color or background color but in this case you want your borders to exactly have the same color.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/14.gif

Step 16: Do the same for the bottom edge. For the right and left edges follow Step 15 but with using Single Column Marquee Tool. You're almost done and you should have something like the following.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/15.gif

Step 17 (additional): To add a text go to the Text tool icon http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/addingtext.gif in the tools panel, click on the workplace and simply type whatever you want. Use Move tool http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/movetool.gif to place your text on in the right place. The foreground color will be the color of your text, hold that in your mind.

Step 18: Once you're satisfied with everything, save your work. Go to File>Save for Web (or alternatively Alt+Shift+Ctrl+S). An optimization window will appear where you can optimize your work further. As can be seen in the figure below, you have options on choosing the format of your work; I suggest choosing GIF (Graphics Interchange Format) and don't play with rest of options. Click on Save and choose your destination.

http://img.photobucket.com/albums/v410/34708/temp_forums/avatar_tutorial/final.gif


Conclusion:
Making avatars is taking a good place in the category of graphic design and there are many great graphic designers who are dedicating their time on only creating such iconic designs like avatars. I hope my tutorial was clear to everyone. Don't look at the number of steps, this is merely to facilitate the procedures for the very beginners and to give better illustrations.



END OF THE TUTORIAL

oh dear! looks complicated...

Easiest Way, Thanks For Sharing.
Looking Forward Seeing Your Advanced Tutorial.

Is this your plan to stop me? I will keep on asking you to make me a combo :p

Very useful .. you're the best :)

ya 5a6eeeer !
thanks for the tut. :)

Angel Eye, it looks complicated? Haha, don't judge a book from its cover ;). Just go through it step by step and I'm sure you'd change your word.

Conjugater: I hope it's the easiest way, as you said. Looking forward to see your work.

Oblivious: Hahaha, welcome at anytime = )

Nosa: you're the best, looking for the animated combos of yours ; )

wow..that is indeed a more complex way of creating an avatar...but well done. if members feel it's too complicated then they can always go back to my tutorial wich can be found in the sticky in this section of the sabla.

It's not that complicated Nabhan, c'mon you know it yourself that I just made it more detailed. The point of writing a tutorial is to teach and accustome beginners to the different tools, understanding why I did this step and that step and so forth. Writing detailed steps mean you'd get less questions from the readers. The less questions you get, the more it means that your tutorial has served the points/objectives easily with no problems with the reader/follower.

Pleae guys who also want to know how to use a pixel fonts, please refer to Nabhan's great thread.

ow To Make Your Avatars/Signatures More Attractive (http://www.englishsabla.com/forum/showthread.php?t=39609)

damn
thats hard
thanx for sharing
im never gonna be able to do it :p
lol

thanx bro ;)

done :cool:

Rapper Girl, did you ever go through the steps? Tell me which part is hard or that you faced difficulty(ies) on?

Nella, thanks! I know you're good on that ;)

never tried the steps
i donnu
it just looks hard :shy:
is it ?

Just try it out first and I'm sure you will change your mind. I said it before, don't let the number of steps scare you and you should not give up just by looking at the number of steps up there. I made the tutorial very detailed 3ashan you understand what you're actually doing, rather than just following random steps without knowing what you're exactly doing!

i dont have a photoshop :p
lol
n i donnu anything about it
special always tries to teach me
but i still donnu wt to do
haha :p

no actually its very easy,, a step takes just few seconds
its very detailed maybe thats why you think its complicated,, its better very detailed than sketchy
thanks alot fast_hacking,, this tutorial will definetly help mee :D

wow..that is indeed a more complex way of creating an avatar...but well done. if members feel it's too complicated then they can always go back to my tutorial wich can be found in the sticky in this section of the sabla.


I agree with U Nabs....
FH's tutorial is complex....
I learned how 2 do combos from ur tutorial in ES...
Its much much simple.....

-----------

FH, as I told U long ago bout this tutorial, though U claim its a simple 1 for begginers, I find it not... I mean its too detailed, or over detailed...

Combos can b done in a very very very very very simpler way :yes:

-----------

But hey.....
as I said b4 too.... it takes an effort 2 do such tutorial...
So thnx alot... I did enjoy reading other tutorials by U....

Keep them up....

------------

And FH.... I have a request plz......
Can U give us a tutorial on how to do shapes on an avatar or a signature..? :shy:

Nabz said he will, but its taking 4ever :inno:

I soo wanna go 2 step too of creating combos... :cool:

-----------------
I think I wrote my life story up there, lo0ol

^ LOL, yes I know it's taking me forever..and I'm really sorry..I just can't get myself to do it at the moment.

^^ Naaaaaaaaaaaaabs... plzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz :(

TH: There is a difference between professional and quick-to-hit written tutorials. I repeat again, this tutorial is for beginners, those who have never used Photoshop or atleast the tools used in this tutorial.

You know, I can make another tutorial with three steps and I'm sure I will get hell of questions from the learners. Just remember, when a designer writes a tutorial, his/her tips or instructions don't have to be the same as another designer. There are many tutorials and tips that can help you on how to write a tutorial. I have refered to these two tutorials, 1 (http://www.oman3d.com/tutorials/general/tutorial_riyadhal-balushi/), 2 (http://www.chillibreeze.com/tutorials/Tutorial-HowtoWriteATutorial.asp)

PS: tell me which part you think it's 'complex'.
Thanks for your words =)

^^ U ignored the other part of my post :dev:

Cool tutorial Fast_HacKinG. I found it simple & easy, maybe because I already know this. It would be great if you gave other tutorials on how to animate & do shapes, etc, etc. Or you've already done that? :think:

Thanks for sharing. :cute:

^^ Yup my thought exactly. I mean I really wanna learn how to use flash and make those animated avatars.

TH: ooh tutorial on making shapes? Hmm, it's kinda hard though because actually that all depends on your creativity and what you certainly want in your combo.

FS: thank you dear, I will post my other tutorial in a while ;)

Mesmie: thanks :D

Whats good in this tutorial is learning new tools and thats always nice, I agree that there is a simpler way to do one but There is no harm in doin this and learning new things. :)

Well done Fast HackinG.

Talal, thanks for your words :-)

Thanks to everyone who attempted making an avatar by following this tutorial, hehe ^_^

Dude we want a tutorial on making animated combos lol

HERE WE GO:

http://www.englishsabla.com/forum/showthread.php?t=42002

TH: ooh tutorial on making shapes? Hmm, it's kinda hard though because actually that all depends on your creativity and what you certainly want in your combo.


Dude :think:
Everything bout PS is related 2 creativity....
Even creating simple combos needs creativity....
4 example, the tutorial in this thread... member would try implementing step by step & eventualy by practise they'd become better n more creative....
Same goes for the Shaping whatever tutorial....
There's no harm of giving a basic simple 1...
Am sure members would take that base & try improving thier skils n perhaps come out with amazing stuff...

Y dont u just give it a try...
a simlple uncomplecated tutorial would do :XD:

Tiny Heart, I don't promise that I will write the tutorial you requested but inshallah I will try my best. :)

^^ Thnx anyways..

Thanks for the tutorial, Fast_HacKinG. :)