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.
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.
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.
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.
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.
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.
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.
I hope you learned a little bit about the pixel art process that can be used to create games like BiT Evolution!