Sindrella: Making the Graphics

In this game, the character is exploring a village and talking to the characters who live there. The main graphics in the game are a map, the individual buildings in the village, and some smaller character and object graphics that will appear in-line.

In this post I show how I created the starting location for the game, Sindrella’s house.

Pixelating the Basic Shapes

For this project, I used Adobe Illustrator and Adobe Photoshop, because it offers so much more flexibility… and I have to get my money’s worth out of my Adobe subscription 💀 But for simpler projects, I love using simple pixel art software that keeps me from getting carried away.

I start out by making the basic shapes in Adobe Illustrator, where it’s much faster to make changes and move things around until I’m satisfied with the overall look.

I create a fairly small (180×180 pixels) document in Adobe Photoshop, then paste the Illustrator shapes as “Pixels.”

Now I’m ready to start adding outlines and details. I save the background for last!

Adding the Details

I often search for other pixel artists’ work to give me ideas for how to implement things I haven’t tried before, such as bricks or leaves. I looked at many different pixel-art cottages and castles to get an idea of how stones, bricks, and plants might be done. In this one building, I used several different styles, so that it will be easy for me to copy and paste them to create the other houses in my game. 

I added a few darker specks to the “mortar,” some lighter lines to the top/top-right of the bricks, and some colorful shading make the wall more dynamic and lively.  

The vines on the side, and the windows, are very simple and only use two colors. Same with the bricks on this turret.

I added some purple flower for pops of color, but I’m not sold on the overall effect of this window plant, because it has such a different look from the vines.

This super simple brick style allows you to leave most of the wall blank. Filling in the whole wall with bricks looks too cluttered and busy.

The chimney has a similar style as the base of the building, but with square blocks and added contrast.

Chimneys always look better with a puff of smoke coming out of them! It’s summer though, so I only added smoke to the kitchen chimney.

Adding the Background

The background (trees) and foreground (grass and flowers) adds dimension and context to the illustration, but shouldn’t be too distracting or busy. For this background, I used similar colors to what is already in the illustration, and very few details. I’m not sure about the foreground yet… I will come back to this graphic later to see if it needs fine-tuning.
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Share on print

Leave a Reply