Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
Space Invaders to Super Mario, pixel art is well known within the
game industry of yore. It's quite likely that you grew up seeing
a great deal of the art form through gaming consoles or PCs without a
great deal of investigation into the process of creating it. If, however, you were anything like me as a child, simply
guiding Link through Hyrule was not enough: you wanted to create the
artwork he swung his sword in, too.
As pixel art in game design, illustration, and other media has made quite a comeback in recent years (likely due to nostalgia and an appreciation of a beautiful, if sometimes tedious, style of artwork), it's a great time to ask the question: “What's the deal with pixel art?”
What Qualifies as Pixel Art?
Considering that everything you are viewing on your monitor, tablet, or phone is comprised of many, many pixels, the often asked question is “how is this not pixel art?” It's art, it's made of pixels, so surely all digital art is pixel art. While technically correct, when talking about “pixel art”, we're focused on a specific style of artwork most often employed within the gaming industry. Pixel art is a raster-based digital work that is created on a pixel-by-pixel level. Typically very small, the art form is similar to mosaics or cross-stitch in that it focuses on small pieces placed individually to create a larger piece of art.
Many image editing programs can be used to generate pixel art, so long as the program allows artwork to be drawn on a one pixel by one pixel scale. As such, the popularity of artists using MS Paint arose due to its being readily available to Windows users. In the case of other image editing programs, tools outside of hard-edged pencils and erasers are typically discouraged. A hallmark of pixel art tends to be the artist's ability to render complex designs and scenes without the use tools like Dodge, Burn, or shape tools.
What Techniques are Used?
Often, the color palette within pixel art is limited. In previous years (we're talking a couple decades at this point), the limit in color count was due to the limits of game consoles or display on a computer monitor. As such, a technique known as dithering was employed. Dithering is the staggering of two colors in order to blend them together without having to involve extra colors. The pattern an artist uses, either style of staggering pixels or density of dithering, contributes to how well the colors blend. It's similar in style to the artistic technique of stippling.
Another technique used is anti-aliasing. This allows a an object or game sprite to blend easily into the background or another object. Depending on the overall look an artist is striving to achieve, anti-aliasing may not be used at all. Often, anti-aliasing takes the form of pre-rendered backgrounds and leads to painterly work which allows a game sprite to stand out from the background and be easily seen by the player.
Both techniques can either be done by hand or with the help of tools within a program like Adobe Photoshop. When saving pixel art in either the GIF or PNG format (both of which are the best formats due to the addition of JPEG artifacts often ruining pixel art quality), Photoshop allows for color limiting options, dithering, and hard or anti-aliased edges. The same goes for how an image is re-sized within the program, allowing users to enlarge pixel art without losing its hard edges.
What Does 8-bit Mean Anyway?
It's terrible trendy for pixel art inspired designs to be called 8-bit whether they are truly 8-bit or not. Within pixel art, 8-bit is in reference to the color. An 8-bit console, like the Nintendo Entertainment System, was able to display up to 256 colors . Each color was based on a set of integers, 8 being the highest number of integers that could be stored at the time by that machine. So the color profile that was used held 3 bits (or bytes of data) of red, 3 bits of green, and 2 bits of blue, creating 256 colors that were displayable. Additional limits were placed on video games depending on how much information was stored and accessed on a game cartridge. While a console could display a multitude of colors and animations, limits set allowed the games to render quickly during game play and process faster.
In the early 1990's, consoles like Super Nintendo and Sega Genesis were 16-bit, upping the color display count to a whopping 65,536. This allows for smoother gradients and more complex artwork to be created and animated within video games. By the time consoles and computers displayed 32-bit graphics (think Playstation One), 3-D rendered work was already taking hold and artists rendering pixels were now rendering polygons. Additionally, game consoles were able to render said graphics at a higher speed than their predecessors thanks to advances in technology over the years.
What is Isometric Pixel Art?
Let's say you're playing a side-scrolling video game like Contra (well known as an arcade game in the late 1980's and on the Famicon/NES console). You'll notice that the artwork is in profile and no vanishing point exists. There's no perspective going on at all in games like this. The same goes for Super Mario games throughout the 80's and 90's. Additionally, games like The Legend of Zelda: A Link to the Past showed a top-down view (showing the top or the top and one side), where the player was able to peer into buildings from above. This showed an added dimension to the graphics being displayed, as well as characters within the game, but the overall look was still very flat in comparison to 3-D rendered games produced later.
When someone refers to pixel art being “isometric”, they're talking about a type of parallel projection that takes on a 3/4-like view more accurately referred to as “dimetric projection”. It's not quite 3-D, but no longer as flat as the aforementioned perspective styles seen in other pixel art. A well known example of isometric perspective in gaming would be the 1982 classic “Q*Bert”. While the character of Q*Bert himself is flat, the levels on which he hops show the top and two sides of each box. Such a view made the played move Q*Bert in a mostly diagonal fashion.
Creating isometric or dimetric pixel art is far more complicated than a side or top-down view. Often artists work on a grid in order to keep their vertical, horizontal, and diagonal lines from straying into the wrong perspective and their angles at the correct degree for the scene. It's quite similar to working with perspective in technical drawing and takes a fair bit of planning, measuring, and understanding of shapes, space, and how they coordinate in order to form accurate objects, sprites, and environments. Once 3-D graphics became more prevalent, the isometric pixel art style gave way to perspective projection, which is easier for an artist working within a 3-D space to create, as it's the type of space we exist within as well as what's most often taught and used within multiple disciplines of art.
What About Non-gaming Uses of Pixel Art?
While the most prevalent use of pixel art has been in video games, it's an art form unto its own all the same. Pixel artists known as “dollers” (as in, those who make dolls) use the style and techniques from 8-bit and 16-bit video games in order to create base bodies, hair, clothing, and environment for digital doll-like avatars.
Many websites from the late 1990's into the mid-Millenium were filled with animated GIFs, avatars, and layouts rendered entirely in pixel art. This was most prevalent in South Korea where the popularity of websites like iBravo and Sayclub had users purchasing components for their profiles or to interact with other users. Additionally, doll-makers were created from the artwork on websites like these (and those like them worldwide) whereupon users would dress up base bodies in pre-made clothing and accessories to display within their profiles on websites like Myspace.
Emoticons and kaoani (a Japanese term derived from “kao” meaning “face”, and “ani” meaning “animated”) were all initially rendered in a pixel format. In the case of both, they were often animated allowing users on early social media, message boards, and within instant messengers to display qualities such as mood, activities, or various wordless communications. Animated buddy icons became extremely popular for users of AOL Instant Messenger some fifteen years ago.
Computer icons throughout the 90's were pixel art pieces. Your mouse cursor, unchanged for decades, is still a simple pixel art graphic. Interestingly, most of these uses of pixel art have been replaced by vector graphics (or the popularity of them has) within the past decade. Doll-makers, website avatars, full website layouts, and more are all vector graphics (presented as raster-images) likely due to the need for multiple display sizes within each device (computer, tablet, phone, etc).
Nostalgia as an Art Form
Leaving aside the practical uses of pixel art, artists nostalgic for the style of work within video games from their younger years create illustrations and pieces of design for art's sake. Some pieces are enlarged, retaining the fidelity of each pixel edge, rendering the piece mosaic-like, whereas other artwork is created on the small-scale over a large picture plane rendering the work something akin to “Where's Wally?” (Waldo for my fellow North Americans). In either case (or any other creation based on the style), it's a part of the growing movement to capture the past in the form of art. By creating pieces of work reminiscent of media of the past, our interaction with it is involved within sharing memories we've had with similar styles within video games, internet browsers, and early social media.
Alternatively, artists may just really enjoy the look and feel of pixel art versus having some higher agenda for engaging with the art form. In any case, its popularity has been on the rise appearing in art galleries, on clothing and other accessories, and right back in various gaming platforms.
Care to dive into pixel art yourself? Why not check out these wonderfully relevant tutorials and take some pixels for a spin: