Learn How To Create Your Very Own Showcase Room

Learn How To Create Your Very Own Showcase Room

What We’ll Be Creating

Learn How To Create Your Very Own 3D Room

Resources Used In This Tutorial

Setting Up Our Canvas

Create a new (Ctrl + N) document 1680 x 1024 pixels with a white #ffffff colored background. We now need to setup a couple of guides to get the dimensions of our room right, before we start adding the guides lets select the “Rectangular Marquee Tool” (M). Once selected change the option of the marquee to “Fixed Size” then add the selection to the middle of the canvas and fill (G) with the color black #000000

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

Turn on “Snap” by going to “View > Snap” (Shift + Ctrl + ;) then turn on the rulers by going to “View > Rulers” (Ctrl + R). Simply click inside of either the left or top ruler and drag down or across depending on which ruler you are draging from, when you drag down you will notice a guide drags out with your mouse. Drag out 4 guides which line-up with the rectangle you have made.

Learn How To Create Your Very Own 3D Room

Delete your rectangle layer and you will be able to see the guides more clearly. Now the base box has been guided up we now need to add a few more guides, in the image below i have measured each section so all’s you have to do is create a fixed size rectangle inside of the bigger rectangle guides then drag out the guide around that rectangle. Repeat the process until you have a bunch of guides like the image below. Remember to delete each rectangle after each set of guides are created.

Learn How To Create Your Very Own 3D Room

Once the rectangles have been deleted you should have a set of guides which look like this.

Learn How To Create Your Very Own 3D Room

Drafting Out The Foundations Of Our Room

We’ll start with the “Left and Right Walls” select the “Rectangle Tool” (U) then drag out a rectangle across the left and right sides of the guides.

Learn How To Create Your Very Own 3D Room

Label the left rectangle layer “Left Wall” and the right rectangle layer “Right Wall”. Still with the “Rectangle Tool” (U) drag out a rectangle across the bottom, again label this layer also only this time label it “Floor”.

Learn How To Create Your Very Own 3D Room

Repeat the process until the top and middle rectangles have been created. Remember to label each layer accordingly.

Learn How To Create Your Very Own 3D Room

Notice how the floor and ceiling rectangles overlap the left and right walls. This is so the wall layers won’t actually have to be adjusted, when the perspective is changed on the ceiling and floor layers it will automatically look like the walls are at a different angle. Which brings me onto our next step.

Adjusting The Perspective

Select the “Floor Layer” then go to “Edit > Transform > Perspective”, select either the top left or top right anchor points, hold down the shift key and drag inwards until it snaps onto the edge of the inner rectangle. If it doesn’t snap into place try turning on the snap option (Shift + Ctrl + ;).

Learn How To Create Your Very Own 3D Room

Repeat the same process for the ceiling layer.

Learn How To Create Your Very Own 3D Room

Bringing The Room To Life

Starting with the “Left Wall Layer” add the following layer styles.

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

Add the following layer styles to the “Right Wall Layer” there exactly the same apart from the angle of the gradient overlay.

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

You should have something like this.

Learn How To Create Your Very Own 3D Room

To the “Floor Layer” add a gradient overlay using the settings below.

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

To the “Ceiling Layer” add the following layer styles using the settings below.

Learn How To Create Your Very Own 3D Room

Finally add the following layer styles to the “Middle Layer”.

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

To make the room stand out a bit more add the following gradient overlay to your background layer.

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

Creating The Lights

It is now safe to hide the guides on your canvas to do this simply press (Ctrl + H). Select the “Ellipse Tool” (U) then at the top on your ceiling create an oval ellipse.

Learn How To Create Your Very Own 3D Room

Now add the following layer styles to the oval ellipse.

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

Learn How To Create Your Very Own 3D Room

You should have something like this.

Learn How To Create Your Very Own 3D Room

Now create another ellipse only this time make the ellipse smaller so it fits roughly inside of the first oval ellipse. The new ellipse should be offset slightly towards to the bottom of the first oval.

Learn How To Create Your Very Own 3D Room

Duplicate what you have made twice and move the duplicated layers along so you have a total of 3 lights on the ceiling.

Learn How To Create Your Very Own 3D Room

Let There Be Light

Select the “Elliptical Marquee Tool” (M) and make a selection on the floor directly beneath the light.

Learn How To Create Your Very Own 3D Room

Fill (G) the selection with the color white #ffffff, de-select the selection then add a guassian blur “Filter > Blur > Guassian Blur” blur the ellipse by about 10 pixels then set the opacity to about 40%.

Learn How To Create Your Very Own 3D Room

Still with the “Elliptical Marquee Tool” make another oval selection this time on the back wall of the 3D room.

Learn How To Create Your Very Own 3D Room

de-select the selection then fill (G) the selection with the color white #ffffff then add a guassian blur by going to “Filter > Blur > Guassian Blur” blur the ellipse by around 25 pixels then set the opacity to around 80%.

Learn How To Create Your Very Own 3D Room

Select the “Polygonal Lasso Tool” (L) then make a selection coming from the light.

Learn How To Create Your Very Own 3D Room

Fill (G) the selection with the color white #ffffff then de-select the selection. Add a layer mask to the shape then drag a linear gradient from the bottom of the light ray upwards.

Learn How To Create Your Very Own 3D Room

Set the opacity of the light ray layer to around 10%. Now repeat the steps for the other two lights. Once all the lights have been added make a rectangle around the whole 3D room leaving a good 10-15px padding around the edge. You should have something like this.

Learn How To Create Your Very Own 3D Room

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page.

Learn How To Create Your Very Own 3D Room

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

12 comments
Rawaf says

Great tutorial, I liked it and help me so much :)

thank you

Reply
Richard Carpenter says

cool, thanks for your comment.!

Reply
janet says

Thank you! Perfect timing – this helps a lot!!

Reply
Kevin Gross says

Very nice tutorial. it was easy to learn, thanks for this Work :)

Reply
ari says

nice…thx for shared…

Reply
Lahcen says

Great! It was simple & easy to learn. Thx.

Reply
Sui Mode says

Useful Tutorial. Thanks For Sharing your Time and Talent with us!
Sui Mode (^_~)

Reply
faheem says

Thank u for your great work…….
1 like it :)

Reply
GCLOTTEY says

useful tutorials but please can u help me as to how to slice
the pages and use css to set it up…? Am an upcoming webdesigner
thanks

Reply
Dipesh says

Awsome tutorial, Thank u a lot

Reply
moses karikari Apau says

i like your steps and thanks very much for helping

Reply
Chandan says

Creative tutorial, Thanks for sharing!

Reply
Add Your Reply

Popular posts

css.php