Essential Standard / 2.00 / B2 / 30% / Understand digital image design.
Indicator / 2.01 / B2 / 20% / Understand digital raster graphics
Essential
Questions /
- 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?
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 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.
(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
(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
- PNG 8 – 256 colors (Small graphics, line art, logos)
- 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
(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.
BD10Multimedia and Webpage DesignSummer 2014Page 1