Create an Elegant Boutique or Garment Industry Web Design


This is a Photoshop web design tutorial for anything related to fashion industry. I have kept it very clean. In the HTML/CSS tutorial of this design, I think I’ll play with jQuery a little.

As usual, this is a series, and next Friday, you’ll find this design’s PSD template download, and the Friday after that, I’ll publish its HTML5 tutorial.

You might also like: Creating a Fashion Website

Final Result

This is what we are making. (Click to Enlarge)



A blank document, size of your choice, resolution 72. We do this every time :)



Choose Pattern Overlay from Layer Styles, and apply the following pattern on plain white Background.



Now select Color overlay and apply white color.



After applying the two Layer Styles, you should have this result.


Step 5

After this we select a shape, a simple triangle. Draw and transform it. Duplicate it like I have done below.


Step 6

After this we write logo text. I used LoveLeaves font for this text. You can see we have a fine header in the making.


Step 7

Now I have added some navigation bar links, you should experiment with a few fonts. And you can also make a mouseover effect, I didn’t make one because I ought to make this design a very clean one, besides we have a pattern in the background, so hover effect isn’t that necessary.


Step 8

Now its to make the “Featured area”. Choose the Rectangle Tool and Draw a rectangle.


Step 9

Give a gray stroke of 2px only.


Step 10

Add a picture into the featured area. You can use Clipping Mask technique to cut off the unnecessary parts. You just right click on the shape layer and click Create Clipping Mask.


Step 11

Now let’s create a sidebar for the featured area. This sidebar will thumbnails. Choose the Rectangle Tool and draw similar shapes. Same 2px stroke should be suitable here as well.


Step 12

Add picture into featured sidebar and use Clipping Mask once again.


Step 13

I’m making 3 thumbnail blocks. They look clean yet classy.

Image 1, Image 2, Image 3


Step 14

By now, we should have this.


Step 15

These days, most of the websites have blogs installed in them. Blogs help them to create a readership i.e. client-base and also gives them a place share experiences.
Now we are making a place to share the latest post from the blog. Choose Ellipse Tool, draw this shape and fill with color.


Step 16

Write down something welcoming.


Step 17

Now make a rectangle and add some dummy text. I used the same gray color 2px stroke we used earlier, and filled the box with solid white color.


Step 18

Time for “Read More” button. Choose the Rectangle tool and apply this Gradient. Go to Layer Styles>Gradient Overlay.


Step 19

And a little stroke.


Step 20

Here, we have a Welcome area. You can also use this to describe the company and don’t feature blog article here. This is just an area, what you put in it, that’s your choice.


Step 21

Now let’s create a few quick links. I’ll call them “Products area”.
Choose Rectangle tool and draw the shape with same gray stroke and white color.


Step 22

I created a heading background. I made another rectangle on the top of the box.


Step 23

I selected a shape from Custom Shapes Tool and made a few bullets. You can (and should) experiment with other bullet styles.


Step 24

Our result so far.


Step 25

Theoretically it is now time for footer, but let give you a tip, never place footer should always be following images, not text. If we place footer now, we would text material above footer, not good!.
So let’s make a catalogue here. Draw rectangles, gray stroke and add images.


Step 26

After some clip masking, I got this.

Image 1, Image 2, Image 3


Step 27

Now we have images in the end


Step 28

Now we’re ready for footer. Choose Rectangle Tool, draw a cut-through shape, fill with color and add some noise.


Step 29

Now just add Categories, links, contact and social media icons (and some shameless publicity of designzzz and myself) and our footer is complete.



We did it! (Click the image to view in full size).


create free website wix below post

Further Related Readings

  1. saya May 12, 2012 at 11:35 am

    I like the fact that in fashion design website work designer can go beyond what is normal and in the box, and still keep it simple and focused

    1. Jawad May 22, 2012 at 10:49 pm

      Indeed you are right, that’s the reason I selected this topic, when I had made a design earlier. It gives you so much freedom.
      Thanks for the comment.

  2. faisal khan May 12, 2012 at 9:05 pm

    jawad bhai??? shameless promotion of yourself??? you call this talent shameless??? i dying to learn it and i don’t even know how to use photoshop 🙁 bht na-shukray hain ap..

    1. Ayaz Malik May 13, 2012 at 3:41 pm

      Dear Faisal, u don’t even know how to use photoshop and you are calling jawad shameless , even though he is teaching people how to make advance layouts in photoshop here for free?? pff you shud really follow him and learn something..

      1. Tayyab May 22, 2012 at 10:40 pm

        No no Mr. Malik, that’s not what Faisal meant.

        Jawad is a humble guy, so in step 29, just couldn’t say that he is promoting Desingzzz on his own design, so he said “I’m shamelessly promoting Designzzz in the footer”.

        Our buddy Faisal was saying that it is not shameless at all, and he admires Jawad bhai’s work a lot.

    2. Jawad May 22, 2012 at 10:43 pm

      Dear Faisal, I’m so sorry for the confusion that took place.
      Ayaz Malik is the webmaster of Designzzz, he didn’t know what I had written in the tutorial, he just gets furious when he feels unappreciated (all of us do).

      And buddy, what I’m suppose to say, that I’m promoting designzzz on my own design, that’s sounded shameless to me, so I just went ahead and wrote it. Thank you for being so kind and reading every word of the tutorial.

      Apologies once again, and I’ll waiting to see you again on Designzzz.

    3. Tayyab May 22, 2012 at 10:46 pm

      Sorry for everything Faisal, actually I had my exams so I was on leave, so that’s why things weren’t running as smoothly as they used to be.
      I hope you wouldn’t mind a misunderstanding.
      Sorry again bro. And as Jawad said, we’ll be waiting for you again and again.

  3. phany May 20, 2012 at 7:21 pm

    where is pattern in step 2, I can’t find it.

  4. Michael May 30, 2012 at 9:40 am

    Hey, nice post on Garment industry. I never heard of that before. Thanks. Bye, Michael.

    1. Jawad June 5, 2012 at 2:47 am

      glad I told you something you never heard of. you’re welcome. Bye, Jawad 🙂

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved