Hello there! Tuukka here. I’m back from Sweden and I welcome thee to this MCE blog! We continue our series regarding MCE’s colourful pixel art graphics. Last post in the series was more introductory, but this time we move closer to some more tutorial-y things. I figured I should first introduce you to the tools I use, so here we go!
Software
Let’s get the programs covered first. I prefer using Photoshop, which, I admit, is a bit of an overkill for pixel art, but frankly, no other program I've tried has all the features and customizability I'm looking for. For example, I make heavy use of keyboard shortcuts and I want to have them in one exact way. I have learned them once and I don't have the patience to learn them anew.
Photoshop isn’t the only option of course. I have only tried a few of the free alternatives myself though. I guess I’m just too used to Photoshop... Paint.NET would be a fine substitution, but it falls short on the shortcut key department, as it has fixed ones. Otherwise I might even prefer it, because it doesn’t require nearly as much from your system as Photoshop does. This is evident from the fact that Photoshop refuses to run smoothly in the presence of other larger applications on my system. GIMP, I guess, could work too, but when I first tried it, I just went “excuse me what”. Your mileage may vary, but it doesn’t work for me at all. I no longer remember what exactly was wrong with it, but I’ve never tried it again. Also, I’m a Windows guy myself, so I can’t really touch on any Mac or Linux specific programs, sorry!
I also occasionally make use of the good old Microsoft Paint. I know, you think I’m mad but hear me out. It’s only for some very specific purposes. Photoshop comes with all kinds of art-fancifying settings, which are all on by default. Paint doesn’t have any of this, so for me it works correctly without me having to meddle with any settings and my mind can be at peace.
One of the things I use it for is scaling. Scaling up, to be precise. Never scale pixel art down. Unless you for some odd reason don’t work with a 1:1 ratio, I guess. Anyway, I don’t trust Photoshop to scale things pixel perfectly, because of all the filters and settings. For the record, this is totally possible to do, so maybe I’ll get over it eventually.
Another thing is shapes: you can make them in Photoshop, but it’s quite unintuitive (or I just haven’t figured out an easier way). Let’s make a humble circle to illustrate. First, make a circle with the shape tool with settings that do not ruin the pixels. Then select the result and go to Select -> Modify -> Border, set it to 1 and hit ok, and remove the feathering this causes. Now you are free to clean the pixel line up. In Paint, you select the circle shape, draw it with border set to 1. Boom! You’re ready to clean it up. As demonstrated, it’s possible to make a circle in Paint with half the steps and in a way more obvious manner. Still, circles coming from either program have to be cleaned up, because they tend to have asymmetry and/or strange pixel placements that we call artifacts. As you may be able to see in the image though, Paint’s circles are way closer to actual circles with way less artifacts than the ones coming from Photoshop.
When I began getting into pixel art, I used just Paint. Nowadays I find it too slow, clunky and feature-barren for any serious use. Some of the most important features it’s missing are keyboard shortcuts (or at least sensible ones), layers, alpha channel (i.e. transparency) and good selection tools. Still, I suppose, it has a few things in its favour. For example, it’s very simple and easy to use. It’s also a default program in all versions of Windows, so it’s definitely accessible.
I should note that pixel art is best stored as PNGs, simply because of its many advantages over other image formats. It is platform independent, isn’t limited in color, supports transparency, has lossless compression and typically small file sizes. This is where the last program I want to introduce to you comes in: OptiPNG. As you might be able to guess from the name, it’s a handy little program that optimizes any PNG files you throw at it. Even though Photoshop’s export tool compresses files quite a lot, OptiPNG can still make their size even smaller. This is not as much of an issue nowadays, especially with smaller games, but who wouldn’t want their files to take up less space? Here’s a test image with file sizes with and without the use of OptiPNG:
Equipment
While I can still make pixel art with just a mouse, I much prefer a graphics tablet. Currently I use a Wacom Intuos4 PTK-640 Medium (37w x 25.4h x 1.2d cm, or 14.6w x 10h x 0.5d in), which to me is big enough for the precision I’m after. A larger one might be nice, but maybe it would be too large to carry in the backpack I have equipped. Compared to mice, tablets have a great advantage in precision and speed once you get accustomed to using them. If you have any experience in traditional drawing or painting, you should be able to become used to one quite naturally. You can of course become a wizard with a mouse if you really want to!
Shortcuts
Using a tablet also ties in with my liking for shortcut keys, because I want to keep my right hand on the tablet and let my left hand handle the shortcuts. The single key shortcuts' locations don't matter to me that much, but multi-key shortcuts must be feasible with my left hand, preferably on the keyboard's left side.
Photoshop’s defaults for zoom in and zoom out are the greatest offenders to this, as they’re CTRL + and CTRL -, which to me is ridiculous, so I've set them to CTRL SHIFT Q and CTRL SHIFT W. I also have 100% zoom (i.e. native size) set to CTRL Q and CTRL W. The different zooms have to be easily accessible, since I use them all the time. You can’t draw pixel art in its native size (unless you have the eyes of an eagle and crazy hand-eye coordination), so you have to zoom in. You still must know what the piece you’re working on looks like in its native size, so you have to zoom out all the time. Having to use both hands or using my left one out of place would really break my flow and concentration. There is just one downside. CTRL Q is also a shortcut in Google Chrome, which I usually have open on my secondary display (not necessary for drawing, unless you’re drawing from reference). You know what it does? It closes Chrome. Being one of those people to whom having 8+ tabs open at the same is nothing new, you can imagine my reaction when I have the wrong window selectected when I do this! You can just open 2 instances of the same image document too, but to me it just gets in the way.
Some other non-standard shortcuts I use are CTRL SHIFT ALT N, CTRL SHIFT ALT H and CTRL SHIFT ALT V, which rotate the current selection clockwise, mirror it horizontally and mirror it vertically, respectively. These become useful in making things with reflectional or rotational symmetry, like the circle I introduced you to earlier. You may notice these ones break my only-left-hand rule, which I might redeem in the future, but for now these shortcuts aren’t needed commonly enough, I just hate sailing in the menus when I actually do need them.
Wow, that was long! I think that might be enough for now! Next time we probably get into actual graphics! Thanks for reading and stay tuned for more. Have a nice day!
PS. Follow us on Facebook and Twitter!
Great insight. Always a pleasure to read
Thanks!