Art Log #1: Pixel Art Background Object

In Artwork, Development Blog by Alex Seifert

Hey, I bet you are wondering how the pixel art process is different from creating regular art.

In this Art Log, I will explain the process from start to end with a piece of pixel art background from the SNES inspired world in BiT Evolution!

Step 1: Canvas Size and Research

The first step I need to consider is the Photoshop canvas size I will be working with.
I am creating a decal fireplace for the mansion level in BiT Evolution. Since the background art for mansion is about 1060 by 644 pixels, a size of 120 by 80 pixels should do the trick.

A demonstration of a Pixel Art Background

Here is a quick mock up of the Mansion Level with a previous asset that I made, the dining table.

Now that I know the Photoshop canvas size I am working with, I can look at photos on the web to get ideas of what our fireplace could look like.

Here are some images that I found that really sparked my interest because they match the mansion levels wooden tiles. I like how the fire looks on the right image as well as the lion statues. In the left image I notice the candles placed on the mantle as well as the arch opening to the fireplace.

A reference to the PIxel Art BackgroundAnother Fireplace Reference for the  Pixel Art Background

Image sources:
Left Image
Right Image

Step 2: Sketch

Different artists sketch things in different ways. I personally prefer to work first with the silhouette of an object before I move on to the details. Other people use line art. It all depends on what you prefer and there is no wrong way to begin as long as you think big first and small details later. For pixel art, I use the pencil tool in Photoshop with a small 1 pixel brush. I also use the eraser tool set to pencil mode.
Sketch for the Pixel Art Background

Step 3: Block In

Here I go in and paint all of the major shapes and colors while looking at our reference pictures. I am copying and pasting this onto my mansion background image often to make sure the colors/values match.
Block in for the fireplace (Pixel Art Background)

Step 4: Refinement and Animation

In this step I add outlines to the entire object. It is important to have outlines so that the object pops more from the background. I also added some dithering to the lion statues to give them more form. Dithering is a term for using a checker pattern with pixels to make an object look more 3-D at extremely low resolutions.
3rd stage of the fireplace (for the Pixel Art Background)
Now that our image is complete, I need to add some animation to really bring it to life. The animation is done using the timeline in Photoshop. I will only need 2 or 3 frames to make the fire look lifelike and then we can export as a .gif under File > Save for Web. The flames were simply moved in one direction by a couple of pixels before the animation sets them back to the original frame. It is important to make the animation seamless so that it can be looped in the game engine.
Added animation to the fireplace (for the PIxel Art Background)

Step 5: Finishing the Pixel Art Background

Now I bring the file into our background image to check it one last time. If it looks good, we can hand it over to the level designers to be placed into the game.

Now a more interesting Pixel Art Background

The fireplace placed into the mock level

I hope you learned a little bit about the pixel art process that can be used to create games like BiT Evolution!

Feel free to reach us on our Twitter, Facebook, or Instagram!