Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Create an Apple Inpired Website Layout in Photoshop

Create an Apple Inpired Website Layout in Photoshop


I will create a new empty document with the following size: 960x900 pixels. Of course you can use another value for the height.

Select Rectangle Tool, and create a shape on the bottom of the layout. I will use a red color for this shape, and later in this tutorial I will add a simple gradient.

Img

Now I will add a simple layer style:

Img

Img

This is my result so far

Img

I will add some images with a "30-inch Apple Cinema HD Display"

Img

On top of the layout I will create a navigation bar. I will make this navigation bar with Rounded Rectangle Tool.

Img

For this navigation bar I will add some layer styles

Img

Img

Img

This is my result

Img

Select this layer in your layer palette, and duplicate the layer by pressing the CTRL+J key combination.

When you have two layers, please select them in your layer palette, and press CTRL+E to merge the 2 layers into a single one.

Select Eraser Tool, and use a round smooth brush to delete the left side of the navigation bar.

Img

I will add our latest logo with Grafpedia on the left side of the navigation bar.

Img

Now we will work on the body of the layout. I will choose Rounded Rectangle Tool to create a shape on the bottom of the layout. I will use a blue color, but in our next step this color will be changed with

some layer styles

Img

For this blue shape I will add the following layer styles

Img

Img

Img

Img

This is my result so far

Img

I will add some icons from this set of vector icons: Universal vector icons, on the left side of the body.

Img

To add the icons download this set of icons: Direct download link, and open the vector .eps file inside Photoshop. It will look like in the following image

Img

To copy each icon in separate layer you need to make a selection around each icon with Rectangular Marquee Tool.

Img

Press on CTRL+C (copy), and then go to the layout document, and press on CTRL+V (paste), and you will see the new icons on a new separate layer. With Move Tool you can place the icons where you want.

I will add with this method another icon (pen icon) on the right side of the layout. In the same time I will add some text too.

Img

On the top right side (above the navigation bar) I will place 2 round shapes and another icons with a membership card access. In this area you can create a login box.

Img

On the bottom of the layout I will add some thin lines with Line Tool

Img

My last step is to add some images inside the LED cinema display monitors. This is my final layout.

Img



Author's URL: grafpedia
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: