Tomorrow Apple will launch the new iPhone 5. For sure more apps will be created for the app store. That’s why we think it is a good idea to create an iphone related website. If you are a company selling apps via the app store, and if you have more iPhone5 apps to feature, we show you how to create a nice looking layout where you can sell your iphone apps.
If you’re a member, PSD Layout for this tutorial can be downloaded at the bottom of the page.
Bellow you can see the full size layout.
For start open a new document and fill the background with the following color: #2b2b2b
The next step is to fill the background with a pattern. You can add the patter via layer styles. Please note that this patter can be found in the following pack of 815 Photoshop Pixel Patterns
if you don’t have a UDT membership you can create this pattern alone. Create a new document: 2px by 2px with a transparent background. With Pencil tool add a small 1 pixel dot. Then go to Edit > Define pattern. Choose a name and click OK. Then you can use the pattern in your layer style panel.
On the left side i will create another small shape with the same tool.
Then i will add the following layer styles.
With the same tool i will create a new shape, then i will use perspective tool to modify the look. You can find the perspective tool in Edit > Transform > Perspective.
Duplicate the first shape, and please go to Filter > Noise. Make sure you change the blending mode for this layer to Overlay. ( you can find the overlay blending mode on the top of your layer palette – You will probably see Normal. If you use the drop down menu you can find the overlay )
With Line tool i will create two thin lines.
Then i will duplicate both lines, and i will go to Filter > Blur > Gaussian Blur. You can play around with settings until you have the same result like mine. I can give you the exact values for the blur filter, but in this way you will not learn what this tool does.
On the left side i will create a indented button. I will use Rounded rectangle Tool, and then i will add some layer styles.
Bellow you can see the layer styles. Please note that you can download here almost 18.000 Photosho Layer Styles. You can find included also this layer style.
Here is my result so far.
With pen tool i will create a simple white shape.
I will use the Blur Filter, and then i will drag the layer under the previous ones.
I will duplicate all the layer for the slideshow navigator, and i will place them n the right side.
In the middle i will crate a simple shape. Click on the image to see the image full size.
With pen tool i will create a shape like this.
For this layer i will add the following layer styles.
With Rounded Rectangle Tool i will create a shape like the following one.
Right click on the layer inside your layer palette, and choose Rasterize Shape, and then delete the bottom part of the shape.
Duplicate this shape and go to Filter > Noise > Add Noise. In this window ad as much noise you want, but make sure it is not to much.
With Line tool you can add a simple 1 pixel horizontal line. I will use the following color: #8d8d8d
On the bottom of this slide show i will add another shape. It was made with Pen tool.
Then i will create a new shape. This last one was created with rectangle Tool.
On the top i will add a simple text logo.
On the right side of the header i will add a simple menu.
Under each text menu i will add some simple lines.
Then with Ellipse tool i will create a small circle on top of each line.
Also under the logo i will add a nice round shape. This was made with Rounded rectangle Tool, and i have used the indented layer style which i have used several times on this iPhone related layout.
With a few lines i will try to combine all vertical lines.
Now i will add some iPhone Icons made by JackieTran
Under each icon i have placed a simple shadow. To create the shadow is very simple. Select Rounded Rectangle Tool and create a dark shape, and then add a blur filter.
I will use one more time Rounded Rectangle Tool to create a simple dark shape.
I will use Pen tool to create a shape with a nice perspective look.
Bellow you can find the layer styles i have used.
I will create another shape like in the following image. Click on the image to see the result better.
Here is the layer style i have used for the last shape.
I will duplicate this layer and i will add one more time some noise
Then i with Pen tool i will create the following shape. Please use the same layer style as above.
Duplicate this shape, and select both layers in your layer palette. Once you have both layer selected press on CTRL+E to merge the layer into a single one. With Eraser tool delete the bottom part of the shape. make sure you have a smooth round brush selected.
With Rounded Rectangle Tool i will create a new shape. I will use the same indented layer styles
Here you have the layer styles one more time.
I will create a simple shadow. To create this shadow i recommend you to create a new layer, place it under the big shape, and then with Brush tool start drawing very smoothly until you are happy with the result.
I will add some dark shape, and some text.
Then i will add some icons.
Bellow you can see the icons placed on the right side, and in the same time you can see some lines between each category.
Bellow you can see the final result. I hope you like this layout.
Our members can download this PSD layered layout.