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
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.
After this we select a shape, a simple triangle. Draw and transform it. Duplicate it like I have done below.
After this we write logo text. I used LoveLeaves font for this text. You can see we have a fine header in the making.
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.
Now its to make the “Featured area”. Choose the Rectangle Tool and Draw a rectangle.
Give a gray stroke of 2px only.
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.
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.
Add picture into featured sidebar and use Clipping Mask once again.
I’m making 3 thumbnail blocks. They look clean yet classy.
By now, we should have this.
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.
Write down something welcoming.
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.
Time for “Read More” button. Choose the Rectangle tool and apply this Gradient. Go to Layer Styles>Gradient Overlay.
And a little stroke.
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.
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.
I created a heading background. I made another rectangle on the top of the box.
I selected a shape from Custom Shapes Tool and made a few bullets. You can (and should) experiment with other bullet styles.
Our result so far.
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.
After some clip masking, I got this.
Now we have images in the end
Now we’re ready for footer. Choose Rectangle Tool, draw a cut-through shape, fill with color and add some noise.
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).