In this tutorial you will learn how to design a simple website for your portfolio.
You can use it as a wordpress theme if you want.
If you want to download this PSD layout, join our VIP membership and you will be able to download our huge library of premium downloads.

We have over 50.000 items available for download: Layer styles, Photoshop gradients,  vectors, brushes, PSD layouts, etc…

Join the VIP membership.

To complete this tutorial it will be good to have the following sets :

1. 30.000 Photoshop layer styles
2. 27.000 Photoshop gradients

I will show you how to create the layer styles I will use, and I will give you all the color codes you need, but it will be good if you will have more options to test different colors.
For start you can open a new document with the following size: 960×900 pixels.
Select the background layer and press CTRL+J. This shortcut will duplicate the background layer. Select this second layer and add the following layer style.

With Rounded Rectangle Tool I will create 4 shapes like in the following image

For all these shapes I will add the same layer styles.

With Rectangle Tool I will create some  vertical shapes. The easy way is to create a single shape and then you can duplicate it several times.
Here is how I will place the shapes over my layout

These are the layer styles I have used

I will duplicate the small shape several times until I will fill all the top part of the layout. Please click on the following image to see a full size screen shot

Select all these small vertical shapes in your layer palette, and then press on CTRL+E to merge them into a single layer. For our VIP members I will leave this small vertical shapes in a separate folder so you can change the colors easily ) You can use a single layer style from our huge set of 30.000 layer styles. I am sure you will find one which you like.
The next step is to load the selection for the second white shape. To load the selection hold down the CTRL key and with your left mouse button click on the ” vector mask thumbnail “.

You will see a selection around your shape.

Select the layer with the orange vertical shapes, and press on CTRL+J. Photoshop will create a new layer from the selection you have and it will place it above the original layer. Press on CTRL+D to deselect.  Now you can hide the original layer , and you will have this result.

Create a new layer exactly over this one. The easy way is to duplicate the big white shape and to drag above the yellow layer in your layer palette.

For this shape I will add the following layer styles

This is my result so far

With Rounded Rectangle Tool I will create another shapes like in the following image

For these 2 shapes I will add the following layer styles

I will place these a random text and a image and it will look like in the following image

On top of the website I will add the logo with Grafpedia and the text for buttons

Here are the layer styles used for the logo

Now I will hide the big white shape behind the layer with orange vertical shapes. between the orange stripes you will see a dark line which look a lot nicer then the white one.

I will select Line Tool ( set the width to 1 pixel ) and draw some vertical lines

With Rounded Rectangle Tool I will create some buttons. All buttons will have the following layer styles which you can apply after you will create the buttons

This is how my button will look like

Now I will add fill the layout with text and a nice image with a globe. Please click on the image to see the full size layout.

On the middle part of the layout I will create a shape like in the following image

I will right click on the layer in my layer palette, and I will chose Rasterize shape, and then with Eraser Tool I will delete the top part and the left side of the shape until it will fit over the other shape.

I will add the same orange layer style I have used for the vertical stripes, and then I will use Horizontal Type Tool to add some text. This is my result.

I hope you like this tutorial and the end result.

If you want to download this PSD layout to learn better how it’s made please register for a VIP account. For 49 $ you will be able to download ALL our PSD layouts plus all our VIP resources: vectors, gradients, layer styles etc.  Join now.

The 650-393 pdf contains all the required study material including 70-685 dumps that you need to learn for 642-681 certification exam.