From the Diary of an App Developer: Photoshop to the SDK

If you're new to From the Diary of an Application Developer, this is a weekly column where I share my experiences, tips and overall expertise on application development with you. This is the sixth week, so you aren't too far behind, but you'll probably want to start out with the first article. By now, half of your team should have immaculate Photoshop mock-ups of each screen of your app, and the other half should be a programming ninja when it comes to the SDK. (If not, take some more time to revise those screenshots and another week or two (or three or four) to get to know your SDK a little better.) So, I think you're ready to delve deep into converting those static images into something resembling an application (by adding, let's say, some code behind it?)

Step One: Get Dropbox

Hopefully, you and your partner have been working on two separate computers. I should have mentioned this in the first post, but two computers allows for better collaboration and time management. So, if you're using two computers, install Dropbox on both of them. It will make this process go a lot smoother. Dropbox is an online application that helps you synchronize and share files. This is a very useful bridge between the world of programming and design. This is the main tool (other than the SDK) that we will use to go from Photoshop to App Store. So, unless you want to wait for Gmail to load your attachments, go and get Dropbox now.

Step Two: Slicing and Dicing Those Screenshots

You know those nice Photoshop screenshots you've been pouring over for the past few weeks? Well, now I want you to rip them apart. Sorry, didn't mean to make it sound so harsh, but that's what it's time for.

First, in Dropbox, make a bunch of new folders—one for each page of your application. Then, make sub-folders within these folders. Make as many as you need. For example, these sub-folders might be called “Images,” “Text,” “Buttons,” etc. Don't blow this step off. You'll thank me. Organization is very important if you want to work efficiently and end up with a great final product. Next, splice your Photoshop files into just buttons, text, images, etc. and save each one individually as a PNG within the proper Dropbox folder. Be sure to save the static images of your app's screens and all of those notes you've typed up regarding how the app will behave into these folders, as well. You want to make life as easy as possible for your programmer, because he or she is going to be working some long hours on this next step...

Step Three: SDK-ifying the Screenshots

This next step is devilishly straightforward: convert these static Photoshop images, using the components in your Dropbox filesystem, to program your app.

I'm sorry to say it, but there's not much help I can lend you here. It's going to be a lot of trial and error, a lot of Google searches and forum-hunting, and a lot of long nights. But, it will all be worth it in the end. Don't think of the app as a whole, but take baby steps. Don't say to yourself, “I can't believe I have 9 more screens of this app to program.” Instead, think, “Just finish this one page...nothing else exists besides this single page of this application...” You may think you're insane, but psyching yourself out during huge undertakings like this one is never a bad idea. While going through the screenshots and notes, you may discover something that you simply can't program. First, make sure you can't do it. Check Google, forums, the official SDK helper, etc. If you can't do it, tell your designer. They'll help you come up with a solution; it may be a compromise, or maybe you have to just scrap a feature and hold it off for a future update. There's no shame in that. You're going to want to come out with future updates to generate buzz about your app, anyways. The designer has it easy this week. All they have to do is some tedious work in Photoshop. Your programmer, on the other hand, well, just don't be surprised if they get a little bit cranky. Next week we will discuss more about the programming aspect of development.

Related articles