Grafpedia

Hello my friends. Today i will show you how to create a nice portfolio layout.

It will have a nice 2.0 look. More and more webmasters are aiming to create simple layouts. The scope of web 2.0 layouts is that users will see faster what you want to offer

This is the preview of the layout

For this layout i will create a new document with the following size

I will choose Gradient Tool , and with for the start i will load a simple gradient from our

27.000 Photoshop gradients set

I highly recommend you to apply for a VIP account. The price is 9.95$ per month.
You can apply for a single month, and you can download all you can see, plus the new releases for the next 30 days

After you download our huge photoshop gradient pack you need to load a small set. To load the gradients you need to select Gradient Tool, then on the top of the screen, click on the small arrow to open the Gradient Picker
From the drop down menu choose Load gradients

Browse to our huge set of gradients, and choose any .grd file you want

I will not tell you exactly what file you should pick. Try to load a few to see better what you have inside
If you do now have downloaded our set with gradients, you can set your foreground color to the ones you see in this screen shot

To change a color simply double click on the small color thumbnail

Then with Gradient Tool, make a vertical line from the bottom of your layout to the top. Follow the arrow.

TIP : IF you want to draw a perfect vertically line hold down the SHIFT key from your keyboard while you make the line

Select Rounded Rectangle Tool. Change the Radius value to 6 pixels

Then create a simple shape on your layout with the following color : #212121

Be sure you have this layer selected in your layer palette

Press on CTRL+j to duplicate this layer

Right click on this last layer, and choose Rasterize Layer

Select Rectangular Marquee Tool, and make a selection like in the following image. I am going to delete the inside part of the selection. I will add another layer with a orange color ( this is not necessary. i want to show you better what i am going to do )

Then you have to be sure you have the rasterized layer selected. Hit the delete key from your keyboard
Then press ON CTRL+D to deselect ( hide the selection )

You can see the top navigation bar at the top. This is the result i want to archive. Now i will delete the layer with the orange color, because i don’t need it, on on the top navigation bar i will add the following layer styles

This is my result

Create a new layer – the easy way to create a new layer is by pressing CTRL+SHIFT+ALT+N. Select Brush Tool, and choose a Smooth Round Brush with 600 pixels )
You can adjust the size of the brush by pressing on the square brackets
“[" - to lover the size
"]” – to increase the brush size

On this new layer click one time on the right side of the layout

Then change the opacity value for this layer to 30 %

Select Rectangle Tool, and create a small shape like in the following image

For this shape you can add some layer styles

Now with Horizontal Type Tool, i will add some text

I will take the end result from the previous tutorial i wrote a few days ago: Create a web 2.0 business layout , and i will place the image on my layout

I will duplicate this layer two times. to duplicate a layer simple select the layer first in your layer palette, then press CTRL+J
I will place the duplicated layers under the main one. Then with Move Tool i will place them like in the following image

I will select the left image with my last layout tutorial, then i will go to Filter > Blur > Gaussian Blur

And i will set the radius to 1 pixel

this is my result

I will apply the Gaussian blur filter also for the image from the right side, and in the same time i will lower the opacity value from both blurred images to 80%

Now i will duplicate the image from the middle. I will create a mirror. To duplicate you need to press on CTRL+J after you select the right layer in your layer palette.
Go to Edit > Transform > Flip Vertical, then choose Move Tool , and press a few times on the Down arrow from your keyboard, until you place the duplicated image like in the following image

Select Eraser Tool, and with a smooth round brush i will delete the bottom part of the mirror

You can also lower the opacity value for this layer, and you can also apply a blur effect with Gaussian blur filter.
I will create a mirror also for the other images.

With Rounded Rectangle Tool, i will create some simple shapes in the middle of the layout

For both shapes i will add a simple layer style

This is my result

Over this shapes i will add some other images

I will select Pen Tool, and i will create a scarf

Then i will duplicate the layer ( press CTRL+J ) and i will change the color of the other shape to black
With Move Tool, i will nudge the shape on the right side

With Horizontal Type Tool, i will write some text, then i will rotate the text until i will have this result

I will select Line Tool, and i will set the weight of the line to 1 pixel

I will create 2 lines over my top navigation bar. i will use two different color. for the left line i will choose black – #000000, and for the right line i will choose #d9d9d9

I will select both lines in my layer palette

Then i will press on CTRL+E ( in this i will merge this 2 lines into a single one )

You can notice that our both lines transformed into a single line ( the most important part is that this line is rasterized ( is not vector anymore )
This is a good think sometimes.

This time it will be very useful for me, because i am going to use Eraser Tool, to delete the top part of the line and the bottom part.

I will choose a small smooth round brush ( maybe 30-40 pixels ) and i will delete the extremities of this line

I will duplicate this line several times, and i will place it between the menu items

This is my final result.

I hope you like it. Please register as a VIP and you will be able to download all the resources you see on the website, including this PSD layered layout