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:

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:

fashion_website_psd

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!

ABOUT THIS AUTHOR

Hi, my name is Jeff and I'm the man behind ArtBox7.com. This blog was created to share my knowledge and in the same time to demonstrate the value of the Complete Designer Set All of our tutorials listed on this website have been created using our vector packs

  1. Julia Altermann
    November 6th, 2009

    There are some great tuts on this page. Unfortunately, there doesn’t seem to be a RSS feed or am I just not seeing the button? Would love to follow you. Please, give us an RSS feed.


  2. Stefan
    November 6th, 2009

    Hey Julia,

    I’ve just activated the rss and i have added an email notification as well :)


  3. Julia Altermann
    November 6th, 2009

    Sweet, Stefan, thank you very much. Already added as a subscription to my newsreader.

    Just one more tiny suggestion: if possible, add a tiny preview image to the RSS feeds so if you present a new layout tut, we can immediately get a feeling for the final layout. It’s just a matter of convenience.

    Thanks again, that’s really superb of you that you added this functionality to your site this fast.


  4. tutorial blog
    November 6th, 2009

    thank


  5. selcuq
    November 7th, 2009

    Menu bar and featured very nice.. Thx tut+


  6. designfollow
    November 8th, 2009

    great

    thanks


  7. kaos mecury
    November 9th, 2009

    thanks


  8. clippingimages
    November 11th, 2009

    WoW :) Awesome tutorial post to create web layout in PSD. Thanks for sharing this nice post.


  9. photoshop masking
    November 12th, 2009

    Very informative tutorial. Thanks for sharing.


  10. mahesh
    November 12th, 2009

    very good tutorial


  11. Aji
    November 13th, 2009

    Awesome !. I never thought that photoshop can do such tehnique to design template like that. Great tutorial…


  12. pawel
    November 22nd, 2009

    nice,thx


  13. Kevin
    November 24th, 2009

    I like ArtBox7 really much.

    This is such a great website….
    And it is not like other money orientated websites, the content here is really important.

    I am definitely bookmarking it as well as sharing it with my friends. :)


  14. video izle
    November 25th, 2009

    nice design,thank you…


  15. t.y
    January 7th, 2010

    very good
    thanks


  16. neeraj
    January 13th, 2010

    one of the best tutorials i’ve seen so far


  17. Projektowanie
    February 4th, 2010

    owesome, i’ve learned a lot, thx man!


  18. Luiseq
    July 2nd, 2010

    Owesome and simple. Thanks for this tut. Goold Luck!

Leave a Reply