Make a vector style portfolio layout

Step 1

We start our layout with a new document of size 1000×750.
Apply the following gradient in the layer options of the background layer.

Step 2

Now in this tutorial instead of starting from the top we are going to start with the bottom , i.e the footer.
Using the pentool we are going to make a triangular shape at the bottom like so.

Step 3

Now we are going to make a few more such shapes. ( Each shape will be made on a new layer ).

Step 4

On each of these triangular ( mountains ) layer we apply the following gradient.

We get the following.

Step 5

Now using the elliptical marquee tool with add to selection option selected.

We make the following selection. Select a similar shape as below.

(TIP: Just make circles one on top of another , with the add to selection option will just mix all these circles together)

Step 6

Make a new layer ( SHIFT+CTRL+N) naming it snow . And with the paint bucket tool fill the selection with white color.

Step 7

With ( SHIFT+CTRL ) pressed click on all the four mountain layers.Remember to click on the vector mask thumbnail ( where the red arrow is pointing at in the following picture).

Step 8

The above step selected only the three triangular (mountain) layers.

Now with the layer named snow (which was made in step 6) selected press (CTRL +X) to cut the selection.

Step 9

We only need what we just cut and dont need the rest of the layer so we delete the layer named snow.

Step 10

Press (CTRL+V) to paste what was cut in step8. Using the arrow keys place the selection on top of the mountain layer.

Apply the following gradient

Our mountain footer is done.

Step 11

Now we make the header . Click on the elliptical marquee tool with add to selection option selected with 10px feather.

Using the same process described in step 6. We make a cloud shape as below.

Step 12

Make a new layer ( SHIFT+CTRL+N) . And with the paint bucket tool fill the selection with white color.

The above process is one of the fastest and easiest ways to make clouds.
Add logo and slogan to the cloud.

Here is what we have made up till now.

Step 13

For the navigation we use the rounded rectangle tool. (Radus 10px ) We make the following shape and apply gradient.

Add navigation

Step 14

Using the line tool with width 1px we make a divider and apply a gradient to it.

Our header is done.

Step 15

For the featured content box we start with rounded rectangle tool and make a rectangle with the following gradient.

Step 16

(CTRL+Click) on the layer we just created . Goto Select>Modify>Contract. And select 1px setting. Fill the selection with white color.
Again goto Select>Modify>Contract. And select 1px setting and press delete or cut the selection.

Step 17

Again using the rectangular marquee tool with 10px feather. Make a selection like so

Press the delete key or cut the selection. And you will get .

Step 18

Make a white rounded rectangle

Add a sample image.

Step 19

Now using the ellipse tool make two circles on either side like so.

Using the custom shape, make an arrow with background #879c4b

Duplicate the arrow we just made ( CTRL+J) and using the arrow keys press right key 3 times and set the opacity of this layer to 21%.

Do so on the other side too.

Add sample text and we are done with this part.

Step 20

For this part select the rounded rectangle tool again and make a rectangle with background #c7e8fc . And add sample text to it.

Step 21

Now we will make a login form. For this again use the rounded rectangle tool.

We get.

Step 22

Make another rectangle and apply the following gradient.

Add text.

Add copyright And we are finished.