Digital Media Concepts & Media - 24 Building Blocks...Digital Media: Concepts and Applications Page...

Digital Image and Design

Almost everyone with a digital camera knows the value of

being able to digitally crop images and remove red-eye

before printing or posting photos. In most cases, the average

person does not need to develop skills beyond these simple

tasks, but as a digital media professional, you will. In this unit,

you will learn not only how to make the easy fixes but also how

to use image software in sophisticated ways. But first you must

understand the basic technology behind electronic images,

become familiar with software that is used to produce and

modify images, and learn how to manage image sizes.

Key Terms

Aspect ratio

Bandwidth

Compression

Drawing program

GUI

Paint program

Pixel

Pixel dimension

Resampling

resolution

Digital Media Concepts & Media Author: Karen May and Susan E. L. Lake

Digital Media: Concepts and Applications

Lesson 3.1 – Distinguishing Between Graphic Programs

Graphic programs fall into two categories: painting and drawing. Paint programs

create images by using pixels (or picture elements). Pixels are small squares (usually)

with each pixel assigned a color.

Drawing programs use vectors, or lines, to produce an image. These lines are created

using a series of mathematical points that can be changed without distorting the

drawing. It is important to understand the difference between the two types of

imaging programs because the software you choose to produce and edit images will

impact the quality and usefulness of the final product.

Raster-Based Paint Programs LO 3.1

Paint programs create images by assigning each pixel to a point on a grid of x and y

coordinates. This grid is called a raster, and images created using this grid are

sometimes referred to as raster images or raster graphics. More commonly, these

images are called bitmaps.

Raster graphics are used to create images such as photographs because of the wide

range and variations of colors possible. Unfortunately, because of the nature of pixels,

enlarging raster images can result in pixilation, or jaggies (jagged edges), as each

individual pixel is made bigger. Reducing images can also produce images that lose

sharpness.

Many software programs are available to create and manage raster (or bitmapped)

images. The most widely used program in the professional world is Adobe Photoshop.

However, you may have many choices beyond Photoshop available to you. Some

Paint Program

A general term for graphics software that uses pixels to create an image.

Pixel

Consists of a specific color at a specific location in a matrix or grid. A collection of pixels

produces an image on a

computer screen or on a printed

page.

Drawing Program

A general term for graphics software

that uses mathematically defined lines to

create an image.


programs, such as Microsoft Paint, are provided with the operating system you buy for

your computer. Others such as Corel Paint Shop Pro, are stand-alone programs you

purchase separately. Still other programs, such as GIMP (GNU Image Management

Program), are open source, which means they are free and work across a wide range

of computer platforms.

A more recent use of technology called cloud computing offers access to imaging

software through the Internet. Many cloud computing services are free, but some

charge a per-use fee or even require a subscription to use them. You may have

already used cloud computing imaging software such as Picasa or Flickr to upload and

edit photos. Use of cloud software may provide a less expensive option than

purchasing software for your computer, but it also means that must have Internet

access in order to use it.

GUIAn acronym for

graphical user interface. The GUI makes it

possible to use a device, such as a mouse, to

interact with a computer.

FIRST GUI

The introduction of image creation software was the beginning of the use of computers for artistic

purposes. Apple Computer, Inc. marketed the first GUI (graphical user interface) programs as

MacPaint and MacDraw.

These early graphics software applications were quickly replaced with products such as Corel

Draw (1989) and Adobe Photoshop (1990). These newer software programs increased the user’s

ability to fine-tune artwork and to create renderings that had never been possible in the world of

paint and pen. Today we take for granted the ability to create an image or edit or photograph,

but that was not always the case.


ACTIVITY 3.1 – Researching Cloud Computing Graphics Programs

1. Using Google or Bing, search for a list of drawing and paint programs that would

be considered cloud computing. (Do not use any that were mentioned in the

lesson.)

2. Using Google Docs or Microsoft Word, create a document giving the names of

at least two vector and two raster programs, their Web addresses, and a brief

explanation of the programs capabilities and limitations.

3. Save the document as 3_Activity1_cloud_graphics

Lesson 3.2 – Determining Image File Formats

A file extension is the two to four letters following the dot at the end of a computer

filename. For example, if a file is listed as “picture.jpg”, picture is the name of the file

and .jpg is the extension. The extension indicates the file format, which determines,

among other things, what program(s) open the file. Becoming familiar with the most

common image file extensions is useful because each file format offers advantages

and disadvantages depending on how you intend to use an image.

Non-native Raster File Types LO 3.2

Adobe Photoshop is one of the most widely-used raster-based graphics programs, but

you will also see many other types of files used in digital media projects. Often, you will

encounter one of the following non-native raster image extensions that each have

different characteristics and uses.

GRAPHIC FILE FORMATS

Graphic file formats continually develop as new techniques and demands of business

require them. Early graphic formats such as BMP were created without regard of file

size. Later formats such as JPG were created as a result of the demand for fast

download times on the Internet. Flash formats have continued to evolve as a means of

providing animation and interactivity on the Web. What is current today will likely not

be used in the near future. For example, the movement to small screens on portable

devices such as cell phones has already caused designers to rethink their graphic

choices. This process of change will continue to impact all those who work in the field

of image management.


BMP

One of the earliest image file types is a BMP (bitmap) file. BMP images are usually

placed in word processing documents. BMP file sizes are often quite large even though

they are usually limited to 256 colors (rather than the millions of colors possible in a

photograph) because they are created without using any compression.

JPG

JPG or JPEG (pronounced jay-peg) was developed by the Joint Photographic Experts

Group. Using up to 16 million colors, JPG images reproduce the quality, color, and

detail found in photographs or graphics using blends and gradients. Most digital

cameras save photographs as JPGs to conserve memory space on the camera’s

storage device. JPGs are the most common non-native raster file format in use today.

GIF

GIF (pronounced with either a hard or soft “G” is an acronym for Graphics Interchange

Format and was developed by CompuServe. Because GIFs are compressed and use

only 256 colors, the file sizes are quite small. Because photographs require greater color

depth, they lose much of their quality if they are saved as GIFs. However, GIFs are

suitable for line drawings, images with transparent backgrounds, and animated figures.

Because they are small and work on many platforms, GIFs are commonly used in Web

page design.

TIF

A bitmap file type that works well in all environments is a TIF or TIFF (Tagged Image File

Format). Like BMP files, these files are quite large. TIFF files can show 16 million colors

THINK ABOUT IT: LICENSING FEES

In 1994, CompuServe, the developer of the GIF file format, caused a stir when it

announced its intention to require that all commercial software companies using GIF

compression in their programs pay licensing fees.

Was CompuServe correct in its decision to charge a licensing fee? Why or why not?


and are often used in print documents. Some digital cameras can save photographs in

TIFF format as well as the standard JPG.

PNG

Another choice for use on the Internet is the PNG (Portable Network Graphics) format.

It retains 16 million colors and supports transparency much like GIF files. The graphics

world has been slow to adopt PNG, but it is becoming more common. Today it is often

used to replace GIF files partly because of the increase in available colors while

remaining a small file size

Non-native Vector File Types LO 3.2

The most common native vector file format is AI (from Adobe Illustrator). These file may

be converted to PDF, EPS, or SVG depending upon the intended output. The following

are some common non-native file formats and their characteristics.

EPS

EPS (Encapsulated Postscript) is a general purpose vector file format that has both the

vector image data a screen preview in the same file. It is most commonly used for

printing purposes.

SVG

SVG software is an example of an open source image. SVG (Scalable Vector Graphics)

is a vector graphic format designed specifically for use on the Web. SVG images are

created using HTML code. Programs such as Adobe Illustrator can be used to create

an image and then convert it to SVG. SVG is a popular choice for mobile devices

because of its small file size.

Format Conversion LO 3.2

Once a copy of an image has been saved in its native format, you can change to

another file format by using the drop-down arrow next to the Format box as shown in

Figure 3.2 (on the next page). From the list that appears, you can then choose the

appropriate file format.

Different file formats are appropriate for different situations, so it is important to

understand the distinctions between the various file formats. For example, some

programs can import only graphics with specific file formats. Some images look better


saved as one format rather than another, and some images need to be small in order

to load quickly on the Internet. Knowledge of file formats enables you to make the best

choice.

View the Video – A video illustrating how to apply the skills in this lesson is available

online using the link below. In the drop-down menu go to chapter 3, on the left hand

side click on videos, and choose the activity 2 video.

http://www.cengagebrain.com/cgi-

wadsworth/course_products_wp.pl?fid=M20b&product_isbn_issn=9780538741309&toke

n=

ACTIVITY 3.2 – Exploring Image File Types

1. Search Google images or Bing images and download and save an image of

each of the following file types: BMP, JPG, GIF, TIF, PNG, and EPS.

2. Open Google Docs or Word and key the tile File Types at the top.

Figure 3.1 – To see extensions on your

Windows based computer, make sure

the box indicated by the highlight is

cleared

Figure 3.2 – Once an image has been

saved in its native format, you can then

choose Save As, click the format or

save as type drop-down arrow and

select another format.


3. Create a table with two columns and six rows.

4. In the first column, insert each of the files you downloaded. Resize if needed as

long as it does not distort the image. Images should be approximately 1 inch by

1 inch in size.

5. In the second column, state the file type and give a short description of it

including advantages and disadvantages.

6. Resize the columns and center the table horizontally.

7. Save the document as 3_Activity2_file_types. Turn in all saved images with this

activity.

ACTIVITY 3.3 – Managing Image Sizes

There are two ways to look at image sizes. One is the file size or the amount of storage

space an image requires. The other is the visual image size. The two are connected

because raster images that are visually larger take up more storage than smaller ones.

(Recall that vector images do not change their storage requirements based upon size.)

As hard drive, flash drive, and other storage devices capacity has increased, the size of

image files has become less of a concern. However, it is still important to keep file size

in mind. Many Web sites and email services restrict the size of image files that can be

uploaded. At a minimum, huge attached images can slow email delivery.

File size is also a consideration when adding images to a Web site. The time it takes to

download a graphic on the Internet and display it in a browser depends on both the

size of the file and the type of the Internet connection. Dial-up connections that require

a modem and a telephone receive data over a narrow bandwidth and are very slow.

Broadband connections using DSL, cable, or wireless connections are much faster

because they have a larger bandwidth. The narrower the bandwidth, the longer it

takes to display images in a browser. So the smaller the file size, the faster an image will

load on a computer accessing a Web site with a narrow bandwidth. Once you have a

high-speed connection, it is easy to forget that not everyone has a fast connection, but

it is an important consideration for Web developers. Fortunately, there are a number of

ways to reduce image file sizes without giving up quality.

Bandwidth

The speed at which a computer can transmit information along a network.

Compression

The process of reducing the size of the image. Lossy compression reduces the size of an image file by removing

information that is not essential. Lossness compression does not

change any pixel data.


Compression LO 3.3

To reduce image file sizes, several algorithms (a sequence of steps used to perform a

function) have been written to reduce, or compress, the size of image files. The two

types of compression are lossless and lossy.

Lossless compression reduces the file size without losing any pixel information. Files

saved as .gif, .png, .tif, and others use a lossless compression algorithm to produce

smaller file sizes than those created when an image is saved in native formats.

The .jpg file format uses lossy compression. Lossy compression deletes or changes some

pixels when saving. Since lossy compression removes unneeded pixels from within an

image, this might appear to degrade the quality of the picture. However, this not

usually the case. When you save a file as a JPG, you select an image quality ranked

from 1 to 12 (see Figure 3.3). This number represents the amount of compression, which

determines the final size of the file. The higher the number, the more image quality is

preserved and the bigger the file size. If you will be using a large version of a JPG

image, you might want less compression to ensure a better image.

It is important to know that each time you change a lossy image and then save, the file

is compressed again. If you save several times in this way, you will see your image

begin to degrade, or become less acceptable. It you make all your changes in a

native format and then save the last copy as a JPG, you will not encounter this

problem.

Figure 3.3 – It is easy to choose

the amount of lossy

compression that is applied to a

JPG file


Resolution LO 3.3

Bitmap images have visual sizes measured in two ways: the physical size (such as

photograph printed as a 4 x 6-inch image) and the number of pixels in each inch.

Physical sizes are also measured in pixel dimension such as 640 x 480. In figure 3.4, you

can see two images. Each one has a physical size of one-inch square. If each colored

block represents a pixel, then the first has a pixel dimension of 4x4 and the second is

16x16. The first contains 16 pixels per inch and the second has 64. The size of the pixels is

much smaller in the second one and the pixels are much denser. The resolution of an

image is measured in pixel density or pixels per inch (ppi). You can see that an image

with 64 ppi will give you a better image.

Different devices such as digital cameras produce images with different pixel densities.

Image software allows you to manipulate these images changing the physical size as

well as the pixel density.

If your original image has a physical size of a one-inch square as seen in the first sample

in Figure 3.4, and you want to increase the resolution in the image, you will have to

reduce the physical size in order to add more pixels. The physical size of the image and

the resolution work in combination with each other. This can be seen in Figure 3.5

which demonstrates the differences among three image resolutions: 4, 8, and 16. The

image on your screen will not appear to be different, but your final image will be

Pixel dimension

the number of pixels in a row and column of a raster grid

Resolution

the density of pixels in an image.

Figure 3.4 – The first block of

colored squares has a

resolution of 16ppi, while the

block of colored squares (on

the right) shows 64 ppi. The

square on the right will be a

larger file size but a more

accurate reproduction of the

image.


smaller. It is important to keep in mind how both physical size and pixel density work in

tandem to determine your final product.

If you are sending an image using email or posting it to a social networking site, you will

want to use a lower resolution. If you are printing an image, you will want the highest

resolution possible to improve the final print.

Resampling LO 3.3

If you enlarge an image, you must either make the pixels bigger or add pixels.

Photoshop and other image software provide you with an option called resampling

that makes it possible to add pixels. Special formulas are used to determine what colors

each new pixel should be based upon the colors around it. Different resampling

formulas are used depending upon the desired outcome as can be seen in the

Photoshop drop down in Figure 3.6.

Figure 3.5 – Images with the same pixel dimensions but different resolutions will

have different physical sizes.

Figure 3.6 – Resampling allows software to

add pixels to an image to improve the

appearance of an image made larger (or

smaller)


Resizing LO 3.3

When changing the pixel dimensions or height and width of an image, it is important to

keep in mind the aspect ratio. This is the ratio of the width of the image to its height. If

you change one number without changing the other, you will get a distorted image.

Image software sometimes allows you to lock the aspect ratio (see Figure 3.7) to keep

this from occurring.

Resampling

Adding or deleting image pixels during the process of

resizing.

Aspect ratio

The ratio of width to the height of an image

Figure 3.7 – Choosing the Constrain Proportions option in Photoshop

automatically locks the aspect ration


Activity 3.3 – Comparing Image File Size

Management Methods

1. Choose a topic then locate and save five images related to your topic. Use

Google images or another source to locate the images.

2. Using photo editing software, resize each image three times at 75%, 50%, and

25% of the original size. Save the image with a different name each time you

resize it.

3. In a word processing document, create a three-column, three-row table with the

title Image File Sizes.

4. Insert the images in the first column of the table. In the second column next to

each image, key the size of the image (in pixels) and the size and space it will

use if uploaded to the Web.

5. In the third column, merge the three rows that contain the same image. Discuss

any noticeable changes to the size and quality of the three images.

6. Save the document as 3_Activity3_images_file_sizes. Turn in your saved images

with the document.

View the Video – A video illustrating how to apply the skills in this lesson is available

online using the link below. In the drop-down menu go to chapter 3, on the left

hand side click on videos, and choose the activity 3 video.

http://www.cengagebrain.com/cgi-

wadsworth/course_products_wp.pl?fid=M20b&product_isbn_issn=9780538741309&to

ken=

21st Century Skills: Career Planning

The first step in finding the job that is right for you is to target specific jobs and

careers. Decide what you want – not just now, but five or ten years into the future.

Have a career plan. One way to know what you want is to try out a wide range of

jobs through part-time work, volunteering, and so forth. Then research potential

employers that can offer you the kind of job or career you seek.

Skills in Action. Research some local digital media related companies. Develop a

list of people you might approach with the companies for a brief informational

interview. Arrange and follow through with an interview. Discuss your impressions in

class.


Key Concepts

Image programs can be categorized into two groups: paint programs and

drawing programs

Paint programs produce images using pixels. Each pixel consists of a specific

color. Images produced by paint programs are called raster images or

bitmapped images.

Drawing programs use vectors or lines to produce an image. The vectors are

created using a series of mathematical points. Images produced by drawing

programs are called vector images.

Extensions for the most common raster file types are .bmp, .tif, .gif, .jpg, and

.png.

Extensions for the file formats that are typically used for the Web are .gif, .jpg,

and .png.

Extensions for the most common vector file formats are .svg and .eps.

Different file formats are appropriate for different situations.

JPG image file sizes are reduced using a lossy compression algorithm that

removes unnecessary pixels. GIF, PNG, and TIF use a lossless compression.

Resolution and pixel density help determine the size of a file

Resizing is best done maintaining the aspect ratio

Review and Discuss

1. Name the two types of digital imaging programs and differentiate them.

2. Identify the advantage of using a raster graphic.

3. Identify the advantages and disadvantages of cloud computing.

4. Explain why it is important to understand file extension.

5. List at least four types of bitmap image extensions.

6. Differentiate between AI vector file and an SVG or OPS one.

7. Explain why images are compressed.

8. Differentiate between lossy and lossless compression.

9. Cite why you might want to use an interlaced image.

Apply

1. Use the table function in a word processing document to create a table similar

to what is found below. Insert sample images found from the Web for as many


of the file types as possible. Save the completed table as 3_Apply1_file_formats.

LO. 3.2

File Format Acronym

Stands For

Extension Type of Program Sample

BMP Bitmap .bmp Paint (raster)

TIFF OR TIF Tagged Image

File Format

.tif Paint (raster)

GIF Graphics

Interchange

Format

.gif Paint (raster)

JPG OR JPEG Joint

Photographic

Experts Group

.jpg Paint (raster)

PNG Portable

Network

Graphics

.png Paint (raster)

SWF Shockwave

Flash

.swf Drawing (vector)

EPS Encapsulated

PostScript

.eps Drawing (vector)

SVG Scalable

Vector

Graphic

.svg Drawing (vector)

2. Keeping in mind the advantages, disadvantages, and uses of each file format,

choose one file format and write an original slogan advertising the file format

and its usefulness. Keep the slogan to eight words or fewer. Use an available

paint program to effectively communicate your slogan. Save the slogan as

3_Apply2_Slogan. L) 3.2

3. Use a Web-based image editing software such as Piknik to upload and edit a

photo. (You can also use a sample photo provided on the Web site of the

software). Save the original phone as 3_Apply3_original. Resize the image to

approximately 200 pixels X 200 pixels. Save the edited photo as

3_Aplly3_web_based.

Write a reflection journal in a word processing document explaining what

changes you made to the image. Insert both images somewhere in the

document using wrap text to wrap around the image. Include in your journal a

description of your experience in using the Web-based software. Did you find it

easy? Was it difficult or limiting? What do you think was missing that you would

have normally used in editing an image? Save the journal as 3_Apply3_journal.

LO. 3.1 – 3..3


4. Key the table below into a word processing document. For each project

scenario, respond to the question in the columns next to the scenario. Save the

completed table as 3_Apply4_scenarios. LO. 3.2

Scenario What file types should be

used?

Why?

Web site using black and

white clip art or line

drawings.

Web site using all

photographs created with

a digital camera.

Printing a brochure with

images of a construction

site taken with a digital

camera

Creating a slide show for a

wedding of images only

on each slide.

Image that will need to be

edited in the future many

times.

5. Key the table below into a word processing document. In the last column,

answer the following questions: Should the file be used as is? Does it need to be

saved as a different file types, and, if so, what file type? Should it be

compressed? Save the completed table as 3_Apply5_editing_files. LO 3.2 and

3.3.

File Type Size of File Use of File Needed Edits

JPG 60KB Insert on a Web

page.

TIF 5MB Insert on a Web

page.

BMP 2MB Animated graphic

on a Web page.

PNG 15KB Print on a brochure

that will be sent

electronically.

GIF 1MB Place in a slide

show.

BMP 2MB Print Catalog


Explore

1. Survey the home pages of your favorite Web sites (at least five) to determine

what file formats the sites are using for their images. To determine the type of file

format, right-click on the image and choose Properties. The Properties dialog

box will show the extension.

a. Create a table showing the address of each site and the number of each

type of image files used on each site.

b. Do you disagree with the site’s choices of file formats? How long did it

take for pages to load? What can you suggest be done to increase the

speed at which the pages appear? Write an explanation summarizing

your comments.

c. Save the table as 3_Explore1_favorites.

2. Explore the code need to create an SVG graphic. What are the basic shapes

that are used to create SVG graphics? What problems are there using SVG

graphics on the Web? Include your resources in MLA style. Write a summary of

what you found and save it as 3_Explore2_svg.

3. Create a three-column table in a word processing document with the title Web-

based Image Editing Software. In the first column key the name of the software,

and in the second column cite the resource in MLA style. The last column will be

used to write your review on at least two of the software applications. Create

the list for the first column of Web-based image editing software by searching

the Web and talking with family, friends, and others who may have used this type

of software. Use at least two of the software applications to edit or create

images. Write a review of the two you explored. What do you like about them?

What did you find frustrating? What do you think could be done to improve

either software? Would you use each software again? Save your table as

3_explore3_software_review.

Digital Media Concepts & Media - 24 Building Blocks...Digital Media: Concepts and Applications Page...

Documents

Transcript of Digital Media Concepts & Media - 24 Building Blocks...Digital Media: Concepts and Applications Page...