Another day another tutorial here at PSDTemplate.com
Today I have tried to create a simple web layout (psd template) related to nature, flowers and why not agriculture.

Here's a full preview for this web layout

Let's start our tutorial.

01.Create a new document with the following dimensions : 1020 X 1060

02. Next we will change the background color. Grab the Paint Bucket Tool, fill the background layer with this color: #e3dec1

We will move to logo now

03. Select rectangle tool and draw a shape with the following dimensions: 1022X173 and fill it with black (#343434)

04. Next I have selected some ornamental vectors from my stock. With this vectors I will make a nice arrangement and I will setup the opacity for the vector elements to 23%.
Here's a preview

05. Now select Rectangle Tool (U) and add a shape (244 X 119) above this vector ornaments using the following color #a3cb31 . You should have something like this now

06. Next using rectangle tool I will create another shape (above our last shape) with this dimensions : 239X130 and then I will apply the following layer styles:

Here's my result so far:

07. The next step will be to add the company name and the tagline for our logo. For company name I have used PSDTemplate with the following layer styles

and as a tagline I have used Premium Photoshop Templates
Here's my result:

08. To finish the logo and the top area all I have to do is to add some text (using the Type Tool - T) on the right side of the logo.
Here's my result:

I will move to navigation now

09. Select Rectangle Tool to create a shape (1022X46)and add the following layer styles.

This shape needs to be positioned below our black shape created for logo. Leave 1px distance between these 2 shapes.
Preview:

10. Next add an effect for selected page - I have chosen home page. Grab Ellipse Tool (make sure that the background is set to white) and draw a small shape. Something like this :

11. Apply a Gaussian Blur (Filter>Blur>Gaussian Blur) with a radius of 15px. You should obtain something like this

12. On this step will add some text (using the Type Tool - T) for our navigation

13.Because our navigation bar it looks empty I will add a search form in the right side. Select rectangle tool and add a shape with this dimensions : 255 X 26 than apply the following layer styles:

Here's my result

Now I will add an extra area for our navigation. Here I will place only vectors to decorate somehow the navigation.(to make it looks good).

14. Select Rectangle Tool and draw a shape (under navigation bar) with the following dimensions : 1022X32. Fill it with this color : #c0de7a

15. Now I will add some another vectors. I have chosen some ornamental vectors also.

16. I will place the vector file in my document

and I will move it upwards till it will look nice

AS you can see 80% of the vector is under top navigation. You can play with it until you are satisfied with your result

17. Next I will duplicate this vector(Layer>Duplicate Layer) and I will move it (with Move Tool - V) a little bit to the right.
Here's my result:

18. I will repeat the same steps from step 17 5 more times and then I will set the opacity for each layer to 16%
Here's my result

To create this nice ornaments I have used vectors but if don't like to work with vectors you can easily transform them into Photoshop bushes - see this tutorial: Convert Vectors to Photoshop Brushes

Now I will move to header , this is really easy to create

19. Select Rectangle Tool and create a shape with the following dimensions: 1022 x 178. Use this color: #80ad0a

20. On the middle of the shape create a circle using Ellipse Tool

21. Select Rectangular Marque Tool and make a similar selection. (make sure that you have selected the layer where the circle was created)

22. Press Ctrl+Alt+I (inverse selection) and then hit Delete. You should obtain something like this:

23. Well to finish up the layer you will need to place a sunflower on the middle and on each side you need to add some text along with some vector ornaments
My result:

Main Content Area.

24. Select Rectangle Tool and draw a shape (from header to bottom - leave some free space at the bottom for a copy write notice ). You can use my dimensions - 969x563

25. Apply the following layer styles to shape created at step 24:

26. Grab Type tool and add some text for articles.
Here's my result so far:

I will move to the sidebar now.

27. Select again Rectangle tool and create a shape with the following dimensions: 275x508 and apply this layer styles:

All you have to do now is to add some images and some text. The main area is now finished.

I will move to footer

28. On footer you will need to add some copywrite info and to make it looks good you can add some vectors ornaments
Here's my result for footer:

The tutorial is finished now. I hope you enjoyed reading it and also I have the faith that I create here on PSDTemplate.com some tutorials that it will help you to learn more quicker Adobe Photoshop. Another tutorial it will come ASAP. I suggest you to visit PSDTemplate.com daily if you don't want to lose some of our premium downloads !

To download this file you will need to be a Premium Member. For only $8.99 you can become a Premium Member and you will be able to download all of our Premium Files.

Don't want to pay? Usually we release one Premium File per day and it's free for the first 200 downloads. Visit our website daily and you will be able to download all of our files for free....

Comments (8)

Write comment

Next >