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.
Please download the following PSD file: Download.
Open this document in Photoshop.
Download this set of vector icons: Download 81 vector icons
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:
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:
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.
For this navigation bar i will use the following layer styles.
This is how my navigation bar will look like.
I will create a simple logo, on over the horizontal navigation bar i will place some buttons.
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.
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.
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.
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
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.
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.
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:
I will download the following set of vector icons: Download 81 vector icons
I will copy some of the icons over this layout
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.
Under the slideshow i will place also some Custom shapes
For the footer i will create a simple menu on the left side, and on the right side i have used the copyright text.
This is my final result.
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