TCP/IP

Need to talk about bits! Everything in computing is measured in bits A bit is the smallest unit of measurement 8 bits make up a byte 1024 bytes make up a kilobyte There are 8192 bits in a kilobyte How do we get 1024 bytes in a kilobyte?

Need to talk about binary! The principle behind digital computers. All input to the computer is converted into binary numbers made up of the two digits 0 and 1 (bits). For example, when you press the "A" key on your keyboard, the keyboard circuit generates and transfers the number to the computer's memory as a series of pulses with different voltages. The bits are stored as charged and uncharged memory cells or as microscopic magnets on disk and tape. Display screens and printers convert the binary numbers into visual characters.

How Binary Numbers Work Everything is to the power of But, for us to understand it we need to convert it to decimal

What comes after kilobyte? Kilobyte x 1024 is a Megabyte Megabyte x 1024 is a Gigabyte Gigabyte x 1024 is a Terrabyte Terrabyte x 1024 is a Pettabyte Pettabyte x 1024 is a Exabyte E xabyte x 1024 is a Zettabyte

Colour "depth" Each pixel in a bitmap contains certain information, usually interpreted as colour information. The information content is always the same for all the pixels in a particular bitmap. The amount of colour information could be whatever the application requires but there are some standards, the main ones are described next.

Colour "depth" 1 bit (black and white) This is the smallest possible information content that can be held for each pixel. The resulting bitmap is referred to as monochrome or black and white. The pixels with a 0 are refered to as black, pixels with a 1 are referred to as white. Note that while only two states are possible they could be interpreted as any two colours, 0 is mapped to one colour, 1 is mapped to another colour.

Colour "depth" 8 bit greys In this case each pixel takes 1 byte (8 bits) of storage resulting in 256 different states. If these states are mapped onto a ramp of greys from black to white the bitmap is referred to as a greyscale image. By convention 0 is normally black and 255 white. The grey levels are the numbers in between, for example, in a linear scale 127 would be a 50% grey level.

Colour "depth" 24 bit RGB This is the next step from 8 bit grey, now there is 8 bits allocated to each red, green, and blue component. In each component the value of 0 refers to no contribution of that colour, 255 refers to fully saturated contribution of that colour. Since each component has 256 different states there are a total of 16,777,216 possible colours.

8 bit indexed colour Indexed colour is a more economical way of storing colour bitmaps without using 3 bytes per pixel. As with 8 bit grey bitmaps each pixel has one byte associated with it only now the value in that byte is no longer a colour value but an index into a table of colours, called a palette or colour table.

Indexed Colour 8-bit colour only permits 256 colours Instead of storing (r, g, b) for each pixel, store an index into a palette or colour lookup table (CLUT) – Index can be small, usually a single byte – Palette stores up to 256 (for 1-byte index) 24-bit values To determine colour of a pixel, look at the stored value, use it to look up full 24-bit (r, g, b) value in palette

4 bit indexed colour This is identical to 8 bit colour except now only half a byte, 4 bits are used for the index. This supports a table of up to 16 colours.

Diffe r ences between rgb & cmyk Computer monitors emit color as RGB (red, green, blue) light. Although all colors of the visible spectrum can be produced by merging red, green and blue light, monitors are capable of displaying only a limited gamut (i.e., range) of the visible spectrum. RGB is additive. Inked paper absorbs or reflects specific wavelengths. Cyan, magenta and yellow pigments serve as filters, subtracting varying degrees of red, green and blue from white light to produce a selective gamut of spectral colors. CMYK is subtractive

Ideally choose 256 most important colours in an image to store in its palette When 24-bit image is reduced to indexed colour, some colours may be missing from the palette – Replace missing colour by nearest, may lead to posterization – Dither – use pattern of dots and optical mixing Web-safe palette – 216 colours guaranteed to reproduce accurately on all platforms and browsers Colour Palettes

Subtract additive primary from white gives its complement – Equivalently, add other two additive primaries C = G+B = W-R M = R+B = W-G Y = R+G = W-B Cyan, magenta and yellow are subtractive primary colours (mixing ink/paint) Complementary Colours

Real inks do not correspond to ideal subtractive primaries Combining three inks for black is undesirable Printers use four process colours, cyan, magenta, yellow and black CMYK gamut is not the same as RGB – Implications for using images prepared for print (CMYK) on the Web (RGB) CMYK Colour

Alternative way of specifing colour Hue (roughly, dominant wavelength) Saturation (purity) Value (brightness) Model HSV as a cylinder: H angle, S distance from axis, V distance along axis Basis of popular style of colour picker HSV

Why is colour so important? Colour COMMUNICATES Transfers a message Does not need a verbal explanation Traffic lights – Red = stop – Green = go Road signs – Red = Danger

Why is colour so important? Your sites must create a reaction/response from the viewer Colour can be used to achieve this The colour Typography Layout Hierarchy Navigation Visuals Content and so on

Why do I need to know about colour? Good designers use the principles of colour to make sure they have the correct colour combination for their designs You are able to judge which colours complement/contrast You know which colours create a cold or warm effect You will be able to judge which colours create an ordered/chaotic affect You will have started to think as a designer and made decisions for a reason You will understand more about how important colour is to almost everything You will be able to justify your decisions when questioned further Crown colour chart

Warm colours and cold colours? The colour wheel can be divided into 2 sections: The warm colours – positioned on the right hand side of the wheel The cool colours – positioned on the left

Web Safe Colours

Why would you use the colour grey? As a background colour because it is neutral What kind of visual impact would this colour create? What kind of visual impact would this colour create? When combined with other colours it can create a strong visual appearance which reflects professionalism and possibly order! What kind of websites use the cool colours? What kind of websites use the cool colours? Formal Business What type of websites would use the primary colours? What type of websites would use the primary colours? Children’s

Places to think about your choice of colour – To the colour scheme used within charts and visuals, buttons and navigational menus – Can improve the visual consistency of your design or presentation – No more than three colours should ever be used within one design unless you intend to break the rules of conformity – An overuse of colour will cause distraction