Page 1 of 1

Picking colors in Pixel art Rate Topic: -----

#1 Oceans Dream  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 3
  • Joined: 29-August 11

Posted 29 August 2011 - 09:06 PM

*
POPULAR

Hello, this is Ocean, from Meridian Dance! I was FORCED by WolfCoder to contribute here.

Before I start, here are various programs you could use for pixel art.
Graphics Gale a popular pixel program
grafx2
ProMotion (This is not free)
jdraw
mtpaint
Pixen for Macs
Paintshop Pro
Paint.net

This one is about color. Sometimes people have difficulty picking colors for their pixel art. So they might either use default color palettes or try to make their own but end up with oversaturated colors, or ones with not enough contrast in them. It can be problematic, as a color can look different when placed near others, making it harder to find colors that are right. One thing I find useful is looking at the colors used by commercial game graphics. Feel free to look at those colors and see how they are used. How much red,green and blue is in them? You donít need to memorize numbers. But keep them in mind. Also, donít be afraid to alter colors once youíve got them.

Letís go over the various problems one could have with colors. First thing is contrasts. Floor tiles are one of the most important things to have lower contrasts on. If they have high contrast, then youíll find that the floor pops out too much and takes too much attention away from the other things. You donít want that. Here is an example:
Attached Image
See how much more attention the floor on the right takes away from the object. You'll want the characters/objects to pop out more from the background, and in general they should have higher contrasts. Don't always work zoomed in, see if you can even tell the difference between colors when you are not zoomed in. If you can't, then chances are the colors are too similar to each other.

Hue is another thing. You may think: This object is green. So the highlight will be a lighter green, the shadow will be a darker green. Instead, refer to a color wheel. What color light do you have? Natural lighting? Make the highlight have more of that color (a more yellowish when illuminated by the sun). Let the shadow colors have more of the opposite color (Usually blue or purple). It can make your object more interesting than just having different brightness levels of the same color. For red, you can make the highlights a brighter orange, yellow, or pink.
Attached Image

And weíll end this one on saturation. Saturation is how bright and pure a color is. Desaturate it and you get grey. I work in RGB (Red/Green/Blue) values, but you can also use Hue (Type of color), Saturation and Value/Luminosity (HSL). If the RGB values are all the same (like 127,127,127), then you have a grey color. If the RGB values are only or mainly just on one of them, you have a saturated color (like 255 Red, 0 green, 0 Blue). In general unless youíre doing this for a specific purpose, you could try avoiding using saturated colors like pure Green, and include a bit of other colors in them. Hereís an example of saturated colors on top, desaturated colors in the middle, and examples from other games. Grass is from Seiken Densetsu 3 and the brick wall/water is from Star Ocean.

Attached Image

The numbers beneath the images show the R/G/B values of the colors used in the image. For the bottom row, it shows from the lightest colors values to the darkest ones.

I personally find it best to test out colors on a middle grey (127,127,127) background, rather than a white or black background.

I hope this was helpful, and feel free to give me feedback or suggestions or if you have any questions on this!

Is This A Good Question/Topic? 8
  • +

Replies To: Picking colors in Pixel art

#2 WolfCoder  Icon User is offline

  • Isn't a volcano just an angry hill?
  • member icon


Reputation: 789
  • View blog
  • Posts: 7,623
  • Joined: 05-May 05

Posted 30 August 2011 - 07:09 PM

Nice work Ocean, glad to see you over here! Learning pixel art is in high demand among indie game developers here.
Was This Post Helpful? 1
  • +
  • -

#3 naughtybit  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 26
  • Joined: 21-July 11

Posted 01 September 2011 - 08:04 AM

Oceans Dream welcome to the community.

The post is informative I liked the software which you stated for developing pixel art.

Which one is the good software for developing mobile game graphics?
Was This Post Helpful? 0
  • +
  • -

#4 Oceans Dream  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 3
  • Joined: 29-August 11

Posted 01 September 2011 - 12:35 PM

View Postnaughtybit, on 01 September 2011 - 08:04 AM, said:

Oceans Dream welcome to the community.

The post is informative I liked the software which you stated for developing pixel art.

Which one is the good software for developing mobile game graphics?

Whatever you are comfortable with, assuming you still mean pixel art mobile game graphics. I have not worked for a mobile game company itself but different engines or programs have their own ways of reading the graphics. It may be that they'll want it all individual sprite pictures named a certain way like <charactername>walkingsprite-01, <charactername>attacksprite-04, or they might have it in sheets with multiple sprites on it. You'd have to find out based on what engine you use or who you work for. But either way, all you'd need then is a program with a grid (which they should all have) so you can arrange it like that, then just use what you like. Pro-Motion is probably the most feature heavy one but it's also not free, though there might be a trial for it.

Of what pixel program they all use in specific, I can't say but I'd imagine Photoshop might be what you'd see more. Mobile phone games aren't just sticking purely with pixel art and even then, might require you to do some non-pixel art methods to your pixel art. Some might ask to low res a photo background for example.

The basics of pixel art can be learned in any program, even MS Paint so feel free to play around with whatever program you like. My preferred program isn't even on this list, just that everyone else hates using it except me sooo...
Was This Post Helpful? 0
  • +
  • -

#5 Fib  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 161
  • View blog
  • Posts: 554
  • Joined: 12-March 09

Posted 02 September 2011 - 06:40 AM

Great post Ocean. Welcome to DIC! I hope you stay and grace us with more of your pixel art knowledge.

My friends and I are currently working on creating an old school SNES RPG, and my friend that is working on the pixel art is having a bit of trouble. So this post will definitely be helpful to him. Thanks!
Was This Post Helpful? 0
  • +
  • -

#6 Kilorn  Icon User is offline

  • XNArchitect
  • member icon



Reputation: 1356
  • View blog
  • Posts: 3,528
  • Joined: 03-May 10

Posted 06 September 2011 - 10:41 AM

I've also just recently become interested in practicing some pixel art, I'm terrible at it right now, and this will surely help a lot. Thanks for your time creating/uploading this tutorial.
Was This Post Helpful? 0
  • +
  • -

#7 Oceans Dream  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 3
  • Joined: 29-August 11

Posted 06 September 2011 - 10:43 AM

Thanks! I just got back from vacation so I will see what my next tutorial will be on! I think I have an idea though, hopefully I can do it sometime this week.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1