Deliverable format for iOS graphics

The graphics designer I am working with has given me the 3 options for delivering the graphics for the iOS app.

I want the delivered files to suit the following criteria:

  • Good quality (Ex: for retina display) that is also resizable
  • Lossless conversion as much as possible
  • Easy to produce PNGs of different sizes (for retina and non retina) for someone who is not well versed in creating graphics (a developer like myself)
  • Easy for any other designer to tweak if needed in the future.
  • Optional requirement: Editable using either Photoshop or Illustrator ( as those are the only 2 programs I currently own)

The formats are:

  • Illustrator file
  • an EPS generated from Photoshop
  • an embedded smart layer within Photoshop

Which of these formats would fit the bill based on the above criteria. Any feedback highly appreciated.

Thanks!

Answer

It sounds like you wish to export the PNGs yourself? If that’s the case, I’d highly recommend getting a Photoshop document (.psd) that is built only using vector shapes and layer styles, because these can scale non-destructively up and down with the document.

You’ll want to do your best to avoid bitmap layers, because bitmap scaling introduces artefacts that are definitely obvious when scaling down, and even more obvious when scaling up. There may be situations where you have no choice, due to the design, but those cases are usually pretty rare and should be the exception. If a bitmap texture is needed, that’s often best constructed as a pattern layer or pattern layer style, because the bitmap scale will be independent of the document (scaling many times up or down won’t cause compound artefacts).

I’d avoid Smart Objects as much as possible. Smart Objects created in Photoshop are rendered at their native size. This means that if you scale a Smart Object, it will be bitmap scaled up or down, even if your Smart Object was built from vector shapes initially.

If you want to automate exporting, then you have a few options (this means all the PNGs can be generated with the correct filenames in a couple of passes with minimal editing). I like building a sprite sheet of all the elements that need to be exported. This is usually a separate Photoshop document or documents with the elements laid out flat in a grid-like structure, with Photoshop’s slices set up to export everything. Another option is to use something like Layer Cake. Again, it requires some setup, but exporting can be automated.

I’d highly recommend not using Adobe Illustrator for exporting iOS assets for three main reasons:

  • It has some nasty antialiasing issues, like adding stray pixels. Stray pixels are a real issue for iOS design, because they often change the image size, meaning your Retina images aren’t exactly double the dimensions of your non-Retina images.
  • It can’t dither gradients, often resulting in visible banding.
  • Other assorted rendering that isn’t up to the same standard as Photoshop.

That advice relates to all versions of Illustrator, right up to Illustrator CS6.


Short version

What you want:

  • A Photoshop document that only uses vector layers and layer styles.
  • Maybe use bitmap layers, but pattern layers are preferable (if bitmaps are required).
  • Smart Objects can have some undesirable behaviour if you need to scale the document.
  • It’d be great if the main document(s) were accompanied by some kind of automated exporting, like using sprite sheets or an app like Layer Cake.

What you absolutely don’t want:

  • An Illustrator document.

Clarification: Illustrator is awesome. It has some great tools and is a brilliant choice for certain types of work. Final iOS image assets isn’t one of them (this is my opinion, if someone offers a different view on Illustrator for iOS design, double check they’ve actually designed iOS apps!).

Attribution
Source : Link , Question Author : dangytaggart , Answer Author : Marc Edwards

Leave a Comment