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.
Starting with the obvious, a blank document, size of your choice, resolution should be 72.
I choose this silk cloth pattern here because it seemed perfect for this kind of situation.
After this we select different Floral and Swirl brushes. I select this brush and color is Solid Black.
After this I select another brush and then scaled the brush stroke a little downwards using transform option of move tool.
We select other brush and transformed it in the same way.
Select another brush, give it the same treatment.
And again. You’ll soon know what I’m doing, just bear with me for now please 🙂
Same this here. We are almost done.
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.
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.
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.
I selected Rounded Rectangle Tool draw half and fill with White color.
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.
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 %.
Choose this brush and draw, 40% transparency. You can see the result in the image.
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.
Now we come towards the Featured Area. I used the Rounded Rectangle Tool with 40% transparency and drew a Shape for the Featured Area.
I choose Rounded Rectangle Tool again and drew this box with White color.
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.
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.
Now we come to the content area. We select the Rounded Rectangle Tool and draw this shape.
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.
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.
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!!
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.