Creating a Fashion Website Layout in Photoshop

AD

It’s Friday so it’s time for some web design. Today I have another web template tutorial for you. We will be making a Fashion and Lifestyle web template.

The idea of this design is to provide you with an inspiration for using brushes in web design. This website design is specifically helpful if you are creating a layout for a garments outlet, fashion and lifestyle store, beauty parlour or anything related, but I designed this web template for a boutique.  Its colors, layout, grid and patterns are designed to match the theme of a boutique. You can customize it according to your needs.

This is the tutorial and Designzzz will publish its PSD template next week. You can stay updated with the latest postings on Designzzz by Subscribing to our RSS or Following us on Twitter.

Brushes Used:

Final Result

Photoshop Tutorial

Step 1

Starting with the obvious, a blank document, size of your choice, resolution should be 72.

Stylish Photoshop Tutorial

Step 2

I choose this silk cloth pattern here because it seemed perfect for this kind of situation.

Tutorial of Web Template

Step3

After this we select different Floral and Swirl brushes. I select this brush and color is Solid Black.

Photoshop Tutorial

Step 4

After this I select another brush and then scaled the brush stroke a little downwards using transform option of move tool.

Tutorial of Photoshop

Step 5

We select other brush and transformed it in the same way.

Free Web Template Tutorial

Step 6

Select another brush, give it the same treatment.

Free Stylish Web Layout

Step 7

And again. You’ll soon know what I’m doing, just bear with me for now please 🙂

Tutorial of Fashion Template

Step 8

Same this here. We are almost done.

Photoshop Tutorial of Web Template

Step 9

Ok, no more suspense, I’m making a border on the sides.

Stylish Web Template Tutorial

Step 10: Result

After using a bundle of brushes, we get a very beautiful and attractive left side bar.

Photoshop Tutorial

Step 11

Voila!! We copied the left side and mirrored it on the right side using Edit>Transform>Flip command. Now we get a very beautiful result with the use of brushes on pattern.

Web Layout of Photoshop

Step 12

After all This, we are set to take on Logo. I’m making a dummy one. I selected Rounded Rectangle Tool and fill with Solid Black color.

Tutorial of Fashion Web Layout

Step 13

I selected Rounded Rectangle Tool draw half and fill with White color.

Free Template Tutorial of Photoshop

Step 14

Now once again we use a brush, and add a double stroke. Black over white and white over black.

Free Photoshop Tutorial of Web Layout

Step 15: Result

This is our logo.

Design Fashion Photoshop Template

Step 16

Now we come towards the navigation bar. Choose the Rounded Rectangle Tool, draw a square and set the transparency to somewhere between and 40-45 %.

Template Tutorial of Photoshop

Step 17

Choose this brush and draw, 40% transparency. You can see the result in the image.

Template Tutorial of Photoshop

Step 18

Select the Rounded Rectangle Tool and draw another box over the navigation background we just made. This new box should have the transparency level of 70%.

Free Photoshop Tutorial

Step 19: Result

We get a very elegant Navigation bar.

Tutorial of Photoshop Template

Step 20

Now we come towards the Featured Area. I used the Rounded Rectangle Tool with 40% transparency and drew a Shape for the Featured Area.

Template Tutorial of Photoshop

Step 21

I choose Rounded Rectangle Tool again and drew this box with White color.

Floral Brushes Web Layout

Step 22

After this we select the Ellipse Tool, draw the shape with 70% opacity  and create clip mask. You can create a clip mask selecting a layer in the layers panel, Alt+Click it and drag it over the layer you want it to mask. For more info on clipping mask, you can visit this page.

Web Template Tutorial in Photohsop

Step 23

I fill this featured area with  image, use a floral brush stroke to add the soul of the theme, them added some text and we got a decent featured area relevant to the template.

Template Tutorial of Photohsop

Step 24: Result

This is what we have made so far. Looks nice.

 

Tutorial of Photoshop Web Template

Step 25

Now we come to the content area. We select the Rounded Rectangle Tool and draw this shape.

Web Template Tutorial

Step 26

We added image and draw another shape on the right side, added a brush stroke on its bottom and typed the heading of this section, I used the word FASHION.  One box n the bottom to add some description.

Web template tutorial of Photoshop

Step 27: Result

After this we get a very beautiful and elegant result of Content area.

Stylish Web Template Tutorial

Step 28

Now come towards the Footer. I selected a Rounded Rectangle Tool and draw this shape with 40% opacity. This is a basic rule which Waseem always tells in his tutorials that we should always stick with one shape throughout the design. Doesn’t matter if its a simple rectangle box.

Photoshop Tutorial

Step 29

Same like Navigation bar we draw another over the previous one using Rounded Rectangle Tool and fill with a brush stroke added some text. Done!!

Free Design Stylish Fashion Template of Photohsop

Final Result

As you can understand, this is a template with a fixed height, you can make a it a stretchable one but it looks better the way it is.

Photoshop Tutorial

Designzzz will publish its PSD template next week. You can stay updated with the latest postings on Designzzz by Subscribing to our RSS or Following us on Twitter.

create free website wix below post

Further Related Readings

Comments
  1. Rana Waqar October 18, 2011 at 5:20 am

    jawad bro excellent. I have adopted it in my way. Kindly put the images link as you do with brushes in tutorials. and also add a wallpaper section to you resources 🙂
    Best of luck

    1. Jawad October 18, 2011 at 12:06 pm

      Hello Waqar,

      Sometimes we grab images from Designzzz library, I thought these images were not that important, you can use any stock but after your comment I’ve realized that I should provide links of everything. I’ll make this a routine from my next tutorial.

  2. Rana Waqar October 19, 2011 at 5:48 am

    thanks 🙂

    1. Jawad October 19, 2011 at 3:39 pm

      hello Waqar,

      WELCome 🙂

  3. Faisal khan December 20, 2011 at 8:10 pm

    boht acha hai.. great lakin mje kuch samjh nhi ai k apne brushes ko move kese kia or logo kese bnaya 🙁 plus ap har box ko exact positin mai kese dalte hain???

    1. Tayyab December 21, 2011 at 7:46 am

      I think you are just beginning in Photoshop, you should download this free and easy-to-understand eBook http://www.designzzz.com/download-ebook-photoshop-crash-course/

    2. Tayyab December 26, 2011 at 2:46 pm

      We featured a detailed tutorial about using pen tool here, have a look
      http://www.designzzz.com/photoshop-pen-tool-tutorial/

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved