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/

Advertisement

Related Stuff!

Published on: August 15, 2011,

This post is in: Designs, Free Photoshop Tutorials

Author

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

Leave a Response