Apr
24
Have just added a new guide to our Knowledge base
How to prepare graphics for the development of iPhone application
[click the link above to access the most up to date version of the document in Injoit's Knowledge Base]
This might be useful for our clients - helps to save both their and developers’ time.
Posting current version here:
This is a guideline for Injoit’s clients on how to prepare graphics for us to develop your iPhone applications.
Please follow this as it will help to save lots of time for both Client and developers.
1. Size
please note the iPhone screen size is 480 x 320 pixels
we need all the graphics 1:1
in some cases (splash screen, game background etc) you need to prepare full size images 480 x 320
in other cases (moving elements, buttons etc) we need just the graphics for the element (no background) - but it should be 1:1, PNG and with proper transparency and alpha channel
examples:
- sun moving over the sky - we need 480 x 320 px background image + 1 image of the sun (1:1 size, cropped) with alpha channel and transparent background
- button with a highlight effect (or small animated element) - we need the images for the different states of the element - 1:1, cropped, transparent background and same positioning (i.e. different states of the same object should be cropped in the same way - different positioning in relation to top left corner will cause jumping or moving effects)
2. Format and compression
Usually it’s better to use PNG.
Please use the lowest number of colors and lowest quality which is acceptable for you.
For example, usually it’s not necessary to have 256 colors for PNG - save it with 128 colors (but check if it still looks good for you).
3. Positioning
All animated elements when supplied in a series of images should have the same positioning - i.e. distance from ‘zero point’ - top left corner - of the image - should be the same unless you want it jumping or moving.
4. Transparency
For non-background elements (buttons, characters etc) - please check you have your images with transparent background and alpha channel enabled (for PNG).
5. File names
Please organize file names and folders so that it’s easier to understand which element goes where and which are different frames of the same element.
When sending the new versions of the same files - please keep the filenames the same too (remove “copy” or “copy 2″ added by Photoshop)
6. 3D and OpenGL
There is a rule for OpenGL textures that the sizes should be a power of 2 - so when sending graphics for 3D objects - please make sizes a power of 2 ( 4 x 4, 8 x 8, 256 x 256, 1024 x 1024 etc)
7. Fonts
Here you may check which fonts are system for iPhone SDK and therefore could be displayed programmatically (no need to make graphics for text in this case):
8. Useful resources
The iPhone UI mockup PSD file is attached to this document. Please use it when making graphics in Photoshop.
Check out a great tool to create iPhone mockups:
leave a reply