How to Create an Iphone App Website in Photoshop

On 11 Sep, 2012 By With 7 Comments

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

sanjaykhemlani How to Create an Iphone App Website in Photoshop

Let’s Begin

1 canvas How to Create an Iphone App Website in Photoshop

Open your photoshop, set the width to 980px to 1200px

2 bg How to Create an Iphone App Website in Photoshop

From the files we downloaded earlier and drop it on the canvas, now select the Marquee Tool (M) and press delete.

3 header bg How to Create an Iphone App Website in Photoshop

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 How to Create an Iphone App Website in Photoshop

On the very top of the header, we will repeat the steps from above. Change the Opacity to 42%.

5 header border bottom How to Create an Iphone App Website in Photoshop

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 How to Create an Iphone App Website in Photoshop

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 How to Create an Iphone App Website in Photoshop

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 mask1 How to Create an Iphone App Website in Photoshop

 

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 How to Create an Iphone App Website in Photoshop

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 How to Create an Iphone App Website in Photoshop

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 How to Create an Iphone App Website in Photoshop

Grab the Marquee Tool (M) and select the bottom part of the canvas, make a new layer for this one.

12 mid content gradient How to Create an Iphone App Website in Photoshop

In Blending Options > Gradient Overlay set this on gradient color settings

13 mid content gradient settings How to Create an Iphone App Website in Photoshop

Here is the gradient settings for that.

14 mid content How to Create an Iphone App Website in Photoshop

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 How to Create an Iphone App Website in Photoshop

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 How to Create an Iphone App Website in Photoshop

Select Single Row Marquee Tool (M) and fill it using brush, color is #bcbbbb Opacity is 40%

17 footer complete How to Create an Iphone App Website in Photoshop

Add the logo and the navigation, font used was Arial Regular #555555 and set them to Uppercase

sanjaykhemlani How to Create an Iphone App Website in Photoshop

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.

7 Responses to “How to Create an Iphone App Website in Photoshop”