Level: ★☆☆ Tag: “iPhone App icon” “Icon Generation” “Startup diagram generation” “QiAppIconGenerator

A complete app requires multiple sizes of ICONS and launch images. Typically, designers design ICONS and launch diagrams for developers to use based on a set of rules provided by the developer. However, RECENTLY I made an app in my spare time, so as not to waste too much time of the designer, I only need an icon of the largest size and a startup picture. I wanted to find a ready-made tool to batch generate the required pictures, but failed to find it in the end, so I had to use Photoshop to cut out pictures of different sizes. During this time, the designer also changed the icon and the splash image once, and I repeated the cutting image, which took a lot of my time. Therefore, the author developed a MAC app — Icon & Startup Graph Generator (Generator for short) to improve work efficiency. The author introduces the use and implementation details of generators in two articles.

This article explains what generators can do and how to use them.

I. Introduction of generator functions

  1. Generate a complete set of regular pictures according to the original one key;
  2. Support to select the required platform rules;
  3. Support to select/input image export path;
  4. Automatically opens the exported images folder.

Platforms supported by the generator

As of the publication of this article, generator V0.3 supports 12 sets of platform rules.

  1. IPhone AppIcons (iPhone AppIcon Rule)
  2. IPhone LaunchImages Portrait (iPhone App Portrait LaunchImage Rule)
  3. IPhone LaunchImages Landscape (iPhone App Landscape rules)
  4. IPad AppIcons (iPad AppIcon Rule)
  5. IPad LaunchImages Portrait (iPad App Portrait Launch Rule)
  6. IPad LaunchImages Landscape (iPad App Landscape rules)
  7. Mac AppIcons (Mac AppIcon Rules)
  8. Watch AppIcons (Apple Watch App ICONS)
  9. CarPlay AppIcons (CarPlay App icon rules)
  10. Android AppIcons (Common icon rules for Android Apps)
  11. Android LaunchImages Portrait
  12. Android LaunchImages Landscape

Iii. Introduction of generator interface

Now that you know the basic functionality of the generator, take a look at the generator’s interface. The diagram below.

The generator interface is neat, with control elements arranged from top to bottom and left to right:

  1. Picture frame (host source picture)
  2. Platform selector (for selecting platform rules)
  3. Path button (for selecting image export path)
  4. Path text box (display the selected path, support direct path input)
  5. Export button (generates images in the destination path that match the selected platform rules and opens the path folder)

Four, the generator use steps

The steps to use the generator are very simple, and the icon generation process of the generator app is introduced here as an example.

1. Prepare source images

This generator is a MAC app that requires ICONS in 10 sizes, as shown below.

The maximum icon size required is 1024 x 1024. The author needs to prepare the maximum size image and drag it into the image box as the source image.

2. Select platform rules

The author needs to generate all icon images that comply with the MAC App icon rules, so select MAC AppIcons here.

3. Select an export path

At this point, clicking the Export button will cut the source image into the desired set of images. But before that, choosing an appropriate image export path will make it easier for the author to manage the generated images. In addition, students familiar with file path rules can directly enter the path.

4. Export the image

Click the Export button to generate images in the destination path that conform to the rules of the selected platform and open the folder in which these images are located for use.

Follow the above four steps to quickly get the ICONS and startup diagrams you need that conform to various platform rules. Below is an animation using the process for students’ reference.

V. Access to APP resources

Designers can click here to obtain DMG resources; Developers can get the project code from QiShare’s Github.

Xiaobian wechat: You can add and pull into “QiShare Technical Exchange Group”.

QiShare(Simple book) QiShare(digging gold) QiShare(Zhihu) QiShare(GitHub) QiShare(CocoaChina) QiShare(StackOverflow) QiShare(wechat public account)

Recommended article: algorithm small column: “D&C ideas” and “quick sort” algorithm small column: recursion and end recursion about iOS status bar, navigation bar several notes iOS avoid common crashes (two) algorithm small column: select sort iOS Runloop (one) strange dance weekly