In this tutorial, I'll show you a really simple effect that together with good photography can be used to make gorgeous results. We're going to compose a room using photos of objects. This room can then be used in Flash to build a Web site or simply as a graphic.
Background
I actually produced this composition about a year-and-a-half ago. It was used in the FlashDen Showroom website that I built as a marketing and promotion tool for one of Psdtuts+'s sister sites, FlashDen.net.
In this tutorial, I'll be comping up the first room. In the sequel I'll do the third room. In the final part of this series, I'll produce a brand new room with more in-detail steps than the first two tutorials, because for these first two, I'm going over old work rather than making something from scratch.
Assets
This effect basically relies on lots of good photos. Unfortunately, that means this tutorial is more a general guide than for you to explicitly follow step-by-step. Unless, of course, you feel like going and buying all the stock photos you'll need to do so. You can get them all from iStockPhoto, though I don't have the exact URLs as I bought them long ago and my account there has literally thousands of files downloaded :-) In any case, here is a mini image of them all!
The Finished Product
First of all, here is the finished product. After I produced this mockup in Photoshop, I then recreated the site in Flash with animations and buttons and so on. You can see the Flash Showroom site here.
You can also click the image below to see the full view.
Step 1
Now the final image is 1024x768. The first thing I did was place the main background image. Unfortunately for me, it's the wrong dimensions (as you can see below). I could enlarge it and crop, but then I'd lose some of the nice detail that I wish to use later, so instead I chose to extend the photo.
Step 2
Fortunately, the job isn't too hard because the top area of the photo is fairly straightforward. The trick is to use gradients of colors picked out of the current background to extend the photo.
I first used the Pen Tool to draw a shape (shown) that I wanted to fill over with my gradient. Notice that the shape covers some of the area of the actual photo. This is so that afterwards I can use a soft eraser to erase the edges and have it fade gracefully in. I then picked a dark shade from the right-hand side and a light shade from the left and drew a linear gradient across in a new layer above the photo. This was followed by some gentle erasing along the bottom to blend.
Step 3
I repeat the same step but on the left side with the light grey area. Again, the shape I draw over the photo is larger than necessary so I can erase back for a smooth blend.
Step 4
Finally, the shadow on the right looked a bit uneven, so I added a third layer on top and using the Pen Tool traced out a shape around the sofa and gave it a dark-to-light gradient to have a more consistent shading, thus doing away with any last traces of where I blended the images.
Step 5
Now that the background is ready, we can start placing objects. Before we do that, I should say a few words about the type of images you want to choose:
- You need photos taken at the same angle as the background image you are comping them into. In this case, it's a front-on view. Note that this is by far the easiest angle to do this effect on.
- It's also best if you get photos of objects that are isolated, as it makes cutting them out way easier
- Finally, avoid photos where any part of the object is out of focus. For example, a shot with some perspective may have an edge of the television a little blurry. If that's the case, cutting the object out is much harder, if not impossible.
Anyhow, so for each object, you simply use the Pen Tool, trace around the object, and then right-click on the canvas, select Make Selection from the menu that appears, and then copy the object out of its background and paste it on your main canvas. There are other ways of extracting objects: you could use the Magic Wand Tool, for example, when the object is on flat white, however, I find it's much cleaner and not that much harder to do it with the Pen Tool. If you do use the Wand Tool, make sure to use a larger photo and then scale down to hide any crappy pixelation effects.
You could also use the Filter > Extract Tool, however, that's not much easier and the result isn't always as good.
Step 6
Anyhow, so here I've placed the TV on to my backdrop. Because there is shadow to the right-hand side of the room and it's lighter on the left, I've also gone over the TV with the Burn tool to make it match a little more. Light and shadow are pretty important in making objects match their environment. In this particular tutorial, we won't be doing much of that, but we will in the third part of this series.
In any case, the TV is already looking good, but really it should be casting a shadow on the wall beneath and to the right. Currently, it looks like it's just floating in space, so let's fix that next.
Step 7
There are lots of ways of creating shadows. In this instance, I just created a layer beneath the TV and then with a soft brush and black selected, I painted down and to the right. (By the way, I'm not sure why I left those tools and history palettes in the screenshot; that's some lazy tutorial-making right there :-)
So as you can see, the shadow is what you'd expect if light were coming from the top and left, which is sort of what matches the background image we're pasting into.
Step 8
After that, I placed an image onto the television. I placed it in a new layer and then gave it an Inner Shadow layer style with a Distance of 0. This is so that there is a bit of shadow along the edges and the image looks like it's inset. This is a bit of a quick-and-dirty effect. Really if you wanted to do the TV just right, I'd suggest actually switching your television and then observing what happens at the edges and what sorts of highlights the glass/screen has from the light. But in this instance, the TV is small and when I take it to Flash, I'm placing videos here so it's not so important.
Step 9
Next we want to place the laptop. As with the TV, I cut out the laptop and mouse from their respective images. I shrank them down using the Transform Tool (Ctrl+T) and placed them appropriately. I then drew a mouse cord (see next step).
Step 10
To make the laptop look like it's really there, I drew a mouse cord that drapes over the cushion thing and down on to the floor. This helps make the objects look like they are really interacting with their background and not just floating about.
I did this by grabbing my Pen Tool and imagining where the mouse cord would go if it really was there. It looked like it would go along the cushion, drop down, and then along the floor (not really rocket science, but I thought I'd spell it out anyway!) Then once I'd drawn the path, I right-clicked and selected Stroke Path and used a 2px hard brush with a light grey colors.
Once the cord was drawn, in I used the Burn Tool to brush a bit of shadow onto the cord to make it look more realistic (since in reality everything has bits of light and shadow and no object is really just a flat colors).
Step 11
Next, we have to add a shadow beneath the laptop and mouse. The mouse's shadow is pretty straightforward — it's just a bit of blurry darkness set to Multiply over the carpet. For the laptop you want the shadow to go down the edge of the cushion.
In the screenshot below, I've lifted the laptop up so you can see the shadow I've drawn in properly. Once again I just made it using a soft brush and a dark colors, then set the layer to Multiply so it blends better with the photo beneath. Because the cushion has an edge where the shadow goes over the edge (on the right-most part), I've made the shadow change angle ever-so-slightly and go down the cushion.
Step 12
With the speakers on the right-hand side, I've basically done the same sort of thing as with the laptop — i.e. create a layer below the photo, draw in a dark colors the shape underneath the object, and set it to Multiply.
Figuring out what kind of a shadow an object is going to make is just a matter of observing objects in real life and looking at how they cast shadows with different lights. For this type of image, the shadow doesn't need to be perfect, it just needs to be pretty good. Really, if you look closely you will start to see that sometimes the highlights and shadows don't quite make sense (for example, notice with the speakers in the screenshot below, the right speaker's left side is dark and vice-versa for the left speaker, when in fact if the light is on the left, this is the opposite of what should be happening). But for an image like this where you only want to approximate realism, the effect does the trick and fools the eye.
Step 13
For the clock in the top left, I actually just drew one up using Photoshop — notice it's just a bunch of rectangles within each other using gradients and a bit of a highlight in the top left. I won't talk about this step too much as this tutorial is about comping stuff together not drawing fake clocks :-) Suffice it to say, I couldn't find the right clock and this did the trick.
Final
Finally, I placed lots of text here and there and buttons and what-have-you and the look is complete.
As I said at the beginning, there isn't that much difficulty in an effect like this from the standpoint of pure Photoshop technical ability. It's more about developing your eye to recognize how things should fit together, choosing a good set of photos to comp together, and adding shadows and highlights to bring it all together.
The final effect with the right photos can be really nice and is particularly good for use in Flash where you can make objects fly in or materialize.
You can see the Flash Showroom site here or you can also click the image below to see the full view.
In the next part of this series, we'll go through another room in a similar fashion to this. There's probably not that much more to add, but it's still interesting seeing the process again. In the final part, I'll put together another room from scratch and try to screenshot all the small details of the process. So, until next time folks!
Editors Note: This tutorial predates the launch of our PLUS memberships. Unfortunately, there is no accompanying PSD file.
