Drawing Buccaneer Style

Tutorial on drawing the background

A while ago I was asked by someone on the AGSForums to write a tutorial on how I drew my backgrounds. Not that I think they're that special, but I've decided to write it down anyhow. I use Adobe Photoshop to draw them. The reason being it works nice, has plenty of features, supports my tablet pretty good (it did, at least, until I killed it) and has excellent layer functionality. Right then. Let's get started.

Step 1 - The wireframe

Wireframe Image

I usually start a room by drawing its wireframe as can be seen in the picture above. I use a sprite of my main character to ensure things are in scale. This room may seem very high, but as (I think) that was normal in those periods, I left it like that.

Step 2 - Filling up the empty areas

Filling Empty Areas

As shown above, I've begun filling up the empty areas. The walls, floor and ceiling go first. At this point I've decided where my window will be, as can be seen by the way I've coloured the floor. For this I use a Radial Gradient. Afterwards, I add a Noise filter, monochromatic at 1%. If I wanted to make it look very woodlike, a non-monochromatic noise filter would work better. But since I wanted to keep it rather toned down, I decided not to.

I've continued this process until all the empty areas were filled up.

Step 3 - Stairs, window, curtain

Stairs, window, curtain

Here we've jumped ahead a bit. I've filled up the empty areas. Also, note how I added some thicker lines on the walls near the floor and near the ceiling. I like this stuff, as it adds some style to an otherwise dull room.

The stairs were done with a linear gradient, and then I colour-burned the top. I drew a line to note the wall inside the door, so it looks like the stairs are in perspective. In all honesty, they're completely off. But, it's not very noticeable.

The window's just a simple 3-pixels thick affair. I made it brown, noise-filtered it non-monochromatic. So, then it looks like wood. The curtain is a very straight thing hanging straight down. I've selected thin lines and lowered their opacity a bit. This way, it looks as though the curtain's a bit rumpled.

Step 4 - Outside the window and the door

Outside window and door

The door to the outside was done in a similar fashion to the floor and walls. With drawing the outside I just had a lot of fun with colour gradients, noise-filtering etc. For an excellent tutorial on drawing a decent outside-scene, read here.

Step 5 - Interior design

Interior Design

For this, I can't really offer much help. Just get in there and start decorating. I usually do it in one single colour, and shade once I'm satisfied with the overall design. Draw 'em on a seperate layer, so you can always move stuff around. I also use the noise filter here.

Still looks a bit... empty, right?

Step 6 - Tapestry and black stuff

Tapestry and black stuff

Last, I've added a tapestry to fill the room up a bit. I used shading below the desk and below the cabinet. This way, it looks like things are properly rooted in the room. I've also added another cabinet and a closet in front of the room. In the corners, up-and-close, completely in black.

Huh. That's it, I think!

- Jaap Marsman

Tutorial reproduced with permission from Jaap Marsman
blog comments powered by Disqus