# Overview and aims

• This lecture will explain the basics of how images are represented on a computer and how to use Photoshop
• By the end of the lecture you will be able to:
• Understand how images are represented as bitmaps
• Understand how colours are represented on a computer
• Understand the basics of how image filters are implemented

# Image files

• There are two basic ways that image files can be represented
• Vector images:
• Images made up of shapes
• lines, points, triangles etc.
• Efficient and easy to edit
• Won’t talk about them today
• Bitmap images:
• As a grid of pixels
• big and hard to edit
• but can represent anything

# Bitmaps • Images are represented as a grid of pixels
• A pixel is a PICture ELement
• Each pixel has a colour

# Bitmaps • Each pixel in the image has an “address”
• Given by two numbers
• x the number of pixels across
• y the number of pixels down

# Colour

• Everything on a computer has be be represented as bits or numbers
• So do colours
• A dark colour is a low number and a light colour is a high number
• 0 is black
• 255 is white
• 128 is grey

# Primary Colours

• Art class aged 8
• You can make any colour from just 3 paints
• red
• green
• blue
• red + green = yellow
• This is actually because of a fundamental property of the human visual system (more next year)

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0)

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0)

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow
• (0, 0, 0)

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow
• (0, 0, 0) is black

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow
• (0, 0, 0) is black
• (255, 255, 255)

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow
• (0, 0, 0) is black
• (255, 255, 255) is white (white)

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow
• (0, 0, 0) is black
• (255, 255, 255) is white (white)
• (255, 200, 200)

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow
• (0, 0, 0) is black
• (255, 255, 255) is white (white)
• (255, 200, 200) is pink

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow
• (0, 0, 0) is black
• (255, 255, 255) is white (white)
• (255, 200, 200) is pink
• (0, 0, 100)

# Primary Colours

• Primary colours can be used to represent colours
• We only need 3 numbers to represent a colour, one each for red, green and blue
• (r, g, b)
• (255, 0, 0) is red
• (255, 255, 0) is yellow
• (0, 0, 0) is black
• (255, 255, 255) is white (white)
• (255, 200, 200) is pink
• (0, 0, 100) is dark blue

# Primary Colours

• All the primary colours are generally combined
• But you can separate them off and edit them separately
• Colour channels

# Transparency

• Some times you will get a 4th number
• Opacity (often called alpha)
• Controls how transparent something is
• 0 is completely transparent
• 255 is completely opaque (not transparent)
• (255, 0, 0, 128) is half transparent red

# Image files

• It takes a lot of data to store an image file
• 4 bytes per pixel (1 per colour + alpha)
• 3 megapixel
• About 12 megabytes
• Not too much nowadays, but you might have 1000s of images
• Can still be slow to download over the web

# Compression

• We can use Compression to make smaller file sizes
• Compression is basically finding ways of representing data more efficiently
• Most image file formats are compressed
• But not all (e.g. bmp)

# Compression

• There are 2 types of compression
• Lossless compression doesn’t change the data at all
• Lossy compression throws away some information to get better compression
• e.g. jpeg
• Typically information that is not very visable
• Lossy compression is good enough for everyday use and very efficient
• If you run a photo archive you will need to use lossless compression
[any material that should appear in print but not on the slide]

# Overview and aims

• This lecture will explain the basics of how images are represented on a computer and how to use Photoshop
• By the end of the lecture you will be able to:
• Understand how images are represented as bitmaps
• Understand how colours are represented on a computer
• Understand the basics of how image filters are implemented

# Filters

• Filters are a powerful images processing technique
• They can act to change the appearance of a whole image

# Filters • A filter steps through pixels one by one
• Alters each pixel in some way

# Filters

Typically a filter will be some sort of mathematical operation.

• Divide all colour values by 2 to make them darker
• Add something to the red channel to give the image a red tint
• Threshold: set a colour to white if it is above a certain value, black otherwise

Sometime acting on one pixel is not enough

# Blurs • Blurs act by taking an average of a pixels with its neighbours

# Neighbourhood filters • Many filters use near by pixels to choose the new value of a pixel
• Typically a sqaure of pixels surrounding the one we want
• Called a neighbourhood

# Neighbourhood filters • Some filters have bigger neighbourhoods

# Blends

• A filter performs a mathematical operation on all pixels of an image
• You can also combine two images with mathematical operations
• Combine the pixel in one image with the corresponding pixels in the other image
• Photoshop uses this to combine layers together
• The layer mode is the mathematical function used
• Normal Mode: `layer1 + opacity*layer2`
• Multiply Mode: `layer1*layer2`

# Adding an image to wordpress

• There is a button for adding an image above the editor
• Looks like a square
• Click on this
• Click Select Files
• Opens a file broswer, open an image file
• Once you have uploaded it select “Insert Into Blog” near the bottom