Home      CC Chat     Forum      News      Articles     Interviews     Downloads     Members     Links     Contact Laura

Photoshop Metaroom Background tutorial - Posted Thursday, 24th August 2006 by Liam

This is a tutorial on how to create metaroom backgrounds using Photoshop by zareb - a must read for all those who would like to make a room but don't have any idea how to make the background!

In this tutorial I will attempt to explain you how to do a decent looking room background in photoshop.

At first, you need to download and install the 30-day evaluation of Photoshop – about 300Mb – from the adobe website (for this tutorial I use PS CS2) .
Then, download and install the free software availlable here - this plugin will help you to create original textures for your room.

STEP 1: Hum! There are many rooms already done! But what if I make my own?

If you want to make your own room, it means you have to be motivated. If you aren’t motivated, I suggest you close this window.

There are many rooms that have been made by people like you, members of the CC – and most of them had a major problem: “Awwwwww! The rooms I can see on the net are soooo good!!! I could never do a room as good as they have!!!”
Well, in fact, you can.
And even if it is not perfect the first time, make another one, and another, and another, until you get better.
This tutorial will (I hope) help you finish a good first background.

STEP 2: If you are reading this, it means you are motivated – if you’re not, close this window, shut down your computer and throw it on the wall (repeat this step until the computer refuses to turn on).

SO! If you have decided to do a room you have at first to decide what kind of room it will be:
- Aquatic?
- Garden?
- Machinery room?
- Cave?
- Spaceship?
- Open air room?
- … you can mix these types, do what your imagination tells you to.

In this tutorial I will make a background for a kind of cave room with some water.

If you have decided what kind of room you want, you have to decide how big it will be.
A screen in Creatures is 800*600 pixels, generally. A room of 1600*1200 pixels will be 4 screens big, etc…

In this tutorial I will make a room 1000*1000 – a square room.

STEP 3: Once you have decided of the type and the size of your room, you have to make a sketch of it (personally I don’t, but it is better to)

STEP 4: Create a background texture.
This page will show you how to do a realistic looking stone texture for the walls of the room.
Once this done, you can always play with MAP|Zone to create your own and unique effect.

- Define the zone you want to work in – I always start from the part of the background that is the most behind the scene at the moment of the creation of the image, so here the section to define is all the image, so in other words, there is nothing to be defined …
- Create the texture. The picture you can see beneath is the first step of the creation of the room!

Here I have used the tutorial above, and played a bit with MAP|Zone – but I won’t tell you what I have exactly done – each of us have our own tips and tricks!

STEP 5: Define the floor, the ceiling, walls and so on.

Referring to the sketch you have in front of you, your room has some walls and a floor (at least...). Now we will make this delicate part of the creation;
To do that, use this tool:

And now remember one thing: an adult Norn is about 100 pixels big.
So if I can suggest you something, make the corridor and different levels at least 150 pixels big. To use this tool, click and drag.

This is what the image should look like … of course, each room will look different.

STEP 6: COLOR and TEXTURE the selected area.

We have a selection made: if we work in it now, all the effects will be applied to the first layer, but we don’t want to have this to happen.
We want a new layer, don’t we?
So to create a new layer, click on this icon:

Double click on the name of the new layer, and rename it to ‘walls’.
Now, do exactly the same as before on the new layer, but DON’T repeat the ‘difference clouds’ – do it just once, this way the effect will be smoother.

Use the ‘hue saturation’ tool to create a darker effect on this new rock texture.
And add some more noise to this rock! 3% more should do. (Play with it as long as you find something good – don’t forget, CTRL+Z to undo the latest thing done.)
I played again with MAP|Zone, and here is the image…

It still looks rough and unfinished… but we will sort it out.

STEP 7: The Ground.

Any room needs a ground.
In fact this step is fairly simple, and you won’t spend too much time doing this.

Create a new layer, and drag it between the 2 layers that are already made.
Rename this layer to ‘GROUND 1’.

Now go to the layer of the walls, and press CRTL+A (selects all) then CTRL+C (copy the selection) then move to the layer ‘GROUND 1’ and press CTRL+V (paste).
Use the drag tool to move the content of the GROUND 1 layer a bit upper as it is now.
Use the eraser tool to erase the parts you don’t want.

The ‘ground’ looks like this:

And now for the hardest part:
We will have to play with hue/saturation, patterns, colors and everything.
First go to ‘Filters>Texture>Texturiser…’ change the texture used to ‘Sandstone’ and apply.
Then go to hue/saturation (CTRL+U), tick the ‘colorise’ box, and play around with the
values until you find something good. My ground looks like this:

STEP 8: Make the Ground on which the Norns will walk.

It is a bit harder.
But nothing you can’t handle with.
At first create a new layer, rename it to ‘GROUND 2’ and move this layer between the first layer (the background) and the previous layer we’ve named ‘GROUND 1’.
SELECT, using the lasso tool, an area that will be our second part of ground.
Here you can see how it looks once finished, look carefully at this, and read the explanations I’ve written under the picture.

I know it can look frightening, but now I’ll explain what I have done.
- I have selected 2 areas
- I have filled them with a rock texture using the same method as for the other
- I have used Map|Zone to create this effect on the rock
- I have used the Dodge/Burn tool (press key O) to lighten/darken some parts of the new layer, and some parts of the main background. This part is surely the most important, because the shadows give depth to the picture.
- I have used the eraser tool, mode ‘brush’ opacity ‘18%’ and flow ‘58%’ to slightly erase the upper borders of the new ground I made – this way the ground like melts with the main background rock texture.
- That’s all … now try to do it by yourself on your rooms.

STEP 9: No, the ground is not finished…

But it will only take a few minutes, so don’t worry!

Duplicate the GROUND 1 layer, rename it to GROUND 3.
Move it behind the GROUND 1 layer.
Use the ‘move’ tool to move it just a bit higher.
Lighten the parts that are dark, until you reach an average light piece of ground.
Then change the hue/saturation values until you have a color you’re happy with.
Right click on GROUND 1 layer – choose blending options, and then tick the last checkbox: ‘stroke’. Change the value of the stroke to 1 pixel, and change the color (this part is necessary if you want to show that the many parts of ground we can see are different states of dirty, muddy, etc.) - Once you have found the right color, do the same for the layer GROUND 3.

We’re done for this point, here you can see the effect:

STEP 10: Shadows… lighting… and this kind of annoying stuff.

Annoying? YES!
Of course. What kind of very delicate and ultra important work is not annoying when you have to do and continually redo the same thing for the 25th time? Hum?
No, I’m joking … It is not as awful as I may depict it.

So take your dodge/burn tool, and WORK! What are you waiting for???
If I may give you some advice, use different types of brushes for all your shadow work – it can make it more realistic.

Hummmmmm …. Now it begins to look good .

STEP 11: Hum. There is a need for scenery in there…

Scenery... Scenery is plants, rocks, statues and the like- we will start with rocks.

Create a new layer, and rename it to Rock 1. Put it between the background layer and the others that are here.
Use the lasso tool to select a shape for our rock.
Fill it with a rock texture, as you did for the other layers.
Choose a nice brush, and you can add some mush if you want…
Then burn, dodge, as long as the rock fit in the picture.
Here, it looks like this:

Do the same in every place you want a rock.

Well, now we could do with some grass… Photoshop will help us a lot in this job – there are already pre-made grass brushes – just go and pick one, set the color to green, and start painting in a new layer (this layer has to be positioned between the others, so the grass will look like if it was at the right place.)
Once you’ve painted and placed the layer, switch back to the dodge/burn/sponge tool, and work on your grass.

Here you can see how my grass looks like.

STEP 12: The water … wet and cold …

Create a new layer, rename it to ‘water 1’, and put this layer just above the ‘GROUND 1’ layer.
Choose the rectangular select tool, and select a rectangle. Switch to the ‘paint bucket’ tool; choose a blue color from the color palette. Then in the options choose opacity – you have to define it by yourself, because each background needs a specific color.

It looks like this in this room:

Now make another layer, and rename it to ‘water 2’.
Here everyone will have to decide what to do, depending on the configuration of his room.
I need to select a semi-circular zone in this new layer, because here my water cavity is kind of round when seen from the top, and we need to stay as close as possible to the reality.

Now perhaps we want some plants in water?
Of course we want to. I mean, really.

The plants in water have their roots in the ground, are kind of big to reach the surface (if they reach it) and have a watery look.
I know all the plants don’t have their roots in the ground, but here they will, and this way I’ll show you how to do something more realistic than it is now.
Switch to the GROUND 2 layer and to the dodge/burn tool.
I cannot explain it, so you’ll have to look as the result and understand – it is not very complicated, but the location of the modifications is important.

Now we have to make the plants.
We will use the same brushes, but we will cheat a bit.

Step 1:

Step 2:
We erase the parts we don’t want to see.

Step 3:
Burn Dodge etc…

So here is the final step I could show and explain to you – you have learned enough during this tutorial to make you own plants (select, color, texturise, burn etc …) lights (blending options, mainly) etc.

I hope it has helped you!

[English] [Français] [Deutsch]