: How to slice images as PNG for iOS app in Photoshop I have a finished design for my iOS app, but the developers don't use PS and asked me to provide all the UI elements as PNGs for retina

@Yeniel278

If you have access to Photoshop CC I'd strongly recommend you check out the new support for exporting assets - it's much quicker and easier than slices and allows you to go back and make adjustments to your assets without having to edit the slices again. All you need to do is label your layers in a particular way and let the generator do the work for you.

Vote Up Vote Down

@Angela777

You can try using codly.io you can convert your photoshop design into native code in seconds,just From Photoshop PSD to Code.

you can slice your PHOTOSHOP design automatically.
and generate assets for all application screens.and more

save 40% of of the whole application development timeframe.

Vote Up Vote Down

@Becky351

Is there a way to do this automatically? If not which is the best
method to do it?


You can absolutely do this automatically in Photoshop. You would use a Batch Action.


You'll need to perform the action once to record what you want to do,
then setup a Batch Action under File > Automate > Batch.


Just to expand on what MK_ said, Retina display images are shown as double the size, so if your image is supposed to be 56 x 56px, then your retina image should be 112 x 112px. So what you should do is create your Retina images first, then use the above batch action steps to reduce the sizes and create a set of images for the standard display.

Vote Up Vote Down

@Michele215

There is a semi-automatic way to slice images, that is using the Slice Tool.

You can use it to subdivide your file into blocks of icons:



When you use File → Save For Web & Devices... Photoshop will export each slice as a separate image for you:



This is a non-destructive method, so you can still make changes to the icons if needed and still use the same slices. There are a couple ways you could resize all the icons for retina/standard: either resize the whole image prior to saving or you could batch resize them all after they are already saved.

Whether or not your designer will slice up your images for you depends on the agreement you have in place with your designer. If it wasn't part of the contract, they aren't obligated to do so. I'm sure they'll be happy to do it for a fee :)

Vote Up Vote Down

@Ravi4787994

Usually designer will provide all slice images.
I am not sure we can make slicing automatically.an
Retina you can give images as per psd.
non-retina you need to give half of the retina size.
while saving images for non-retina - scale Retina images to 50% and save as png.

Vote Up Vote Down