How to Create the Interior Design Layout. Photoshop Tutorial


From this tutorial you’ll learn how to create professional and glossy website layout for the Interior Design related company. Just follow the steps of this tutorial and you’ll find out that there is nothing so complicated in designing this stunning template. What’s more, in this tutorial we use only few simple tricks you will repeat almost every step (e.g. creating textboxes). We are sure that after finishing this tutorial you’ll be able to create fabulous website layouts. So, as they say “Bon voyage!” Our exciting trip begins:

 

Here is what you’ll need:
Program: Photoshop 7 or later
Difficulty: Beginner Level
Set Time: 90 minutes
Materials: Vector illustration of a screen with swirls, stock image of the bed and the blue glossy ball. All files are available for Downloading.

 

This tutorial is based on the design of Free Interior Website Template that was launced by Templates.com not long ago.

 

Here is the Interior Design Layout that we are going to create:

 

Free Website Template

 


***

 

Open Photoshop 7.0 or later. Press Ctrl+N to create a new document; name it (for example, “Interior Design Layout”) and set the following values: Width: 1000; Height: 996.
Now we need to create the orange background. Go to Color Panels and pick the Orange color (#f26522). Use the Paint Bucket Tool (G) from the Toolbox Panel to fill the background.

 

Photoshop Tutorial

 

***

 

Next step is adding a gradient to make the background look elegant and smooth. Select the Gradient Tool (Shift+G). In the Gradient options box set gradient type to Linear (1) and chose foreground to Transparency preset type (2). Set the foreground color to black.

 

Photoshop Tutorial

 

***

 

Create the new Layer. Go to Layer – New…- Layer – Name it Background Gradient -Press OK. Now apply the gradient as shown in the picture bellow:

 

Photoshop Tutorial

 

Go to the Layers Panel and change the Blending Mode from Normal to Overlay. Set Opacity to 40%.

 

***

 

Creating a Header Layout.

 

Now we will add a header layout. We’ve decided to make it dark grey. Create the new Layer (Layer – New –Layer…-Name it Header Layout – Press Ok ).
Pick a Rectangular Marquee Tool and make a selection on top of Layout as shown in the image bellow.
Select black as a foreground color and press Alt + Backspace to fill the selected area with black. Press Ctrl+D to deselect. Here is what we get:

 

Photoshop Tutorial

 

***

 

It’s about time to add some gradient. Let’s do it this way. Go to the Layers Panel and double click on Header Layout Layer to open Layer Style Panel. Select Gradient Overlay, set Opacity value to 2% and chose black and white Gradient preset, Angle: 90 as shown in the picture bellow. Press Ok. And you’re done!

 

Photoshop Tutorial

 

***

 

Adding the Image.

 

Now we will add a fancy image that would somehow identify the business orientation of the layout. We’ve decided to take this lovely picture of the modern bed. It’s a good idea to think over the semiotics behind the visual image. The bed is a symbol of warmth and comfort, thus it will match greatly the luminous orange background. Also, the bed is designed in minimal style so is our layout. As for the colors there are 4 main colors that form a great contrast (white – wine red – grey – orange).

 

Photoshop Tutorial

 

***

 

Open the image in Photoshop, select the Layer containing the bed (such images usually consist of 2 layers – the white background and the image itself). Go to Layer – Duplicate Layer… Set the following settings:
As : Bed
Destination
Document: Interior Design Layout.

 

Photoshop Tutorial

 

***

 

In case if the image is a little bit bigger than you want, press Ctrl+T to activate Free Transform Tool. Adjust the image size according to your preference and place it in the left top corner of the layout using Move Tool (V). Here is how the final result should look like:

 

Photoshop Tutorial

 

***

 

Now let’s add some light coming from the lamp placed on the bed. It will somehow connect the background with the image. So, create the new Layer, name it Light. Go to the Layers Panel, select the new Layer and drag it under the Header Layout layer but above the Background Gradient Layer. Select Elliptical Marquee Tool and make a selection under the bed. Pick white color as a foreground and press Alt+ Backspace to fill the selection with white. Here is another picture of how it is supposed to look like:

 

Photoshop Tutorial

 

***

 

Now Press Ctrl+ D to deselect. You need to make it look like a dispersing light. So, let’s make it a little bit blurry. Go to Filter – Blur – Gaussian Blur. Set the Radius value to 67,9 and hit OK.

 

Photoshop Tutorial

 

***

 

Now go to the Layers Panel once again, select Light Layer and set Blending Mode to Overlay to get the effect of a softly spreading light. So, the final result should look like in the picture bellow.

 

Photoshop Tutorial

 

***

 

Back to the Background.

 

We need to customize our background a little bit more. So, create another Layer and name it Background Gradient 2. Place it under the Light Layer. Now grab Gradient Tool, select foreground to Transperency preset; pick black as a foreground color and apply the gradient as shown in the picture bellow:

 

Photoshop Tutorial

 

***

 

And you will get:

 

Photoshop Tutorial

 

***

 

Go to the Layers Panel and set the Blending Mode to Soft Light with Opacity value of 40% and it’s done!

 

Photoshop Tutorial

 

***

 

Applying Swirls.

 

Let’s make our Layout background look more elegant. We’ve found rather interesting abstract picture from which we will copy some elements.
Open the image in Photoshop go to the Layer containing the image itself. Pick a Rectangular Marquee Tool and select the part of the image that will fit our layout background. Right click on the selection and chose Layer via Copy. Now you have a piece that you’ve selected on the separate layer. Duplicate that Layer to our “Interior Design Layout” as we did earlier

 

Photoshop Tutorial

 

***

 

Adjust the size of the figure using Free Transform Tool (Ctrl+T) and place it on the right side of the layout as shown in the picture.

 

Photoshop Tutorial

 

***

 

Go to the Layers Panel and set the Swirls Layer Blending Mode to Soft Light with Opacity 15%.

 

Photoshop Tutorial

 

***

 

Duplicate Swirls Layer and using Free Transform Tool add some more swirls to the Background. Here is how we have decided to place them.

 

Photoshop Tutorial

 

***

 

Adding Content.

 

Select white color as a foreground and pick Horizontal Type Tool.

 

Photoshop Tutorial

 

***

 

Go to Window – Character to open Character Panel. Set the values as shown in the picture bellow and then type in “Interior Design” closer to the right top corner.

 

Photoshop Tutorial

 

***

 

Select the word “Interior” and pick dark grey color as a foreground that will paint the word in grey.

 

Photoshop Tutorial

 

***

 

Now pick Horizontal Type Tool again and type in “Luxurious Life” under “Interior Design”. Set the character parameters as shown in the picture bellow.

 

Photoshop Tutorial

 

***

 

Now we will create the effect of reflection for this sign. Duplicate “Luxurious Life” text layer. Place it under the original text and go to Edit – Transform – Flip Vertical. Now go to the Layers Panel and right click on the reflection Layer and chose Rasterize Type.

 

Photoshop Tutorial

 

***

 

Adjust Gradient Preset to black foreground – white background.

 

Photoshop Tutorial

 

***

 

Now take the Rectangular Marquee Tool and make a small selection as shown in the image bellow. Apply quick mask by pressing “Q”. Apply the gradient and exit Quick Masking by pressing “Q” once again.

 

Photoshop Tutorial

 

***

 

Go to the Layers Panel and set Blending Mode to Overlay with Opacity 40%.

 

Photoshop Tutorial

 

***

 

It’s high time to add some text (link mock-ups) to the header. Just add signs “Home”, “About Us”, “Contact Us”, etc…
Adjust the characters of each sign according to the picture.

 

Photoshop Tutorial

 

***

 

Create another Layer. It should be above the Header Background Layer. Select the Pencil Tool and set the Master Diameter value to 1 px. Set the foreground color to white.

 

Photoshop Tutorial

 

***

 

Now draw vertical lines (dividers) between the “Main Page” links as shown in the picture. Set Blending Mode to Soft Light.

 

Photoshop Tutorial

 

***

 

Creating a Footer.

 

Create another Layer, name it Footer Background and place it under Swirls Layer. Using Rectangular Marquee Tool make a selection closer to the bottom of the layout. Set Dark Grey (#242424) as a foreground color and press Alt+Backspace to fill the selection. Hit Ctrl+D to deselect.

 

Photoshop Tutorial

 

***

 

Now we will add some text (link mock-ups). Set the Character values as shown in the picture.

 

Photoshop Tutorial

 

***

 

Add a small Copyright sign bellow (for example, “Copyright – type in Your Name here”).

 

Photoshop Tutorial

 

***

 

Creating “Latest News” Textbox.

 

Now we will add the “Latest News” textbox. So, create the new Layer, name it “Latest News” and place it under the Bed Layer. Take a Rectangular Marquee Tool and make selection as shown in the picture bellow. Fill it with white color. Ctrl+D to deselect.

 

Photoshop Tutorial

 

***

 

Set the Layer’s Blending Mode to Soft Light with Opacity: 30%.

 

Photoshop Tutorial

 

***

 

Create another Layer and make a smaller selection as shown in the picture bellow. Fill it with Dark Grey color (#242424). Ctrl+D to deselect.

 

Photoshop Tutorial

 

***

 

Add “Latest News” sign, set characters value as shown in the picture and place in the dark grey rectangular.

 

Photoshop Tutorial

 

***

 

Post some text in this textbox (e.g. Satum quae sequi…) so the customer could see how it would look like in general.

 

Photoshop Tutorial

 

***

 

Creating Polls Textbox.

 

Create another textbox similar to the one we’ve just created. Place it under the “Latest News” textbox.
This time set the Layer Opacity 60 %

 

Photoshop Tutorial

 

***

 

Add some text that would look like a question and few variants of answers. Set the character values as shown in the picture bellow.

 

Photoshop Tutorial

 

***

 

Now we need to add up some markers for people to make their choice. You need to create separate Layers for each marker. Create the new Layer, name it Marker 1 and Select Elliptical Marquee Tool and a make a small round selection. Go to the Layers Panel and double click on the Marker 1 Layer. In the Layer Style Panel select Stroke and set the values as shown in the picture bellow.

 

Photoshop Tutorial

 

***

 

Repeat the previous steps to create as much markers as you need.

 

Photoshop Tutorial

 

***

 

Creating Greeting Header and Short Description Textbox.

 

Create “Vote” button. Follow the steps for creating “Latest News” sign.

 

Photoshop Tutorial

 

***

 

Now we will create Greeting Header. Create the new Layer and name it “Welcome”. Grab the Rectangular Marquee Tool and make selection as shown in the picture. Fill it with black color and set Blending Mode to Soft Light.

 

Photoshop Tutorial

 

***

 

 

Now simply type in your greetings (e.g. WELCOME OUR INTERIOR DESIGN). Set the character values as shown in the picture bellow. You can also add Short Description of what is this website devoted to under the “welcome header”.

 

Photoshop Tutorial

 

***

 

Creating Recent Articles Textbox.

 

Let’s add up another textbox that will show the latest posts added to the website blog. We’ll place it under the Short Description.
So, once again. Create the new Layer, name it Recent Articles, grab Rectangular Marquee Tool and make selection as shown in the picture. Fill it with pure black. Go to the Layers Panel and set Blending Mode to Soft Light with Opacity: 40%.

 

Photoshop Tutorial

 

***

 

Now, add a small image of a glossy ball.

 

Photoshop Tutorial

 

***

 

As you can see, it is blue and it doesn’t match the selected palette, but that’s not a problem. Let’s repaint it. Grab the Brush Tool and set the Master Diameter manually, so it would cover the whole ball. Set Dark Orange (#b33922) as a foreground and paint over the ball.

 

Photoshop Tutorial

 

***

 

Now go to the Layers Panel and set Blending Mode to Color. And here you go!

 

Photoshop Tutorial

 

***

 

Add some more glossy balls and type in some content. The final result should look like this:

 

Photoshop Tutorial

 

***

 

Now it is finished. Hope, this tutorial was useful for you. As you can see, there it is not that hard to create really professional web layout. All you need is patience and a bit of imagination.

 

***

Share this post: