Another great week to start with awesome Iphone App website in Photoshop, since I’ve been messing around with different layout to different clients I re-created this one for the sake of tutorial.
Today we will create an Iphone App Website in Photoshop that we will eventually convert into HTML, so you better watch out π We will also use simple techniques to create a mock up and re-use some of our old techniques from the past tutorial.
You can download the PSD at the bottom of this tutorial!
Download these files first and let’s begin!
Things that we needed
- League Gothic from Fontsquirrel
- Iphone Image from Wikipedia
- Water Image from UniqueWedding
- Win7 wallpaper from PSDGraphics
- App store buttons from GraphicsFuel
- Twitter Bird from IconsArchive
- Custom Shapes from SmashingMagazine
- Icons from here (can’t remember where I download this one)
Let’s Begin
![1-canvas 1 canvas How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/1-canvas.jpg)
Open your photoshop, set the width to 980px to 1200px
![2-bg 2 bg How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/2-bg.jpg)
From the files we downloaded earlier and drop it on the canvas, now select the Marquee Tool (M) and press delete.
![3-header-bg 3 header bg How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/3-header-bg.jpg)
Next, create a new layer CTRL + SHIFT + N and grab your Marquee Tool (M) on the top select a 50px like height and fill it with #000000 and change the Opacity to 58%
![4-header-border-top 4 header border top How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/4-header-border-top.jpg)
On the very top of the header, we will repeat the steps from above. Change the Opacity to 42%.
![5-header-border-bottom 5 header border bottom How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/5-header-border-bottom.jpg)
Next, grab the Single Row Marquee Tool (M) and use brush to fill it, use #FFFFFF as foreground color and set the Opacity to 24%
![6-header-complete 6 header complete How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/6-header-complete.jpg)
After that, we will add the logo and navigation. Just simple text will do, for the logo we used League Gothic 37.9pt Regular and for the navigation Arial Bold 12.9pt both colors are #FFFFFF.
![6-header-slide 6 header slide How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/6-header-slide.jpg)
Drop the iphone image from the files we just downloaded. Next is to select Marquee Tool (M) and draw the screen of the iphone, fill it with #FFFFF.
![8-clipping-mask 8 clipping mask1 How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/8-clipping-mask1.jpg)
Next is drop the Win7 wallpaper, right click on that layer and select Create Clipping Mask and set the proper position from your iphone screen. Make sure that win7 layer is below the ipone screen we just created.
![9-header-iphone-complete 9 header iphone complete How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/9-header-iphone-complete.jpg)
Here is our Iphone screen with logo, we added a text using League Gothic 20.9ot and the custom shape from smashing magazine (files from above)
![10-header-iphone-content 10 header iphone content How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/10-header-iphone-content.jpg)
We added a couple of text, the title used League Gothic 39pt and the content was Arial Regular 13pt. We also added the app store button from the files above, make sure you extracted the button before putting it here.
![11-mid-content-gradient 11 mid content gradient How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/11-mid-content-gradient.jpg)
Grab the Marquee Tool (M) and select the bottom part of the canvas, make a new layer for this one.
![12-mid-content-gradient 12 mid content gradient How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/12-mid-content-gradient.jpg)
In Blending Options > Gradient Overlay set this on gradient color settings
![13-mid-content-gradient-settings 13 mid content gradient settings How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/13-mid-content-gradient-settings.jpg)
Here is the gradient settings for that.
![14-mid-content 14 mid content How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/14-mid-content.jpg)
After that, we added the icons and text. Icons are from the files above, text title is Arial Bold 19pt and the content is Arial Regular 13pt, both colors are #3f3f3f
![15-footer-bg 15 footer bg How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/15-footer-bg.jpg)
As for the tweets, font used was Georgia Italic 16pt #7f7f7f, twitter bird are the from the files and link color is #1161a9.
Next is the footer background, grab Marquee Tools (M) and fill it with #ebeaea.
![16-footer-bg 16 footer bg How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/16-footer-bg.jpg)
Select Single Row Marquee Tool (M) and fill it using brush, color is #bcbbbb Opacity is 40%
![17-footer-complete 17 footer complete How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/17-footer-complete.jpg)
Add the logo and the navigation, font used was Arial Regular #555555 and set them to Uppercase
![Iphone App Website in Photoshop sanjaykhemlani How to Create an Iphone App Website in Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2012/09/sanjaykhemlani.png)
And we are done!
Using simple techniques you can create amazing layout, you just need an idea and a goal to what to really wanted. Hopefully you can learn from this, to sharpen your skills you need to challenge yourself, and create different layouts.
Next stop is the PSD to HTML conversion of this bad boy, if you’re stuck on some steps let me know in the comments.