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.
Creating Graphics for the Web
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.
Enroll in the online course
Follow the appropriate enrollment method below, depending on your IU status.
IU faculty, staff, and students
Join using the self-enroll feature of Canvas (requires IU username and passphrase).
Non-IU learners
Join via IU Expand at a low cost (requires an IU Guest account, a free sign-up for anyone).
This course is part of an IT Training Certificate Series, which awards a certificate on successful completion of a final online exam. Learn more about the Web Creation Certificate Series.
Title Contents
Expand the accordion folds to see a detailed description of the content.
For IU learners: If you're interested in the content for Creating Graphics for the Web, but prefer not to enroll in the online course, you can access the course content below.
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
(IU Login Required)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
(IU Login Required)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
(IU Login Required)Create graphics that include transparency.
See the full content for Creating Graphics with Transparency in Photoshop
(IU Login Required)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
(IU Login Required)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
(IU Login Required)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
(IU Login Required)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
(IU Login Required)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
(IU Login Required)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
(IU Login Required)Explore how to export graphics made in Illustrator in this section.
See the full content for Optimizing and Exporting Images in Illustrator
(IU Login Required)Learn how to export web graphics created in Photoshop.
See the full content for Optimizing and Exporting Images in Photoshop
(IU Login Required)View the finished project for Creating Graphics for the Web.
See the full content for Viewing the Finished Site
(IU Login Required)
Find related training with our partners
Pluralsight
Pluralsight is a provider of video-based online training with a focus on more technically oriented and design focused topics.
Skillsoft
Skillsoft is a leading e-learning provider with a wide range of educational services and in-depth coverage of IT and other skills.
Contact us to request IT Training resources in other accessible formats.