Skip to main content
M
michachan
Participant
November 8, 2016
Answered

Fuzzy PNG icon when enlarged through iPad app

  • November 8, 2016
  • 2 replies
  • 519 views

Hi all,

I work for a company with an app that is designed for the iPhone. It can also be used on the iPad as a zoomed in version. Someone who worked for them previously designed several 52x52 PNG icons that are used within the app. When the app is zoomed in they definitely look a little fuzzy because of the zooming in but not dramatically pixelated. I recently designed a few new icons for them to use in the app and no matter how I save them they end up looking horribly pixelated once zoomed in.

I’m honestly baffled at the clarity being kept with the original icons being zoomed in as much as they are but clearly there must be a way to do it and I have no idea how. Icon design is not something I normally do so I’m hoping maybe there’s some proper way to save these files that I’m just unfamiliar with. I have tried saving this through Illustrator directly and taking it over to Photoshop. I feel like I’ve tried every setting possible between the programs and nothing works!

Here's a an iPad screenshot of my icon compared to the others: http://i.imgur.com/F9mIkDC.jpg

I’m hoping someone out there can help! Thanks!

This topic has been closed for replies.
Correct answer michachan

As it turned out there really was no problem at all! No one around here knew to tell me that two separate files of different sizes (52px and 104px with "@2x" included in the name of the 104px files) were needed! Since I'm not used to working with apps and web design this is not something I was aware was needed but seems obvious now.

So if there's any other inexperienced app designers out there who find this, the answer is simple!

2 replies

M
michachanAuthorCorrect answer
Participant
November 8, 2016

As it turned out there really was no problem at all! No one around here knew to tell me that two separate files of different sizes (52px and 104px with "@2x" included in the name of the 104px files) were needed! Since I'm not used to working with apps and web design this is not something I was aware was needed but seems obvious now.

So if there's any other inexperienced app designers out there who find this, the answer is simple!

Jacob Bugge
Community Expert
Jacob BuggeCommunity Expert
Community Expert
November 8, 2016

michachan,

No one around here knew to tell me that two separate files of different sizes (52px and 104px with "@2x" included in the name of the 104px files) were needed!

Maybe no one knew how to guess the specifics of the non specified app, but at least the general instruction on how to get unfuzzy artwork at different sizes were told:

Fundamentally, PNGs are crisp and clear at the exact pixel x pixel size it is made at, but blurry/ugly when resized.

Therefore it is important to create the PNGs at the intended final sizes.

Jacob Bugge
Community Expert
Jacob BuggeCommunity Expert
Community Expert
November 9, 2016

The "around here" I was referring to were the people in my office, not this forum. Sorry to be unclear about that.


Thank you for the clarification, michachan.

Jacob Bugge
Community Expert
Jacob BuggeCommunity Expert
Community Expert
November 8, 2016

michachan,

Fundamentally, PNGs are crisp and clear at the exact pixel x pixel size it is made at, but blurry/ugly when resized.

Therefore it is important to create the PNGs at the intended final sizes.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices