Unit 4: Graphics

Overview

This unit offers relief from the coding of Units 2 and 3. Student may appreciate the different type of learning.

There are four modules in this unit, plus a Reflections module at the end. In the first module students will be introduced to using graphics in web design and learn about what constitutes effective use of web graphics. In the second module, students will acquire digital images and then learn how to crop and resize the images so they can be displayed on web pages. In the third module, students will utilize simple drawing tools and layers in graphics software to create simple web graphics and buttons. In the fourth module, students will learn about selection tools, tools for image manipulation, and blending techniques. The outcome of these modules will be several images that students use to enhance their portfolio website.

Each of the activities can be completed using any major graphic software application. Since this curriculum is vendor-neutral, the instructions are intentionally general, and do not include specific step-by-step instructions for any particular software. Consequently you will need to preview these lessons and be sure you understand how to complete the activities using your graphic software.

Consider having advanced students create video tutorials to accompany the activities in this unit, demonstrating the specific steps using your graphic software. These tutorials could be excellent teaching tools for all students in the class, including the students who create them. These could be created with screen recording and video editing software such as TechSmith Camtasia or Adobe Captivate.

Estimated time required: 11 to 17 hours

Learner Outcomes

Students will be able to:

identify what constitutes purposeful use of web graphics.
identify guidelines for effective use of graphics on web pages.
utilize graphics for web design in a manner that minimizes accessibility and usability impacts.
determine if an image or graphic is protected by copyright law.
determine whether or not copyright law would allow an image to be used on a web page under different circumstances.
identify what constitutes purposeful use of web graphics.
identify guidelines for effective use of graphics on web pages.
utilize graphics for web design in a manner that minimizes accessibility and usability impacts.
determine if an image or graphic is protected by copyright law.
determine whether or not copyright law would allow an image to be used on a web page under different circumstances.
use the concepts of pixels and resolution to appropriately size images for web pages.
understand how file size and bandwidth limitations influence the use of web graphics.
differentiate between different image file formats and determine which type is appropriate for displaying different types of web images.
use the concepts of pixels and resolution to appropriately size images for web pages.
understand how file size and bandwidth limitations influence the use of web graphics.
use the concepts of pixels and resolution to appropriately size images for web pages.
understand how file size and bandwidth limitations influence the use of web graphics.
utilize images created in a graphics program in an HTML page.
use thumbnail images to link to a larger image.
use the ALT attribute when adding images to a web page.
utilize the shape tools to make a basic shape and fill it with color.
select colors using the color palette.
use the eyedropper tool to capture color from objects or pictures.
utilize hexadecimal values to maintain consistency in color use.
utilize layers to adjust the stacking order of objects.
adjust layers so that they are visible or hidden.
optimize and export gif images.
use layer visibility to streamline graphic projects.
utilize a graphics editing program to create a favicon image.
adjust the settings for a favicon image so that it is the appropriate pixel size and file format.
use the <link> element in the <head> section of your page to add the favicon to your site.
utilize the basic marquee and other selection tools to cut out objects or isolate them from their backgrounds.
feather the edges of a selection.
apply layer effects such as drop shadow, glow, and bevel and emboss.
adjust the opacity of a layer or object.
adjust blending properties to create more advanced blending effects.
utilize the CSS background-image property to apply a background image to an element on the page.
utilize the CSS position, repeat, size and attachment properties of the background image to control how the image is displayed.
design or locate background images, both tiled and large size, for use as web backgrounds.

Modules:

Assessment

See the Unit 4 Question Bank for sample questions, organized by module. These questions could be used as needed for quizzes and exams. See also our Recommended Assessment for the overall course.