• Create Images for iOS and Android automatically

    Android and iOS support using images in different sizes automatically. So to use this feature, you need to provide images in several formats. For Android (as defined in Android Developers Doc) it’s:

    • xxxhdpi: 4x (640dpi)
    • xxhdpi: 3x (480dpi) (75% of xxxhdpi)
    • xhdpi: 2x (320dpi) (50% of xxxhdpi)
    • hdpi: 1.5x (240dpi) (37.5% of xxxhdpi)
    • mdpi: 1x (160dpi) (25% of xxxhdpi)
    • ldpi: 0.75x (120dpi) (18.75% of xxxhdpi)

    For iOS (as defined in Apples Human Interface Guidelines) it’s:

    • @3x
    • @2x (67% of @3x)
    • standard (33% of @3x)

    Of course it’s best to get each file in each solution from your designer. But if you’re working on your own project, you might not have a designer. Nevertheless you should supply all these different image formats at least for performance reasons.

    As I have already a Mac OS shell script for Automatic creation of App Logos in different sizes, here is an updated version for all images.

    Preparations

    • Create a new directory and copy the script into
    • Copy all the @3x files into this new directory. It’s important that all files are named correct like “filename@null3x.png” to get it working.
    • Make sure filenames follow the android filename guideline which is stricter than iOS. Only use lowercase a-z, 0-9 and underscore. And in source files of course “@3x” is allowed as this part will be automatically stripped for Android.

    You could start the script (“sh script.sh”) without any parameters. The script process all files where filename ends with “@3x.png” and do the following:

    • check whether all filenames are valid
    • create new directories for Android (“drawable-xxxhdpi” etc.) and a single directory (“ios”) for the ios images.
    • create the files and save them in the new directories.

    In case you get an error message like “convert: command not found“, please make sure that ImageMagick is installed correct on your Mac. You could find more information in Automatic creation of App Logos in different sizes.

Leave a comment

If you want to share your opinion, leave a comment.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">