In this tutorial, I will show you how to create a gritty portfolio layout. This layout will be perfect to use for your portfolio website. If you’re a member, you can download the PSD Layout at the bottom of the page.
This is the final result. Please click on the image to see better this layout
To start this tutorial you will need to create a new document. Use whatever values you want, however i recommend you to create a psd file with minimum 1100 pixels width. The background for this layout will be #252118
Create a new layer, and with brush tool ( with a big round brush tip ) add a single point in the middle of the layout.
Change the blending mode for this layer to Overlay. You can change the settings on the top part of the layer palette.
In the middle of your portfolio layout you can create a shape with Rounded Rectangle Tool. You can see in the following image the color i have used for this shape. This will be the header of this main part of the website where you need to create a slideshow.
Right under this shape i will create a new shape. The easy way is to duplicate the top shape and move the second one like in the following image.
On the footer of this portfolio layout i will create a new shape. here i will add some text with our copyright text, and if you want you can add also some social bookmarking icons.
I will return to the first shape created in this tutorial, and i will go to Filter > Noise > Add noise. In the Noise window i will add a small value between 3- 10. You can use any value you want.
On top of this shape i will draw some white highlights. I will use Brush Tool with a smooth round brush to create the following effect.
I will use Shape tool to create another area on the bottom of the layout.
On this area i will add some text with Horizontal Type Tool
Now i will create the notebook spiral. This is very easy. All you have to do is to create some small squares, and a line. Look on the following image to see how it looks,a nd then you can come with your own version if you don’t like this one.
I will write a simple text logo, and then some text on the main area of the layout.
With Rounded rectangle Tool i will create two buttons. the layer styles use are available later in this tutorial.
I will write some text over these buttons: View Website ” and ” View Portfolio ”
On the gray area i will create some indented shapes. Here you can add some images with your portfolio.
under each indented area i will create some buttons with Pen Tool.
I will duplicate each button and move it under each shape.
The next step is to add some text over each button
On the top of the layout i will create a simple sideshow.
Bellow you can see the layer styles i have used for the sideshow shape, and this layer style was used also for the buttons.
Then i will create a smaller shape, and for this one i will use the following indented ( pressed layer styles ) which can be downloaded if you own a membership.
Pressed layer styles
One of my last steps is to create the navigation of this portfolio layout
This is my final result. i hope you like it.
