How to get clear small icon/button in Muse/Photoshop

[kristijan_bb]

I'm new with Muse, photoshop, illustrator, any help is welcome.

So, I have problem with small icons. For example, I wanna put FB icon/button 40 x 40 px. No matter what I do it is always blurry.

My original FB icon is in psd file, 1024 x 1024 px, resolution 72.

I do not know how to reduce this to 40 x 40 px and get clear icon.
Only way I did manage to get clear small icon is when I inserted that icon to illustrator and get vector off that image, save it to svg file, inserted to Muse and icon was clear clear.
That would work but, I wanna place photoshop button, because then I got those different states, and to get that it must be psd file.

So, how can I get clear icon in PS in psd file to be small size and clear? What is proper way to do it?

[Günter Heißenbüttel]

• The best way: Use an SVG icon or create it in Illustrator.
• The second best way: Create/resize the icon in Photoshop with exactly(!) the size, you need it in Muse. Doing so, Muse won’t touch your icon at all. Output quality will be the same as input quality.

For further information, read my answer here https://forums.adobe.com/thread/2371157​ or here (post #4): https://forums.adobe.com/thread/2371157​

In addition: You don’t need a PSD file to use different states. You can use different images per state too, if you don’t place, but fill the element. In this case, you may use different SVGs per state.

[kristijan_bb]

@Günter Heißenbüttel Thank you for reply.

I would really like to have one psd file with two layers in it instead of using two svgs files for that.

Muse is not problem, photoshop is. If I in PS reduce from 1024 px to 40 px image gets blurry. Image - image size, and I change it to 40 px.

So, if there is a way to reduce my icon/button in PS and get it clear, please, I'm all ears how to do that

[Günter Heißenbüttel · Accepted solution]

If your logo/image or whatever has fine structures, you have no possibility at all. If 2 pixels side by side shall be reduced to one pixel, you have one or two pixel as a result, depending on the used algorithm. No way out.

You may try to recalculate the image by using a different sampling method. This gives (un)sharper results depending on the image content.

But honestly: If you don’t want to use two SVGs instead – what would solve your problem once and for all –, there doesn’t seem to be put that much quality demands on that issue.

[kristijan_bb]

Ah.. so SVGs then it is

Thank you for help Günter Heißenbüttel​

Out of curiosity, so when pro people doing desing, if they need small clear logo/button or whatever... they all do in vector style or?

I'm asking about good preparation, how to create this things best way?

[Günter Heißenbüttel]

I already told you: Think of an image 400 x 400 px containing nothing but lines of 3 pixel width (or even better: of one pixel wide lines ) This happens very often, when text is part of the image.

No try to reduce the size of this image to 200 x 200 px. What happens to a line of 3 px width? Either it will be 1 pixel or 2 pixel wide. Half pixel don’t exist. And what happens to a 1 px wide line? It remains 1 pixel or – it disappears. You see: Every(!) scaling of raster images is necessarily and inevitably connected to quality reductions.

You can mitigate this effect by using different sampling methods. But even if one method is slightly better than another one – do you think, this has any meaning,when talking about a 60 x 60 px icon? There is not that much room for optimisation.

There are only 3 ways to deal with this: Accept it, ignore it, or use a vector format.

By the way: Even vector images are dealing with these issues: They only can map the best possible quality onto a given grid of pixels, but they can’t display half pixels too.