Grafpedia

In this tutorial I will show you how to create an apple inspired website, very clean, and very attractive in the same time. This layout can be used very easy to showcase your portfolio, or your art work.
With small modifications you can transform this PSD layout into a wordpress theme.

Want to download ALL PSD layouts ? Join VIP membership.

Before you start this tutorial you will need the following set of vector icons : Universal icons. If you want teh direct download link please click here
I will create a new empty document with the following size: 960×900 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.

Now I will add a simple layer style:

This is my result so far

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

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

For this navigation bar I will add some layer styles

This is my result

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.

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

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

For this blue shape I will add the following layer styles

This is my result so far

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

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

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

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.

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.

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

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

If you want to download This layered PSD layout please join the VIP membership. For 9.95$ you can download ALL premium resources from Grafpedia including this layout.