ArtBox7.com

Create a Fashion Web Layout (PSD Template) Using Photoshop

Hello and welcome to another tutorial, here at ArtBox7.com
Today I will create a fashion web layout, (psd template). The end result is not astonishing but it will help you to understand better how you can create a nice and clean web layout (psd template) using Photoshop. If you are an experienced Photoshop user, this tutorial is not for you instead our Complete Designer Set it will fit pretty well for your design needs
To create a similar web layout you will need the following:

• Some free time to read the tutorial
• Adobe Photoshop (CS2 or higher)
• Our Complete Designer Set

As you already know, our main website ArtBox7.com  is a designer shop dedicated to create  vector graphics , Photoshop brushes and vector icons. We have created a special pack for our tutorial readers, called Complete Designer Set. Basically this is a must have package for every designer because it’s filled with more than 5000 graphic elements (and more still to come). In this pack you will find most of the elements required to create  designs such as web templates, banners, t-shirt designs, flayers, brochures, textiles, etc.
With  Complete Designer Set you can create almost anything related to designs because in this package we have combined raster designs (must used for web templates) with vector graphics (used in print industry)
More than that by acquiring “Complete Designer Set” you will save time! To create this set we have worked more than 6000 hours, that’s almost 250 days (or 8 months working 24h/day)
You can read more & acquire “Complete Designer Set” here

Now let’s get back to our tutorial:

Step 1

Fire up Photoshop and create a new document with the following dimensions: 1020 X 1170. As a background choose: #e8e8e8

Step 2

Select rectangle tool and create a rectangle on the top of the document. I have used black #00000, than from Complete Designer Set use an swirl ornament (you will have hundreds of choices) and place it on the top of the document, and set the opacity to 36%
Next select Type Tool and write your desired text for logo. I have typed ArtBox7 (using black and red)

Step 3

Creating the search bar
Select rectangle tool, and create a shape on the top right side. I have used this color: #e1cdcd than select rounded rectangle tool (with a radios of 6 px) and draw a small shape using this color #e73c61.
Here’s my result:

Step 4

Creating the navigation
First of all I will add 2 guides to position better the navigation.
To add the guides, in Photoshop menu go to : View>New Guide

A new windows will pop-up. Here enter the following values: 40px for the first guide and 977px for the second one.

Next, using rounded rectangle tool, create a new  shape which will serve as a navigation. As a radios I have use 10px.
Note: Please make sure that you will position this shape between the guides.

Then apply the following layer styles:

My result:

Next using type tool (T) add some text for navigation using the following details:

Here’s my result:

Next, because this will be the main navigation we will need to find a way to mark the selected page. That’s why I will select again Rounded Rectangle Tool to add a shape with a radious of 10px. I will add this shape on the Home area and I will apply the following layer styles:
Color: #e33258

The navigation is finished now.

Step 5

Creating the Header
Select Rounded Rectangle Tool and create a shape underneath the header. Be sure to place it between those 2 guides. Mine has the following dimensions: 938px X 309px
Next from Complete Designer Set, select an pack with some vector elements and place one of them in Photoshop. Basically you will need do drag the vector from Illustrator in Photoshop.

Change the Color

Change the opacity

My result

Next using type tool add a slogan for the header

And apply the following layer style

Than duplicate this text

Make sure that the duplicated text is selected on your layer panel and then go to :
Filter> Blur>Motion Blur

Make sure that the angle is set to 0 and for distance enter 90px

Here’s my result so far:

The header is not looking quite well yet, that’s why I will need to search on my hard drive for a stock image. You should know that every designer should have on their hard drive – vectors packs, icons, Photoshop brushes, textures and stock images.
Basically when you have a project which needs to be done ASAP, stock vectors, icons and  Photoshop brushes are a golden mine because it can help you to create a nice looking design in a shorter time….
On our Complete Designer Set you will find more than 5000 elements (vectors, icons, Photoshop brushes), every element was been hand drawn by our design team and the entire process (to create this entire set) took us more than 6000 hours!
Well, I found that image and now all I have to do is to place it in Photoshop. Here I will need to make sure that the layer for this image is above the “Header: layer.

Next I will select the “Image” layer, right click on it and I will select “Create Clipping Mask”

My result

The result is quite nice but I will like to enhance a little bit the slogan, that’s why I will make sure that I will select again the “Image” layer and then I’ll go to :
Layer>Layer Mask>Hide All

Having layer “Header ” selected, grab “Gradient Tool” and here make sure that the color is set up to default – Black and White

Next click on the layer mask 52.jpg and then hold and drag with the mouse starting from the right side to the left

Here’s my result:

As you can see the image is too bright, that’s why I will select the layer “Image” and I will lower the opacity to 63%

Here’s my result

Next, I will add some thumbnails at the bottom of the header. I will select redounded rectangle tool with a radios of 20px,  I will set the color to: # e33258
Here’s my result:

Than using some small images I will create the thumbnails

Step 6

Creating the content area
Using rectangle tool I will add a white shape with the following dimensions 939px X 574px
On the top of the shape, I will add a shadow. Select Ellipse Tool  and add a similar shape
then apply a Gaussian blur (Filter>Blur>Gaussian Blur) with a radios of 37px
and place the layer (I have called Shadow) below the layer “Content”
You should have a nice looking shadow now.

Proceed in the same way for the shadow at the bottom of the content area….
To finish up this step I will add some images and some dummy text.

Step 7

Creating the footer
The footer is quite easy to create, in fact it’s similar with the top area and logo. I will select rectangle tool and I will create a black shape at the bottom than I will copy the logo, but I will make the text a little bit smaller and than from Complete Designer Set I will add an vector ornament. Here’s my result:

Conclusion: If you have followed me step by step you should have a similar web layout. The end result is not astonishing but instead you will understand better how to use Photoshop to create some nice and clean web layouts. Along with Photoshop I recommend Complete Designer Set!