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 ExpandImportant 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.
Creating Graphics for the Web 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.
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.
See the full content for Working with Symbols in Illustrator.
Learn how optimize graphics to ensuring they load quickly and are in a web-ready file format.
See the full content for Introducing Optimization for the Web.
Explore how to export graphics made in Illustrator in this section.
See the full content for Optimizing and Exporting Images in Illustrator.
Learn how to export web graphics created in Photoshop.
See the full content for Optimizing and Exporting Images in Photoshop.
View the finished project for Creating Graphics for the Web.
All UITS IT Training course content is available for reuse via Creative Commons licensing (CC BY-NC-SA).
Contact us to request IT Training resources in other accessible formats.