Mospaw
D O N E
Hawaiian Jellyfish
join:2001-01-08
The Pacific
 ·Cox HSI
Host:
Road Warriors, Not..
All Things Macintosh
Automotive
1 edit |  Practical Avatar Image Resizing
Avatars sure are fun. You can send a graphical message in every single one of your posts. But they're limited. At about 40 x 45 pixels maximum, there's not a lot of space to convey your message.
Resizing an image to use as an avatar requires a little bit of planning, effort, and thought. And if you plan to use a transparent GIF as an avatar, it's essential to have the avatar in its final size because the DSL Reports server removes transparency when resizing a GIF image.
I'm a PhotoShop kind of guy, so that's the software I used when writing this tutorial. The principals and techniques should work in any imaging software (such as Paint Shop Pro) that has similar features and functions.
Methodical resizing is the difference between turning this image from this:
into this (using these methods):
rather than this (via DSLR's resizing):
You might also come to realize that cropping the image differently will yield "better" or at least different results:
The first step is to find a source image like the one above. Bring it into your image editor and do any necessary changes, like cleaning up smudges, scratches, etc. It's far better to do the changes when the image is larger because any edits you make or defects left over won't be as obvious when you shrink the image size.
When you have your source image ready, you'll need to figure out which area (if it's smaller than the entire image) you're going to make into your avatar. While the picture above is nice to look at full size, its meaning is somewhat obscured at avatar size:
Because of that, it's sometimes better to choose a smaller area of the image for your avatar. This is done with the cropping tool. Just drag your cropping tool over the area. In this case, I'm going to concentrate on the statue on top of the building and the steeple next to it:
which yields this image, which is 156 x 174 pixels:
You should try to make your selection roughly square, although it can be a tiny bit taller than it is wide.
I've found that just resizing to the final size (in this case, 40 x 45 pixels) yields fuzzy results:
Unsharp mask (or a similar sharpening filter) helps a little bit, but the results always seem a bit "severe" and lacking detail to me:
Since we know the width of the final image (40 pixels), I like to take the cropped image and resize it to the nearest multiple of 40 pixels wide. Since the cropped source image is 156 pixels wide, I can go to 160 or 120. In this case, I'm going to go to 120 wide since it's only a small reduction is size.
Shrinking images usually blurs them slightly. So this requires slightly sharpening them a bit. Again, the Unsharp Mark filter is most useful here because it lets you control the amount of sharpening to apply:
You need to find a balance here. Too much, and your image starts to get an artificial and "contrasty" look to it. Not enough, and it will suffer from the "fuzzies". You'll want it to look just a tiny bit sharper than it should be before reducing size, since it will get a bit fuzzier. Here's the result of that unsharp mask:
After that, it's a simple matter of stepping the image down to 40 pixels wide. First 80:
and a little more sharpening:
(The difference is very subtle, but that's what we're after!)
After 80 pixels, a step down to 40:
The drop from 80 pixels wide to 40 usually blurs the image quite a bit, so you'll most likely want to apply one last Unsharp Mask. Since this is the final sharpening, you'll want it to look exactly the way you want.
Compare the gradually, carefully sharpened, and resized graphic (left) to the one that was only resized (right):
There's certainly a lot more contrast, and the details (what details there are in 40 x 45 pixels!) are clearer
Also, compare the gradually, carefully sharpened, and resized graphic (left) to the one that was resized directly to 40 pixels and then sharpened (right):
Again, not a huge difference, but the additional contrast and detail gives the carefully done image a better look (at least in my opinion).
As a designer, I don't like to leave anything to chance. When doing graphics to upload, it's always better to get them as close to the final size and shape you want them before uploading. Don't rely on the DSL Reports server to do the work for you, since you can do a better job, and it's only a tiny bit of effort!
Good luck on your avatar resizing.
[EDIT - fixed a few broken links.] |
|
Sheesh
I Am The Lizard King
Premium
join:2001-04-11
Windsor, ON
clubs:   |  Great job Mospaw!
--
Boo!!! |
|
Hey Girl$
I'M Feeling Blue.
Premium
join:2001-08-30
Emerald Hill | reply to Mospaw
A second what Sheesh said! |
|
tiggerstales
Premium,Mod
join:2000-08-25
B'ham, Al.
clubs:
Host:
Avatar/Graphics Help
Team Discovery
| reply to Mospaw
Nice work Sooty errr...Mospaw. Keep posting these PhotoShop tutorials and maybe I'll actually learn to use mine. 
--
4 3 cams, 5 cats, 7 days a week. |
|
wafen
My woogie is Home
Premium,Mod
join:2001-02-01
Maplewood MN
clubs: | reply to Mospaw
Great TUT Mospaw! |
|
samburgers
Premium
join:2001-05-23
Vancouver, BC
clubs: | reply to Mospaw
GREAT JOB!!! :):) |
|
jeffsul
Premium
join:2001-05-15
Mobile, AL
clubs: | reply to Mospaw
Outstanding!! I love these tutorials!
--
Remember our fallen brothers. |
|
TxRoadDawg
We're Gonna Ride Forever
join:2001-08-17
Warner Robins, GA
clubs: | reply to Mospaw
fine job, looks like even an artistically challenged person like me has a shot at getting one right |
|
