zIFBoards - Free Forum Hosting
Free Forums with no limits on posts or members.

Learn More · Register Now
Welcome to Pixelclass. We hope you enjoy your visit.


You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Name:   Password:

 
Due to other commitments pixel class has more or less ended, I wish those involved in the site well and hope that it had a positive impact on everyone who participated on it in any way.





- Welcome to Pixel Class -

This is the Quick News Box
It will be keeping you up to date with all the happenings of the site
--- The Site ---
Well the site may be all but dead but please look around, there is a fairly sizable number of tutorials and help available.


Games Section
Lesson 2
Non Pixel Art

 

 Lesson 2 - Colour Theory
zeid
Posted: Sep 7 2008, 12:28 PM


Administrator
Group Icon

Group: Rōshi
Posts: 241
Member No.: 1
Joined: 22-June 08



user posted image
Colour Theory
I was originally going to make a tutorial on both colours and volumes, but I feel I expressed enough on volumes in lesson 1, as such I will only really tackle colours in this tutorial, as it is a very large topic. This tutorial is going to be fairly intense, I will hopefully explain as much about colour theory (and colour theory in relation to pixel art) as I can.

The first thing I am going to discuss is the question, what is colour?
Colour is created by light, light is a form of electromagnetic energy. More specifically light resides in a range of the electromagnetic spectrum that is visible to a human being. Other forms of energy in the electromagnetic spectrum that humans cannot naturally perceive include; Ultra Violet light, X-rays, Gamma Rays, Infrared, Microwaves and Radio waves. A humans perception (or lack of perception) is determined by that lights wave length. Within the visible spectrum of light a human is capable of perceiving a range of variations these variations that we see are what we call colours. Here is an indicator of where colours lay amongst the visible section of the electromagnetic spectrum.
user posted image
The numbers represent levels of variance in the wavelengths of the electromagnetic energy in nanometers

You may notice some colours have a wider range then others, for instance red/red orange seems to encompass a larger area of what we see in the spectrum then yellow. So why isn’t the whole spectrum lined up nice and neat, why do some colours seem brighter, and why are there types of energy we aren’t even getting to see like ultra-violet… Well that is because, for the most, we get what we need when it comes to nature. For instance some studies have shown women have a greater ability to see differentiations between colours in the red to red orange range, it is believed that this is an evolutionary trait (if you’re a creationist you can have your own take on why this is) so that when our female ancestors were picking berries (whilst the men hunted, hence they didn’t need this ability) they could better tell the poisonous ones from the edible ones. The fact that our understanding of colour is derived from how to use it to aid us in living also has led to colour symbolism. Association with colours and the objects or events associated with these colours enforces this symbolism.

I know that was a rather large rant but hopefully you followed it somewhat and I will try to get back to a more artistic understanding now.

Ok now that we understand what colour is (to some extent tongue.gif) and we understand that different colours evoke different feelings we can begin discussing colour with a bit more relevance to art. So how do we apply colour when making works of art, pixel or otherwise? Well, we need to understand one more thing, different colours work well together, where as others don’t.

Things/Terms you should know about colour:
  • Hue – The pigment of the colour, whether it is red, blue, yellow, etc.
  • Saturation – The intensity of the colouration, for instance whether it is grey or bright red.
  • Luminosity – How much white is in the colour or how little, whether it is pure white (or a light shade of the colour), black (or a dark shade of the colour) or in between.
    user posted image
  • Colour Wheel – By wrapping the colour spectrum around full circle we get the colour wheel.
  • Primary colour – The colours used to make all the ‘in between’ colours in the colour wheel. Red, Yellow, Blue. By adding these colours you create the tertiary colours. (Printers make all colours out of a different mix of ‘primary colours’, cyan magenta and yellow.)
    user posted image
    The primary colours.
  • Secondary colours – The colours created by the mixture between the primary colours.
    user posted image
    secondary colours of the colour wheel.
  • Tertiary colour – Colours made through the combination of the secondary colours filling out the in between colours of the colour wheel.
    user posted image
    The colour wheel, with the primary, secondary and tertiary colours added.
A few issues to consider when applying colour:
  • Colours Interact/Colour is content specific.
    A colour will look different when laid against another colour, this means we must consider all the colours we are using when adding any colour to our palette.
    user posted image
    Here the center bar appears to experiences a hue shift, despite it being a solid colour.
    user posted image
    The center bar seems to changes in luminosity/value, despite being a solid colour.
    user posted image
    Here the center bar appears to change in saturation, again despite it being a single solid colour.
    This is an interesting effect that can be used to great effect in pixel art due to the inherent colour restrictions.

  • There are colours considered Warm and Colours considered Cold.
    We typically associate colours with warmth and coolness, this should be naturally intuitive for people, but for good measure; yellow, red and other colours near to this are considered warm, whereas cyan and green and colours near to those are considered cool. Grey is typically recognized as cool despite not actually having a colour to it. That said it has a lovely quality which goes back to colour interaction, if grey is placed next to a cold colour it will appear warm and vice versa.

  • Pixel Art has different rules when it comes to colour.
    When we use colour in art it is normally considered taboo to use completely de-saturated colours, pure blacks and whites are normally off-limits. This is not the case with pixel art, in fact due to the limited palette size you are working with pixel art often encourages you to manipulate the use of these otherwise inappropriate colours. That said it is all about context, an image that has nothing but de-saturated colours is not correct.

  • Colours we see in nature will never be purely one hue.
    Hence when making a piece don't use only one colour, trust me it looks fugly. (See analogous colours on the colour wheel program provided.)
Choosing a colour scheme
As has been mentioned some colours work better together then others, In order to create a pleasant palette (colour harmony) it is often a good idea to use the colour wheel. There are a number of patterns you can place on the colour wheel in order to create a good scheme. I have created a program that will help in demonstrating some of these patterns, available:
>>> HERE <<<
(I will update this link so that it goes straight from YoYo games when it finishes uploading.)
  • Analogous
    This allows for very smooth transition between colour and hence is soft on the eyes, it is very present in nature and so is fairly appealing in most situations, it is also easy to integrate the colours with one another as it is fairly intuitive. (For instance use cooler colours for shadows and warmer colours for highlights).
  • Complimentary
    Colours across from one another on the colour wheel, these colours stand out against one another distinctly. The difficulty here is allowing the colours to interact. (A persons eye naturally apply the complimentary colour to a shadow in order to harmonize the colours.)
  • Double Compliment
    The same as complimentary, however in this case the difference between the selected complimentary pairs will influence the overall contrast in the final piece.
  • Split Compliment
    This is again similar to the complimentary and double complimentary scheme. This is a bit easier to integrate then a straight complimentary colour scheme, but wont be quite as distinct.
  • Triad Colour Scheme
    Many artists use this method to create a good colour scheme, by placing an equilateral triangle on the colour wheel you get the triad scheme.
These of course don’t incorporate all the colour schemes possible, but it does give a sample of what is possible.

Task
Use the analogous colour schemes described above, You can use the program to find it or look at the tutorials to find one. Think through how much luminosity and saturation you wish to apply. Create a character on a 50x50 to 70x70 sized canvas; afterwards apply a complimentary colour scheme to the character (use hue shifts to keep things looking good). Display both images side by side. Keep the palette from 16 or lower colours (for each individual image).

Important things for your task to keep in mind
  • Remember the colour wheel is being used to depict the different hues as distinctly as possible you will need to make alterations in hue, saturation and luminosity to make the palette work.
  • Highlights and shadows will typically have a lower saturation then mid-tones.
  • Hues variations are a must in any piece; a monochromatic pattern is immediately flawed when it comes to depicting objects in reality.
  • Picking a colour scheme will only get you so far, utilizing a palette to it's fullest is were the real trouble comes in.
  • Use a neutral, grey background over a black or white one. Black and white colours will cause your image to look very heavily contrasted. (I've noticed people using saturated colours for backgrounds, there is a reason that the forum uses a desaturated background, it is because it is a lot better for using as a background then a black or white background, this way transparant pictures are better shown.)
Links
http://www.websiteoptimization.com/speed/t.../color-harmony/
http://www.colormatters.com/colortheory.html
http://daphne.palomar.edu/design/color.html
http://www.color-wheel-pro.com/color-theory-basics.html
http://colortheory.liquisoft.com/
http://webdesign.about.com/cs/color/a/aacolorharmony.htm

http://njowo.multiply.com/journal/item/288...olor_celana_hlo
http://www.uowdev.org.uk/blog/2008/01/

more interesting links
http://www.wayofthepixel.net/pixelation/in...php?topic=922.0
http://www.luminous-landscape.com/tutorial...ur_theory.shtml
http://www.luminous-landscape.com/tutorial...nd_vision.shtml
http://painting.about.com/od/colourtheory/...olor_theory.htm

This one is a bit of fun
http://www.alifetimeofcolor.com/play/color2/a1.html

freeza.gif
I am expecting there to still be a great deal of difficulty in finding good palettes. This is because a lot of working with colours is about experience, I can't describe everything to you or things will go into too much detail and I will feel like I am restricting you. The most difficult area I believe many of you will now have will be with saturation and luminosity. After reading through the tutorial hues/hue shifting shouldn't be as big an issue.

I will likely make some small alterations to this in the future.Though this is pretty immense a tutorial already, some 1500 words.


--------------------
user posted image
- Pixel Class -
Learn the Zen of Pixel Art.
Top
« Next Oldest | Lesson 2 | Next Newest »
DealsFor.me - The best sales, coupons, and discounts for you




Hosted for free by zIFBoards* (Terms of Use: Updated 2/10/2010) | Powered by Invision Power Board v1.3 Final © 2003 IPS, Inc.
Page creation time: 0.0968 seconds | Archive