Creating a Clean Furniture Website and Gallery Layout in Photoshop

AD

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

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%

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.

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

Further Related Readings

Jawad

I am a professional web designer, working as a tutorial writer here at Designzzz. I also have a crazy for Cars and Automobiles, that's why I have blog about them, Carunch.com; You can follow me on Twitter
All Articles by
19 Comments on “Creating a Clean Furniture Website and Gallery Layout in Photoshop” Join The Discussion!
  1. Asif Islam says:

    Really! This will help me a lot.

    Thanks Jawad

    1. Jawad says:

      Thanks Asif. :)

  2. Asif says:

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

    1. Jawad says:

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

  3. K.S.Rajakumar says:

    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 says:

      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 says:

      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 says:

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

    1. Jawad says:

      Thanks Shumaila..

  5. Designparagon says:

    Very good article thanks for sharing.

    1. Jawad says:

      Thank You so Much….

  6. Amit says:

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

    Please take a glimpse our website: http://www.think360studio.com

    1. Jawad says:

      Thanks you so much dear. These comments motivate me.

  7. shekharpundir says:

    great man very helpful for beginners .

    1. Jawad says:

      Thank you so much..

  8. art2012 says:

    Wow! Its Very Good work…Thanks.

    1. Jawad says:

      Thank you So much.

  9. Bhawana says:

    nice work….

    1. Jawad says:

      Thanks :)

Comments are closed.

Copyrights © 2014 - Designzzz. All Rights Reserved