Computer Graphics


Introduction to Computer Graphics | Types of Images | Scalable Vector Graphics | Image Compression | Image Acquisition & Copyright | Image Editing | Review

Introduction to Computer Graphics

Graphics are commonly used in Web pages, desktop publishing, authoring programs, tutorials, presentations, and games. The type of graphics that you choose for your website requires knowledge about file sizes, compression rates, resolution, and other specifics.

A graphic can be a chart, a drawing, a painting, or a photograph. It can be solid black and white; in grayscale, which uses many shades of gray ranging from white to black; or it can use the full spectrum of colors. Some pictures are still pictures, and some use animation. Graphics can illustrate or demonstrate procedures, clarify data, convey ideas, and tell stories. Sometimes, they serve simply as a decorative element, adding visual appeal to information and helping to keep readers interested.

Image vocabulary

The expression "a picture is worth a thousand words" is as true today as ever.

Visualizations can be an important part of the communications process and graphical images can be used to add emphasis, direct attention, illustrate concepts and provide a background for content.

Computers create images by arranging tiny dots of light, called pixels, on a monitor. Pixel means "picture element." If you look very closely at your monitor or use a magnifying glass, you might be able to see the individual pixels. A digital image does not have a physical structure. The particular way in which the computer stores the image data is called the image format.


Types of Images

Raster Graphics

suitcasesuitcaseRaster graphics, also known as bitmap graphics, store information about color and location on a rectangular grid of the pixels that make up the graphic. The dimensions of a raster graphic are the number of pixels in the rectangular grid. We measure the quality of a raster graphic in the number of pixels per inch or dots per inch. Another name for image quality is resolution.

Raster graphics, also known as bitmap graphics, store information about color and location on a rectangular grid of the pixels that make up the graphic. The dimensions of a raster graphic are the number of pixels in the rectangular grid. For example, if an image is 800 x 600 pixels, the image contains 800 times 600 pixels (or 480,000 individual pixels).

We measure the quality of a raster graphic in the number of pixels per inch or dots per inch. Another name for image quality is resolution. When you increase the size of a raster graphic, the same number of pixels takes up more space, and you have fewer pixels per inch. The result is that the image will be less detailed (lower in resolution). When you decrease the size of a raster graphic, it has the opposite effect—the resolution of the image increases.

When you enlarge a raster image, the pixels become stretched. The two suitcases on this Webpage are the same image file; however, the suitcase on the right has been enlarged using the html width attribute. The suitcase on the right has a fuzzy appearance because the pixels have been stretched in order to make the picture larger. We refer to this phenomenon as "pixelated."

Two very popular raster based graphics are the .GIF (pronounced Jiff or Giff) and .JPG (pronounced j-peg).

interlace vs. nonlinterlace

GIF Files—Graphics Interchange Format

JPEG or JPG—Joint Photographic Experts Group

Computer programs that help you create raster graphics include Adobe Photoshop, Microsoft Paint, and any sort of digital camera or photo editing program.

Vector Graphics

Have you ever copied an image from the Internet and found it to be too small for your needs? When you made the picture bigger, the image probably distorted and pixelated like the suitcases above. To solve this problem, the vector graphic was created and a major advantage of vector graphics is that they do not pixelate. You cannot stretch pixels because there are no pixels. Vector graphics are sometimes referred to as draw-type graphics. Designed specifically for the use on Webpages, vector graphics represent an image as a geometric shape made up of straight lines, ovals, and arcs

Vector graphics store information about images using lines, shapes, and colors represented by mathematical equations. Because they use shapes and math to describe images, you can make vector graphics larger or smaller without affecting the image quality. Vector graphics work great for illustrations, logos, buttons, shapes, and even some more complicated types of graphics and text. What they don't work well for is photographs. This is because photographs contain so much detail that it's not economical, from a file-size perspective, to convert them into lines and shapes.

Computer programs that work with vector graphics include Adobe Illustrator, CorelDraw, and any illustration application.

Scalable Vector Graphics (SVG)

Raster graphics used to be the only game in town when it came to the Web—but no more! The latest generation of Web browsers (including Chrome, Safari, and most mobile browsers) contain built-in support for Scalable Vector Graphics (SVG). SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. SVG is an XML vocabulary that you can use to describe computer graphics. A computer program (such as a browser) that knows how to interpret SVG uses the code to display images.

Try Me

  1. Open your Web browser (does not work well with Internet Explorer) to www.jsfiddle.net.
  2. Type the code below into the top-left, pane labeled HTML:
  3. code to make a svg circle
  4. Press the run button just above the HTML pane.

If you typed everything correctly, the lower-right pane of jsfiddle.net will display a circle with a black border and green on the inside. Try changing some of the values in the element and pressing Run again. For example, make the value of r (the radius) larger or smaller. Or change the fill and stroke colors or the position of the circle.

jsfiddle screen shot


SVG is resolution-independent, uses less bandwidth, and renders color more accurately. Other advantages of SVG include:

You can learn more about creating SVG at W3Schools - SVG Basic. Visit What is SVG at About.com to learn more about Scalable Vector Graphics. In summary, SVG is a W3C-recommended language that uses XML to describe graphics and graphical applications.

Assignment: Image Format Comparison Chart

Directions: Let’s compare the pros and cons of each type of image formats. Create a chart (or table) of the types of images. Download my template or create one of your own. You may use your lesson, the Internet, or other resources that you have available to you. I’ve even included a few image formats that we didn’t cover in the lesson as a challenge to you.

For each format, list at least 3 advantages (pros), 3 disadvantages (cons), and an example of an image displayed that each particular file format. Download the template (opens in Microsoft Word) to get started. Submit your finished comparison chart to itsLearning.


Image Compression

Images, video, and sound all contribute to the size of a Webpage which translates to load time. Google's research has found that a half-second longer load time for search results decreased traffic and ad revenue by 20%. Amazon found that its revenue increased by 1% for every 100 milliseconds faster the site loaded. In 2001, a study found that the longest a typical user would wait for a webpage to load is eight seconds. Today, this number is way too long for most Internet users. A much higher percentage of users have high-speed Internet connections. More recent studies have found that most broadband users won't wait four seconds for a page to load.

Raster (bitmap) images and video account for a large percentage of the data that travels over the Internet every day. In fact, network equipment maker Cisco Systems has predicted that video alone will soon make up 90% of all Web traffic. Compression is the process of making files take up less digital storage space by reducing the amount of digitized information needed to store a visual image electronically. Files are compressed to:

Lossy Compression

Lossy compression works by discarding aspects of an image that are insignificant. For example, if a photo contains 30 different shades of black, lossy compression will get rid of some of those shades. It is referred to as "lossy" because lossy image compression results in a loss of image fidelity. When used correctly, it's difficult or impossible for most people to detect. Lossy compression:

Lossless Compression

Lossless compression compresses images in such a way that they can be exactly reproduced from the compressed file—with no loss of fidelity. Lossless compression works great for icons, clip art, logos, buttons, and the like. The most popular lossless compression formats on the Web are GIF and PNG because of the limitation in colors. Lossless images:

You can read more about image compression in Cameron Chapter's blog, Everything You Need to Know About Image Compression. The blog includes great visual examples and is worth reading.

Understanding lossy and lossless compression

When you are saving pictures to your hard drive or saving pictures to post online or email, you're going to want to know about lossy vs. lossless image compression. Stacy Reed explains this important computing concept.

which image format to use
Click on the picture to read the presentation

introduction to graphics
Click on the picture to read the presentation

Assignment: Question for Thought 1

Directions: Describe how image file size can affect the download time of a Webpage and ways that image file size can be reduced. (~150 words). Post your essay directly to the itsLearning textbox. Do not submit a separate document and be sure to proofread before submitting.

Assignment: Comparing Image Compressions Worksheet

Directions: Download the Comparing Image Compressions Worksheet and the yellowstone.jpg image and complete the worksheet.


Image Acquisition & Copyright

Thunder Bay RiverCopyright cannot be stressed enough. We've talked about the benefits of images in our Webpages and multimedia presentations. They most certainly engage the visitor and enhance the presentation. Users have come to expect a visually pleasing experience that can only be achieved with the use of images. The World Wide Web has made it easy to share images and to purchase images through stock photographs and photo-sharing Websites. You can also create original images using image-creation software. You can scan hard-copy images (with copyright permission) or take your own images.

Stock Photography

Stock photography is images that you can purchase the rights to use in printed material or on a Website. Professional and amateur photographers file their images with an agency that acts as a go-between to negotiate licensing fees on behalf of the photographer. Stock photo images are licensed from the agency. Many modern stock photography distributors offer still photos, video and illustrations. Millions of photos are available for licensing, and all images on stock photography Websites are easily searchable by keywords. Stock photography can be sold with a royalty-free license that allows the buyer to use the image without having to pay a royalty each time the image is used. Stock photography can also be obtained with a rights-managed license. A rights-managed license permits the purchaser to rent an image through negotiation of a specific price for a specific use.

Free images

Some Websites offer digital photos for personal and commercial use free of charge, with restrictions such as:

There are many free images offered through the creative commons copyright. Be sure to read the fine print of any restrictions that are associated with the creative commons copyright.

Photosharing

Another possible source for free images is photosharing Websites, although photographs on these Web sites are copyrighted to the photographer and you must contact the photographer or owner of the photo to obtain permission to use the images. For example, I could place my picture of the Thunder Bay River that I took with my smartphone Photo-sharing Web sites where you would be allowed to upload, organize, view, share and download the photo and other image files. Some sites are free, whereas others offer subscription-based services. Free sites generally rely on advertising or the selling of prints to make a profit. These sites often feature online advertisements. Some sites offer subscriptions for their premium services, and a scaled down version with fewer features as their free package.

Assignment: Wordle

Directions: Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. You can also emphasize a word or two by repeating (multiple times) the word in your list. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends.

Create a Wordle of at least 10 words that have significance to you. You cannot save a Wordle but you can screen shot it (press your print screen key next to F12 in a Windows PC) and paste it into your word processing program. If you have Microsoft Word 2010 or higher, right click on the picture and you can save it as a picture and crop out any parts of the computer screen that you do not need). Drop it in the unit drop box and tell me in the message box why you chose those 10 words to create your Wordle. Upload your Wordle to itsLearning.


dithering and anti-aliasing

Image Editing

There are many tools that can be used for creating and editing images. Use can use graphics software to:

Adobe Fireworks (formerly Macromedia Fireworks) is a bitmap and vector graphics editor. It was originally developed, using parts of xRes, by Macromedia, which Adobe acquired in 2005, and aimed at web designers (with features such as: slices, the ability to add hotspots etc.) for rapidly creating website prototypes and application interfaces (Wikipedia).

photoshopPixlr.com is a free online photo editor just waiting to edit, adjust, and filter your images. Reviews compare it closely to Photoshop.


Other popular image-creation applications include:

photo editing presentaton   photo editing presentaton
Click on the presentations to read them

Creative Common License

It is possible to license (and share) your work using licenses known as Creative Commons licenses without the use of lawyers or expensive fees. Creative Commons a nonprofit organization devoted to making it easier for people to share and build upon the works of others by offering free licenses and legal tools with which to mark creative works.

Attribution (cc by): The simplest of all Creative Commons Licenses, in which any user (commercial or non-commercial) can distribute, modify, or enhance your work, provided you are credited.

Attribution Share Alike (cc by-sa): The same as Attribution, except that the new owners must create their license under the same terms as you.

Attribution No Derivatives (cc by-nd): Your work can be distributed by others, but not modified and in its entirety, with you being credited.

Attribution Non-Commercial (cc by-nc): Your work can be distributed, modified, or enhanced, with credit to you, for non-commercial purposes only. Derivative works do not have to be licensed.

Attribution Non-Commercial Share Alike (cc by-nc-sa): Your work can be distributed, modified, or enhanced, with credit to you, for non-commercial purposes only, but must be licensed under the identical terms. All derivative work must carry the same license, and be non-commercial.

Attribution Non-Commercial No Derivative (cc by-nc-nd): This is the most strive license category. Redistribution is allowed as long as credit is given. The work cannot be modified or used commercially.

Source: Bishop, Shuman, Reding, The Web Collection

Assignment: Been There; Seen That

Directions: Create a postcard of 2 places you have visited around the world that includes pictures and text descriptions. Address the postcard to Mrs. Rush. You may use any image editing program (such as Photoshop) that you choose.

Download the full project instructions here: Been There; Seen That. Please upload your completed assignment to itsLearning.

Assignment: Currency Remix Project

Directions: Create 1 paper currency design (front & back) & 1 coin currency design (front & back) for a country of your choosing. Research this country’s current design and then create an updated version for both coin and paper currency for your country. You may use the layout of the current currency but just changing colors around will not suffice. Countries are usually known for something… structures, famous people, geography, political involvements, etc. Use your country’s history to help you in designing their new and improved currency. These designs should be created using Image Editing Software. This project should be taken seriously… no pictures of explosions, convicts, anything questionable, etc. Once complete, compile the four images on a Word document to be graded. You will be graded on originality, craftsmanship/technical skill, composition, & following of directions.

Download the project instructions: Currency Remix Project and rubric. Please upload your completed assignment to itsLearning.

Assignment: Digital Design & Promotion

Directions: You are on the staff of a large marketing firm in New York City and Miles Stanish has hired your firm. He is opening a bicycle store in New York and plans to name it Cycle Fitness. Your firm is to design a new logo for this new shop and as well as for future locations he plans to open. Cycle Fitness plans to hold free seminars on bike safety, cycling for fitness, what to look for when buying a bicycle, choosing the right bike, choosing a bike for a child, and creating a cycle group that will be doing monthly cycle trips. Your firm must design the new logo, a grand opening postcard for mailing, a business card, a rack card that will sit on the counter in a holder indicating all the seminars offered, and a quarter-page advertisement. You may use any graphics and software programs to create your logo and documents.

Download the Digital Design and Promotion project instructions. Please upload your completed assignment to itsLearning.

cycle fitness newspaper


Review


Resources

If you are having problems viewing this page, opening videos, or accessing the URLs, the direct links are posted below. All assignments are submitted in itsLearning. If you have having problems, contact Mrs. Rush through the itsLearning email client.

Dithering and Anti-aliasing Pixel Art video: https://www.youtube.com/watch?v=g7xVhjblXt8

Pixlr: http://pixlr.com/ (note: MyScrapNook navigation bar is just an advertisement)

Understanding lossy and lossless compression video: https://www.youtube.com/watch?v=2Qo5prktYNQ

Review: https://www.examtime.com/p/1064479-Images-Review-quizzes

Transcript: http://mrsrush.net/digitaldesign/graphics/index.pdf


Credits

Vintage Suitcase image: dryicons

Interlace/Non-interlace flowers image: Web Style Guide http://mason.gmu.edu/~acarrott/index.html


Transcript of this lesson