Image slides

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
    Create PDF    Send article as PDF to