techtips

Tech Resources : technical stuff that is good to know

Computers and Color : RGB values

Understanding color is a big part of being an artist. Understanding how color is used on the computer is important for all digital artists.

RGB Values – how Color works

•A computer remembers any color using a combination of Red, Green and Blue colors (also known as the RGB values)

•Each of these Red, Green, and Blue colors are stored as a number that ranges from 0 to 255.

•RGB of 000 means there is no Red, Blue or Green, i.e it has no color and is Black.

•RGB of 255, 255, 255 means it has the maximum of all 3 colors and is White.

•RGB values are what you can modify to tweak a color. To make something really red, make the R value the maximum – 255, and G and B value the number 0. To make it a little less red,change the R to a number less than R, also try to make the G and B more than 0, and see how that changes the kind of Red.

•Computer remember numbers using binary but the RGB values are often written using a hexadecimal format (this is like having sixteen fingers!) since that takes up less space to write.

• The lowest value that can be given to one of the R,G, or B is 0 (hex 00). The highest value is 255 (hex FF).

•RGB values are written as 3 double digit numbers, starting with a # sign, two digits for each of R,G, and B.

Color Color HEX Color RGB

Black #000000 rgb(0,0,0)

Red #FF0000 rgb(255,0,0)

Green #00FF00 rgb(0,255,0)

Blue #0000FF rgb(0,0,255)

Yellow #FFFF00 rgb(255,255,0)

Cyan #00FFFF rgb(0,255,255)

Magenta #FF00FF rgb(255,0,255)

Gray #C0C0C0 rgb(192,192,192)

White #FFFFFF rgb(255,255,255)

Fill color and Stroke Color

In most drawing applications, there are 2 kinds of color

•Fill color is the color inside a shape, it is what you fill in when you get a coloring sheet.

•Stroke color is the color of the outside line, i.e the color of the pencil or marker you use to draw the shape. The size of the stroke can be changed as well. This is like using a different size markers to draw the stroke or the outline, a thin marker or a thick marker for example.

Opacity and Alpha values.

This refers to the transparency of the color. Depending on the alpha value, the colored area is like a very thick piece of construction paper through which no light can pass and nothing can be seen below (alpha=255) to a very transparent tracing paper through which light can pass and all the colors and shapes below are clearly visible. (alpha=0). There is also a master Opacity slider that changes the overall opaque/transparent value of the drawing.

File Types

Computer files come in all types depending on the application or program that will operate on them.

.html An HTML file that is viewed by a browser. All web pages are HTML files

.jpg A jpeg files that is used to store bitmap images – all photos are jpg

.gif – another way to store images or illustrations

.png – another type for vector graphic images – Inkscape can create these

To understand more on different kinds of image files

- read Digital Image File Types Explained

.svg – Inkscape files

.xcf – Seashore files

.skp – Sketchup files

.doc – Word

.pages – Pages

.txt Text

MP3 – Music files

.WMV, .AVI, .MOV, MPEG, .MP4, DivX, .FLV, and .OGG – are all video fomats

File Import

Sometimes, an application needs to access a different type of file than its own normal file type.

For example, while creating a logo in Inkscape, it may be necessary to use a photograph. Inkscape can only open .svg files, but most photos are .jpg. Since this is a different file type than normal, instead of File Open, use File Import.

File Export

Most application files can not be used directly on a web page.

For example, the .svg file created by Inkscape can not be put into the Wiki page directly. It is necessary to have Inkscape create a file type that is understood by the web, e.g. a .png file. Since Inkscape needs to create a different type of file than its own normal file, it must export the Inkscape file to a new file type. Instead of File Save, use File Export.

Bitmap vs Vector graphics

Bitmap graphics

• uses a bitmap of pixels.

• It is the best solution for working with photographs

•It gets fuzzy when magnified

•File sizes increases when magnified

Vector Graphics

•uses nodes and vectors

• It is the best solution for working with illustrations

•It does not get fuzzy when magnified

•File sizes does not increase when magnified

It is very important to use only copyright free images and art in any digital art work.

Go to advanced Search in Google and turn on the option to only search for copyright free work.

Good site for images for schools – http://www.pics4learning.com/

High resolution photographs available for free – http://www.morguefile.com

Computers use Binary

Computers have only 2 fingers!

They can count 0,1 and that is it.

Binary means 2, so a computer uses binary or 2 places.

We humans have 10 fingers and can count 0-9 and then move to the next hand, or the tens place. Humans use numbers like 23 which means 2 hands of ten, and 3 more fingers.

After a computer counts 0, 1, it runs out of fingers, and has to use another hand too. Each hand is actually called a bit. So on one bit, a computer has 0 or 1, and then it goes to another bit. It is just like we count 0-9 on one hand and then move to the other hand or the ‘tens’ place to remember the number that is more than 10.

1 bit = number 0 or 1 (counts from 0,1)

2 bits – number 00,01,10,11 (counts from 0,1,2,3)

00 : number 0

01: number 1

10: number 2

11: number 3

3 bits (counts 0,1,2,3,4,5,6,7)

000 : number 0

001 : number 1

010 : number 2

011 : number 3

100: number 4

101 : number 5

110: number 6

111 : number 7

8 bits (can count from 0 to 255)

00000000 : number 0

11111111: number 255

Bytes, Kilo Bytes, MB etc

•8 bits is actually called a byte
•So it takes one byte to store a value for R, G, or B or any number from 0 to 255
•Letters are also stored as numbers. For example ‘A’ is the number 65, also written in binary as 01000001
•If you have 1000 bytes (for example 1000 letters), it is called a KiloByte or KB
•And if you have 1000 KB, it is called a MB.
•Photographs are usually a few MB. Text messages in an email or a small graphic that load quickly on the web site is usually less than 100KB.

Hexadecimals are a short way of remembering 4 bits…

Hexadecimal: is base 16 or sixteen fingers. Can count 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

Hexadecimal is often used a short way of writing 4 binary places, e.g. 1111 is 15 or F

binary 00000000 = hex 00: number 0

binary 00001111 = hex 0F: number fifteen

binary 11111111= hex FF: number 255