Steps
2). Drag the icon images from Finder and drop them on the dotted squares. The icon image for 2x should be 40x40 pixels (40 pixels in width and 40 pixels in height). You calculate it by multiplying 20 by 2. Then, the icon image for 3x should be 60x60 pixels. Note that the icon image should be in PNG format.
Anyway, you can create an icon image with specific size by resizing the original one in Photoshop. You open the image in Photoshop then select Image menu and Image Size... A dialog will pup up and you set the width and height to the desired ones. At last, save it as a new file.
Explanation
With pixel-to-pixel mapping, the old apps made for the older device with lower resolution display would not function correctly on the new device with higher resolution display. The images might look tiny, text might overlap each other, and scrollbar might be thin, for example. Apple came up with the point-to-pixel mapping to solve the problem by scaling up the images and everything. There are a bunch of algorithms for scaling images smoothly. The image below gives you a clue of how an image is scaled.
You create (icon) images based on the device's screens. To accomplish this, you multiply the number of pixels of each image by a specific scale factor. The standard resolution image has a scale factor of 1.0 and is referred to as an @1x image. High resolution images have a scale factor of 2.0 and 3.0 are referred to as @2x and @3x images. Suppose you have a standard resolution @1x image that is 100px x 100px for example. The @2x version of this image would be 200px x 200px. The @3x version of this image would be 300px x 300px.
The 20pt shown in the image in Step1 above means that the size of standard resolution icon image is 20px x 20px.
References
https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
No comments:
Post a Comment