https://raw.githubusercontent.com/terwanerik/Retini/master/Images/Icon~256.png

[EN] Generating .png file @1x @2x from an original @3x using Retini

Since we are working on team. An iOS Developer codes. A designer designs (Except for a freelancer who do everything by himself/herself. LoL). Nevertheless, a problem we often found is the image sizes from designers are wrong refer from iOS Human Interface Guidelines by Apple.

Generally, we talk with the designer what are the correct sizes for @1x @2x @3x for each image. Then, designers export .png from .ai file and send you a set of images (@1x @2x @3x). However, the problem goes on because sometimes they sent you wrong image sizes. What will you do next? Walk to them and request a new one? Yeah, you can do it but this will make you and them are annoyed. So, what actually should you do?

Retini

Retini is an open source Mac application for generating @2x @1x from the original @3x image. Easy to use. Just download from https://github.com/terwanerik/Retini/releases or you can folk it and build from Xcode directly if you want. Let me shows you the example now. First, open Retini and you should see this user interface.

Retini

Second, drag an original image @3x (256*256 px) to Retini for generating @2x @1x.

original image (retini@3x.png) 256*256 px

Finally, the generated files @2x and @1x will be generated in the same @3x directory and the quality of original image is still perfectly as the developer who develop this app said

The original file will never be altered, the @2x and 1x are copies. If you drag a @3x file, the 1x file generated will be generated from the (original) @3x, so no double conversion loss.

@1x @2x @3x image result files

Tah-dah! We got all of correct sizes in each image already. In addition to, Retini also supports dragging multiple files and directories. It’s very convenient, isn’t it? You can read more about Retini in http://terwanerik.github.io/Retini/ or https://github.com/terwanerik/Retini.

We don’t worry about this problem anymore. Just talk to designers to export only once @3x size. Retini will save you the rest of them.

At the end, don’t be hesitate to ask me in the below comment if you have any question. Enjoy your coding!

Call to Action: https://www.facebook.com/itopstory/