Mobile app version of vmapp.org
Login or Join
Harper654

: How to make crips and smooth icons from downloaded png? That is probably repeated question but I want to make all png icons look crisp and smooth in android application. How can I do this

@Harper654

Posted in: #AdobeIllustrator #AdobePhotoshop #Png #Svg

That is probably repeated question but I want to make all png icons look crisp and smooth in android application. How can I do this in Photoshop?

I have 50*50 px png images that I want to make them look good in mobile.But when I reduce png image using transform command/or using image re-sampling with bicubic sharper technique, still reduced image looks blurry on mobile for some reason and it is pixelated.

How to downsample png so that it looks good in mobile app and at all sizes?
Do I really need vector format or it is good only with png?

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Harper654

4 Comments

Sorted by latest first Latest Oldest Best

 

@Gail6891361

No you do not need vector form for images to look good on other devices. However you need a bigger original image or it will be either upscaled or tiny in a device that has very high pixel density.

See browsers in high density machine have a problem. If they show images at 1 pixel to 1 pixel ratio then all images for legacy websites would be hideously small. So what they do is they override your image size and interpolate more pixels. Now most of these browsers will show the image at exactly the size you specify if you override the image to use in css or with a meta attribute in the header to let the browser know what to do. This may not help as the image will be very small on these devices compared t devices that dont have so dense pixel density.

In reality most likely you just want a separate icon for these devices with more pixels for those screens. And really the only way to do that is t redraw the icon.

But your use case s a bit opaque in the question, its hard to say. anything definitive.

NOTE: PPI/DPI is just a red herring in the story. All that matters is that you have enough pixels. And explain the browser that you are a modern site.

10% popularity Vote Up Vote Down


 

@Jennifer810

You may want to try the Image Trace tool in Illustrator and play around with the settings until you get the desired detail for your icons, then go ahead and resize. Vector is the most reliable way to make sure your designs still look crisp at any scale.

10% popularity Vote Up Vote Down


 

@Merenda852

blurryness might come from images not being pixel perfect, meaning that there are some of the confinements of your icon lie in between a pixel, rather than filling it completely. This may also come from scaling, which can make pixel-perfect icons blurry when the scale factor does not result in a size where confinements lie on pixel edges.

This site from adobe might shed some light on what I am talking about: helpx.adobe.com/illustrator/how-to/pixel-perfect.html
As long as the original icon-design was made pixel perfect, it should not matter if you use a vector file or png (as long as you do not enlarge it, but shrink it down).

10% popularity Vote Up Vote Down


 

@Karen819

First you make a small size image like 48*48 px with 72ppi resolution.

when you resize image don't change it's height and width.only change resolution.if you change your resolution 72 ppi to 144ppi then image size automatic increase and it will be 2x means 96*96px and image quality will be high(without pixelate) because image quality depend on resolution, not height and width.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme