Unit 4: Web Graphics

Although there is a specific section dedicated to the learning/teaching of Graphics students will continue to develop their Photoshop and Illustrator skills throughout the course.

Learner Outcomes

Students will:

  • Understand how to effectively use graphics on web pages.
  • Know how to find copyright free images on the web.
  • Understand the difference between bitmap and vector graphics.
  • Understand the concepts of pixels and resolution.
  • Be able to appropriately size images for web pages with Photoshop.
  • Understand image file formats and when to use them effectively.
  • Know how to optimize images and export them for the web using both Photoshop and Illustrator.
  • Know how to utilize the Photoshop shape tools to make a basic shape and fill it with color.
  • Know how to select colors using the Photoshop color palette.
  • Know how to maintain consistency in color using hexadecimal values.
  • Understand how to use Photoshop layers effectively.
  • Know how to create a favicon image.
  • Understand how to use the Photoshop selection tools to cut out objects or isolate them from their backgrounds.
  • Be able apply Photoshop layer effects such as drop shadow, glow, and bevel and emboss.
  • Be able to adjust the opacity of a layer or object.
  • Be able to use Photoshop layer blending properties to create more advanced blending effects.
  • Know how to sharpen images using Photoshop filters.
  • Understand how to add a CSS background-image to an element on the page.
  • Be able to create and understand paths in Adobe Illustrator.
  • Be able to create complex shapes using drawing objects.
  • Be able to Apply Fill or Stroke to objects and understand the difference between CMYK and RGB.
  • Know how to trace an image with Illustrator.
  • Know hot to effectively use the Pen Tool in Illustrator.


Photoshop Tutorials

Adobe Beginner Tutorial (video)
Terry White Beginner Tutorial (video)

Illustrator Tutorials

Terry White Beginner Tutorial (video)
How to Use Image Trace (video)
How to Use the Pen Tool (video)
Shape Builder and PathFinder Tools (video)


Pixels and Resolution (video)
Images for the Web and Screen Resolution (video)
Pixel Density (video)