In short: Indie Game Magazine is an independently owned, developer-centric, video game magazine. IGM strives to highlight the artists and community behind the most creative video games. For us, the best games around are indie games. What are indie games? Indie games are video games made by passionate game developers who typically publish their game on their own via the internet.

Post news Report RSS City Artwork Creation

Designer GM Cerberus takes us on a tour of how one small portion of the game is created: A single building from start to finish.

Posted by on

Hello all, GM Cerberus here!

I create all of the gfx for our current title Illyriad and for the upcoming MMORPG called Age of Ascent. There is a ton of art in each, so we thought it would be cool to show you just how I create something very small yet very important; a building for Illyriad.

I start with a 500 x 500 image. Working at 500 x 500 gives me a lot more freedom to work in detail instead of trying to work at 75 x 75. This image shows how I begin with a simple outline using the pen tool with no fill and a 5px outline. Using the pen tool instead of a brush insures crisp edges for the outline.


This image shows the interior linework using a combination mouse and tablet brush.


This next image shows the coloring process. To make it easier I take the vector outline in step 1, duplicate it and fill with whatever color I desire. This also allows me to play around with different color palates quickly and easily.


Finally in Step 4 I add shading using a 25% transparency black brush. This is a simple but effective method to create depth and weight.


Glow effects are effective when trying to create the illusion of light. In this image I paint all the interiors of the windows with a bright color, usually a light yellow or orange, and then I add a layer on top of everything (including the contour) with an orange outer glow painted with a 15% transparency brush. I finish it off with hand painted bits of white in the center of the window to give a nice gradient from White to Yellow to Orange as seen in this next image.


When adding components to your image that go directly on top such as the walls for each city, I like to work on them by adding a transparency to my grouped city image as seen in this image. This allows me to get an idea of how it will look without having to fool around with constantly hiding the back layer. This image shows the full end product.


This image shows a bit of my workspace, Using Window -> Arrange -> New Window you can pull up a second window and zoom out to get a real time image of how the final image will look when saved at the desired resolution. This is handy when working on very small graphics as details can be lost or obscured when shrunken down to 15% of the original.


I have two methods for creating these images, addition and subtraction. Both have their merits and take an equal amount of time. On the Russian-style city I used an addition method where I start from Tier 1 and build on to the image for each tier. With subtraction, I start from Tier 5 and work my way down using layer masks to erase what I don't need anymore. I then draw on top of what I erased as seen in these images:


I hope you enjoyed a look at how I create some of the most detailed images for our MMORTS Illyriad. You can play the game to see them all in action!

GM Cerberus

Post comment Comments
Sph!nx
Sph!nx - - 722 comments

Very nice! I like the art style. Always great to see how artists work!

Reply Good karma Bad karma+2 votes
Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: