Some sites allow avatars to be uploaded, I notice some are very clear and detailed, looking as though they are much more than 50 X 50 pxls at 72ppi (this is the limitation at most of these sites). What do I need to do to create these very detailed looking graphics within the above specs?
Icons/avatars, making
- Thread starter Qfxz
- Start date
symphonix
Scratch & Sniff Committee
1. Start by making your avatar at a good size, at least 500x500. Better image to start with equals better image to finish with. Do not resize or scale it until you've finished making your image and are ready to put it up.
2. If you are using PhotoShop, you'll want to use the Levels (Ctrl-L) tool to ensure you get sharp contrast. Any areas that are of more or less consistent colour, fill them with that colour so there are no variations. Finally, because you'll be shrinking it down, its a good idea to over-sharpen the image a fair bit (Use Filter --> Sharpen --> Unsharp Mask at about 150%).
You can achieve similar results in other graphics programs, but I won't go into that too much.
3. Use ImageReady to resize the image and adjust the settings until it comes in just under the file-size limit.
I hope that helps.
2. If you are using PhotoShop, you'll want to use the Levels (Ctrl-L) tool to ensure you get sharp contrast. Any areas that are of more or less consistent colour, fill them with that colour so there are no variations. Finally, because you'll be shrinking it down, its a good idea to over-sharpen the image a fair bit (Use Filter --> Sharpen --> Unsharp Mask at about 150%).
You can achieve similar results in other graphics programs, but I won't go into that too much.
3. Use ImageReady to resize the image and adjust the settings until it comes in just under the file-size limit.
I hope that helps.
Lt Major Burns
"Dicky" Charlteston-Burns
no! that's bad. that's very good for working small for print, but for web, if you want the clarity, you are going to have to paint it in a 50x50 pixel canvas, thinking very carefully exactly what each pixel is going to be.
no scaling envolved, no pixels have been guessed by a computer, no antialiasing is envolved and basically no randomness, which results in loss of clarity. you only have 50x50 pixels to work with, so care is needed, if you care.
no scaling envolved, no pixels have been guessed by a computer, no antialiasing is envolved and basically no randomness, which results in loss of clarity. you only have 50x50 pixels to work with, so care is needed, if you care.
ElDiabloConCaca
U.S.D.A. Prime
Gotta agree with Lt Major Burns here -- for pixel-perfect images, the WORST thing you can do is start with a canvas that's too big to begin with then scale it down later. You will find that your image quality, no matter how much you fiddle with levels and contrast, will suck with this method.
Your best bet is to find out the EXACT pixel dimensions and resolution of avatars that the site supports, then create your avatar exactly to those specifications.
Your best bet is to find out the EXACT pixel dimensions and resolution of avatars that the site supports, then create your avatar exactly to those specifications.
TommyWillB
Registered
I agree the realities of print resolution vs. screen resolution is quite different.
However I tend to start Web images big myself, but that's because I beleive the downsampling can be controlled if you are careful.
Basically I never reduce anything more than 50%... If I have to reduce something to 2%, I do in in steps of 50% with sharpening and misc. cleanup at each step.
I guess I simply find it easier to work at a higher resolution for some things. I don't like playing with 50x50 blocks.
I'll let you all judge my success by my Avatar...
However I tend to start Web images big myself, but that's because I beleive the downsampling can be controlled if you are careful.
Basically I never reduce anything more than 50%... If I have to reduce something to 2%, I do in in steps of 50% with sharpening and misc. cleanup at each step.
I guess I simply find it easier to work at a higher resolution for some things. I don't like playing with 50x50 blocks.
I'll let you all judge my success by my Avatar...
Mikuro
Crotchety UI Nitpicker
I agree with both sides here, in different cases. In depends on what kind of images you're working with. If you're dealing with something like my avatar, which is a sharp bitmap with no smoothing at all, then obviously you need to draw it at the target resolution. Scaling will just blur it out.
But if you're trying to create something with smooth lines, it's often much easier to start with a very large image. That way you don't need to mess around with antialiasing at all; you'll get it all "for free" when you scale it down. I find creating antialiased bitmapped images to be a chore at best, because as soon as you want to change a single color....all hell breaks loose, because you can't just use the little paint bucket. It's MUCH easier to do your drawing with sharp lines, and smooth it later when you shrink it. For best results, you need to shrink it a LOT, though; 50% isn't enough to give you high-quality smoothing. And keep in mind from the start that you want it to be shrunken. For example, if you're target size is 50x50 and you start in 500x500, make your outlines 10 pixels thick. I use this method quite often when I'm designing OS X icons, and I also use it when I scan in pencil sketches and want to color them.
But if you're trying to create something with smooth lines, it's often much easier to start with a very large image. That way you don't need to mess around with antialiasing at all; you'll get it all "for free" when you scale it down. I find creating antialiased bitmapped images to be a chore at best, because as soon as you want to change a single color....all hell breaks loose, because you can't just use the little paint bucket. It's MUCH easier to do your drawing with sharp lines, and smooth it later when you shrink it. For best results, you need to shrink it a LOT, though; 50% isn't enough to give you high-quality smoothing. And keep in mind from the start that you want it to be shrunken. For example, if you're target size is 50x50 and you start in 500x500, make your outlines 10 pixels thick. I use this method quite often when I'm designing OS X icons, and I also use it when I scan in pencil sketches and want to color them.
Lt Major Burns
"Dicky" Charlteston-Burns
i'll agree with the 50% thing, if you are going to scale something, always do it in halves. odd numbers indroduce inconsistencies, as the maths envolved doesn't work well with such an organised grid.
always in halves.
in fact, on this page right now, we have two perfect examples of the methods. TommyWillB's effort is a good example of big-to-small, and is very smooth
Mikuro's is the good example of a specifically painted illustration.
make up your own mind
always in halves.
in fact, on this page right now, we have two perfect examples of the methods. TommyWillB's effort is a good example of big-to-small, and is very smooth
Mikuro's is the good example of a specifically painted illustration.
make up your own mind
mseydel
truculent
well, I'm a print guy, so I would argue to start larger, in case you want to output the graphic down the road.The reason that the image looks ok at 50% is not pure chance; if you're using bicubic interpolation (Photoshop's default) to downsize, the image will drop every other pixel- actually, the geeks at Adobe have insisted for years that the math is done at the sub-pixel level. Photoshop CS and CS2 have an even better option- bicubic sharper (this is accessed as a pull-down at the bottom of the Image Size dialog), which tends to emphasize details. watch it though, this can visually emphasize the contrast of your image.
texanpenguin
Registered Penguin
It fully depends on the sort of image you want.
If you want a photographic icon then scaling will do a significantly better job than trying to redraw it at a small scale.
Conversely, if you're trying to make an image which would do well to be pixel-painted (such as Mikuro's icon), you really have no choice but to paint it yourself.
My icon was rendered in 3D with full shading enabled, so it suited being scaled down from a larger render.
mseydel's icon is an interesting example of what happens when you draw large and scale down. Personally, I'm a big fan of the appearance of anti-aliased lineart, but there's value in pixel-art.
If you want a photographic icon then scaling will do a significantly better job than trying to redraw it at a small scale.
Conversely, if you're trying to make an image which would do well to be pixel-painted (such as Mikuro's icon), you really have no choice but to paint it yourself.
My icon was rendered in 3D with full shading enabled, so it suited being scaled down from a larger render.
mseydel's icon is an interesting example of what happens when you draw large and scale down. Personally, I'm a big fan of the appearance of anti-aliased lineart, but there's value in pixel-art.
