Hi there! This will be my first web design tutorial written on this blog and also first post written in English :) I decided to write it in English rather than Polish, so I can reach more audience and – hopefully – help more people create their own iPhone related website :) But enough talking, let’s start designing…

Final Result

Here’s a preview of what we’ll be creating. Click on the image to see a full-size version.

Step 1 – Download 960 Grid System

If you haven’t already, download it from here and open 960_grid_12_col.psd. I’m not really going to stick to it very much, I just prefer to treat it more like a guide.

Step 2 – Setting up the Photoshop Document and Background

We need to make the document a little bigger, so go to Image / Canvas Size and change the dimensions to 1500 x 1050.

Ok, now we can create the actual background… I’m going to use a wood texture. You can find lots of useful hi-res textures in the web (ie. here). For this particular design, I’ll use this one. Download it and open in Photoshop, go to Edit / Define Pattern and click OK.

Now let’s get back to our main design. Double-click the background layer and go to Blending Options. Choose Pattern Overlay and select the pattern that we’ve just created.

Create new layer, set foreground color to black and choose Gradient Tool (or press G).

Create a gradient like shown on the image below. You can press Shift while creating the gradient to make the line horizontally straight.

Now, when we have the first shadow created, Duplicate that layer. Select the new layer and go to Edit / Free Transform (or simply press Ctrl + T). Right-click and select Flip Horizontal, now move it to the right side of the document.

Step 3 – Logo and Menu

Create a new group, Choose Type Tool and enter some company name – in our case it’ll be „iPhone Appplications”. Instead of overused Myriad Pro I used font called Kozuka Gothic Pro.

Apply this blending Options:

Gradient colors are #e1e4e5 and #8d8e8f.

Now we’ll create a floating-like effect. The easy way would simply be to duplicate this text layer and change size and distance values of the Drop Shadow effect. But to achieve a better looking result do the following: duplicate text layer and disable it’s blending options. On the layers window move this layer below the original iPhone Applications layer. Right click on the layer and select Rasterize Type. Now Select Filter / Blur / Gaussian Blur and change Radius to about 2,0. Next, move down the layer for about 8px and change the opacity to 55%.

Select Edit / Free Transform (Ctrl + T) and change the width to something like shown on the image below:

That’s it, now it’s time to create site menu. Create new group called menu and new layer called box. Choose Rounded Rectangle Tool (U), set Radius to 10px. If you want it to have the exact same size as mine, choose Fixed Size and set it to 580 x 50 px.

Go to Blending Options and set these parameters:

Gradient colors are #e1e4e5 and #8d8e8f.

Create new layer, select Elliptical Marquee Tool (M), and try to select area like on the image:

Fill it with white color and set opacity to 18%. Now holding Ctrl select ‘box’ layer, right-click on the selection and choose Select Inverse. Go back to the previous layer and press delete.

Use Type Tool to create the text of the main navigation. Set font size to 24 pt and in Blending Options check Drop Shadow (1px Distance and Size, 50% Opacity) and Gradient Overlay (values #181818 and #5f5f5f. Now our menu should look like this:

Step 4 – Header

Header is a great place to introduce a company slogan or a catchy intro title. First of all, we’ll insert a nice iPhone photo. There’s really no need to create an iPhone by yourself, as there are many great resources you can use. I’ll use iPhone PSD Vector Kit that I found on Smashing Magazine blog.

So insert the iPhone image, and duplicate the layer. Now we’ll create a shadow in a similar way that we did in Step 3 with ‘iPhone Applications’ text. Put the duplicated layer below the original one and in Blending Options set Color Overlay to black. Now select Filter / Blur / Gaussian Blur and set Radius to 7,3. Decrease the Opacity to about 75-80%. To make Shadow more realistic, choose Edit / Transform / Warp and try to play a little bit with the corners of the shadow:

Great, now it’s time to create a nice big slogan that will grab user attention. I used the font Rockwell. The first line has a size of 85pt and the second 43pt. Apply these options:

Gradient colors are #38393b and #0b0e10.

Next we’ll create a sleek aluminium-like download button. Select Rounded Rectangle Tool. Leave the Radius at 10px, change only the Fixed Size to 210 x 60 px and on a new layer create the rectangle. Modify it’s Blending Options:

Gradient Stops: 0% – #d0cbcb, 21% – #ffffff, 40% – #eff2f1, 60% – #c2c3c3, 87% – #d4d8da, 100% – #e7ecee

Create a nice shadow effect using the same method as we used with the iPhone image. Now put on some Apple or iPhone logo and a Download text. Voila, our button is ready.

Step 5 – The Main Content

We’ll try to achieve an interesting concave effect by playing a little bit with shadows, but first create a white 1px weight horizontal line and change Opacity to 20%. Duplicate the layer, move it one pixel down, set Color Overlay to Black and the Opacity of the layer to 45%. This will create a subtle engraved effect.

Now create a new layer, choose Rectangular Marquee Tool (M) and select area below our two lines. With large (around 400-600px Master Diameter, 0% Hardness and 50% Opacity) Brush Tool (B) create shadow, concentraiting mostly on the left side of the selection, directly below the Header Slogan.

To create a similar bottom of our main content, just duplicate the group (with the two lines and shadow layer) and move it about 440px down. Now move the white line one pixel below the black one. Select the shadow layer, flip it horizontally (Edit / Transform / Flip Horizontal) and try to squeeze it a little by decreasing the height in Free Transform mode. Also change the opacity of the layer to 75%.

Between the two shadows, with the use of Rounded Rectange Tool (40px radius), create a 215×215 px rectangle. Create new layer and insert new wood texture, similar to the background one (but not the same). Don’t worry about the size of it. Right-click on this layer and choose Create Clipping Mask. Now apply these blending options to the rectangle layer:

Now insert an iPod icon. You can also apply a slight gradient, and bevel and emboss to create a nicer effect. On new layer, using the technique described in Step 3 about Elliptical Marquee Tool, create a shiny glass impression. Our icon should now look like this:

Use Type tool to add some dummy content to the right of the icon. I used Tahoma 24pt size for the title and 14pt for the description. I also added Drop Shadow effect (1px Distance and Size) which really creates a cool result.

Step 6 – Footer

We’re almost done. Below the main content you can insert some less significant informations like copyrights, quick contact info, client login area and so on. Point out more important aspects by changing text size and weight.

I inserted twitter bird that i found on Hongkiat blog. If you want to achieve the same effect, set the blending mode for the layer to Screen, and add Inner Shadow (5px Distance and Size) and Gradient Overlay (colors #4a220b and #82411e).

Step 7 – Last but not least

It’s time to create that nifty light effect which you can see on top of the website. Create a new document with dimensions 1500×1050 px. If Photoshop didn’t make it by default, fill the backgound with white color. Select Filter / Render / Lighting Effects and set parameters as on the image:

Press OK and copy created layer to our main document, on top of all other layers. Set the blending mode for the layer to Linear Dodge. Now using Free Transform Tool (Ctrl + T) resize it to fit website the way you like it. Decrease layer opacity to 72% and fill to 69%.

That’s it! Our design is complete. Your final result should look like the following:

Final Thoughts

I hope you liked this tutorial and found it useful. If something was unclear or confusing or you found a mistake, don’t hesitate and leave a comment. I’ll try to help.

You can find more inspirational and great-looking iPhone applications websites on PixelApnea and Kreativuse.