Creating Graphics for the Web

These materials introduce the different tools available in Illustrator and Photoshop for creating web graphics. In this training, we'll create graphics for a website, including buttons, a logo, and a banner image. During the creation process, we'll learn about optimizing graphics for the web and various techniques for creating web graphics in Illustrator and Photoshop.

NOTE: If you're designing or developing an IU departmental website, we strongly encourage you to use IU's WCMS. Learn more about publishing departmental pages at IU.

Learning Objectives

Learn the difference between vector and raster graphics
Create graphics for a website, including a banner, buttons, and a logo
Learn techniques for creating web graphics in Photoshop and Illustrator
Optimize graphics for the web using Photoshop and Illustrator

Prerequisite Skills

Experience with the Photoshop and Illustrator interfaces
Ability to perform basic photo editing in Photoshop
Ability to create and edit text and shapes in Illustrator

For a more in-depth look at the content of Creating Graphics for the Web, view the title contents below.

Expand Course Available

View Course in Expand

Important note for participants not affiliated with IU

This course contains training material only.
Participants who are not affiliated with Indiana University will need your own access to installed and licensed software, according to the training topic. This will allow you to follow along and participate in the hands-on exercises.
If you do not have access to the needed software, you can still enroll in the online course and read the course content.

More information about this course

This online course is free to everyone and available for enrollment through IU Expand.

This course consists of a series of short lessons, examples, demonstrations, practice quizzes, and hands-on exercises.

To complete the course content, you will need:

a web browser and internet access to use the course material on IU Expand.
a copy of the software relevant to the training installed on your computer.

Title Contents

Expand the accordion folds to see a detailed description of the content.

Explore the contents of Creating Graphics for the Web:

Learn about the two different types of web graphics and where they might best be used in a website.

See the full content for Making Graphics for the Web.

Learn about creating web graphics in Photoshop, as well as how to create a new file that's ready for the web.

See the full content for Creating Web Graphics in Photoshop.

Create a header graphic from an existing image in Photoshop. As part of the process, the image will be cropped and adjustments made to it in order to make it look its best.

See the full content for Creating a Header Graphic in Photoshop.

Create graphics that include transparency.

See the full content for Creating Graphics with Transparency in Photoshop.

Create a new file and set it up the Illustrator interface for making graphics for the web.

See the full content for Creating Web Graphics in Illustrator.

Learn how to make graphics using the Shape tools in Illustrator while creating the first part of a logo for a website.

See the full content for Creating Artwork Using Shapes in Illustrator.

Explore how to create color palettes for websites, as well as how to incorporate the chosen colors into graphics in Illustrator.

See the full content for Working with Colors in Illustrator.

Learn how to make more artwork using different combinations of shapes in Illustrator.

See the full content for Creating More Objects Using Basic Shapes in Illustrator.

Learn how the Symbols panel in Illustrator can help us as we make web graphics.