Hello everyone! As I promised a couple of weeks ago, it’s time go back to Hexels one last time. Today I’m going to showcase a new feature which is only available for the beta version of Hexels while I’m writing this: 2D animation.
Bad guys on cars with guns! Thug Llife
First of all, animation in Hexels is still in beta and there are some bugs, so take care and save the project regularly.
Hey! you have 8 minutes? That’s what you need to read the whole thing!
This is the last part of our pixel art tutorials, if you’re interested about the pixel art basics or about pixel art animation from scratch, don’t forget to check the part 1 and part 2 of this series.
The pixel is the smallest part of almost anything related to images, and most of the time is indivisible. Every screen or non-vector image are composed by pixels, and the size of them are proportional to the amount of pixels and the size of them. Sometimes the amount of pixels is represented in terms of resolution: for example, a 1920×1080 picture has 1920 pixels width, 1080 pixel height, 2073600 pixels in total and the pixel size depends on the picture size or the “zoom” applied to it.
A pixel has two main properties: they’re squared and colored by a single color. Sometimes, a pixel may have an opacity value to achieve some transparence effects.
A closer look to a pixel
As shown in previous articles, we can create pixel art by painting each pixel one by one, but in theory, we can create any image using the same technique (and some of our sanity). Every non-vector image is an approximation to a model using colored pixels and some techniques. Normally, the bigger amount of pixels, the better the approximation will be.
Each pixel has a color, but what color? There are any limits?
Well, once upon a time, any NES videogame had around 13 colors available at a time and 50 in total, and Game Boy has only some shades of green to work with. Now almost everything works at least with 8-bits colors, and that means 256 colors. Raw pictures taken with reflex cameras can reach 12-13bits, and some software like Photoshop can work with up to 16-bit. At this point, using the 8-bit palette is a common practice, but if you need a classic design for your project, you can use only NES colors or even shades or green like the good old Game Boy times.
More colors means more freedom and more ways to detail your models without adding more pixels. For example, the Mario model changed a lot in a few years without growing a single pixel:
Mario color comparative
In previous post I’ve written about dithering, using color contrast to create details, or hard lines to define shapes. Now it’s time to create softer curves, and the way to approximate a shape created by little squares to a soft curve is called anti-aliasing and it’s done by blending some pixels with the background color (or using the opacity value to blend them with dynamic backgrounds).
Anti-aliasing example
That’s not a technique to hi-res pieces or 3D games with tons of polygons and huge textures, you can apply anti-aliasing to a low resolution pixel-art model to create softer curves, especially in models over 50×50 pixels, where the pixel size is usually little enough.
Lots of doubts come from the size topic when someone arrives to the pixel’s world. The pixel size is so important, your models have to be in the same scale as the background, and that means a fixed number of pixels as size. Nowadays, a common screen is much bigger than an arcade screen, and that means smaller pixels, what means smaller models with the same amount of pixels at the same time.
size comparative
At this point a difficult decision has to be made: What kind of pixel art you want? You can choose any amount of pixels to work with, the more pixels, the more detail you can achieve, but as I mentioned in the first part of this pixel art series, another option is creating a low res pixel art and then, scale it to a higher resolution using the “nearest neighbor” method to create “virtual” pixels composed by more than one real pixels (sometimes a lot of them)
SNES Zelda (Classic pixel art) Hot Line Miami (Enhanced pixel art to 1080px) And castle design by fool (HD pixel art)
A good way to start is creating a canvas as big as the chosen resolution, and then draw a fast sketch of the model to see how many pixels are needed. Making the model’s canvas a bit bigger than the size of the sketch is always usefull, especially when the model will be animated (a wider area is needed for characters performing dive kicks!).
pixel art first sketch and model size
Then I’ll leave some links for you:
That’s all for now, and that’s all about pixel art for a while. We wait your opinion or results on any of our social accounts or even here as a comment!
PD: Thanks everyone for your attention and thanks to all of our followers, we are more than 100 in twitter right now! Even boss loves you all!
Some weeks ago we released the first part of the pixel art tutorial, leaving animated pixel art to be released someday as a second part. That day has come! Today we are going to make the pixels move and show how to do it using Photoshop.
Before painting some pixels, we need some software to work with, and most of the times, a model is needed too. I’m using Photoshop, and this post will focus on how to use it. I’m using it because I feel so comfortable with it, and it offers so many tools to make the process and post-production easier even if is not a software designed especially for pixel art. There are other options like Pickle or Graphics Gale, which are good options as long as you feel ok with them, for example:
About the model, I’ll use as reference the incredible work the guys at Deconstructeam are doing for their “Gods will be watching”. It’s an open secret that I love so much how this game looks and how hard they’ve worked to create a unique atmosphere using tons of little pixels. The result won’t be even near their quality, I’m not that good, but be sure I’ll try my best. Deconstructeam – Gods will be Watching
Gods will be watching
Let’s start! For the first steps, anyone can go back to the first part of the pixel art tutorial and find out how to create a basic model without any animations. For this example I’m using a 64 pixels squared canvas, but the canvas size depends on the pixel size needed and the size of the design. Notice that every example I’m showing here has been scaled using the first article process, increasing the image size with the nearest neighbor method. If anyone of you try to follow these steps, you’ll have to increase the zoom to 800% or more to work with the 64 pixels canvas. One of the easiest way to go is to create a basic shape to fix proportions and size of the character. As shown in the first part, a sketch drawn using Photoshop can be used to achieve the pixel over technique and fit a good shape to work with. Once the basic shape is created, I’m only adding some base colors and some lights and shadows to create some volume. In this case the layer support of Photoshop allows having each step in one layer, making each edition and correction much easier.
building pixel art
Yay, the model is done. Now another flash back is needed. Once upon a time I posted something here about animation using Photoshop’s timeline right here. The next step is more or less the same I wrote there, adding a new frame to the timeline for each frame in the animation, lowering the last frame layer to have something as a guide, and the redrawing each pixel again in a new position to create an interpolation. As soon as the model is simple, I’m working over the base layer without details, because is enough to see what I’m doing and adding details is as simple as adding a new layer to each frame. Everyone has to find his workflow; it’s not a mandatory to work like this. Is useful to have a layer with each base color used for the model, because while using the pencil tool in Photoshop, you can press “alt” key and click over any color to switch to it and paint without messing with color pickers to find the color you has been using for the last 30 layers.
pixel art animation process
That’s how it should look at the end.
basic pixel art animation
Once the base animation is finished, the model needs some details for each frame. That’s as easy as create a layer for each frame over the base layer and painting some lights and shadows as we did in the first step, but now the work is multiplied for every animation frame. Again, having every color needed in the process in an independent layer is quite useful.
adding details to pixel art
And that’s all folks! this is how it looks at the end, a though guy firing to someone or something.
pixel art result
As I said at the begining, I like photoshop so much because I feel confortable working with it, but there are more reasons, like adding some cool efects like the following to a pixelart work with ease.
pixel art post production
The final psd files are available through this link
Want to know more about pixel art or watch more tutorials?, we have more for you:
That’s all for now. Hope to see all of you as soon as possible!
Some years ago, when 3D games shone running in the brand new 32 bits consoles, 2D graphics with low pixel density was considered by most gamers as something from the past. Polygons replaced pixels in most of those new games, or at least, the designer increased the pixel density, hiding those squared forms and hard edges from the past. With the indie wave, games like “Gods Will Be Watching”, “Hotline Miami” or “Fez” gave pixel a new dimension, showing a new way to show an entire world to players using pixels, without heavy textures and 4 million polygons for each model.
pixel art example
In my case I love how games like “Fez” looks, but I’m not a big fan of designing using pixel art. The main reason is because among video game development beginners there is a general belief about pixel art being an easy (or the easiest) and fast way to create game assets. In my opinion, creating some basic pixel art assets is quite easy, but if you want something good, it becomes a frustrating work, painting pixel to pixel by hand in most of cases, frame by frame of each animation without any interpolation tools or ridges. It may seems as easy as composing something using little colored squares, but there are techniques, processes and problems you should know before jumping into a project with thousands pixels to paint.
After trying to draw something using a 16x16px canvas, some may think about drawing something in a large canvas and then reduce the image size to 16x16px. It’s a good approach, but even using a software like Photoshop with some configuration parameters optimized for reduction, the result won’t be as good as a handmade pixel art could be. If you want to give it a try, in Photoshop go to Edit-> Preferences -> General ->Image Interpolation -> Bi-cubic Sharper, and then resize your image to a few pixel canvas. You’ll have something like this:
pixel art by reduction problems
The automatic interpolation will end with blurry lines, loss of detail and some colour problem as can be seen above. The real sized view it’s more or less well defined, but we want a model with noticeable pixel composition, not a smaller one. As I told, a good pixel art piece is far from done by a few clicks, but this process is a good starting point for future steps.
Ok! Open your favourite drawing software, create an small squared document (like 16 or 32 pixel per side) and look for a tool that allows you to paint only one pixel at a time. In Photoshop, the pencil tool is the way to go. Try to draw something and you will notice some difficulties drawing diagonal lines and curves. At this resolution, each pixel will be visible and a curve and a diagonal line are impossible to be represented as a composition of little squares like the pixels are. They should be represented by approximation, drawing pixels in a zig-zag pattern to fit them to what we want as much as possible.
basic pixel art lines
Leaving lines aside, any area can be filled with any available colour by drawing pixel by pixel, but what about transitions between colours? How can we blend a highlight with the base colour? Well, we can’t, at least not how it’s done in high resolution. Again it have to be represented as an approximation called “dithering“, placing pixels of the first colour between pixels of the second one. This won’t be the best solution with every colour palette, giving a weird look for the dithered area if the two colours are complementary or the contrast between them is high.
Dithering examples
Now, going back to the first part of this article, let’s rescue our little cat and resize him. As shown before, the resized picture has some defects, but can still be a great guide to draw the cat by hand. This is called “pixel over”, and you can resize any picture to draw over it or sketch what you want to create in high resolution and then and use it as a guide after being resized. A fast example can be seen before; even with some outline and dithering errors it’s much better than the automatically resized version seen before.
pixel art fast example
There is some things to take in consider about pixel art and how to work with it:
There are some links if someone want’s more:
Next time the pixel will move! stay tuned.