3

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 and standard. The designer who originally created the design in PS stated that he doesn't do slicing.

  1. Is there a way to do this automatically? If not which is the best method to do it?
  2. Isn't it usual that the designer provides this per request?

Thanks in advance

Improve this question

5 Answers 5

Reset to default
4

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:

Sliced PSD

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

Sliced Images

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 :)

Improve this answer
3
  • Thanks for your answer. But how can I make sure that I have marked/sliced it accurately? I mean do you zoom in, also do you include the shadows? Just generally how can I make sure that I make it right without loosing quality or damaging it in any way? Thx
    – Daniel S.
    Commented Jun 18, 2013 at 16:32
  • My method for this instance was to surround each icon with guides. So yes, I zoomed in close enough to see the pixels, then held shift while dragging the guides so that they would snap between the pixels. Once all the guides were set, I clicked the Slices From Guides button on the Slice toolbar.
    – JohnB
    Commented Jun 18, 2013 at 16:39
  • I'm not certain what you mean by "Do you include the shadows?" since I don't know what your images looks like, but yes I would presume you should include the shadows.
    – JohnB
    Commented Jun 18, 2013 at 16:46
1

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.

Improve this answer
1

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.

Improve this answer
1

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.

Improve this answer
-2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.