Tutorial: Awesome Interface for iPad App
This is my first tutorial, i decided to try and see if it’s going to be useful to people. I think there is a lack of decent UI design tutorials out there. This one may not be the best, but it’s a starting point, leave your comments so i can improve it. The tutorial won’t cover everything, that’s why i have added download link with the PSD file.
This is what you’ll be creating (click for full view):
Step 1. We start on paper, it makes things easier. Sketch until you start feeling pain in your wrist, or at least when you find a decent concept.
Step 2. After you run out of paper and ideas, it’s time to go digital. Open your Photoshop and set up a new document, since we design for iPad, use these dimensions - 1024x768 pixels. Make sure your resolution is 72dpi.
Step 3. Use the Rectangle Tool to draw a shape (1024x53), give it a name like “Menu Bar” and apply the layer styles from the screenshot.
Step 4. Now we will create some grouped buttons, make a new group and name it “Button Group”. Use the Rounded Rectangle Tool (U) and draw a new shape (222x35). Then by dragging the Line Tool, draw the separators. After that select the Type Tool (T), type the button labels and then apply the styles below.
Step 5. Now we are going to add the Logo and the Search bar. For the logo again use the Type Tool (T) and write an App name that you like, also feel free to give it a style that you like. Then again with the Rounded Rectangle Tool (U) draw the search bar and apply the styles from below. (Here i used icons from this free icon set http://www.iconsweets2.com/)
Step 6. We are going to do the side bar by drawing everything from the sketch with shapes. After that we will add layer styles to everything, to give it more detailed look.
The easiest way to pick the same colors is to use the Eyedropper Tool (I). Select it and click at the color that you want. Below are the styles that you’ll need to apply.
Step 7. Draw a big white shape for a background and give it a drop shadow, that points to the left.
Now do another shape, but this time smaller with gray color, then give it a drop shadow that is pointing down.
Add some content and a scroll bar. The font is Helvetica Neue Roman, 12pt, Crisp, #454545.
Step 8. Add a headline and some content for the main content with the Type Tool (T), draw a rectangular shape for the article photo.
To add the article photo, import it and make sure it’s layer is above the layer of the rectangular shape. Right click on your photo layer and select “Create Clipping Mask”. It should work like this.
