Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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.

share|improve this question
    
What are the dimensions of the game icon and are they variable? –  e100 Nov 30 '12 at 10:33
    
Mostly it wont vary(no zooming kinda effects)! but all those icons and elements wont be in standard size(different elements with different sizes). –  Hariharan Anbazhagan Nov 30 '12 at 10:58
    
my ques is far away from that one. I am asking about the elements used in the game screen. When i design those in bigger screen with high res, they looks great, but when resize as per the requirement, they lose their details and clarity. –  Hariharan Anbazhagan Nov 30 '12 at 11:02
    
You are right - I think I meant to say that the question (graphicdesign.stackexchange.com/questions/11349/…) is different but the answers may help. –  e100 Nov 30 '12 at 14:51
    
Thx !! seriously I learnt many things in this discussion !! –  Hariharan Anbazhagan Nov 30 '12 at 16:00
show 1 more comment

3 Answers

up vote 2 down vote accepted

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

share|improve this answer
    
Thx for your reply. Can u please give me more details on this? after my file is ready i ll save as .png file. Later if i reduce the size its not clear. –  Hariharan Anbazhagan Nov 30 '12 at 8:54
1  
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. –  mast0r Nov 30 '12 at 9:16
    
Not sure this really answers the question. While it's true a Smart Object can be scaled up and down without affecting the quality of its content, the exported small icon is going to look much the same as regular artwork downscaled once, and detail will be lost. The comment adds useful info though and I would suggest folding it into the answer. –  e100 Nov 30 '12 at 10:32
1  
@HariharanAnbazhagan: It is probably better in most cases to save the source files and re-export the different sizes from the source file rather than resizing a png. –  horatio Nov 30 '12 at 16:29
    
@horatio Thq, Its better to resize the source file instead of reducing png file ! –  Hariharan Anbazhagan Nov 30 '12 at 17:41
show 1 more comment

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.

share|improve this answer
add comment

Converting to a smart object won't change the quality when the image is reduced, it will only allow you to resize the image afterwards back to normal without loss of quality.

Convert to smart object anyway, as it's good practice.

Go to Settings -> General

Change 'Image Interpolation' to 'Bicubic sharper' see if that helps maintain some detail.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.