Creating a Fashion Website Layout in Photoshop

FINAL RESULT

Step 1

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

Step 2

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

Step3

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

Step 4

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

Step 5

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

Step 6

Select another brush, give it the same treatment.

Step 7

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

Step 8

Same this here. We are almost done.

Step 9

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

Step 10: Result

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

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.

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.

Step 13

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

Step 14

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

Step 15: Result

This is our logo.

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 %.

Step 17

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

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%.

Step 19: Result

We get a very elegant Navigation bar.

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.

Step 21

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

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.

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.

Step 24: Result

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

Step 25

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

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.

Step 27: Result

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

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.

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!!

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.