Losing Details when reducing to smaller image


I am designing icons and elements from an android game using Photoshop CS4. If I am designing a character (512x512) and reduce its size to fit the game screen, lots of details, shades and effects are not visible clearly. How to over come this and create smaller icon with clear and clear details ?

Any suggestion, ideas will be appreciated.

12/2/2012 6:21:00 PM

Accepted Answer

I would convert your layers to one smart object so you can resize it without quality loss. Plus "Unsharp Mask" filter for the smart object.

UPDATE: You must do all modifications (resize, sharp, effects etc.) before you export the end image. The photoshop smart object can be resized without quality loss. So after you are ready with layout of the icon - just select all layers (with folders if you have some) and add it all to the smart object. After that resize only that object and export it as png of something else

Look at this test picture: a normal layer with "drop shadow" and "stroke" effects and the same layer but converted to the smart object.

enter image description here

11/30/2012 3:08:00 PM

Essentially, you have to draw or re-draw your small icon. Ideally you work from a vector based version that you scale down and then tweak the details on pixel-level, but scaling down a rastered version will work, too. Your scaling results will be better, if you scale exactly 50%, 25%, 12.5%, etc, because photoshop has to blur less between pixels. Additionally, you can try applying sharpening filters after the resize to emulate more of the original pixel sharpness.