Creating a Clean Furniture Website and Gallery Layout in Photoshop

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.

Final Result

This is what we are making.

Setting Base

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.

Navigation Bar

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.

Featured Slide-show

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.

Logo

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.

Final Result

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.

Designzzz will publish the download-able PSD of this design next Friday. Make sure you don’t miss it.  You can stay updated with our postings by Subscribing to our RSS or Following us on Twitter.

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.

http://www.designzzz.com/free-furniture-web-gallery-psd-template/