say you’ve been given a static ui design – a gif, jpg, pdf, or other format file – and asked to create a pixel perfect equivalent version, in your dynamic application.
so you take a look at the design, and go back to the ui generating code of your application, and then start making small, incremental changes, gradually moving your ui components closer to the design – without breaking any of the underlying implementation and code interactions.
- make a small change.
- preview the built application ui.
- visually compare to the static file provided by your designer.
- how close are you?
in a previous post, i promised you an example of how i optimize the last step in this process. here is the example, in recipe format:
Setup:
- Mac/OS X system
- modifying the ui for an iPhone application
- design provided as a pdf file
Requirements:
- Delta between the current state of the application design, and the static pdf
- Direction for the delta
- Pixel-level accuracy
- No budget for expensive, related, design tools
- No time to develop time consuming, related, design skills
Solution:
- Gimp is a freely available graphic design/image manipulation tool, which runs smoothly on a mac. Install gimp
- Gimp is scriptable – significant portions of the process can be automated. Automate as much of the process as possible, using script-fu (gimp’s macro functionality)
- OS X comes with some powerful, built in, graphic manipulation components. Pay special close attention to the built in components (eg: screen capture) and the included tools (eg: Digital Color Meter)
For my specific example:
Preamble:
- Installed Gimp
- Looked up the screen capture utility, and find this useful tidbit:
Command-Shift-4, then space, then click a window: Take a screenshot of a window and save it as a file on the desktop
- ran the following command:
bash: defaults write com.apple.screencapture name "Screencap"
standardizing the file names generated by the screen capture utility.
- wrote a script to automatically overlay two images in gimp
Process for generating the UI:
- Modify ui definition components in XCode.
- Display the result in the iphone emulator/tab to the emulator
- Screen shot of the emulator, only (Command-Shift-4, then space, then click a window)
- Tab to a command prompt open on desktop and run:
bash: /Applications/Gimp.app/Contents/MacOS/gimp -b '(script-fu-overlay "Design_file.pdf" "Screen Shot 2013-09-17 at 7.04.32 PM.png")'
- Visually inspect the two super-imposed images.
- Delete “Screen Shot 2013-09-17 at 7.04.32 PM.png”, and start over
note that i actually automated a bit more of the process – starting gimp and deleting the image afterwards is a simple shell script, for example. the pattern, and many of the steps, have come in handy for many other similar situations – most recently, when working on an automatic pdf report generator
ferretfarmer 