A tool to generate Retina images for iOS for use with Xcode

Overview

I think that Retina images are often needed for iOS development. As many of you may know, Retina images need 3 types with " @ x1 "," @ x2" and " @ x3 "at the end of the file name, depending on the resolution of the terminal. is. Images with different resolutions can be created using Photoshop's batch function or Illustrator assets, but renaming files is surprisingly troublesome.

Therefore, it was unexpectedly convenient to create a simple tool that generates a file name with good resolution while changing the resolution, so I will publish it here.

Prerequisites

This tool down-converts 1x, 2x, and 3x images from 6x images (because the least common multiple of 2 and 3 is 6). In other words, you need to prepare a 6x image that is not actually used. Please refer to the following [Tips on how to make a 6x image](# Tips on how to make a 6x image).

Put the original images together in a directory (folder) in advance. Create a directory to store the generated images in advance. Since this tool is supposed to convert 10 or more images, it is designed to process files in such a directory at once.

The only image formats that can be processed are png and jpeg.

Also, I'm sorry, Java is required to run. If you don't have Java, please install it from OpenJDK. Since it is Java, it works on both Windows and mac.

Since it is not a GUI, you need to operate it from the command line.

Executable file

RetinaFraction6.jar

Execution method

Execution is done on the command line. Start "cmd (command prompt)" for Windows, or "terminal" for mac, and change to the directory where RetinaFraction6.jar is located.

java -jar RetinaFraction6.jar source directory name export directory name

Enter. (The directory name is [cmd](https://www.google.com/search?ei=C8IJXePSDYuMvQSq97KQBA&q=cmd+%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80 +% E3% 83% 89% E3% 83% A9% E3% 83% 83% E3% 82% B0 & oq = cmd +% E3% 83% 95% E3% 82% A9% E3% 83% AB% E3% 83% 80 +% E3% 83% 89% E3% 83% A9% E3% 83% 83% E3% 82% B0 & gs_l = psy-ab.3 ... 180651.181149..181854 ... 0.0..0.91.251.3 .. .... 0 .... 1.. gws-wiz.-93yQ_ITVvU) and [Terminal](https://www.google.com/search?ei=TcAJXf7WIY79rQHKjo2oDQ&q=mac+%E3%82%BF%E3% 83% BC% E3% 83% 9F% E3% 83% 8A% E3% 83% AB +% E3% 83% 95% E3% 82% A9% E3% 83% AB% E3% 83% 80 +% E3% 83 % 89% E3% 83% A9% E3% 83% 83% E3% 82% B0 & oq = mac +% E3% 82% BF% E3% 83% BC% E3% 83% 9F% E3% 83% 8A% E3% 83 % AB +% E3% 83% 95% E3% 82% A9% E3% 83% AB% E3% 83% 80 +% E3% 83% 89% E3% 83% A9% E3% 83% 83% E3% 82% B0 & gs_l = psy-ab.3 ... 430471.443777..444468 ... 0.0..0.146.2845.27j4 ...... 0 ... 1..gws-wiz ....... 35i39j0i4j0i131i4j0i131j0i131i67j0i67j0i131i4i10j0j33i21. You can easily enter it by dragging the folder to mb-JKgWSOdc))

Then, find all png and jpeg in the source directory, and put " 1/6 image @ x1 "," 1/3 image @ x2", and " 1/2 image @ x3 "in the export directory. Is exported as. Please note that the export file will be overwritten without saying whether it exists. Also, if the source image is a PNG-8 index image, it will be converted to RGBA.

Difference from Photoshop

You can also change the image resolution in Photoshop (Image Resolution in the Image menu). At this time, the image of the finished product will change depending on how the algorithm is selected. Below is a magnified view of a 6x image converted to $ 1/3 $.

Nearest neighbors are made by simply thinning out the images, so the jaggedness is noticeable. Bicubic has a color that emphasizes the outline around the image. Bilinear is the most beautiful button image used in the app, regardless of the photo.

The algorithm used in RetinaFraction6 is the area averaging method (Image.SCALE_AREA_AVERAGIN) if both the height and width of the image are multiples of 6, and bilinear (probably) (Image.SCALE_SMOOTH) if either is not a multiple of 6. I have adopted it. When converting an image to a fraction of an integer, the area averaging method and bilinear are the same picture. Even so, I purposely use the area averaging method because the conversion speed is faster than bilinear.

In other words, the image converted by RetinaFraction6 is the same as the image resolution reduction using bilinear in Photoshop (probably). Still, it's pretty easy to make three images from one image to @ x1 to @ x3 and change the file name appropriately.

The side effect is that PNG images created with RetinaFraction6 have a smaller file size than images batch processed in Photoshop (it seems that saving in Photoshop has copyright information written in the header part).

Tips on how to make a 6x image

It is a 6x image processed by RetinaFraction6, but it is beautiful if you create an Illustrator profile on the "Web". Create a picture (that is, a picture of @ x1 size) to be placed on the logical point size in Xcode (for example, 375 dots x 667 dots for iPhone 6 to 8) by snapping it to the point with the Illustrator web profile, and then" Export for the web. It is good to specify the size as 600% and export.

The trick is to draw a rectangle by "drawing outside the line". If you do this, the antialiasing line will not appear when you set it to $ 1/6 $, so the edges will be clean.

Other tips are "Illustrator web pixel" and [Google](https://www.google.com/search?ei=OLsJXbHGINKvyAPUx574BA&q=Illustrator+web+%E3%83%94%E3%82%AF% E3% 82% BB% E3% 83% AB & oq = Illustrator + web +% E3% 83% 94% E3% 82% AF% E3% 82% BB% E3% 83% AB & gs_l = psy-ab.3..35i39j0i4.29896.30031 ..30968 ... 0.0..0.93.176.2 ...... 0 .... 1..gws-wiz.Y6-D8kZaQgo) Please check it out.

Illustrator can output x1, x2, and x3 images, but it is troublesome to have to rename the file by yourself.

If you want to draw a 6x image in Photoshop, you should work with a grid spacing of 6 pixels. If you draw the sides of the quadrangle so that they stick to the outside of these 6 pixels, the image processed by RetinaFraction6 will be beautiful.

Program source code

Also [expose] the source code of RetinaFraction6 (https://drive.google.com/file/d/1j4KaOFeDA1hhAoFRZXHmgR7Q1bICAhLY/view?usp=sharing). I used Java just to get used to the author. sorry. It's a simple program, so I've written it under main.

Feel free to modify and redistribute it.

Impressions

After all, the biggest reason I made RetinaFraction6 is that it was a hassle to rename files all at once. You can change the file name all at once in another way, but it's easier to think about it because it will change the file name correctly while generating the file. Even if you redraw only one of the many images, you can use it just by updating the entire directory. I think you can do the same thing with a script using ImageMagick, but reading the original image only once may be an advantage over speed (?)

I like this tool quite a bit, but isn't it strange to make a 6x image?