I was recently designing a furniture website for my client when Designzzz team caught me and ordered me to create a design tutorial and a premium template download for Designzzz.
This is a web design/gallery design for a furniture or any craft makers website. It is in dark colors so that the products look shiny. In this tutorial you will achieve inspiration for using patterns in backgrounds. This is a very clean design, or minimal as they call it but it is packed with all the features which such a site may want. We will be publishing the download-able PSD template on next Friday, meanwhile To Download PSD file of this template, please go to Download Free Furniture Website and Gallery PSD Layout.
This is what we are making.
Starting with the obvious, a blank document, size of your choice, resolution should be 72.
This is the background I’ll be using. It’s a black wood Pattern. I Grabbed this pattern from here.
This is a simple method of creating a stylish menu bar. I just grabbed a Custom Shape from the Custom Shape Tool Box and I created a Simple but elegant navigation bar with some Rotation, Flipping, Resizing and other kinds of scaling . Below you can see the custom shape.
As you can see in the result below, I just copy-pasted the same shape and flipped one each after one and changed it’s opacity to 50%. This is the background of our menu bar.
I added the Text with the help and by striking the (T) to select Text Tool. This is the final version of our navigation bar.
I used the Rounded Rectangle Tool and drew a Shape for the Featured Area.
I placed an image on the shape. Remember the image layer must be over shape layer, then Right Click on the Image layer > click Create Clipping Mask. Now the shape contains the image as a fill and the unnecessary parts are hidden. This is the result we should be get.
I thought we should also create a thumbnail strip – I used the Navigation Bar Background here as well. You should also recycle your designs, its eco-friendly.
Background is done, time for Arrows. They will work as Right, Left buttons of the Scroller. We could have skipped this part but I thought let’s show it, you might learn something good.
I just grabbed the Arrow Shape from the Custom Shape Tool for making the buttons.
Filled this Gradient on the Arrow with the following color values.
I selected the Elliptical Marquee Tool and chose the Upper Part of the arrow-handle for making the effect on the arrow and then change the Color of Selected Area to #7a7979.
Thumbnail Bar done now with the Right, Left Arrows, I think they are looking Good, don’t they?
I used the Rounded Rectangle Tool and added some thumbnails using the same technique of clipping mask which we did earlier in Featured Area. We got ourselves a pretty thumb bar.
Of course, normally your client will provide you the logo but just for inspiration, I’m making a dummy logo here.
I used almost the same kind of Custom Shape and fill the Black Color and set the Opacity to 50%
In the logo I just changed the color of the First Letters of the company’s name and painted an ornamental brush strokes in the background. You can place your logos in the same manner as well. Making a platform for the logo, for example some brush strokes can underline the logo and make it prominent, is a good practice.
Bottom of the Page
I added a category list in the end. This might seem odd but since this is also a gallery template, it makes sense. The effect Drop Shadow and these are the values.
Time for the Footer now. I used Rounded Rectangle Tool again for making its background.
Now over the previous background, I made a new selection using Elliptical Marquee Tool in a blank layer and filled it with the color we used earlier – #7a7979.
The complete preview. I added a Contact button on the upper right corner. The design looks nice, elegant and eye-catching. Web Developers can code it easily and clients love such designs, so everybody wins. If you want to add some text, you can easily create a content area below the slider.
That’s for it for now, hope you like it. If you any suggestion/request for my next tutorial, don’t hesitate to speak, that’s what comments section is for.