Introduction to Making Pixel Art

2015-09-10 10:10:22 by bluemagma
Updated

Intro

As a kid, you’ve most likely grew up with games that featured pixel art, from Pokemon to Sonic, Ragnarok Online (3D and Pixel Art?!), Megaman. I know that these guys inspired me to persue pixel art, and now I can say that I know how to do pixel art:

This post will serve as a guide, telling you everything you need to know to begin making pixel art.

 


 

Steps to making pixel art:

  1. Choose a Pallete
  2. Make a Silhoette
  3. Add Shading and Detail
  4. Post Processing

Limitations & Guidelines

Colors have 4 channels, R, G, B, and Alpha (transparency), and most modern devices use an 8 bit per channel (for a maximum of 256 possible brightness levels per channel) for image files and displays. On old game consoles like the Gameboy, Super Nintendo, Genesis, and even the GBA, developers had to deal with tighter color requirements. The Gameboy only had 4 shades to choose from, the Gameboy Color had a 5-bit (for a max of 32 possible brightness levels) per channel display, and could display a maximum of 56 colors, though normally it was far less. Pixel art was born from these limitations.

In addition, older devices had limited amounts of ram. The Commodoore 64’s resolution was 320 by 200 pixels, and so if you wanted a 4 bit display, you would need 4 bits for every pixel (64,000) on the screen, for a grand total of ((64000 * 4)/8)/1000 = 32kb of ram, which was often times more than the amount of ram in the entire computer!

In addition, on the Nes, sprites were very small images, so often times you would be limited by the size a sprite could be, constrained to a 8x8 grid. You could only have 64 of these sprites on a screen at any given time.

We’re now free to use all 256^3 colors if we want, make pixel art at any size, but bear in mind restrictions are what makes pixel art distinct from other forms of art. Even to this day we have places like PixelJoint keeping these restrictions alive.

Pixel Art Vs. Digital Paintings

Pixel Art is an image that was designed pixel by pixel.

It’s different from other forms of art like digital painting or line art in that every pixel is important, whereas those forms of art avoid that level of percision.

Palette

Jinn's Palettes

Source: Jinn's Palletes

 

A palette is a color ramp, from low to high, and should be characterized by complex, hue shifting tones. You shouldn’t have a pallete that’s linear but rather, have one that mixes colors together.

Most artists start with an average color for the piece that they’re doing, then add highlights and shadows to that.

Chaos 0 Timelapse

A good idea is to use complementary colors to help blend colors together. Purple or Teal work well for shadows, whereas yellows and whites work for specular highlights.

It’s best to have a maximum of 15 colors per sprite (with transparancy being the 16th color).

Silhouette

Silhoette Progress

The lead cartoonist for Spongebob Squarepants, Sherm Cohen, suggested that silhouettes should communicate the idea of a character’s action. This applies not only to animation, but also to all forms of art, including pixel art, the silhouette is what makes or breaks a piece.

You want your silhouette to be solid, with no jagged lines, and would paint on top of that silhouette.

Layer Mask Gif

<p>One technique to make this easier is to use Layer masks, in Photoshop, this is done by Layer > Layer Mask > From Transparency. This will make painting easier by letting you draw strokes without worrying about the silhouette you worked so hard on.

Anti-Aliasing and Readability

Since pixel art is normally small, it can become difficult to communicate intricate details within a small space, so an artist is fighting between anti-aliasing and readability.

Anti-Aliasing is the process of making edges smoother by blending them with their surrounding pixels.

Readability is how easily you can distinguish details in an image. Generally, The more anti-aliased an image, the less readable it is.

NeoRiceIsGood's One Piece Sprites

Source: NeoRiceIsGood's One Piece Sprites

 

One way to improve readability is to add <strong>outlines</strong> to your sprite. That’s not always a good idea, such as for environments, but for characters and objects, outlines are a great stylistic choice.

Shading

Perfect Chaos

Dithering is to gradate colors together via a pattern. Generally you want to avoid mechanical dithering and op for a pattern based effect instead.

In this sprite of Perfect Chaos from Sonic Adventure DX, I dithered the image by trying to follow the flow of water around the shape of Chaos. Proper anti-aliasing and careful shapes and edges made the water look almost photorealistic.

Post-Processing

Often times your original choice of colors wasn’t the best one, so post-processing could serve as a way to correct your colors and make them stand out.

Color Curves Gif

Curves - The curve tool is a method of adjusting the ratio of colors on an image. On Photoshop this can be found at Image > Adjustments > Curves, and on Gimp at Colors > Curves.

Levels Gif

Levels - The levels tool is a simple method of adjusting the brightness of colors. The middle handle adjust the mid color balance, the left handle adjusts the darks, the right handle adjusts the highlights (Just pay attention to the color of the handles). Curves and levels are interchangable so use whichever you perfer.

Color Balance Gif

Color Balance - A method of changing the general tonalities of an image. Movie makers often adjust the color balance to have cyan shadows and red orange highlights. Look at any movie and notice just how blue it is!

1079757_144189406111_colorreplacegimp.gif

Color Replacement - Sometimes what you really need is to manually replace colors. You can do this by using the color selection tool in Gimp (There’s no equivalent functionality in photoshop), just click the icon with a hand and a blue, red, and green square, set your threshold to 0, and select the colors you want to replace. Then use the fill tool and fill the whole selection.

Color Count

To messure the number of colors on your sprite, you can use a tool like Gimp’s Colorcube Analysis.

 


Dark Souls Memories Update: Shaders

2014-06-02 00:36:06 by bluemagma
Updated

1079757_140168410633_14VolumetricLighting.png

I've recently been working on shader effects to use in the upcoming fangame, namely phantom effects and post-processing effects. In this facebook post is a video of the real time GLSL volumetric lighting and mist effects. No expense will be spared to make sure this game looks amazing! Also, since this is OpenGL, it's all processed by your GPU, so it's super fast! ;D

There will be more effects coming, I've already got Color Correction, Gausian Blur, and Overlay effects almost done. Do you have any suggestions for post-processing effects? Let me know in the comments below.


My Game ORA is on Steam!

2012-11-17 22:05:45 by bluemagma
Updated

Ora is a 3D platformer following the story of a blur of light it travels from light to void. I'm always working on it, adding new content weekly. Please show your support by rating and subscribing to the game. Thank You! It'll be available on the Google Play store sometime this year, with releases to the Mac App Store and iOS App Store following. ;D

http://steamcommunity.com/sharedfiles/filedetail s/?id=101432890&tscn=1350763601

So far it's been doing pretty well in stats:

2100 | Unique Visitors

930 | Current Subscribers

37 | Current Favorites

But I still need your support, please help out and Vote/Fave/Subscribe. :3


Steam Game ORA in the works!

2012-10-17 20:53:24 by bluemagma

http://steamcommunity.com/sharedfiles/filedetail s/?id=101432890

I'm working on an HD 3D Platformer for Steam, Windows Store, Mac Store, Google Play, and the App Store! Please show your support by rating/subscribing to it!

Steam Game ORA in the works!


AlainGalvan.com + App Development & More!

2012-09-16 20:08:27 by bluemagma
Updated

I recently got myself a new domain name, to have a better location to provide clients with my portfolio. There you can find links to all the networks I participate in, from my YouTube, DeviantArt, SoundCloud, BandCamp, and more! Please show your support and visit.

I programmed the entire site using HTML/CSS and Javascript with jQuery. Honestly, I wish I managed to get that done sooner! Everyone should take the time to make their website dynamic with jQuery.

I'll also be working on Android Apps for now on, having already gotten the tools to be able to make dynamic content on Android, and will be moving on to iOS soon. I'm working on an Anime that will be released some time in October, games for android, etc. Thanks for all the support!