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.
- 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
- 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.
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.
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.
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.
Create graphics that include transparency.
Create a new file and set it up the Illustrator interface for making graphics for the web.
Learn how to make graphics using the Shape tools in Illustrator while creating the first part of a logo for a website.
Explore how to create color palettes for websites, as well as how to incorporate the chosen colors into graphics in Illustrator.
Learn how to make more artwork using different combinations of shapes in Illustrator.
Learn how the Symbols panel in Illustrator can help us as we make web graphics.
Learn how optimize graphics to ensuring they load quickly and are in a web-ready file format.
Explore how to export graphics made in Illustrator in this section.
Learn how to export web graphics created in Photoshop.
View the finished project for Creating Graphics for the Web.