ArtBox7.com

Create a sleek layout with Complete Designer Set from ArtBox7.com

Hello and welcome to our website!
Today I will create another tutorial here on ArtBox7.com.This is tutorial nr 8, if you’d like to see the previovs tutorials, please follow this link: Web Layouts Tutorials

This photoshop template (web layout)  can be used to create a  movie website, a blog , portfolio, etc… As usual, to create this tutorial I will use some resources from our Complete Designer Set.

Final Image Preview:

Let’s start the tutorial
Open Photoshop, change the background color to #30251f  then create a new document (CTRL+N) with the following dimensions:

Step 1 – Creating the logo

The logo is quite simple, basically I will select Type Tool (T) and I will add the name of the site (ArtBox7). The name of the font witch I’m using it is ” Bradley Hand ITC”. Next from Complete Designer Set I will choose some ornaments (as you can see we have some great ornaments over here) and I will open them in Adobe Illustrator

and then all I have to do is to drag and drop them in Photoshop. Here I will lower the opacity to 7-8%.

Here’s my result

Step 2 – Creating the navigation

Using ellipse tool create  an yellow shape (#fac12a), something like this:

Than go to: Filter>Blur>Gaussian Blur

Here enter 100 – 110 for radius

Here’s my result:

To create the navigation bar Next select, rounded rectangle tool with a radius of 5px. As a color choose # e7b224

My result:

Then apply the following layer styles:

My result:

(look at the navigation, you will see a nice border surrounding the navigation)

Next I will add some text on the navigation bar. For the text I have used this font: Helvetica with the following layer styles:

As you can see the navigation bar is somehow empty on the right side, that’s why I will add an button, so called “Call To Action” buttons. I will select Rounded Rectangle Tool with a radius of 5 px and I will create a similar shape:

Next I will go to (you will need to make sure that the layer is selected) : Edit>Transform Path>Warp

Here,  select the right corner of the shape and drag it a little but down (to touch the navigation bar)

then select the left corner and proceed in the same way

My result:

To make it looks better, add the following layer styles:

My result:

Using rectangle tool I will create a small shape and I will place it under the “Call to Action” button:

I will proceed in the same way for the right side and then using type tool (T) I will add some text. Here’s my final result for navigation:

Step 3 – Creating the header

Select rectangle tool and create a similar shape. Mine has the following dimensions: 938X250, and the color used is this one: #554121.
Make sure that you have selected this shape on your layer palette and then apply the following layer styles:

Next I will add some text (using type tool) and some images with our vector packs. Those ornaments which are surrounding our vector boxes are from our Complete Designer Set.

As you can see the header area is not looking to well, it’s boring and to dark. That’s why I will try to make it to looks better. First I will create some vertical tabs, I would like to have a dynamic header, with sideshow. I will select rectangle tool and I will add 4 vertical tabs. I have chosen this color: #785e18

Then I will apply the following layer styles (only for the last 3 tabs)

Next using type tool and I will add some text. To flip it vertically use Ctrl+T on your keyboard (free transform)

Next I will search on my computer for a texture image and I will place it on my web layout. By mistake I discovered that this texture it feet pretty well in this web layout, that’s why I will choose it for the background as well but I will lower the opacity a little bit (to 16%) and I will set the Blend Mode to Overlay.

I will duplicate this texture and I will place it above the header shape, than I right click  on the texture and I will choose “Create Clipping Mask”

Then I will make sure that the “texture_2 ” is selected and I will go to Layer>Layer Mask>Hide All

I will choose Gradient Overlay from the Tools Palette and here I will make sure that the default color palette is selected (black and white).

Then I will drag with the mouse on that area indicated in the screenshot.

If you’re not satisfied with the result you can click on Ctrl+Z to undo the change and to try again. When I’m satisfied with the result I will right click on the layer on witch I’ve added an layer mask and I will choose Apply Layer Mask

Here’s my final result:

Next I will duplicate the header_background layer, I will place it behind the original layer.

I will make it white then I will  move it a little bit down (1-2px) and I will apply a Gaussian Blur (Filter>Blur>Gaussian Blur). For radius I choose 10px

Step 4 – Creating the content area

With Pen Tool (P) I will create a triangle at the bottom of the header:

As a color I choose #b08925.

Proceed in the same way for the right side also….then using rectangle tool, create a shape (for the content area) and place it below the header layer….I have used this color#e0e0e0
My result:

Using rectangle tool create another shape above the content area layer. For this shape set the opacity to 41% and fill 0%

then apply the following layer styles:

My result:

Now select rectangle tool and add a similar shape (mine has the following dimensions: 239px X 206px) and apply the following layer styles:

Having rectangle tool selected add another shape (255px X 23px) using this color #e8b425 then apply the following layer styles:

Next I will select pen tool and I will create a triangle below the shape created previously. I will right click on the path created with pen tool, and I choose “Make Selection”

Then I will select paint bucket tool

and I will fill that selection with this color: #896d40

Select rectangle tool and create a white shape (mine has the following dimensions 216X138)

The next step will be to add some dummy text and some images and then to duplicate this shape  2 more times

Step 5 – Creating the footer

Select rectangle tool and create a similar shape. Please use this color: #ac851e

Then set the  opacity for this layer to 41%

With rectangle tool draw another shape using this color: #ac851e

Having rectangle tool selected add another shape, this time I have used black and I set the fill to 30%

Now it’s coming the tricky part…I will try to add a smooth shadow….that’s why I will use ellipse tool and I will create a small shape

than I will apply a Gaussian  Blur (Filter>Blur>Gaussian Blur) with 5-6px for radius.

Next I will select Rectangular Marquee Tool

and I will make a selection on footer (please do the same)

Then I will hit the delete button. Here’s my result:

To create the shadow for the right side, please follow the above steps…

Here’s my result:

The footer is almost finished, but I would like to add some few minor details. From Complete Designer Set I will add some floral ornaments:

then  I will set the opacity to 5-6%

With Type Tool I will add some text and with that the Footer finished as well as the layout

Final Preview For This Web Layout

I hope you have enjoyed this tutorial and I invite you to subscribe to our website (via email or twitter) because we will post high quality tutorials (especially web layouts) on regular basis starting from now.

Also I recommend you to acquire our Complete Designer Set you will receive thousands  of high quality resources  for adobe photoshop and illustrator such as: (vector packs, vector icon packs, and photoshop brushes packs) Totally more than 6000 elements in 400+ packs. Besides this resources you will receive all  of  source files for our tutorials with a commercial license . Buy our Complete Designer Set now!