Transcript 12 - Imagecreation

Making Images for the Web
Map of This Lecture
•
•
•
•
•
Different types of graphic
Colours and Image Display on the Web.
Image creation
Resolution, file size and download speed
Useful Software
Types of Graphic
• Two main distinctions:
• Vector Graphics
– The file records the shapes used to make the
image
• Bitmap Graphics
– The file records the pixel dots used to make
the image
Vector Graphics
• The file records the
shapes used to draw
the image.
• Best for drawn art,
such as:
– Diagrams
– Cartoons
Vector Graphics
Vector Graphics
• Has a very specialist niche on the web.
• Three competing formats, both of which work in
most browsers:
– Flash
– SVG
– HTML5 Canvas
• Flash is the most popular. Easily makes
images, animations and interactive apps.
• SVG & HTML5 are open-source.
Vector Graphics
• Flash can be created using a number of tools.
There is a version of Adobe Flash in the
computer barn and another in the Mac labs.
• There are some free tools for making Flash files,
but they are hard to use.
• SVG can be created by Inkscape, which is opensource and free.
• SVG can also be handwritten as text.
Vector Graphics
SVG can be displayed by all quality
browsers:
• Google Chrome
• Firefox
• Safari
• IE7 cannot display SVG without a plug-in.
(try the Adobe plug-in)
Vector Graphics
Adobe Edge:
• Free download
• Replaces Flash (which was a security
threat).
• Will use HTML5 to do anything that Flash
could.
Bitmapped Graphics
• Bitmapped graphics
build up an image
from individual dots
of colour, like a
television picture.
• It can be used for
photographs or
diagrams
Bitmapped Graphics
Bitmapped Graphics
• Bitmapped graphics have a greater file
size than the vector type
• For this reason, we have ways of
compacting the information.
• This results in different file types.
• Web browsers can all display:
– GIF (Graphics Interchange Format)
– JPEG (Joint Picture Experts Group)
– PNG (Portable Network Graphics)
Bitmapped Graphics
• GIF and PNG files use a lossless compression
algorithm to minimise the file size. They are
suitable for any graphic, but can minimise data
best for diagrams and cartoons.
• JPEG files throw away such data as humans
don’t see, and thus minimise the data. They are
best for photographs. Do not re-edit them as
they lose data at every re-encoding.
Bitmapped Graphics
• Be aware of BMP
• BMP is not a web graphics format (there
are many non-web formats).
• It is not compressed at all, so the file size
is rather large.
• It is excellent for editing
• It is accepted by every graphics package.
• It can be created by every graphics
package.
Display on the Web
• You will need to be able to display:
• Colours:
– backgrounds
– frames
– lines
– text colour
• Images:
– Pictures
– Backgrounds
Colours
• Described in:
• Names
– e.g. “lime”
• Hexadecimal
– e.g. “#00FF00”
• RGB
– e.g. “rgb(0, 255, 0)”
Colours
• There are only 16 names in the HTML
specification:
• h1 {color: lime;}
Colours - RGB
• Each colour has three components, red,
green and blue.
• The maximum value for each is “full on” =
255.
• Zero is “off”
• Thus white is rgb(255, 255, 255)
• Black is rgb(0, 0, 0)
p {background-color: rgb(0,255,0)}
Colours - Hexadecimal
• Just as in RGB, each colour has a value 0
... 255, but it is expressed in Hexadecimal.
• Hex numbers run:
0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11...
• ... so “F” means 15, “10” means 16 and FF
means 255.
• It is a number system for people with 16
fingers.
Colours - Hexadecimal
• In Decimal notation 24 = 2*10 + 4
• In Hex, 36 = 3*16 + 6
• e.g.:
h1 {background-color: #00ff00;}
Image Creation
• There are (at least) four different ways of
producing a graphic for the web:
– Camera
– Scanner
– Graphics package
– Graphics package + tablet
– Screen grab.
Image Creation - Camera
• Shoot the scene on your camera or mobile
phone
• If it is a camera, connect it to the computer
via the USB port and download the
pictures from the file system
• If a mobile phone, use USB or email the
photos to yourself.
• The image is usually a JPG
Image Creation - Scanner
• A scanner will photograph any piece of
paper up to A4, producing an image.
• You may need to think hard about output
file type. You might need a converter like
Irfanview (recommended: free download).
• You can use a graphics package to edit
the graphic – it will usually need to be
cropped.
Image Creation – Graphics Package
• Simply draw your graphic using a graphics
package, using a mouse or tablet.
• Alternatively, use the package to edit one
of your photographs.
• There are so many packages out there
• There are so many free packages out
there.
Image Creation - Screengrab
• You want to take a snapshot of your
computer screen – perhaps a web page or
an image.
• The PrintScreen key takes a snapshot of
the whole monitor screen
• Alt-PrintScreen takes a snapshot of the
currently active window.
• The image is now on the clipboard.
Image Creation - Screengrab
• To use the image, open a graphics
package (like Paint or Irfanview)
• Inside the window of the graphics package
either:
– hit control-v
– right-click and select “paste”
– use the edit menu and select “paste”
• The image will appear.
Image Creation - Screengrab
• Having captured your image you may want
to crop it, alter its resolution, and save it as
a PNG, JPG, BMP or GIF file
Resolution
• Resolution, File-size and Download Speed
• The resolution of a bitmapped image is the
number of dots per unit length (pixels per
inch).
• Images with too low a resolution look fuzzy
or blocky
Resolution
• The other problem is that images with high
resolution have a large file size.
• For an uncompressed image, there can be
up to 3 bytes per pixel.
• So a 5 megapixel image, as produced by
some mobile phones, will have an
uncompressed file size of 15 Megabytes.
• mpeg compression can reduce this to 10%
Resolution
• Assume a 1 megabit/sec broadband
connection:
• 15 megabytes will take 15 x 8 = 120
seconds, ie 2 minutes to download.
• The mpeg version will take 12 seconds!
• Many connections are a lot slower than 1
megabit/sec.
• We must minimise this data.
Resolution
• Ok, so images straight from the camera
take an unacceptably long time to
download and take up an unacceptable
amount of filespace
• So use a graphics editor to reduce the
resolution.
• Most monitors have a resolution of about
100 pixels per inch.
Useful tools for your pen drive
• Irfanview (graphics editor)
• WinSCP (allows you to upload to your I:
drive from home)
• Notepad++ (Intelligent editor for all web
languages)
• Firefox (stand-alone browser)
• Web Developer (CSS editor plug-in for
Firefox)