Create an Elegant Boutique or Garment Industry Web Design

http://www.designzzz.com/boutique-fashion-web-design-photoshop/

FINAL RESULT

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

Step1

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

Step2

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

Step3

Now select Color overlay and apply white color.

Step4

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.

WOOHOO!

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