Photoshop For iPhone Apps: Why You Need It

by Carter Thomas

“Imagination is the beginning of creation. You imagine what you desire, you will what you imagine and at last you create what you will.” – George Bernard Shaw

93% perspiration, 6% electricity, 4% evaporation, and 2% butterscotch ripple.

Or so says Willy Wonka when describing the process of invention.

I just got an email from Adobe, the makers of Photoshop, Illustrator, Dreamweaver, and countless other amazing programs letting me know that they are releasing Creative Suite 6 (CS6) in a few weeks. It made me reflect on the past two years and realize how integral these programs have been for getting Bluecloud to where it is today.

In short, they have allowed me to take my ideas and turn them into working realities. I became an inventor using these programs which in turn opened up doors I never knew existed.

If you’ve read my ebook (sign up on the right if you haven’t) you’ll see that I start the entire app process with the idea. Your idea is the most brilliant and wonderful thing you have – in your mind it’s perfect in every way and it rightly should be. It is simple and complex at the same time, it makes sense, it inspires awe and magic….everything. Ideas are the currency of the spirit and are the foundation from which all greatness is ever achieved.

WHAM! Enter reality. After you’ve had a chance to wax poetically about how you have the next Angry Birds, Draw Something, and Fruit Ninja built into one app, you realize that there is no way to get your vision out of your head. You can describe it and talk about it, but you see people’s eyes glaze over after 10 seconds. That’s frustrating. I know because I’ve been there…and I’m still there when I try to talk to people about some of the visions I have for apps. Talk is cheap.

A lot of people assume that the process of pulling and idea from your brain is mechanical in nature, that the only way to be successful is to have an amazing mind map and blueprint of every possible permutation the app could generate. And in a lot of ways that’s correct – there is nothing more important and more valuable than a document that you can hand to a developer that explains everything you want the app to do.

But how do you explain how you want the app to make the user feel?

How do you convey that sense of beauty to someone with a mind map?

Answer – you can’t. The breaking down of your idea to actions is the #1 way to create an awesome functional experience. But it’s not the entire story.

I’m writing this blog post because I’ve started to appreciate how important design is when undertaking the app process. I got an email from a reader the other day that struck a chord – there are a lot of people that want to get in the app game and are SO focused on the programming side of things, they lose the essence of success. The post I wrote about AppMakr helped me realize that there is a lot more to getting started with apps than the programming. The design is just as important for long term wins and is often much more tangible than learning to program.

So I’m making a case for everyone out there who wants to get in the app game to take a moment and re-focus for a second, to stop looking at the mountain of Xcode training and start thinking about the path to design. This is exactly how I’ve build my app business…and how I’m taking it well beyond my expectations.

How Photoshop Was Pivotal For Me

In the last two years, I’ve released a bunch of different apps. Some are jokes, some are money makers. Some were just tests that I have since terminated. The common thread between all of these, however, is that I had my hand in all of them.

As many of you know from reading this blog, I taught myself Xcode and Objective-C from nothing more than a web background, but I still hire out nearly all of my development work. I also taught myself Photoshop when I was in high school, making fake Absolut ads for my friends and using the program to create gradients on designs, something that was only for the professionals before Photoshop came along (believe it or not).

I had experience making four or five apps from 2008-2010 and used Photoshop to create screen shots and buttons. Before I started Bluecloud, I worked for an internet startup and went from managing the images on the website to managing the entire internet marketing side of the company. I am not lying when I say this – using Photoshop was the most valuable skill I ever had. I was one of three people in the company that could create nice looking email templates, update the website graphics, and create banners. I was able to build PowerPoint presentations that weren’t just spreadsheets pasted into tabs.

Most importantly, I learned how to take my ideas and put them on display for the world to see.

In October of 2011, I released my first major app, Alpha Combat. I had some help from designers and developers, but I managed all the deliverables and spent about 300 hours of my own time on it.

As you can see in the picture, there are a LOT of moving parts. Imagine if I had to go back to the designers every single time and say “can you tweak this?” or “I was really hoping you could make it a darker green.” I would have gone insane and the app would have suffered. Most importantly, it would have added time and money to the project. Because I could edit in photoshop, I was able to send the designers ideas I had using real design files and then edit files they sent me. It was awesome.

Another app I designed was BarSkillz, done entirely in Photoshop. I used some stock photography and put it together in a way that made it all work. That’s the beauty of it all – you don’t have to be a designer, you just need to be able to put designs together. Check out iStockPhoto or GraphicRiver to see what I mean. You don’t have to start from scratch – you can just modify amazing and cost effective designs that people are putting out every day for you.

The reason Photoshop is so important is because it allowed me to hand a developer a blueprint of the entire app functionality (X -> Y, etc) as well as a look and feel I was shooting for. Imagine if I went to a developer and said “I want to make a bartnending game where you make cocktails.” Do you think they would ever come back with something that looked cool and had the edge I was looking for? Yeah right.

I’ve saved thousands of dollars using Photoshop for my apps. The biggest benefit has been the ability to control my frustration and timeline – by being able to put something into a graphic format and modify existing files, I suddenly became a partner to the developers and EVERYTHING was better.

Photoshop gave me the ability to create apps without ever touching the programming side of the project.

App Elements That Will Always Need Your Love

You may look at this and say to yourself, “But I don’t want to be a designer. I don’t want to get full in with that side of things. I’m not even creative!” All those things are very good to know about yourself and you’re right – you might not be the one who builds the app’s design from the ground up. But here’s a list of assets that no matter what, you’re going to want to be able to modify.

1. Icon

Chances are your designer will send you an icon file that’s a layered PSD (photoshop format) and then a series of PNG files that are sized for all your needs – 512px for the iTunes Store, 114px for the Retina, etc.

Oops! You just realized that you want to change one tiny thing on the icon. Or you want to see how it looks with a blue border. Or with a different color. Imagine the liberation of being able to do all this on your own, then re-save on your own time?

The icon is one of the elements that is crucial in the publishing side of the process (often left up to the user aka YOU) and gives you the ability to update that without having to go through someone else. I actually did a release of Alpha Combat that only updated the icon.

2. Screen Shots

I just finished up a new game that will be live next week called Coconut Craze. It’s a fun, Fruit Ninja type game. The initial screen shot is on the left. The “photoshopped” screen shot is on the right.

Another benefit is that changing your screen shots can be a great way to test conversion. Sometimes having well designed screen shots can give you a big boost in downloads. You can control this whenever you want – it’s easy to update the images in iTunes Connect.

3. Your Website

When you upload your app you have to specify a website for the users to go to if they want to learn more or contact you for support. Some developers just put up a blank page or something really lame. Imagine if you now had the ability to upload something well designed? You can advertise this website to reviewers and make yourself look uber-professional.

Here’s the one I built for my apps that took me about an hour – Bluecloud Mobile. Basic WordPress template with some photoshop work. Boom. Done.

There are lots of other small little pieces that can always use some image work, specifically the presentation to the developers and testing out fonts, but you’ll see what I mean when you start working on it.

The Layers of Photoshop CS6 – Why It Is So Awesome

This quick blurb is less about the app process and more about how awesome the new CS6 is. They’ve taken some of the most powerful functionality in the world and baked it down for anyone to use. Here’s an example of what CS6 offers – mind blowing functionality as easy to do as changing font on some text. This is amazing.

I feel like the guy giving that presentation is about to start laughing at the end because realizes how ridiculous that program is :-)

Getting Started With Photoshop

What’s nice about Photoshop is that it’s been around for a lonngggg time and has hundreds of websites dedicated to teaching people how to use it. Most of these tutorials are all video based so that you can follow along with the guide and learn as you go. Some of the best resources you can use are:

YouTube – search Photoshop tutorials and you’ll see what I mean. One of the best places to start for beginners – free and rich with information.

Tuts Plus – part of the larger Envato network that specializes in taking professional design and delivering it to all skill levels.

Photoshop Lady – with a signature style, the Photoshop Lady is widely regarded as one of the best places to hone your skills.

Free iPhone Icon Template Set – here’s a link to a full PSD file of every size icon you’ll ever need for an iPhone.

Free iPhone Retina Photoshop Set – if you ever want to do professional mockups or use iPhone/iOS elements in a design, this is for you.

Free iPad Retina Photoshop Set – same thing for iPad

Final Thoughts

Photoshop is a great tool. It has saved me lots of money and given me a way to build apps without doing any real programming. These skills have given me independence and autonomy in an industry that is not native to me, and for that, I am forever grateful.

But beyond the left brained, executional and rational reasons for loving Photoshop, the most important is the way it’s helped me think. Working on creative aspects of the app project, I’m forced to see things in a new way and to push myself to create something even better. Even if I’m not trying to come up with new ideas, the byproduct of designing seems to be one that spawns new energy. Simply receiving designs from someone else allows us all to very easily just say “that’s good enough” and paste it into the Xcode project. Mediocrity doesn’t make anyone happy, so please don’t succumb to it.

Sometimes I stop and take a break from a two hour Photoshop session and look at what I just created and it feels awesome. It’s almost overwhelming to feel like you’re taking the vision you have in your mind and turning it into a reality. I begin to see the entirety of it all and that’s exciting. What Photoshop has given me is a way to take what’s in my head and share it with the world.

If you’re looking to get started with apps, I cannot recommend this program any higher.

Take It For A Spin

CS6 comes out May 7th but you can check out the features by clicking the button below. Definitely browse around, check out Photoshop and all the other programs they offer and see if that’s right for you.

Grab Adobe Photoshop and Start Designing Your Next App!

In the meantime, keep rocking! Leave a comment if you have any thoughts or questions about Photoshop (or any other awesome programs you use, for that matter).

Carter

{ 5 comments… read them below or add one }

Cindy April 25, 2012 at 6:00 pm

Great post Carter!..you are totally speaking to me because I want to visualize my idea for others rather than code the functionality. Is there something you recommend reading that tells us about number of frames we need for an animated graphic in an app and how much to vary each frame for a good effect? You have also revalidated the need for PhotoShop as a tool in one’s belt.

Garry Waller August 22, 2012 at 12:22 am

Hey Carter,
Happy to be directed to your blog. I keep searching but I can’t find the links to the iphone templates… I know- I know…I should have my eyes checked….

Garry

Carter August 22, 2012 at 1:18 am

Garry- no worries. There’s a link at the bottom of the text. Copy this link and you’ll be all set.

http://www.bluecloudsolutions.com/screenshots/screenshots_iphone.zip

Carter

Dominique November 1, 2012 at 12:33 pm

Hi Carter,
Great article, I have a bit of experience working in photoshop and I think my favorite part is the design process. The sites included above should be extremely helpful as feel I need to brush up my skills in this area and would love multiple tutorials on working through an app from start to finish . I downloaded the barskillz app was well, should hopefully inspire me to produce some of my own apps in the future!

Carter Thomas November 5, 2012 at 11:41 pm

Hey Dominique,

Right on. Those tutorials should definitely help. Hopefully you’re writing us all tutorials soon!

Good luck,

Carter

Leave a Comment

Previous post:

Next post: