Course
Essential
Standard
Indicator
Essential
Questions
BD10 Multimedia and
Webpage Design
2.00 B2
2.01



Unit A
Multimedia and Graphic Design
30%
Understand digital image
design.
B2
20%
Understand digital raster
graphics
What are the appropriate units of measurement, color mode, and
resolution for raster graphics?
What are the characteristics of the different raster file formats?
How do you edit and manipulate raster graphics?
Unpacked Content
1) Graphic Images Considerations
a) Graphics – anything on a page that is not actual text, from simple line drawings
to fully active images found on the World Wide Web. The two major categories
of graphic images are raster and vector.
b) Factors that Affect Graphic Choice
a) Color depth - refers to the number of colors per pixel that can be displayed in
an image and affects image quality and file size.
b) Compression - refers to the mathematical algorithm used when an image is
saved in order to reduce the file size.
(1) The greater the compression, the lower the quality of the image.
(2) Lossless – no data is lost during compression.
(3) Lossy – some data is lost during compression.
c) Portability – ease at which files are opened, modified, and viewed on
computers using different operating systems, software and browsers.
d) Transparency – the background of an image is “see-through” so that the
graphic can blend into the background without having a white box around it.
c) Units of Measurement
a) Inches (in) – the standard unit of measurement for US standard size papers
that can work well for print. A “Letter” size piece of paper measures 8.5” x
11”, which is the most common size used in printers, for resumes, and other
common desktop publishing documents.
b) Pixels (px) – the most common unit of measurement used for computer
screen display. A pixel generally represents one dot that is illuminated on a
computer screen, many of which make up images. Pixels represent a precise
measurement system for web-design, but can lack flexibility as screen size
changes.
c) Points (pt) – the standard unit of measure for typefaces, with 1 point
representing 1/72 of an inch, therefore text formatted in 72 point font should
be approximately one inch with variation due to font designs. 12 point font is
generally accepted as the standard font size for paragraph text in print.
d) Picas – a unit of measurement for lines of type with one pica equal to 1/6 of
an inch. Therefore, there are six picas in one inch. Picas are often used in
BD10 Multimedia and Webpage Design
Summer 2014
Page 1
print design, as they are more easily divisible than inches, such as with the
Rule of Thirds.
d) Resolution
a) Resolution – the amount of detail stored for an image. The higher the
resolution, the higher the level of detail in the image.
(1) PPI (pixels per inch) - The number of pixels in one inch. More pixels per
inch means better image quality but larger file size.
(a) On-screen resolution - monitors can display an image at a resolution of
72 ppi. Additional resolution beyond 72 ppi will increase file size
without a noticeable increase in image quality.
(b) Print resolution - documents that are being sent for print should be 300
PPI to ensure image quality
(2) DPI (dots per inch) - the number of dots of ink or toner per inch on a
printed image.
(a) The lower the DPI the less detailed the image.
(b) Images that will be printed need a higher resolution in order to print
clearly without pixilation or blurriness.
b) Color Mode (note to teacher: this design element is also covered in objective
1.01 and is intended to be reinforced in this content) – a mathematical model
that describes the way colors can be represented as numbers or
percentages, typically with three or four values.
(1) RGB (red, green, blue) – assigns an intensity value to each pixel that
ranges from 0 to 255 for each of the red, green, and blue components in
an image. If all of the RGB values are 0 the result will be black. If all of
the RGB colors are 255 the result will be white. RGB color is best used
for on screen display.
(2) CMYK (cyan, magenta, yellow, black) – assigns a percentage value for
each of the process inks. If all of the percentages are set to 0, the result
will be white. An image should be converted to CMYK color mode before
exporting when images are being prepared for print.
2) Raster Graphics
a) Raster graphics – also called bitmaps, are images composed of grids of
pixels that have a fixed resolution (number of pixels per inch) and cannot be
resized without losing image quality. Raster graphics are edited in paint
programs.
(1) Characteristics
(a) Comprised of small dots called pixels, with each pixel assigned a color
value.
(b) Can support high color depths.
(c) Edited in paint programs.
(2) Commonly used for:
(a) The most common raster image is a digital photograph.
BD10 Multimedia and Webpage Design
Summer 2014
Page 2
(b) Modifying or adding effects to images, such as filters or blurs.
(c) Raster programs are very effective for web design.
(d) Images for print mediums, such as magazines.
b) Advantages
(1) Handle small details, such as those in photographs, fairly well.
(2) Handle modifications and effects well.
c) Disadvantages
(1) Resolution Dependent – the quality of the image is determined by the
number of pixels in the image, which cannot be resized without affecting
image quality.
(2) File sizes can become very large.
3) Raster Graphic Formats
a) Native file formats – editable file formats that are proprietary to a specific
program that generally lacks portability and is not meant to be used with other
software.
b) Standard file formats – file formats that can be used with a variety of software
programs. Standard file formats are usually created by using the “Save As”
command or through exporting. Standard file formats include, but are not
limited to: .gif, .jpg, .png, and .tif.
c) Formats used for Raster Graphics
(1) PSD – Photoshop Document
(a) Characteristics
(i) Native file format for Adobe Photoshop
(ii) Supports layers, transparency, text, and effects
(iii) Large file size
(b) Commonly used for:
(i) The industry standard for raster graphic creation and editing
(2) GIF – Graphics Interchange Format
(a) Characteristics
(i) Standard format on web for animation
(ii) Supports transparency
(iii) Uses lossless compression
(iv) Supports 256 colors
(b) Commonly used for:
(i) Clip art, animations, icons, logos
(ii) Simple diagrams, line drawings
(iii) Graphics with large blocks of a single color
(iv) Graphics with transparent areas
(v) Graphics displayed on computer screens
(3) JPEG – Joint Photographic Experts Group
BD10 Multimedia and Webpage Design
Summer 2014
Page 3
(a) Characteristics
(i) Does not support animation
(ii) Does not support transparency
(iii) Uses lossy compression
(iv) Supports 16 million colors
(v) High quality
(b) Commonly used for:
(i) Desktop publishing images
(ii) Photographs and natural artwork
(iii) Scanned images
(iv) Emailing photographs
(v) Digital camera photographs
(4) PNG – Portable Network Graphic
(a) Characteristics
(i) Supports transparency
(ii) Uses lossless compression
(iii) Supports several different color depths; including 256 colors and 16
million colors
1. PNG 8 – 256 colors (Small graphics, line art, logos)
2. PNG 24 – Supports 16 million colors (Basic graphics, line art,
logos)
(b) Commonly used for:
(i) Replacing GIF and TIFF images
(ii) Online viewing of images
(5) TIFF – Tagged Image File Format
(a) Characteristics
(i) Does not support animation or transparency
(ii) Available in compressed (lossless) and uncompressed formats
(iii) Supports up 16 million colors
(b) Commonly used for:
(i) Storing raw bitmap data by some programs and devices such as
scanners
(ii) High resolution printing
(iii) Desktop publishing images
(iv) Storage container for faxes and other digital images
(6) PDF – Portable Document Format
(a) Characteristics
(i) Open standard, platform independent format that embeds fonts,
images, layouts, and graphics
BD10 Multimedia and Webpage Design
Summer 2014
Page 4
(ii) Allows choice of lossy and lossless compression
(iii) Supports 16 million colors
(iv) Viewable with Acrobat Reader, a free program by Adobe
(b) Commonly used for:
(i) Sharing files regardless of available software
(ii) Share files that can be protected from copying or editing
(iii) Publishing electronic documents and ebooks
4) Image Editing
a) Aspect Ratio – relationship of an object’s width to its height.
a) Knowledge of required aspect ratios can assure proper proportions when
creating new files, cropping, or making selections.
b) Maintaining aspect ratio while modifying an objects size ensures the object is
not distorted.
b) Cropping – removing a part of an image.
a) The original image retains the same file size.
b) The cropped image can be saved as a new object.
c) Layering – compiling multiple pictures or objects together into one image.
a) Layers can be turned on or off.
b) Elements can be colored, layered, and resized individually.
d) Selections – identifying a specific area of a layer or image that allows you to
move or apply techniques to only that specific area on that specific layer.
a) Transparency - removing the background color of a raster image making it
“see-through” in order to allow the image to blend in with its background.
e) Transforming – changing a graphics size or dimensions through commands such
as scaling and rotating.
a) Scaling – enlarging or shrinking a graphic.
b) Rotating – pivoting an object around its center point.
f) Layer Styles – One or more effects applied to a layer or layer group. Effects
include shadows, stroke, glows, bevels, and overlays.
g) Layer Masks – A non-destructive method which allows you to apply transparency
to a specific portion of a layer with precise control.
h) Fill - putting a color, gradient, pattern, or texture into an object or area.
i) Gradient – filling an object with a smooth transition from one color to another.
j) Adjustment Layers – Non-destructive layers that can be added to allow you to
apply image tonal and color adjustments.
k) Filters – used to apply special effects or unique transformation to an image.
l) Clone Stamp – samples and area of an image and then allows you to paint over
another area of the image with the sampled area.
m) Blend Modes – change the way layers interact by determining how a layer will
blend with the layers below it.
BD10 Multimedia and Webpage Design
Summer 2014
Page 5