Image graphics introduction Gerhard Lock Tallinn University Institute of Fine Arts Department of Music e-Course Multimedia in Music Education

1. Study guide for week 3:
Topic 1 – graphic/image editing
KUM7088 Multimedia in Music Education
Composed by
Gerhard Lock

2. KUM7088 Multimedia in Music Education
Composed by Gerhard Lock
Topic 1 – graphics/image

The student knows and is able to apply within a proper meaningful context simple graphic
and image composition principles and has the skill to cut/reduce image files into web-
formats.

At least 3 graphics/images with different content/aim are to be done.
1. Graphics
1.1 Raster graphics vs vector graphics
2. Image
2.1 Making pictures
2.2 Technical parameters/color codes and digital representation of pictures

3. 1. Graphics
1.1 Raster graphics vs vector graphics
Raster graphics and vector graphics, application and preference cases*
Both graphic types, raster and vector graphics, have preferred application cases. As basic material
of a design/layout one should always prefer vector graphics, because the result is better in
quality.
The example above is first saved
as raster graphic and than
enlarged. The example below is
saved as vector graphic and
thanks to that the size can be
scaled fluently.
The most important difference
between the examples emerges
while looking at the diagonal and
curved lines, cogged edges turn
the quality of the first picture down,
the vector graphic edges of the
second picture are smooth.
* Aara Design Contor: http://www.aara.ee/Rastergraafika_ja_vektorgraafika_16.htm (translated by G. Lock)

4. 1. Graphics
1.1 Raster graphics vs vector graphics
Raster graphics and vector graphics, application and preference cases*
Most preferred raster graphics formats are .jpg, .gif and .png. The picture is saved with a defined
resolution enabling the optimized result.
The keyword here is optimizing which enables e.g. in the internet a smaller file size and therefore
a faster loading time. Keep in mind that a raster graphic is optimized for web view only and
doesn't befit for consecutive modifying and print layout purpose.
Vector graphics the objects are saved as vectors [lines joining dots] and they can be used for
further layout and modifying (enlarging or minimizing, color changing, detaching objects etc.)
Most popular vector graphics' formats are Adobe Illustraator (.ai) and CorelDRAW (.cdr). [But
also free software OpenOffice Draw offers well working solutions.] In that case giving the
layouter earlier created materials (logo or some template layout) you should always sent also
the basic vectore graphics file.
* Aara Design Contor: http://www.aara.ee/Rastergraafika_ja_vektorgraafika_16.htm (translated by G. Lock)

5. 2. Image
2.1 Making pictures
Making pictures take into account the following basic principles:
1) Composition
- position of people/animals/objects in respect to the whole picture
- central perspective, golden cut (see calculator http://goldenratiocalculator.com ) etc.
- color balance of people/animals/objects in respect to the whole picture
2) Lighting
- from which position the light source comes in respect to objects
- shades (of objects) and overlighting, making pictures against the sun (special effects)
- indoor vs outdoor; using flash (only if really needed)
3) Shutter speed and auto focus
- automatic cameras choose it itself, use predefined auto settings carefully
4) Resolution
- modern digital cameras offer several resolutions (according to which the file size/quality de-/increases)
5) Camera corner (position in respect to the object)
6) Zooming
- only professional cameras allow quality zooming, try to avoid zooming if possible
See Digital Photography Tutorials: http://www.cambridgeincolour.com/tutorials.htm,
http://lifehacker.com/5815742/basics-of-photography-the-complete-guide

6. 2. Image
2.2 Technical parameters/color codes and digital representation of pictures
Pixel • dot on a screen, print, etc.
To define digital pictures the element pixel (pel) is used, its a physical dot in a raster or the tiniest localizable
screen picture element. Position of pixels is connected with physical coordinates. LCD's (liquid crystal
display) work with 2-dimensional rasters and and use dots or squares, CRT (cathode ray tube) pixels are
connected with the defined emerging and disappearing time.

7. 2. Image
2.2 Technical parameters/color codes and digital representation of pictures
Megapixel • MP, Mpx
It equalizes 1 million pixels, which is used not only concerning numbers of pixels in the picture, but also to
express the number of image sensor's elements of digital cameras or digital screens.
For example a camera, which takes pictures with resolution 2048 × 1536 pixel, uses normally some additional
rows and columns for the sensor's elements and seda is called 3.2 or 3.4 megapixel according to the
“efective” or “total” number of pixels in opposition to the number of pixels of the final picture: 2048 × 1536 =
3,145,72
PPI = pixel per inch
PPI or pixel density is a parameter of resolution: typical in computer screens, picture scanners, digital camera
sensors; its the tiniest controllable on screen represented element.
1 inch = 2.54 centimeter
Kalkulaator: www.manuelsweb.com/in_cm.htm

8. 2. Image
2.2 Technical parameters/color codes and digital representation of pictures
RGB colors – additive model
8 bits, integer 0–255.
256*256*256=16777216 possible colors.
RGB = Red, Green, Blue
RGB additive model is "additive", because the combination of all colors together leads to white, black is the
absents of light.
See color tables in the internet:
www.tayloredmktg.com/rgb/
www.rapidtables.com/web/color/RGB_Color.htm

9. 2. Image
2.2 Technical parameters/color codes and digital representation of pictures
CMYK colors – substractive model
CMYK model (process colors, four colours) is used in color prints:
CMYK = cyan, magenta, yellow, and key (black)
CMYK model works through partly or complete color masking on a lighter, normally white background. Ink
(printing color) reduces light, which otherwise would be reflected. Such model is substractive because the
ink ”dissolves” luminosity from the with color.
Differently from RGB model the CMYK model works as follows: white is normal color of the paper or some other
background, black results from the addition of all colors. To save CMY colors and to achieve a deep black
color tone, black is often added as separate ink.
R
GB
Left: CMYK
model in
square
represen-
tation
Right:
(1) CMYC
substractive
model,
(2) RGB
additive
model

10. 2. Image
2.2 Technical parameters/color codes and digital representation of pictures
Layers of RGB model (left) and grey scales (right) examplified with GIMP logo.
Channels according to the particular color as well as with additional operational alpha channel

11. 2. Image
2.2 Technical parameters/color codes and digital representation of pictures
Image sensor
Its a device converting optical pictures into electronic signals. Its mostly used in digital cameras,
camera modules and other photographing devices. Earlier analogue sensors where video
camera tubes the newest are digital charge-coupled device (CCD) or complementary metal–
oxide–semiconductor (CMOS) sensors.
Digital cameras use photosensitive electronics (CCD or CMOS sensors), which consist of a big
number of single sensors, each of them saves the measures of intensity level. In most digital
cameras sensors are covered with a color filter (mosaic) of red, green and blue areas according
to the Bayer filter positioning in a way that eacg sensor element saves one concrete color
intensity. The camera interpolates the color information of the sensors through the process of
demosaicing and creates the final picture. Also this elements are sometimes called pixels, but
they have only on channel (only red, greenm blue).
Therefore each sensor's two out of three colors need to be interpolated and so called N-megapixel
camera, which produces N-megapixel picture, offer only 1/3 of the information which same size
picture or a scanned image.

12. 2. Image
2.2 Technical parameters/color codes and digital representation of pictures
Bayer filter
Bayer filter mosaic is the color filter array (CFA) in the square grid of the photosensor.

13. 2. Image
2.2 Technical parameters/color codes and
digital representation of pictures
Bayer filter
Bayer filter mosaic is the color filter array
(CFA) in the square grid of the
photosensor.
Picture above: camera reconstructing the
picture from the sensors' information using
interpolation.
Picture below: it shows how the Bayer filter
of the camera sees the picture without
interpolation process.