Create a Sleek Textured Web Layout Portfolio in Photoshop

Hello my friends. In this tutorial i will show you how to create another web layout for a design agency where you can showcase your portfolio, or you can use this layout to create a wp theme.

Using an effective web design in combination with Crest SEO services, will allow your website increase it’s search results and traffic flow.

Step 1 – Download the Graphstock framework

Please download the following PSD file: Download.

Open this document in Photoshop.

Step 2 – Download the following resources.

Download this set of vector icons: Download 81 vector icons

Step 3 – Create a pattern

Open the pattern you just downloaded from above in Photoshop, and go to Edit > Define Pattern. Choose a random name for this pattern, and click OK.
After you save the pattern, you can close the document with the small pattern.
This pattern is seamless ( this means it will fill all your document without any lines, or strange alignment )
Open the Graphstock framework PSD. With Paint Bucket Tool fill the document with the pattern you just created.
Your document will look like in the following image:

Step 4 – Use lights to enhance your layout

Create a new layer and with brush tool ( use a big round brush ) draw a big white dot in the middle of the layout.

Then change the blending mode for this layer to overlay. You can change the blending mode for this layer from the top of your layer palette. The background for this website will look like in the following image:

Step 5 – Create a horizontal navigation menu

Select Rounded Rectangle Tool, and set the Radius to 8 pixels. Draw a shape where you will place later some buttons. If you need more buttons please make the shape wider.

Step 6 – Add layer styles for the navigation bar

For this navigation bar i will use the following layer styles.

This is how my navigation bar will look like.

Step 7 – Create a text logo

I will create a simple logo, on over the horizontal navigation bar i will place some buttons.

Step 8 – Use a big shape to create a jQuery slideshow

Right under the header of the layout i will create a shape where you can add a slide show, or another piece of information. I will use the same layer styles i have used for the navigation bar.

Step 9 – Use indented layer styles to create a layout with a 3D look

Over the slideshow shape i will create another shape. This time i will create a smaller one.

For this shape i will use and indented layer style.

Step 10 – Add vertical 1 pixel lines to mark off each button

On the navigation bar i will create two thin lines ( each line shoal have 1 pixel ). You can create these two lines withLine Tool.

Select both layers with lines in your layer palette and press on CTRL+E ( this shortcut will merge both layers into a single one ). In the same time both layers will be rasterized and you will be able to use Eraser tool ( with a smooth tip ) to delete the bottom an the top part of the lines. You can see in the following image my result.

Step 11 – Add natural lights under your menu to create a interesting effect

I will create a new layer, and i will use Brush Tool, to create a small white drawing.

I will create also another layer where i will make more drawings. For this last layer i will change the blending mode to Overlay

Step 12 – Create the body of your portfolio layout

I will create a big shape. This shape will be used as the body of your layout. I have used the same layer styles i have used for the navigation bar.

And then i will create a smaller shape, which will be placed over the big one. I have used the same layer styles i have used for the top slideshow layer.

Step 13 – Populate with content the middle of the layout.

I will place here some text with Horizontal Type Tool, and you will notice also some horizontal lines. I have used the same technique like on the navigation menu.

Step 14 – Create some round boxes to create featured areas

Right under the slideshow area i will create some sets of shapes. Here you can place some images with your latest work. in case you wan to use this layout for different types of websites, you can place here whatever you want.

I will add also some buttons

Here is the layer styles i have used:

Step 15 -Add vector icons on your portfolio layout

I will download the following set of vector icons: Download 81 vector icons
I will copy some of the icons over this layout

Step 16 – Add images on your layout to simulate 3D effects

On the top of the layout i will add a big image with one of our Product. : 3D Logo Creator

Please notice the trick i did on the top. Please look at the blue arrow. You need to cut the image in unique way to make the 3D box in a more natural 3d look. I will explain in one of my next tutorials how you can achieve great 3D images from 2D images.

Step 17 – Add two arrows for your slideshow

Under the slideshow i will place also some Custom shapes

Step 18 – Create the footer of your portfolio layout

For the footer i will create a simple menu on the left side, and on the right side i have used the copyright text.

Final result

This is my final result.

Register for a Graphstock premium account and download this PSD layout

If you want to download this layered PSD layout please register for a Premium account. This account will allow you to download all our resources for the next year.

Download if you area premium member from here

Or you can download from buysellgraphics.com