Topic Three: Digital Images
​
There are two types of Digital Images that can be stored on a computer: Raster and Vector.
​
RASTER
We are most familiar with raster images because most images on the internet are raster. Raster images are sometimes called bitmaps. Bitmap (or raster) images are stored as a series of tiny dots called pixels. Each pixel is actually a very small square that is assigned a color, and then arranged in a pattern to form the image. When you zoom in on a bitmap image you can see the individual pixels that make up that image.
​
As you can see by the images above it takes a lot different colours to recreate a photographic image. Sometimes millions!
​
Each pixel holds a unique colour that has been digitised into a hexadecimal number. The Hexadecimal number a system based on the number 16. Which means it only has 16 different symbols as the list below shows:
​
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E and F.
​
A = 10
B = 11
C = 12
D = 13
E = 14
F = 15
​
So now we can make numbers using combinations of all this symbols. Example #F5E227. We use a hashtag (#) in front of a hexadecimal number to make sure people know it is a hexadecimal number.
​
You may be familar with primary colours in art: yellow, red and blue combining to make all the other colours. This happens when you use paint or ink, but when using computers we are using light. The mixture of colours works differently with light. Light has differnt primary colours: Red, Green and Blue. We always list them in that order too.
​
We group our Hexadecimal colours in the same way; the first two values are red, the second two are green and the last two are blue:
​
RED GREEN BLUE
​
# 0 0 0 0 0 0 Here we have zeros for each colour. If you turn DOWN the lights to zero - you get BLACK!
​
# F F F F F F Here we have Fs for each colour. If you turn UP the lights to F (the largest number - you get WHITE!
​
# F F 0 0 0 0 Here we have Fs for only the two places for RED and all the others are zero - this makes RED!
​
# 0 0 F F 0 0 Here we have Fs for only the two places for GREEN and all the others are zero - this makes GREEN!
​
# 0 0 0 0 F F Here we have Fs for only the two places for BLUE and all the others are zero - this makes BLUE!
​
# F F F F 0 0 Here we have Fs for bothe RED and GREEN this makes YELLOW!
As you can see in the image above of the rose, there are a lot of different pixels each containing a hexidecimal number. If we open this image in Photoshop we can use the eyedropper tool to examine one of the pixels to find out each hexidecimal colour. Below you can see the pale pink chosen in the flower is #f8b791.
Photoshop is the software designed to edit bitmap images.
​
The following tools are important to know how to use:
​
Selections tools - select areas of pixels for copying or editing
Eye Dropper Tool - selects the colour from a single pixel
Paint bucket tool - fills a selected area with one colour
Clone tool - copies one area of a bitmap to another
Text tool - adds text
Colour Picker - selects colours for foreground and background.
​
​
Download this Photoshop activity to learn some key raster editing skills.
VECTOR
​
The other type of digital image is a vector. Vectors are NOT made of pixels. In fact if you zoom in on a vector they never pixelate. This is because these type of images are made of objects. Each object is mathematically defined, for example a circle is refined by its radius. So if we wanted a red circle with a radius of 1 inch, we can do this PowerPoint or Word by choosing a Circle shape and clicking and dragging the mouse for 1 inch. We would end up with a circle with the area of pi (3.14) times the radius(1 inch) squared. This just a number! 9.87! This is all that is saved - a circle object with an area of 9.87 inches. If we made the circle bigger (say, 3 inch radius) we end up with a circle object with an area of 88.73 inches.
​
The only difference between a Circle with 9.87 inch area and the 88.73 inch area Circle is only ONE character!
​
9.87 uses 3 characters to make the number
88.73 uses 4 character to make the number.
​
Despite one circle being three times the size of the other, it does not use much more memory to store that data.
​
​
When we draw diagrams with shapes in PowerPoint and Word we are creating objects. We can fill the objects with colour and change the outline colour and strength. We can group the objects together to make a more complex objects such as a triangle ontop of a square to make a house shape.
​
Creating vector images is not always easy. The premium software for creating and editing vectors is Illustrator.
​
Illustrator allows you to add a photograph (a bit map file) and "vectorise" it by limiting the number of colours and converting the image to separate objects. You can do this with the first Illustrator Tutorial below: Making a Logo.
Sometimes we need to create our own illustrations. Illustrator has a special way of allowing the user to create their own objects using a pen tool. It can be frustrating at first, but bear with it. It does take practice. You can do the illustrator drawing task by following the tutorial below.
An Illustrator Overview
Objects are basic shapes using the ‘Shape’ tools. To add an object simply click and drag to create the shape. Hold down these keys to modify your shapes:
SHIFT – constrained shapes (same horizontal and vertical dimensions)
ALT – draw from the centre of the shape
SPACE – move the shape as you re-size it
To make a copy of an object, hold ALT and drag it. A second shape will appear that is exactly the same as the first.
​
Grouping and Merging
​
If you have two or more shapes that you would like to move or resize together, select them both by clicking while holding the SHIFT key. You can then group the objects together so they become one object. From the Object menu, select Group or press CTRL+G. To undo the grouping, choose Ungroup or press SHIFT+CTRL+G
You can merge two overlapping shapes by selecting both objects and using SHIFT- choose the Shape Builder tool.
Draw a line through the shapes you would like to join. They will merge into a single shape.
​
Paths
​
All shapes in Illustrator are made using paths. Paths can be straight (left) or curved (right). Lines are called OPEN paths. If a path meets back up with itself, it is called a CLOSED’ path. Closed paths can be filled with colour or a gradient.
​
The boxes at the end of paths are called handles. They let you re-size and re-shape the path.
When using the Pen tool, you can click and drag to produce ‘bezier handles’ which allow you to control the curve of a path
​
​
​
​
