Avatar Editing Tutorial For Photoshop

[Amoran Kalamanira Kol]

[size=5][u][b]Photoshop CS3[/b][/u][/size]

Before I begin, I would like to say that I have Photoshop CS3, every Photoshop version is somewhat different, but versions CS1 and CS2 may be similar to CS3. I am not certain of this.

Not everyone will do this process the same as I do and not everyone has Photoshop. There are most likely simpler ways to edit the avatars, but this is simply the method I tend to use.

[u]First: Cropping/Cutting[/u]
When you open your picture, cut away a lot of the white space by cropping the main part of the picture. I do not use the crop tool usually, but instead I use the rectangular marquee tool. It works a bit easier and gives you some room to fix mistakes if you mess up.

[u]Second:[/u] Cut and paste the selected canvas into a new area.

[u]Third: Adjusting/Lightening and Darkening - etc.[/u]
Then go to 'Image' and 'Adjustments'. You can adjust the image by either tinting the black space using the 'color balance' tool, or use levels to lighten/darken the image with the 'Levels' option. This helps with clarity when you resize.

[u]Fourth: Greyscale[/u]
Depending on how you have adjusted the image with color balance and 'levels', you can choose to use the greyscale option in the 'Image --> Mode --> Greyscale' tab. This will flatten the image.

[u]Fifth: Remove flaws[/u]
Now because I am picky, I usually go through using the eraser tool and remove any little splotches in the white area that may have come off with the graphite, but the white area will be removed soon anyway.

[u]Sixth: Resizing[/u]
Now you will need to revisit the 'Image' tab once more and go to 'Image size'. Be certain that the 'Constrain Proportions' option is enabled, otherwise it may warp the image. I normally start with the 'height' first as the width will automatically adjust when you enter the proper number. (In this case 160x100. But depending on how the image is cut, it will resize without warping it, thus it might leave it a bit off of the proper size.)

[u]Seventh: Adjusting the Size[/u]
Continue to remove as much of the white space as you can with either the 'cropping' tool or the 'rectangular marquee' tool. Be certain to open in a new window, adjusting the size of the new window to 160x100. Make sure that you set the 'Background Contents' to 'Transparent' when you make the new window.

When you paste your picture, if the image is still not quite fitting in the window, go to the 'Edit' tab and choose 'Transform --> Scale'. You will see that the area is able to be manually adjusted, to keep the image shape, hold down the shift key as you adjust.

[u]Eighth: Removing the White Space.[/u]
BE CERTAIN THAT THE BACKGROUND LAYER IS REMOVED! If it is not removed, the image will not show up as transparent.

Now that the image is in the center of the resized space, use the 'Magic Wand' tool to remove a lot, if not most of the outer white space.
If you have shaded the image heavily, I would not suggest using the magic wand tool in the inner white space of the picture as it can take away a lot of the quality. Instead I would suggest upscaling the image to 300-600% (using the scaling area in the lower left hand corner) and manually removing the white space with the 'Lasso' tool and the 'Eraser' tool.

[u]Ninth: Adding the MD Symbol[/u]
Use the type tool and select a simple, clear font at around 2-10pts. depending on which font you use. I would suggest Arial, Tahoma, Comic Sans..etc.

[u]Tenth: Saving as a Transparent GIF[/u]
Go to 'File --> Save for Web & Devices' be certain to select the 'GIF' option. You can give it a dither but I've found that this tends to make the image look a bit scratchy, you can also click 'Interlaced' though I'm not entirely certain what that does. Sorry folks, that tiny bit I haven't figured out yet, but it doesn't appear to harm the image so, eh- I click it anyway.
And last, hit 'Save' and name it.

Finally, you are ready to upload the avatar.


Tips:[list]
[*]I would suggest keeping the image in the MD style, if you use too much shading the picture will look somewhat flat and be difficult to edit. The shading may come out looking strange and not give the desired effect as well, so I would stick to light shading or 'sketching' when making these avatars.
[/list][list]
[*]If you have a tablet, use it as much as possible, it makes this whole thing ten times easier.
[/list][list]
[*]You can darken/lighten in several ways in photoshop, there is also a tool called the 'Burn' tool that helps with darkening certain areas. So if you want some shading to stand out more while others you want to 'fade', darken certain areas with this. It will give your avatar a polished look.
[/list][list]
[*]Do not make the image too dark, if it is too dark it will look too contrasted against the textured background of MD. You can lighten the image by using 'Image --> Adjustments --> Levels or Brightness/Contrast'. Both work equally well.
[/list]


Again, not everyone will do this process as I do, and there are probably simpler ways.. but I do hope this helps for those of you who decide to go to photoshop.com and download the free trial. Not sure if it will help with the GIMP program that Yrthilian had suggested, I have never used that particular program before.

If you know of easier ways to do this, please post them below. [img]http://magicduel.invisionzone.com/public/style_emoticons/default/smile.gif[/img]

EDIT: Free TRIAL not trail. Stupid lack of sleep.

Edited August 20, 2011 by Burns

[Sir_Kamil]

(+ rep)

This is a fantastic tutorial! Thank you It helped me alot!

I have the full version of P cs3. still some words are way to difficult for me in english but i thik ill get it done eventually. You helped alot!





ps. You think you could post some pictures to where certain things are? (the best it would be a youtube vid tutorial).

[Peace]

Thank you very much for this, Amoran. I have P CS2, I have the pen tablet which was given to me to do my crazy things with it for a year and a half, and yet I couldn't fully understand the steps and the possibilities it has. Nice work!

Edited May 1, 2010 by DarkPriestess

[The Warrior]

Interlased causes the GIF to act similar to an interlased JPEG:
It splits the image into rows of pixels and and numbers them repeatedly e.g. 1-3,1-3 or 1-5,1-5.
When the image is displayed in a browser the browser innitiates scans (how many dependes on the greatest numbered row).
A scan is where the browser dispays rows of a certain number.
The browser repeats the scans until the image is displayed at full quallity.
At the first scan there the image is of low quality but after each scan it increaces in quality.
The interlased JPEG/GIF ability is only normally useful if the file size is very lage and you want your user to be able to use(e.g image map)/see the image ASAP.
Therefore in smaller file sizes interlasing a JPEG/GIF only increaces the file size and loading time.

[Amoran Kalamanira Kol]

[quote name='darlec77' date='01 May 2010 - 07:50 AM' timestamp='1272718220' post='59066']
Interlased causes the GIF to act similar to an interlased JPEG:
It splits the image into rows of pixels and and numbers them repeatedly e.g. 1-3,1-3 or 1-5,1-5.
When the image is displayed in a browser the browser innitiates scans (how many dependes on the greatest numbered row).
A scan is where the browser dispays rows of a certain number.
The browser repeats the scans until the image is displayed at full quallity.
At the first scan there the image is of low quality but after each scan it increaces in quality.
The interlased JPEG/GIF ability is only normally useful if the file size is very lage and you want your user to be able to use(e.g image map)/see the image ASAP.
Therefore in smaller file sizes interlasing a JPEG/GIF only increaces the file size and loading time.
[/quote]

Thank you very very much for explaining that. I've been playing with Photoshop for awhile and not once did I ever have any inkling of an idea as to what 'interlaced' was.


@Irene: If you've got a tablet you can also just make a transparent canvas (upscaled of course) and do the avatar using the tablet. Its difficult to make it look hand-drawn unless you have a certain brush type (charcoal, natural, etc.). But yeah, tablets are fun and I'm glad it helped.

@Sir Kamil: PM me what questions you have and I will try to answer them to the best of my ability.

[Shnappie]

ok i followed the above guide but still my avatar is not accepted yet

this are the remarks Mur has put on it :

[quote]it contains white, please make it alpha transparent towards the bg color in the sample file, not white[/quote]

anyone knows how to do this in Adobe Photoshop CS4 or any other version ?


regards

[Blackwoodforest]

[quote name='Shnappie' date='07 June 2010 - 10:23 PM' timestamp='1275942214' post='61295']
ok i followed the above guide but still my avatar is not accepted yet

this are the remarks Mur has put on it :

anyone knows how to do this in Adobe Photoshop CS4 or any other version ?

regards
[/quote]

What kind of file ending do you have right now? .gif .jpg .png?

Seek "alpha transparency" into your menu and add this, then seek the color to alpha and hit the white. Shall do it.