Game art in Photoshop - Making buildings
Photoshop Tutorial

Enjoy this tutorial on creating game art and buildings in photoshop. Pro Game artist Christian reveals his secrets to PhotoshopCAFE.

INGREDIENTS

by Christian Johansson

More Great Tutorials

PhotoshopCAFE home

1.

Finding references and textures

 

The first thing I do is start collecting as many photos of buildings and city landscapes as possible. I look for textures and references, to get a sense of how a building was constructed and how I can recreate it with Photoshop. For this example I went through my archive of photos taken in New York, Los Angeles, Stockholm and Copenhagen among other cities.

 

 

2.

Preparing collected assets

 

When I find a texture that works for me, I begin skewing it and alter its perspective into what it would look like if the building was seen from its front. First then, you have something that is usefull to you. When thats done, I make sure that the image is square.

 

 

3.

Setting the perspective

 

After I have gotten my building's texture where I want it, I immediately add a square on a layer on top of it, that will serve as roof. I leave it flat and vector looking for now. Then I tweak the buildings front, using the skewing tools, so that the perspective is almost straight from above but with the camera slightly tilted backwards.

 

4.

Adding details

When I have a base that I am happy with I move on and start adding details. For this building I felt like adding a little obelisk to add some interest to the building. I imagined what the vanishing points would be and drew a rectangular vector shape. I then grouped a stone texture I found on google to the vector shape. I also shaded and highlighted it slightly to add some depth.

Further I also added a sidewalk pretty much the same way I added the obelisk. I kept the sidewalks edges straight so that this building could be lined up with other buildings in my city.

 

 

5.

Define distance with shadows

 

To make it feel like the building stands out from its background I add a drop shadow in front of the building. A good thing to know about shadows, is that it hints on how tall the casting object is and what it looks like seen from the side or front.

Also, to make the building sit a little better, if you feel like it is floating, is to faintly paint under the pavement with dark brush.

 

6.

Next Step

Start drawing a couple more buildings. My library consists of 5 buildings. The more building you can construct and have in your library, the better it is. You city will feel less repetitive.

After you have your buildings, start adding details to the streets, like street lines, streetlights, stoplights, parks that divide the lanes etc.

To the right is was my final result looks like. It took me about 40 hours to build this entire city.

 

Questions?

My e-mail is christian@another-me.com. If you have questions or wanna discuss the matter Ill try to get some time over and be available for answers. Good luck and have fun!

Christian

Read the entire article including process and planning

About the author

Christian Johansson is a New York based graphic

designer originally from Sweden. With a background and training at Hyper Island, School of New Media and a full time design position at Big Spaceship, New York, he has now been a professional graphic designer and animator for about 4 years.

 

During his time with Big Spaceship he has developed several online games for diverse clients, among others, Paramount and Sony Pictures.