automatic generate all 1x, 2x and 3x images from one source image.
JavaScript Swift
Latest commit c274273 Oct 28, 2016 @swiftcafex add cn version
Permalink
Failed to load latest commit information.
Example
resources
src
README.md
README_CN.md

README.md

ios-image-maker

Automatic generate all 1x, 2x and 3x images from one source image.

This document also has 中文版本.

Installation

  • you need install NodeJS first.

You can visit https://nodejs.org or install it via Homebrew:

brew install node
  • ImageMagick

You also need install ImageMagick to generate images for iOS projects. You can also install it by Homebrew:

brew install imagemagick
  • Finally, install ios-image-maker by npm:
npm install -g ios-image-maker

Usage

In your iOS project folder, create a file named image-config.json like this:

{
    "items": [

        {
            "type" : "assets",
            "sourcePath": "./sourceImages/assets" ,
            "destPath" : "./image-example/Assets.xcassets"
        },
        {
            "type" : "icon",
            "sourcePath": "./sourceImages/icon" ,
            "destPath" : "./image-example/Assets.xcassets",
            "name" : "Icon"
        }
    ]
}

It defines how to generate images. type can be assets or icon, which represent asset images and app icon respectively. sourcePath and destPath defines where the source image and the generated images.

After created this image-config file. you can run ios-image command in the same folder:

$ ios-image

then you will receive console output like this:

Generating: sourceImages/assets/file.jpg to image-example/Assets.xcassets/file.imageset/file@3x.jpg
Generating: sourceImages/assets/file.jpg to image-example/Assets.xcassets/file.imageset/file@2x.jpg
Generating: sourceImages/assets/file.jpg to image-example/Assets.xcassets/file.imageset/file.jpg
Generating: sourceImages/assets/cloud.jpg to image-example/Assets.xcassets/cloud.imageset/cloud@3x.jpg
Generating: sourceImages/assets/cloud.jpg to image-example/Assets.xcassets/cloud.imageset/cloud@2x.jpg
Generating: sourceImages/assets/cloud.jpg to image-example/Assets.xcassets/cloud.imageset/cloud.jpg
Generating: sourceImages/icon/icon.jpg to image-example/Assets.xcassets/Icon.appiconset/Icon-App-20x20@2x.png
Generating: sourceImages/icon/icon.jpg to image-example/Assets.xcassets/Icon.appiconset/Icon-App-20x20@3x.png
Generating: sourceImages/icon/icon.jpg to image-example/Assets.xcassets/Icon.appiconset/Icon-App-29x29@1x.png

finally, it help you to generate all 2x,3x images accordinglly:

Examples

the example folder has an project which already configured. So you can also use it as a reference.