This tutorial will walk you through the steps of a complete and beautiful Iphone app design.
Along the way, we’ll learn how to create nice Iphone and Apple inspired effects. We’ll play around with some blending options and integrate some custom graphics that will beautify the design.
In addition, we’ll take advantage of some fundamental Photoshop tools, such as the Rectangle Tool, Shape Tool, and Marquee Tool.
Bottom line:
Click on the image to see it full size.
Step 1: Set up the workspace
Okay ! The first step is to set up the workspace. Open Photoshop (for your help I’m using Adobe Photoshop CS5) and create a new 1300 × 950 px canvas.
The layout should be 840px wide. Now, draw 2 vertical guides at 230px and 1070px to outline the layout, like in the image.
Step 2: Create the background
I’m going to add a gradient to the background and then , I’ll add some noise to it to make it rough.
Create a new layer and add a gradient to it like in the image below:
We can’t add noise to the layer because it has Blending options applied. We should have a separate layer to do that. Create a new layer and merge it with the first layer. We now have a separate layer that supports the noise effect and has the gradient built in.
Now select the last one and add 1.5% smooth noise to it (Filter->Noise->Add Noise)
You should get something like this:
Step 3: Create the Header
Select the Rectangle Tool (U) and draw on top of the canvas a rectangle with a height of 50px and a width of 1300px. After that, apply some blending options to it like Gradient Overlay and Drop Shadow:
Now under the top bar add a 1 px white horizontal line to create a deeper effect between the header and background.
Above the header bar, draw another rectangle with a height of 25px and a width of 1300px as well, and make sure it’s white. Change its opacity to 7-10% for an Apple Iphone transparency effect!
On the right side of the top bar, we’ll add the navigation menu. Add some text buttons. As shown in the image below, I draw a white rectangle using the Rounded Rectangle Tool with a 5 px radius and make the “Start” text black. I then added some blend options to the button to make it look nice. The font used is Myriad Pro, Semibold, 14px.
On the left side of the header, add a logo using some text… I used a dummy text: My Iphone App. I used Myriad Pro as the source and added the same blend options as the button.
So far, the image looks good.
Step 4: Add a Large Iphone
I’m going to add a new Iphone 4G from our friends at DeviantArt.
Search for “Iphone 4 PSD” and you should have a list there. If you want the link, click here .
After downloading the Iphone, I resized it to 60% and hid the layer called “Reflection”. I allowed myself to change the Iphone screen image with a screen print from my website. 🙂
Step 5: Add some text
I added some text to the right side of the canvas using the Myriad Pro font and different fonts and colors.
We are halfway through the tutorial and the image looks like this:
Step 6: Creating an Iphone Navigation Slider
Ok, this It’s a good step. I’ll show you how to create a beautiful navigation like in fancy iPhone apps.
Select the Rounded Rectangle Tool and draw a rectangle with a 7px radius below the iPhone.
Now add the following options combination ions:
Voila!
Now add numbers from 1 to 4 like in the image:
Notice that the number “2” is black. It’s a reason for that. This will be the active button.
Select the Rounded Rectangle Tool (U) button and draw a small rectangle under the number “2”. Add the following scheme options:
The little iPhone browser looks like this:
Step 7
Step number 7 is about creating 2 buttons What every Iphone app website needs: ” Buy this app from Apple” and “Live app demo”.
Select the Rounded Rectangle Tool (U) and with a radius of 7px, draw a small rectangle below the text.
Add the following merge options to it:
Download this small Iphone icon from IconFinder, make it white and add it to the button.
Then write inside the button with Myriad Pro Font “Available Now at Apple Store”! The button is ready to click!
Duplicate this button and align the duplicate close to the original. Change the text with “Watch a live demo” or something like this and create a small “Play” button with the custom shape tool (U).
We’re almost there. We have to create a footer and the layout is ready. Check out what we’ve done so far:
Step 8: Creating the Footer Background:
Select the Rectangle Tool and draw a large rectangle at the bottom of the canvas. Add it to the same gradient used on the “Apple Store” button.
The footer looks fancy now, but we want it to look clunky as the background. For this you need to repeat the Add Noise process we used when we made the background: Create a new layer and merge it with the footer layer and apply the new layer the Noise filter (Filter->Noise->Add Noise – 1.5% ).You should get the following effect:
At the top of the footer, draw 2 lines: a white line and a black line, but the white line just above the white line to create a nice effect.
The footer background is finished and looks like this:
Step 9: Creating a “Subscribe” Box
Now that the footer background is ready, I want to show you how to create an Apple-inspired “Subscription” box.
Select the Rounded Rectangle Tool and with a 7px radius draw a rectangle as in the image below:
Now add the following merge options to the box:
The box should look like this:
Inside the box, we will create 2 fields and a submit button. Let’s start with the fields. Select the Rounded Rectangle Tool again and draw a small rectangle inside the box:
Styles the field by adding the following combination options to it:
Duplicate the obtained field and move it below the first like on the image.
The fields are ready. To make the “Submit” button, duplicate a field once more and place it below them. Clear the layer styles (Right Click on the layer and select “Clear Layer Style”) and add the following blend options:
The button is almost ready.
I wanted to add to the button a glow effect. For this I selected the layer (Ctrl + click on the layer) and with the Rectangular Marquee Tool (M) I subtracted the bottom half of the selection. I then created a new layer and filled the remaining selection with white. After that I reduced set the opacity to 10% and I got a nice glass effect for the button. This is the same procedure used on the background of the header.
Finally, add some text to finish off the box. The result looks good, don’t you think?
Step 10: Finishing the Footer
Now, with some text, fill in the left side of the footer. I thought of doing this by creating a “Features” area, with the app’s features. The small icons used are from the PixeloPhilia Icon Set, a beautiful set of free icons.
Don’t forget to add your copyright details at the bottom of the layer.
Footer is ready!
The final image is also done! This was a good tutorial and I was happy to write it for you. I hope you will also read it with pleasure! Take a look at the final design below:
Click the image to see it full-length.
.