How to export materials for iOS / Android from Photoshop

With XD and Illustrator, you can easily export materials for iOS / Android all at once, but with Photoshop it is difficult to understand.
So, I tried to summarize how to export materials of each size for Android and iOS from Photoshop.

!! Note Although it
is possible to export, it is not renamed or divided into folders like XD and Illustrator, so you need to change or move it manually .

Steps to do it:

  1. Procedure to export

    Here is the artboard used this time. Follow the procedure below to move to the export setting screen according to the material you want to export.

  2. When exporting by artboard

    Select File> Export> Export Format

  3. Next

    Exporting by selected material Select the layer of the material, you want to export and select “Export format” from the right-click menu.

  4. Settings on the export format screen

    Set the details on the export format screen.

  5. Size

    Each size is as follows. (If the reference material being created is not 1x, you need to calculate the magnification.) This time, I will export the 2x size material.
    Android material
    ldpi: 0.75x
    mdpi: 1x (reference)
    hdpi: 1.5x
    xhdpi: 2x
    xxhdpi: 3x
    xxxhdpi: 4x

    iOS Material
    1x (Standard)
    2x
    3x

  6. Suffix

    The character set here is added to the end of the file name.

    You can set any character you like, but by default the set size is displayed after @. 
    (@ 2x etc.) This time I set the size to 2x, so it was written as @ 2x.

    If you export multiple materials at once, this setting is required because they are exported in the same folder.

    After that, set the material format etc. and press the export button It’s OK if the material is properly written to the specified folder!

How was that?
After summarizing the procedure this time, I realized once again that it is quite convenient and time-saving to export in a state where it is renamed and divided into folders with XD or Illustrator.

Close Bitnami banner
Bitnami