Long time no read but here is the second part of my pixelart tutorial. This time I want to focus on shading techniques, some software for creating pixelart and file formats.
When creating pixelart sometimes you want the graphics to have some depth, so you need to make them kinda look 3D and you can accomplish this by using shading techniques. I figured out for me that there are two seperate techniques which can also be combined.
Gradient / simple shades
In this picture you can see the the different techniques combined. One of them is a gradient. In a gradient you go from one color to an other. This can be accomplished by using a distinct amount of colors, e.g. 8 colors or just 3 if you have a very reduced palette. As you can see the more different colors you use the smoother the gradient gets. You can imagine a gradient in 2D images also as a stairway, the dark colors at the bottom and the light colors above. Going from dark to light with only few steps means that the steps have to be bigger then when you use more steps. At some point the steps become so small that you can imagine the „stairway“ more like a smooth line.
Using gradients in your 2D graphics makes them appear more 3-dimensional but you should keep in mind the smoother the gradient the less retro your graphics might look.
In the image to the right you can see one pattern of dithering. Here you want to mimic a gradient with a reduced pallet and less colors so that you can keep your retro charm and don’t use much colors. What you see is only one method of dithering, ther are as much as you can imagine, you can work with a leave shape e.g. when you want to apply dithering to a tree graphic or just single pixels to have more like a gradient effect. Using dithering in the right way takes some practice but it’s accomplishable in a relativly short time. If you want to see more dithering techniques just use Google and gather what you think is suitable for your game.
In this section I want to present some software I know about that can be used for creating pixelart. I also want to show some advantages and drawbacks.
Paint is a drawing software that comes along with Windows OS. You can draw pixelart pretty easy because Paint is a relativly simple drawing tool. You can draw pixel by pixel using the pencil tool or draw with „brushes.“ I don’t want to go really deep into that because everyone knows Paint. A drawback of Paint is that you can’t use multiple layers for drawing (at least I don’t know how) and also working with transparency is not possible. If you Think of animating your graphics this task seems nearly impossible with Paint, or at least really hard to do. You have to draw each graphic seperatly and save it as a new file and later create an animation with them. But therefore the next tool is pretty handy.
- OS: Windows
- Costs: comes along with Windows OS
- Ready to use for creating pixelart
- No need for download, install
- Not able to work with multiple laysers
- Not able to handle transparency
- Animating your graphics is hard to do
Piskel is a neat and handy open source and free to use web based drawing tool. Piskel is able of drawing in multiple layers and also animating your graphics is pretty handy because of the shown animation cycle with editable frame rate. The color palette gets generated on the fly from the colors you use or can specify it earlier. Also pretty handy is that you can create an account with which you can store your graphics online and work from possibly everywhere. Piskel makes it really easy to import and export graphics. E.g. you can export your animation/pixelart as a spritesheet or an animated gif. The best thing about Piskel is that you don’t need internet connection, or at least only once. You can download an offline version. I often use Piskel for creating animations because of the simple way to create and export them with this neat peace of software.
- OS: all you can imagine as soon as you have a browser that supports javascipt
- Costs: it’s free to use
- Multiple layers to draw on
- Great tools like a dithering brush, lines and shapes
- Built in animation mechanics
- Usefull mechanics when working with animations and multiple layers
- Downloadable version avaliable
- Is in development, so you can expect some other great features
- Becomes relativly ressource heavy with large images (depends on your PC)
- It’s not possible to use partly transparent colors
A bigger workstation comes along with GIMP. Using it as a beginner is not that easy, at least not in my opinion, but using the power of the internet and your mind you can find great tutorials giving you a goot start with GIMP ant the best thing about it: it’s completly free and open source! That means you can find plugins and assets for GIMP online and your workflow might also profit from it by making you creative work easier to accomplish. In general GIMP is compareable with Photoshop and can do the most tasks that are also able with Photoshop. At some pints you might discover some disadvantages e.g. when you want to crate animations but all in all I really enjoy working with GIMP.
- OS: Windows, Lunix, MAC OS and more
- Costs: open source and free to use
- Comparable to Photoshop in some parts
- Complete workstation for picture editing and creating graphics in general
- Pretty complex and not that intuitively to use like simplier tools
- Tasks like animating a graphic is not that easy
What could I writer about Photoshop, it’s a complete workstation for editing and creating pictures and graphics. There are many great features coming along with Photoshop for creating pixel art, like pixel perfect lines, color pallets, working with multiple layers, animating your graphics is fearly easy etc. Many people know and use it even for making simple things like applying filters on your pictures but the complexity is pretty overwhelming for some users.
- OS: MAC OS, Windows
- Costs: depends on the version you want to use, there is also a free version
- Suitable for all need coming along with drawing, animating etc.
- Complete workstation for creating graphics and picture editing in general
- Many tutorials available online
- Hard to learn for beginners
- For some needs way to much features
5. File formats
So all in all I want to focus on three different formats JPG, BMP and PNG. The difference in these formats is compression and number of colors.
JPG saves pictures smaller than some other formats, reason for that is an algorithm that compresses the contained image by calculating color transitions between some pixels. Result is an image that is smaller than saving the raw data but also a little more blurry. Using JPG for pixelart images bringes some small „errors“ in the image and makes them look not exactly like you created them.
Saving your images in BMP on the other hand doesn’t compress them at all but you have a reduced set of colors, so not every color you might have used can be represented as the same color. Result is here sometimes a change in the colors you used but the pixel look will stay.
Last but not least is PNG. Saving your images as a PNG-file dont compress them at all and the colors will be the exact same as you had while drawing. Since you draw relativly small graphics the difference between compressed images and not compressed ones is not that big. Biggest advantage of PNG before JPG and BMP is the quality of the graphics, using them later in your game will look exactly like you created them (at least you didn’t changed colors etc.). The following graphic from Deviant Art user vanmall hopefully helps you understand why PNG is the desired file format for pixelart.