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.

Free Photoshop Tutorial

Setting Base

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

Free Elegant Web Design

This is the background I’ll be using. It’s a black wood Pattern.  I Grabbed this pattern from here.

Free Design Web Layout

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.

Photoshop Tutorial Template

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.

Free Photoshop Tutorial of Layout

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.

Free Tutorial of Photoshop

Featured Slide-show

I used the Rounded Rectangle Tool and drew a Shape for the Featured Area. 

Free Photoshop Tutorial

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.

Photoshop Tutorial Web Template

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.

Free Gallery Template

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.

Photoshop Tutorial

Filled this Gradient on the Arrow with the following color values.

Stylish Web Gallery Tutorial in Photoshop

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.

Web Gallery Tutorial

Thumbnail Bar done now with the Right, Left Arrows, I think they are  looking Good, don’t they?

Tutorial of nPhotoshop

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.

Free Template Design in Photoshop


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%

Free Photoshop Template Tutorial

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.

Tutorial of Web Gallery in Photoshop

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.

Tutorial Photoshop

Time for the Footer now. I used Rounded Rectangle Tool again for making its background.

Free Elegant Stylish Web Template in Photoshop

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.

Free Tutorial of Photoshop

Final Result

Free Photoshop Tutorial

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.

Further Related Readings

  1. Asif Islam August 15, 2011 at 2:48 pm

    Really! This will help me a lot.

    Thanks Jawad

    1. Jawad August 17, 2011 at 5:27 pm

      Thanks Asif. :)

  2. Asif August 16, 2011 at 1:46 pm

    Waiting for its HTML & CSS Code. Hope you will post the codes of this template soon.

    1. Jawad August 17, 2011 at 5:29 pm

      I m working on it. Hopefully in few days I post this template HTML & CSS code.

  3. K.S.Rajakumar August 16, 2011 at 6:04 pm

    Mr Jawad

    Its Very Good work.
    Your selection of the title with Photoshop Gallery was excellent , Take tips and guide lines of Mr Waseem .
    He is the one Who inspired me in his creativity Your exposure will defiantly benefit you more when U sum up the presentation. Its only a suggestion to improve.

    1. Jawad August 17, 2011 at 5:34 pm

      Thanks for your appreciation.

      Me and Waseem work together in designzzz but my expertise to design web layout and he is doing Photo Manipulation and other stuff. So anyways your suggestion and yours appreciation is very valuable for me.. :)

    2. Tayyab August 18, 2011 at 1:56 am

      Dear Mr. Rajakumar

      Let me tell you a little something Jawad hasn’t. Jawad and Waseem are already close friends. So close that they eat, work, laugh, conspire and do everything together. That team-work is one of the main reasons that both of them excelled in their fields so rapidly.
      The reason you don’t see Jawad’s articles much often is that he is redesigning ZZZ Network’s all sites and he also has his own blog Carunch.

  4. shumaila August 17, 2011 at 12:34 am

    nice work……………………..

    1. Jawad August 17, 2011 at 5:35 pm

      Thanks Shumaila..

  5. Designparagon August 17, 2011 at 5:13 am

    Very good article thanks for sharing.

    1. Jawad August 17, 2011 at 5:36 pm

      Thank You so Much….

  6. Amit August 18, 2011 at 7:44 am

    Wonderful job.. you know I just learning Photoshop a couple month ago, you tutorial is helpful. Thanks

    Please take a glimpse our website:

    1. Jawad September 17, 2011 at 6:26 am

      Thanks you so much dear. These comments motivate me.

  7. shekharpundir September 17, 2011 at 1:09 am

    great man very helpful for beginners .

    1. Jawad September 17, 2011 at 6:21 am

      Thank you so much..

  8. art2012 October 17, 2011 at 10:08 am

    Wow! Its Very Good work…Thanks.

    1. Jawad October 18, 2011 at 2:02 am

      Thank you So much.

  9. Bhawana October 28, 2011 at 12:37 am

    nice work….

    1. Jawad November 2, 2011 at 1:36 pm

      Thanks :)

Comments are closed.

Copyrights © 2015 - Designzzz. All Rights Reserved