Colour Harmony

This is when two or more colours makes sense when putting together. This means that when you see them you will notice that they sort of clash together.

There are different types of colour harmonies:

Monochromatic: is the different values of a colour (tints, shades).

Monochromatic

Analogous: three or more colours that are found side by side on a colour wheel.

Analogous

Complementary (Direct Complementary): those colours which are opposite to each other on a colour wheel.

Complementary

Split-complementary: a colour together with those colours which are on both sides of its complementary.

Split-Complementry

Double complement: two sets of complementary colours next to each other.

Double Complement

Tetrad: up to four colours that have an equal distance from each other.

Tetrad

Diad: two colours that skips the colour between them on a colour wheel.

Diad

Triad: three colours which have the same space between them on a colour wheel.

Triad

Reference:

http://www.sensationalcolor.com/understanding-color/theory/color-relationships-creating-color-harmony-1849#.ViaJDn4rLIV

Fundamentals of Colours

These fundamentals of colours are the way a colour is described/how it is made.

Hue: this is the actual colour.

Hue

Saturation: this is the addition of grey to the hue (colour). The less saturation there is the more grey the colour will have and therefore it will look dull. If the saturation is set on the higher side the more purely the colour will be.

Saturation

Brightness: this is how much bright or dark the colour will look like. To look bright a hue needs to have white added to it, while to look dark needs to have black added to it.

Brightness

The more changes there will be in these fundamentals the more the colour will change in its appearing way.

Reference:

http://vanseodesign.com/web-design/hue-saturation-and-lightness/

ICC Profiles

ICC is the abbreviation of International Colour Consortium. These profiles usage is to display the proper colours of a file. Basically it is the colour ID of a device.

An ICC profile will keep information such as how many colours the device can display and if the colours are provided in the way they should be. These profiles are obtained after a calibration of the device is done. 

ICC Profiles

 If the device used is not calibrated, therefore it doesn't have its own ICC Profile, the colour values are going to be different then they are supposed to be. But if the device is calibrated thanks to the ICC profile that would be created, the colour values will be the same as it is supposed.

Calibration vs Non Calibration

Reference:

http://www.color-management-guide.com/icc-profiles.html

RGB and CMYK

There are to groups of colours and these are the RGB and CMYK.

RGB (red, green and blue), is the colour space monitors uses. It starts with black (darkness) and after it adds all the colours mentioned, it finishes with white. Every colour project itself to be visible.

RGB

CMYK (cyan, magenta, yellow, and black), is the colour space printers uses. To the opposite of the RGB, this colour space starts with white (the paper) and if all the colours are used it will finishes with black.

CMYK

Reference:

http://graphicdesign.stackexchange.com/questions/60/what-is-the-difference-between-cmyk-and-rgb-are-there-other-color-spaces-i-shou

Pixel Value

Basically this is the brightness of a pixel in an image, and shows the exact colour it is. This is stored in an 8-bit integer with a range from 0 to 255 of possible values. The 0 is mostly used to represent the black colour while the 255 is used to represent the white colour.

Grayscale pixel value

This is how the pixel value of a grayscale image is known, and for a coloured image the red, green and blue are separated like the grayscale image and this is known as colour planes.

The actual intensity of a colour can be found in a colour-map, where every information stored for each pixel of a grayscale or colour is an index to it because the intensity of them may not be stored accurately.

Colour Map

Reference:

http://homepages.inf.ed.ac.uk/rbf/HIPR2/value.htm

Colour Depth

This is the number of bits per pixel on a monitor to represent a colour. The more bits per pixel a monitor has the more variety of colour it can show. This will affect even the quality of the monitor, because the more colours it can show the higher the quality it would be.

Thanks to the evolution of the technology, the colour depth improved a lot. It went from 1-bit to 48-bit.

Bit Colour Difference

Different colour depths:

1-bit shows 2 colours, Monochrome display.

2-bit shows 4 colours, CGA display.

4-bit shows 16 colours, EGA display.

8-bit shows 256 colours, VGA display.

16-bit shows 65,536 colours, XGA display.

32-bit shows 4,294,967,296 colours

48-bit shows 281,474,976,710,656 colours

Reference:

http://www.computerhope.com/jargon/c/colordep.htm

With what a colour is associated?

Where ever we are and where ever we look, all we see is coloured, or has its own colour by nature. We associate colours with religious, culture, politics and also it can affect our mood; it is a way of communication.

RED: This colour is associated with love, passion, desire, danger, energy, determination, strength, war and power. It is very visible, which is why it is used to indicate danger, and also used in most of the road signs; such as the stop sign or the one way. This colour raises blood pressure, increases respiration rate, and also the human metabolism.

No Entry (One Way) Sign

YELLOW: This colour is associated with intellect, happiness, energy, joy, food, cowardice, children, and leisure. It is an attention getter and it is mostly used in warning signs (with a combination of black) and also for taxi cars. This colour is very cheerful, it generates muscle energy and it also stimulates mental activity.

Taxi Cab

BLUE: This colour is associated with males, depth, stability, faith, intelligence, heaven, confidence, truth, loyalty, trust and wisdom. Because it’s the colour of the sky and sea, it is mostly used to promote things/services that has something to do with them, such as mineral water, and airlines. This colour produces a calming effect, and it slows the human metabolism.

Sky and Sea

ORANGE: This colour is associated with happiness, determination, success, creativity, enthusiasm, stimulation, fascination, encouragement, attraction, healthy food, strength and endurance. It is a very hot colour for the eye of human therefore it gives sensation of heat, it stimulates mental activity, produces an invigorating effect and it increases oxygen supply to the brain.

Fire

GREEN: This colour is associated with freshness, nature, harmony, fertility, safety, growth and money. For the human eye this is the most restful colour, and it can also improve vision. It is mostly used to promote green products such as vegetables because of its relation with nature.

Vegetables

PURPLE: This colour is associated with females, royalty, luxury, power, ambition, nobility, wisdom, independence, magic, creativity, mystery and dignity. It is a very rare colour in nature when considering the other colours.

Purple Female Figure

WHITE: This colour is associated with innocence, faith, goodness, light, purity, virginity, and medical staff. It is considered as the colour of perfection and it is usually used to promote medical products. It is also seen as positive.

Medical Staff

BLACK: This colour is associated with elegance, death, mystery, power, evil, formality, and fear. It is mostly used as a background for the other colours, especially for the bright colours, as these will make a good contrast. When you wear a black dress or suit it is very likely to look thinner. It is mostly used when someone pass away because of its association with death.

The Death

Reference:

                                 

http://www.color-wheel-pro.com/color-meaning.html

Pantone

This is a standardized colour matching system. It is like the book of colours, where every kind of colour is in it and is also numbered to be identified.

Pantone Palette

Thanks to it a colour can be chosen and will be used for both designing and printing. After the colour is chosen by the client and the designer, the artwork will be designed and after everything will be ready it will be ready for printing, so the designer will give the printing company the reference number of that specific colour so it will match the exact colour that was chosen in the beginning.

There are more than one type of pantone palettes, such as;

Process Palette done by CMYK printing.

Textile Palette for Fashion and Home colours.

Plastics Palette used by manufacturers for moulded and fabricated plastics.

But the most common palette used by designers and the one mentioned before is the Solid Palette.

This palette will section every colour by a three or four digit numbers, followed by a C (Coated Paper), U (Uncoated Paper) or M (Matte Paper). Example: Pantone 286C, and that will result in the colour blue, shown below.

Reference:

http://www.colorguides.net/pantone.html

Colour Contrast

When you put colours together you can notice that an effect will be done and that every colour has its own characteristics. This is what colour contrast is; the link between colours, and the following are different types of contrasts.

Complementary Contrast: Every colour has its own complementary colour and this is the colour facing it in the colour wheel. This contrast happens when these colours are combined.

Complementary Contrast

Simultaneous Contrast: This contrast happens when a colour is placed with another colour which is not its complementary.

Simultaneous Contrast

Quality Contrast: This contrast happens when a colour is linked with another version of it, such version would be brighter or dull.

Quality Contrast

Quantity Contrast: This contrast happens when different sized colours are related to each other.

Quantity Contrast

Cool-Warm Contrast: This contrast happens with the combination of warm colours with cool colours.

Cool-Warm Contrast

How Colours are made?

The main colours that thanks to them we can have all the other colours are called the Primary Colours. These colours are; Red, Blue and Yellow. When we mix one of these colours with another we will have other colours. These colours are called the Secondary Colours and from this, the Green, Purple, and Orange start to appear. When you mix a primary colour with a secondary colour you will add up with a tertiary colour. This can be understood better on a Colour Wheel.

Primary, Secondary and Tertiary Colours

The colours on a colour wheel are divided into two categories, the warm colours and the cool colours.

Warm and Cool Colours

Apart from that, colours has Tints and Shades. Tints are those colours that are mixed with white, therefore the colour become lighter. While the Shades are those colours that are mixed with black, therefore the colour become darker.

Tints and Shades Colour

Raster vs Vector Images

The main reason between these two is that; the raster works with pixels (those small boxes that when you zoom into the picture they start to appear), while the vector works with lines, dots, curves and shapes in general.

Raster Type and Vector Type

Raster images; are measured in pixels, and it has a certain amount of pixels within each inch and that is the ppi (pixels per inch).
The quality of the image will change depending of how many ppi it has. The lower the ppi is, the less quality the image will have, and the higher the ppi is, the higher the quality.
An advantage that this type has on vector is that it has more support for effects and more colours.

Vector images; because pixels aren't used in this type of image, it is resolution-independent.
This means that the image won't lose any of its quality and that is one of the advantages a vector has on raster. Other advantages are that when designing a vector you will have unlimited scaling and unlike raster images the file of the designs will be smaller.

The use of both types & the type of file formats

Below you can find an activity we did in the class with a raster image and sticky notes. Basically we drawn a grid on the raster image so we would know how many boxes(pixels) there are, and then for every pixel we used a sticky note to represent it and to make a model of it.

A Raster Image with a Drawn Grid

The model of the image with the sticky notes

Screen vs Print

When you are designing something it is important to keep in mind, for what it is going to be used; either for screen(web) or if it is going to be printed(billboards, business cards, posters).

The main reason that these two are different is because:

• A design for screen,You need to make sure that the design will be shown in its best measurement and quality, when shown on every type of screen. This will take some time to be done as there is a large variety of display dimensions.

Different type of Displays

• A design for print,All you need to make sure of is that the design will fit on the printing measurements given to you, and that it will be specifically done for that measurement. You cant use a design done for a small measurement to do a large print, because of the pixels.

Different Print Measurments

Before one starts the design he/she needs to know the audience not only for who is going to view it, but in what they are going to view either web or printed.

In a print you are limited to one particular measurement and the design you need to put on needs to catch the eye of its audience, and not to overload it with information because it will be distracted for them and it wont get the marketing message across.

In a web the aim is to keep the audience on the website, so the more clear and informative it would be, the more audience you will have. In web you can put as many pages as you want so it would be a good idea not to overload one page but instead you will divide your information into several pages and make clear navigation buttons with the title of the information within.

An important think that can change your design from how you want it, is the colour:

In printing, because the colour you will see on the monitor its not the same colour that will be printed, and the colour may vary from the one you need. In the picture below you can see what type of colour both screen and printer use.

Screen vs Print Colour

In screen, because the colour may change the way of how it looks depending of how the brightness and contrast settings of the monitor are, and even the actual colour settings of the monitor.

Brightness and Contrast Setting

Colour Setting

All this will change the way of how a colour will look like, so when designing you need to check everything so your design will be shown as it would be planned.