Any advice on pixel art?

Miscellaneous Topics
#1

Hi all! Simple question really, where should I begin with pixel art?

I enjoy making graphics as much as I do coding and it’s a nice to take a break and just make a little art, the issue is… i’m not that good :stuck_out_tongue: I also struggle with sprite sheets for my animations as I feel that I can’t draw the same thing over and over without it looking weird or not looking like the original design.

Any tips/tricks are welcome! :slight_smile:

P.S Here is a cookie from Google :stuck_out_tongue:

http://www.terrariaonline.com/attachments/unnamed-jpg.61157/

#2

You should probably start by learning color theory, so that you can find a good balance of color in your pixels. Also, learn about dithering and Anti-Aliasing both help to make your pixel art look better. But really there is no wrong way to do art, you just do it. You’ll get better over time.

#3

Here’s a cool page with a ton of stuff for indies, including a section on aesthetics which includes pixel art (linked): http://gamedevelopment.tutsplus.com/articles/fantastic-gamedev-tutorials-from-across-the-web--gamedev-3384#aesthetics

About colors, there is a article in there about how to procedurally choose pleasing color palettes.

#4

And like Nike said, Just Do It

#5

Usually when I create pixel-art, I have a small process that I follow.

I start off by getting a basic outline of the shape I’m trying to draw, then I fill in my base colours. After that I work on the shading + dithering process. Once that’s all done, I finish it off by replacing my black outline with something friendlier on the eyes. Simple, but gets the job done.

I also tried messing around with the image you had posted earlier, here’s my version of it:

Hopefully this helped :slight_smile:

  • Jev
#6

That cheap drop shadow… works every time.

#7

But also no deep black anymore.

#8

Yeah the outline coordinating with the rest of the palette + the lighting and shadow for 3D makes it pop.

Make awesome pixel art with this 1 silly trick!
Graphic designers hate him!

#9

ohm nom nom, cookie;

http://sixtygig.com/junk/cookieLarge1.png

Believe it or not, a cookie is a pain to make. There’s not much to work with. :stuck_out_tongue:

I’m out-the-door to class though, so I can’t explain my method very well. But basically it’s all about tricking the eye to make parts of it pop by using slightly lighter/darker borders. (Basically just expanding on what kpar said a few replies back)

#10

Thank you all for your replies :smiley:

I love the idea of the no more black outlines and also the shadow/highlighting :slight_smile: I guess that practice is key and that it will improve over time (like code :D).

Any advice on fun things to make for practising? Maybe I could try and improve my golden coins? :slight_smile:

#11

When trying to randomly distribute features on pixel art, try using the n-queens problem. (http://en.wikipedia.org/wiki/Eight_queens_puzzle)

I’ve used it quite a few times and it works pretty well at avoiding tiling artefacts.

And black outlines are a no-no. Try to use a darker shade wherever possible. (Obviously if the base colour is a dark grey, you may have to use black)

#12

Another distribution technique is Poisson Disc sampling. Usually pretty easy to emulate by hand, and not too difficult to do procedurally too if that’s your thing.

#13

I made this coin just now :slight_smile: did the same idea as the cookie and I think it worked pretty well.

#14

I have tried different styles of my coin and I am seeing improvements so thank you all for your advice and links :slight_smile:

I have one final issue which I’m not sure how to solve. Most of my art is 32x32 and I prefer to draw the images smaller and then resize them up to the 32x32. This works fine for the most part but when the images go above a certain width/height they become a little distorted. The max I could get my coin to was around 25x25.

Do I simply need to just draw my art bigger or is it possible to resize?

#15

Resize only by powers of two (on both axes, don’t change the aspect ratio) and use nearest neighbor filtering.
E.g. 16x16 -> 32x32 -> 64x64 or 3x7 -> 6x14 -> 12x28 etc.

#16

Thanks! That sorted the issue :slight_smile:

#17

Think of it this way; If you have 1 pixel, you can’t expand it over 1 and a half pixels of space. That’s what you’re trying to do with you don’t scale by factors of 2. For example, a 8x8 image scaled to 20x20 (so 2.5x scale) would mean you’ll be increasing each of the pixel sizes by 2.5 pixels, and there’s no where for that .5 of pixel data to go because there’s no such thing as half a pixel. So based on various levels of black magic, it scales each pixels by either 2x or 3x depending on what it thinks is best. But if you scale an 8x8 image to 16x16, 24x24 or 32x32 you’ll get perfect 2x, 3x and 4x scale, respectively.

(EDIT: Note that this is based on Nearest Neighbor filtering, the others do calculations and mix pixel colors together to try to give you the smoothest image possible)

#18

That makes a lot of sense, I see what the issue is now :). I’ve been messing around with the scaling and things and it’s much easier now, hopefully I can make my art better now :smiley:

#19

My advice is… don’t do pixel art!

Cas :slight_smile: