Subscribe:

Enter your email address:

Delivered by FeedBurner


Create a Fashion Web Layout (PSD Template) Using Photoshop

68


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:
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
10

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)
13

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:
18

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
20
A new windows will pop-up. Here enter the following values: 40px for the first guide and 977px for the second one.
21
22
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.
23
Then apply the following layer styles:
24
25
My result:
26
Next using type tool (T) add some text for navigation using the following details:
27
Here’s my result:
28
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
29
30
31
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.
33
34
Change the Color
35
Change the opacity
36
My result
37
Next using type tool add a slogan for the header
38
And apply the following layer style
39
Than duplicate this text
40
Make sure that the duplicated text is selected on your layer panel and then go to :
Filter> Blur>Motion Blur
42
Make sure that the angle is set to 0 and for distance enter 90px
43
Here’s my result so far:
44
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.
45
Next I will select the “Image” layer, right click on it and I will select “Create Clipping Mask”
46
My result
47
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
48
Having layer “Header ” selected, grab “Gradient Tool” and here make sure that the color is set up to default – Black and White
51
Next click on the layer mask 52.jpg and then hold and drag with the mouse starting from the right side to the left
53
Here’s my result:
55
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%
58
Here’s my result
59
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:
62
Than using some small images I will create the thumbnails
63

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
64then apply a Gaussian blur (Filter>Blur>Gaussian Blur) with a radios of 37px
65 and place the layer (I have called Shadow) below the layer “Content”
You should have a nice looking shadow now.
67
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.
68

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!

11 Comments::

Hi,thanks for sharing, its very nice and amazing. And one more thing talk about you,you need a best and dreamily psd templates just click on it Easy download PSD templates

What a Great professional approach of your sharp mind! Truly a master piece!

Fashion Website Templates

That's good actually. Just a little bit of this and that and that would be the perfect. I admire your concept. It's hip and fresh!

A hip and fresh concept always make a good web design. It's a great idea to combine and experiment a bit on the lay out to get an outstanding result.

Each tutorial for web designing should have precise steps and brief introduction to the field first so the aspirants would have an idea what he's trying to learn.

When I learned HTML 3 a few years back, I enjoyed the power to publish content to the web where people from all over the world could access it easily. But as the web projects I developed became larger, I wished for a way to control design elements in a more centralized way.

This design is fine . But if you displayed the layer in every step then, it would be more better. I ' m getting problem to catch that.
with regards
Supratim Saha

I am very enjoyed for this blog. Its an informative topic. It help me very much to solve some problems. Its opportunity are so fantastic and working style so speedy. I think it may be help all of you. Thanks a lot for enjoying this beauty blog with me. I am appreciating it very much! Looking forward to another great blog. Good luck to the author! all the best!
nicejob thank you

Genius! That's a lot easier than the usual how to's. Steps are precise and really clear.

A good logo has great representation of your business' ideals. Bright colors mixed with neutral shades would give dimension to your piece.