Interior Design Layout

Create a new document 850×1300 pixels, fill your background layer with the color black. Select the rectangular marquee tool and create two rectangles on top of each other using the colors #2e2e2e and #202020.

Leave a 1 pixel gap inbetween each rectangle, place the rectangles at the very top of your canvas, merge both rectangles into one layer. Now goto “filter > noise > add noise” use the settings below.

Now add a layer mask to your layer, set forground and background to black and white, select the gradient tool using a linear gradient start from the bottom of the rectangle and drag up. Right-click your mask on the rectangle layer and goto “apply layer mask”. Repeat the steps above only this time from the top of the rectangle.

Continuing using the same process as above only this time select a reflected gradient, set forground color to white and this time drag from the middle of the rectangle towards the edge either left or right, choice is yours. You should then have something like this.

Add your site title and logo, the pink color i used is #ff0072 and the font is used is “swatch it”.

Underneath your background jazz and site title add your navigation text. On this navigation im going to use a two tier one, so i add a rectangle around one of the navigation items then add a long rectangle underneath.

The little arrow on the 2nd navigation was made using the pen tool. For this next part your going to need some interior design stock images. Add a nice looking interior design stock image underneath your navigation, add a 1 white pixel stroke to the image.

On top of our big image add two black rectangles towards the bottom. Also add a 1 pixel white stroke to each of the rectangles then lower the “fill” to 60%.

Fill these boxes with some information of your choice. Underneath the big image add a further two interior design style images and then a black square at the end, add a 1 pixel white stroke to each of them.

In the end box add some more information, then select the rounded rectangle tool and create an equal square rectangle.

Fill your rectangle with the color black then add these two layer styles.

Now hide ALL YOUR LAYERS apart from the rectangle one, create a new blank layer above it then goto “layer > merge visable” make sure you have the rectangle layer selected. UNHIDE all your other layers. Add a layer mask to your rectangle and blend it in from the left side. Now duplicate your rectangle layer 3 times and place like the image below.

Fill these rectangles with some products related to interior design. Now for the footer duplicate your background jazz, site title and logo then move right the bottom of your canvas, add your copy right information.

Your end product should looke something like this.

30 thoughts on “Interior Design Layout”

  1. Pingback:
  2. Nice designs, just wish they would come with the CSS template, style sheets etc.
    I would buy this otherwise – also, if you had the option for $US pricing.

  3. I just wonder, how do you actually implent this to an website? i know, it’s a stupid question but i really don’t know how to do it :p, if you make a web template in photoshop how can the buttons etc work when they are just a image? any light shed up on this i would be thankful for 🙂

    Nice tutorial

Leave a Reply

Your email address will not be published. Required fields are marked *