Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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

share|improve this question
add comment

3 Answers

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.

share|improve this answer
add comment

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

share|improve this answer
    
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. Jun 18 '13 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 Jun 18 '13 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 Jun 18 '13 at 16:46
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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