Why are some of the images in this post went missing?
Designing an app user interface require different Photoshop skill than the one for editing photo. There’s a lot of tutorial out there teaching you how to removing red eye, removing wrinkles etc, but not so much on how to do a proper user interface design.
I’ve compile a list of tips and tutorial here to get you started to design user interface for application, particularly on iOS app.
If you are completely new in using Photoshop and designing user interface, this is for you.
* I’m using Adobe Photoshop CS6 on Windows.
* If you have Photoshop Creative Cloud, the below guideline will still be applicable.
Photoshop User Interface Navigation
If this is the first time you use Photoshop, the program user interface might look overwhelm. Here are some explanation on each section of the program UI.
This panel will appear on your left hand side by default, and it contains all the tool you can use to design your app. There are some tool which you need to familiar to design your app (Rectangle, Type, Pen etc), and some tool that are rarely use in design your app (Dodge, Spot Healing etc) but very useful in photo editing work.
You can expand some tools to show hidden tools beneath them. A small triangle at the lower right of the tool icon signals the presence of hidden tools. Just press and hold the tool to show the rest of the tool.
Create a new file and pick some tool and play around to see what it can do. I’ll show you some tool you will use everyday to designing an app.
This panel show what are the option available for the tool you are currently selected. Check out the options available for Type tool.
For Type tool, you change the font, font style, size, alignment and color.
Panel group that appear on the right section of the program UI is a group of multiple little windows that you can open in “Windows” menu dropdown. Each time you select a window from “Windows” menu dropdown, it will appear in this group.
Each window you open give you extra option you can do to the drawing element. Some windows is context sensitive to the tool you selected and the type of object you are currently selected.
The default windows in Panel Group loaded depends on your current selected workspace. By default, the “Essentials” workspace is loaded with some basic windows open, like “Layers”, “Color”, “Swatches” etc.
Each new window open will append to the panel group, and the more you open, the cluttered it get. If you find yourself struggle to find the windows you need to work on, you can reset back the panel group layout by click on the “Workspace” and select “Reset …”.
When you design app in Photoshop, it’s important to get the screen size right so the outcome of your design will appear exactly the same as on the device.
Here are the screen size in pixel for both iPhone and iPad, both non-retina and retina version. A retina device is a high resolution display that will hold 2 pixel for every point on the screen, while the non retina will only hold 1 pixel for every point on the screen.
You can create a new Photoshop document with the size as above, but I found it often useful to have multiple screen design in one single document. This help me visualize the user experience aspect of the UI design.
Retina and Non Retina
When you design an app, it’s important to make sure you design your app that will be fit nicely in both retina and non retina version of the device.
The iPhone 3.5 inch have both non-retina (iPhone 3GS and below) and retina version (iPhone 4, 4s), and iPad have non-retina(first, second, third generation, mini) and retina (4th generation).
To design for both retina and non-retina that will reuse the same artwork, first you design the app for retina version, then you scale it down to half to have your design in non-retina version. I’ll address how to properly scale your design to pixel perfect later.
This approach is often better than to design in non-retina version first and scale it up to retina version. In future, the non retina might be obsolete and not supported by the latest iOS, so we might as well get ourselves familiarize to design in retina version for now.
Layer and Group
In Photoshop, a layer is the single graphic element (rectangle box, text) and when multiple layer place on top of each other, it give you the final image (button). The following illustration explain it better.
The illustration shows a login screen design with two textbox and an action button. You can see how each of the textbox, the text inside the textbox and the login button is arrange in the “Layers” panel. In this design, there are 7 layer, with “Login” text on the top, all the way to the blue screen background on the bottom.
A layer on top will appear in front of the layer below. If you move the “Login” text layer to below “Login Button” layer, the “Login” text will disappear from the design, since the “Login Button” now appear in front and block the Login” text layer.
Another useful thing you can do in layer is to name your layer properly and group several layer together. This will become handy and helpful if your design become complex. It will help you better at locating the layer, and you can hide or unhide with just a few clicks.
In the illustration above, I’ve group each of the textbox and the text as one group (“Password Textbox” and “Name Textbox”), and “Login Button” as another group. You can do that by selecting the the layers you want to group by pressing Ctrl + G, or “Layer” > “Group Layers”.
Notice that the Password textbox is hidden in the design. To do that you just click on the “Visibility” button for that group/layer indicated by the red circle above.
Dimension, Grid & Guideline
When you design app for both retina and non retina device, it’s important to keep the dimension in even number to avoid decimal dimension value and blurry image.
* If you do not plan to support the non retina device, then you can skip this.
Take a look of the illustration below.
The red box with a dimension of 8×8 pixel will still remain sharp and clear even after scale it down to half. However, the 7×7 box will become blurry after resize.
To avoid this problem, we will set the “Grideline Every” to 20 and “Subdivisions” to 10 on the “Edit” > “Preferences” > “Guides, Grid, Slices”.
Then we have to enable the “Snap” option and “Snap To” > “Grid” under “View” menu. This will make sure our placement and size to snap into 2px gridline, thus making every element we create to be always in even number.
Let’s take a look at another example below.
The blue box with 6×6 is even number in dimension, but why it become blur after scale it down to half to 3×3?
Whenever a scale apply, it always scale it at a reference point of center, which in this case is happened to be at the intersection of a grid line on the original 6×6 box.
A 3×3 box will need to have the center that is 1.5 px from top left corner. To properly scale it down to half and still remain sharp, while applying the scale, select the reference point to top left like below (circle in red).
Look at the center of the new 3×3 box, it’s no longer stay in the intersection of the grid line, and appear sharp.
When you finish the retina design and begin to export each individual element (button, logo) to single PNG file, you should copy the element (layer or group of layer) to a new document, and use the “Image” > “Image Size” to resize instead of doing the transformation like above. This way you don’t have to change anchor each time you scale it down. I’ll show you how to properly export image in later section.
How to Draw Button
I’m going to show you how to draw a basic button, and during the process I will show you few technique and tools that you will use everyday you design UI.
Select a “Rounded Rectangle Tool” by press and hold the “Shape” tool to bring out the menu. Start draw the button by click and drag to form a long rectangle like below. Release when you are done.
When you create a shape in this way, you are pretty much guessing the width and height. If you know exactly what dimension to create, there’s a better way.
Delete the rectangle you just draw. While the “Rounded Rectangle Tool” still selected, click anywhere without dragging. A dialog will appear to let you specify the dimension and radius of the corner.
This function is available to every shape except for “Line”. Set the width to 200px and height to 50px. I’ll use the radius of 10px on each corner.
You might get the box with only stroke and a empty fill like below. Set the fill to any color and set the stroke to no stroke.
Next you are going to give the button some text. Select the “Type” tool and click somewhere in the red box, and type “Register”.
To center align the text and the rectangle, select both layer in “Layers” panel. Select the “Move” tool, and click align horizontal and vertical centers like below.
There are other type of alignment like top, bottom, left and right. There are distributed kind of alignment that will arrange 3 or more layer to evenly distributed distance. You should play around how each of this alignment work.
We are going to add some depth into the button. Right click on the rectangle layer, and choose “Blending Options…” to bring out the “Layer Style”.
You can do amazing stuff just by mastering this dialog panel. You should spend time to study some of it.
I’m going to give the box some color and depth. Select the “Gradient Overlay” and set the following.
Next, we are going to set the stroke to the following.
Remember in the previous section to keep the dimension in even number? I set the stroke to 2px for this retina design. When I scale it down to half for non-retina version, this value will become 1px and will still look proportionally correct.
Next I’m going to add some highlight on the button to make it more stand out. Do the following for “Inner Shadow”.
We are going to polish up the text. Select the text layer, then go to “Windows” > “Character”. In this window, we can set the font type, font size, the distance between each character, color and etc.
In this button, I set the size to 20px (even number), and capitalize all character. Once I’m done, I center align both horizontal and vertical again.
Next, bring out the “Layer Style” and add some shadow on it.
Our final image of the button now look more interesting than the previous one. Let say you have another button which you would like to have the same design, you can copy the “style” and apply to the new button.
Select the “Ellipse” tool and draw some circle.
To copy the style, right click on the previous blue rectangle, and select “Copy Layer Style”, then right click on the new circle, and choose “Paste Layer Style”.
How to Preview & Export Image
No matter how good and beautiful is your app design on your computer, you need to preview it on the real device. It will help you to
- know whether the text is large enough to view comfortably in small device
- know whether the button is large enough for a thumb to touch
- know whether the design is too small and you loss your effort on working on the small detail that didn’t matter
If you are on Mac, you can use Skala Preview or similar tools to seamlessly transfer your design into your device.
For my case, I use Dropbox to transfer the image between my workstation and iPhone/iPad. It’s free and easy to setup.
Once you’re satisfy with your design, it’s time to import each individual design element into separate image file to be use in coding.
To export as an image for the button design above, select both text and box layer, right click and select “Duplicate Layers…”, and choose “Destination” > “Document” to New.
Next, you need trim the rest of the area that is transparent so the image size will fit just the button. Go to “Image” > “Trim…” and make sure the following is selected.
Click “OK”. The button is now clean and without any extra space on each side.
To export to image, go to “File” > “Save as…” and choose the format to be “PNG”. PNG file format is more prefer compare to JPEG as it handle image like UI better. JPEG format is better for storing photo like real life landscape and scenary.
Since this button is in retina, append “@2x” at the end of the file name like email@example.com.
To export the image as non-retina version, go to “Image” > “Image Size…” and divide the dimension to half like below.
Do a final check if the design still look sharp and crispy. This is when the even number of dimension will help you save a lot of work in fine tuning the image for non-retina version.
Once you’re done, export the image to PNG, only this time you name your file like normally you do, like register_button.png.
Some Tools to Consider
While sometime it is better to design your own UI, other time you can reuse native iOS UI to design your app.
You should continue explore on topic like Layer Style, Path, Type, Font etc. These are the basic skill you need to know to create good app design.
If you don’t have prior experience in design app or use Photoshop, don’t expect you can design a good app in the first few hours of your learning.
And a good app design is more than just a beautiful UI you create in Photoshop! It’s all about User Experience. This is a huge topic by itself and I would suggest you spend sometime read this article.
Thank you for reading! Let me know what you think about this guide below.