1. Press-able elements should have at least 2 states, regular and pressed, the 3rd optional is in focus, used mostly for the listings, or when an element has on/off state. For example in camera apps, flash on/flash off which is different than pressed state which user sees only for a millisecond, on actual press.
2. Name the files properly.
a. According to screen size: naming should be identical, for retina display @2x is added to the naming. Every single element needs to be prepared for both screen sizes:
- btn_item@2x.png
- btn_item.png
b. For every different state of the same element:
- btn_item.png
- btn_item_pressed.png
- btn_item_on.png
- btn_item_off.png
- btn_homescreen_item.png
- btn_settings_item.png
3. Always design for the bigger screen
The latest generations of the iPhone, comes with a 640x960 px, 326 dpi retina display. The previous generation has a screen of 320x480 px, 163 dpi, (notice exactly 50% smaller). So let's go through the process of preparing the Close button from this screen:
a) Make sure to have both states, regular and pressed:
b) Select all the layers pertaining to the element you are saving, right click and Convert it to Smart Object.
c) Right click on the new Smart Object and export it.
d) Open the exported file, select the layer with the element you want to save.
- hide the layer effects in order to check the margins
- use the Direct Selection Tool to select the shape points
- move every side in any direction you consider appropriate, in my case I moved to the right the 4 points shown in pic. B below
- compare the right margin on the pic. A and pic. B you should see the difference in crispness.
f) When you are happy with the margins, bring back the layer effects, go to File > Save for web & devices, in file format choose PNG-24, preserves transparency and is optimized hit save, choose your location and name properly, in our case btn_close@2x.png:
g) now we need to save the same button for smaller screens, go to Image > Image Size, and choose resolution 163 instead of 326 press OK. Repeat steps d and f, skip the @2x suffix in the naming.
h) repeat steps d-g for the pressed state of the element if present.
Attention: All the files should be in the same folder. Avoid using text on the graphics, unless you have very good design reasons to do so (ex. impossible to replicate programmatically and important for the design style ). Do not use text on the reusable graphics on which the text copy may differ from screen to screen.
4. Prepare Guidelines for the developers with the instructions on file usage, fonts, colors, spacing.
Attention: If you provide general guidelines throughout the app, like text colors, general use of text, you do not have to be this detailed as i n the example above on every screen. Guidelines should be provided for every screen of the app. If you decide to skip this step, you cannot expect an exact implementation of your designs.
5. Zip the assets folder together with the guidelines in pdf format, the layered psd file of the screen with appropriate naming (optional), append the date(MMDDYY) to the archive filename, and send.
6. Be consistent in file naming. If there are changes to the UI, name the files exactly as the once to be replaced. Add the new date to the zip and send.
6. Be consistent in file naming. If there are changes to the UI, name the files exactly as the once to be replaced. Add the new date to the zip and send.
