Hello my friends. For today I will create another web layout Tutorial in Photoshop and this time I will create a nice portfolio/showcase website. This web layout can be used as well for a business website or a website where you would like to showcase your services/products.
Please note that in this Tutorial I will cover only how to design a similar web layout in Photoshop. The PSD to XHTML Tutorial will be posted pretty soon on our website.
Here is my result
To create this Tutorial I have used:
Basic Tools in Photoshop (rectangle tool, ellipse tool, etc)
Let’s start it.
Open Photoshop and create a new document (Ctrl + N)
Next Select Rectangle Tool and create this shapes (I have counted them from 1 to 5). You will need to keep this image as referace, because it will be used for the entire Tutorial.
Shape 1: Color – #463528, dimensions: 1020 by 149px
Shape 2: Color – #cd8b31, dimensions 1020 by 266px
Shape 3: Color – #463528, dimensions: 1020 by 136px
Shape4: Color – #eeeadc, dimensions: 1020 by 317px
Shape5: Color – #463528, dimensions: 1020 by 233px
On shape 1 – on the left side I will add my logo (here you will need to add yours) and on the right side I will add a search bar.
To create it, select Rectangle Tool, color: #564130, dimensions 253 by 29px
Here’s my result:
Now to enhance a little bit the look I will some lines and I will use them as a stroke.
To do that I will select Line Tool, dimensions: 1020 by 1px, color #e79f3e. I will add to similar lines in these locations
Next between shape 1 and 2 I will create the navigation. I will select Rounded Rectangle Tool and with a radius of 35px
I will create this shape – dimensions: 874 by 50px
Then I will apply this layer styles:
You should have something like this now
Next on the layer palette I will select this shape and I will duplicate it
On your layer palette a similar shape (with the navigation) will be created. Clear the layer styles (right click on the shape and choose “Clear layer styles”), change the color to #867568 and I push the shape down for about 1px.
You should have something like this now
Do you see that smooth shadow at the bottom of the shape?
Next with type tool I will add the links. Over the HOME I will add a shape with Rounded Rectangle Tool and with a radius of 35px. This will serve as a rollover
Now select Rectangle Tool and create this shape. Dimensions: 145 by 77px, color: #cd8b31. On my screenshot I have used black just for demonstration proposes
Next I will select Pen Tool and I will make a triangle, than I will right click on the area created with the Pen Tool and I will choose “Make Selection”.
A window will pop-up, all you have to do is to press OK and you will have a selection now.
Press Ctrl + Shift + Alt + N (to create a new layer on the layer palette) then with “Paint Bucket Tool” fill your selection with this color #857568 and press Ctrl + D to deselect.
I will make the same triangle on the right side also. Here is my result:
Next I will select Rounded Rectangle Tool and I will make this shape. Dimensions: 121 by 31px, color: #ba7e2c and with Type Tool I will write “Get a quote now” Here is my result:
Now I will create “Featured Area”
With Rectangle Tool I will create this rectangle on the left side. Dimensions: 340 by 204px, color: #867568
and I will apply this layer styles:
My result
Then I will press Ctrl + T on my keyboard and from the bottom right corner I will flip the shape a little bit to the left
You should have something like this now
Next I will create another shape and I will use all of the above steps with one single exception. When you will need to flip the shape, choose the bottom right corner and flip the shape to the right. To make it looks better I will add also an image.
Here is my result:
Next I will select Ellipse Tool and I will create this shape
And I will apply a Gaussian Blur (Filter > Blur > Gaussian Blur) with a radius of 12px. I will select Rectangular Marque Tool and I will make this selection
Next hit DELETE on your keyboard, press Ctrl + D to deselect and lower the opacity to 25%. You should have something like this now
I think the shadow it’s pretty nice.
Now I will select Type Tool and I will add some text and then with Rounded Rectangle Tool I will create a “Call to action button” If you are wondering what layer styles I have used for it, I can tell you that I have used the same layer styles which has been used for navigation. All you have to do is to copy them.
Here’s my final result for Featured Area
Next on the shape 3 I will add some info’s links (please see our first screenshot in order to know where is shape 3) to create them I will use some vector icons from our freebies section and with type tool I will add the text
Next on shape 4, I will apply this layer styles
As you can see by applying this gradient I have created a nice shadow on the top of the shape 4.
Now using Type Tool I will add some text. My result:
For the shape 5 or Footer I will use Type Tool to add the content and Rectangle Tool to create some forms.
Here is my result
And here is a full preview for this psd template.
