MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Fixing Retina Display Graphics Issues for iPad App

Published on 02 June 15
1 Mehul rewarded for 1 time 1 Mehul rewarded for 1 time   Follow
638
0
1
For mobile UI designers, designing for retina display are an essentiality. Generally, iPhone and iPad icons are consuming big chunk of UI real estate and normal icon size if 60pxX60px. For retina display, you need to multiple those pixels double (@2x) or triple (@3x) in sizes. Thus, @2x becomes 120pxX120px and @3x becomes 180pxX180px icon.
Fixing Retina Display Graphics Issues for iPad App - Image 1

General perception of mobile UI designers is that if we want to create UI for a definite device/s, we need to set up canvas according to the screen aspect ratio of device. For instance, if we are going to create a retina display image for Nexus 9 tablet, we should create document with 4:3 ratio means 2048X1536 pixels of in its multiplication/division.

Unfortunately, creating big and bigger canvas hence images are not perfect solution for better workflow as well as quality. Let me explain it practically.

Zooming Problems

When a designer creates a big canvas, she has to zoom in and out frequently to see the whole picture (zoom out) as well as to see fine details of a small portion of the image (zoom in). Moreover, these trade off prove a bit ridiculous at productivity and designing experiences. Therefore, smart designers only create 1:1 zooming canvas size and handle work easily and quickly without losing @1x quality.

Memory & Processing Problems

In order to create @2x & @3X images, designers set up canvas size in 2 and 3 multiplications. This ultimately increases the numbers of pixels in multiplication. For instance, in @2x PSD document you will find four times high pixels than @1x PSD file whereas in @3x those are nine times high. This resulting in high memory size accordingly and handling such big scale documents prove costly for the computing processors, reducing performance of RAM, and occupy huge disk space in bonus.

Font Size Multiplication Problems

It is obvious that when you multiply the size of canvas and graphic elements accordingly for retina display designing, font size would be multiply in respect to its anchoring graphic elements. Unfortunately, multiplying fonts in retina or elsewhere is a sin at user experience (UX) point of view so how to deal with the @1x font size in 2@x.

Pixel Problems

Now, we setup document size according @2x and @3x by multiplying canvas size, but what about pixel density? If your graphics are for responsive web or mobile app is web based and you need to stick with 72 pixel density to maintain its loading performance, you canât increase DPI or pixels directly in your document. Therefore, when you have 1px in @1x, it will look ½ in @2x and 1/3 in @3x, if you zoom in!

Ultimate Solutions

If we are going to conclude something from the aforementioned problems, we can easily say that working in @1x environment is the best option in favor of designers and design itself. Thus, we have to find the way to work in @1x environment, but export our work in @2x and @3x images with the least trade off memories by avoiding creating any other PSD file other than for @1x.

In due course, we have found out Photoshop scripting technique that export @1x images into @2x and @3x images directly using export command. Thus, a designer can enjoy all benefits of working in @1x and its DP and obtain all the performance benefits as well as excellent quality using this script.

Mindinventory has outstanding team of mobile application designers who know how to install this script in Photoshop and how to customize them so you can get:

  • ExportDocument2xPNG
  • ExportDocument3xPNG



For mobile UI designers, designing for retina display are an essentiality. Generally, iPhone and iPad icons are consuming big chunk of UI real estate and normal icon size if 60pxX60px. For retina display, you need to multiple those pixels double (@2x) or triple (@3x) in sizes. Thus, @2x becomes 120pxX120px and @3x becomes 180pxX180px icon.

Fixing Retina Display Graphics Issues for iPad App - Image 1

General perception of mobile UI designers is that if we want to create UI for a definite device/s, we need to set up canvas according to the screen aspect ratio of device. For instance, if we are going to create a retina display image for Nexus 9 tablet, we should create document with 4:3 ratio means 2048X1536 pixels of in its multiplication/division.

Unfortunately, creating big and bigger canvas hence images are not perfect solution for better workflow as well as quality. Let me explain it practically.

Zooming Problems

When a designer creates a big canvas, she has to zoom in and out frequently to see the whole picture (zoom out) as well as to see fine details of a small portion of the image (zoom in). Moreover, these trade off prove a bit ridiculous at productivity and designing experiences. Therefore, smart designers only create 1:1 zooming canvas size and handle work easily and quickly without losing @1x quality.

Memory & Processing Problems

In order to create @2x & @3X images, designers set up canvas size in 2 and 3 multiplications. This ultimately increases the numbers of pixels in multiplication. For instance, in @2x PSD document you will find four times high pixels than @1x PSD file whereas in @3x those are nine times high. This resulting in high memory size accordingly and handling such big scale documents prove costly for the computing processors, reducing performance of RAM, and occupy huge disk space in bonus.

Font Size Multiplication Problems

It is obvious that when you multiply the size of canvas and graphic elements accordingly for retina display designing, font size would be multiply in respect to its anchoring graphic elements. Unfortunately, multiplying fonts in retina or elsewhere is a sin at user experience (UX) point of view so how to deal with the @1x font size in 2@x.

Pixel Problems

Now, we setup document size according @2x and @3x by multiplying canvas size, but what about pixel density? If your graphics are for responsive web or mobile app is web based and you need to stick with 72 pixel density to maintain its loading performance, you canât increase DPI or pixels directly in your document. Therefore, when you have 1px in @1x, it will look ½ in @2x and 1/3 in @3x, if you zoom in!

Ultimate Solutions

If we are going to conclude something from the aforementioned problems, we can easily say that working in @1x environment is the best option in favor of designers and design itself. Thus, we have to find the way to work in @1x environment, but export our work in @2x and @3x images with the least trade off memories by avoiding creating any other PSD file other than for @1x.

In due course, we have found out Photoshop scripting technique that export @1x images into @2x and @3x images directly using export command. Thus, a designer can enjoy all benefits of working in @1x and its DP and obtain all the performance benefits as well as excellent quality using this script.

Mindinventory has outstanding team of mobile application designers who know how to install this script in Photoshop and how to customize them so you can get:

  • ExportDocument2xPNG
  • ExportDocument3xPNG


This blog is listed under Development & Implementations and Digital Media & Games Community

Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top