Web Graphics using Photoshop Class

learn to create web graphics online

Web Graphics Using Photoshop Web graphics are essential to the user experience: they establish an identity, support content, and help to create a visual hierarchy. Designs help us to figure out (often subconsciously) how content is organized and what information is important—and what is not.

This class covers the essentials of making professional-looking Web graphics using Photoshop/ImageReady. You'll explore the technical fundamentals you need to know, and discuss tips and techniques for the variety of graphics encountered in a typical Web design project: everything from photos to line art, logos, text-as-graphic, banners, imported images, stock photos, and more.

On this page: enrollment details | instructor | class projects and objectives | prerequisites

Class Title: Web Graphics Using Photoshop Start Date: Classes start daily. Enroll today and gain immediate access. Class Length: Three months of access to class materials and instructor feedback. Instructor: Margaret Penney Other details: Self-paced, online, 24 access to online learning environment
	Tuition: $803

TOP: Image from Web Graphics with Margaret Penney. Learn techniques for creating excellent web graphics.

Class Instructor Bio: Margaret Penney is a teacher, designer, writer and media artist. Margaret teaches Web, print and motion graphic design, multimedia, and JAVA programming at an independent school outside New York City where she designs the Computer Science department curriculum. As a Web designer and developer, Margaret has created a multi-channel community portal for Hong Kong teenagers; ecommerce for Delias.com girls' clothing; a flash promotional for Nike; and currently she is working on a site for artist Sol Lewitt. As a new media artist, she has exhibited at the Institute of Contemporary Arts in London ; the Museo Tamayo in Mexico City; and around NYC. Her artwork has been reviewed globally online, in print magazines, and included in the book Eye Candy from the Underground: Fresh Styles for Web Designers. She has lectured on new media art at Purchase College , the School of Visual Arts Annual Conference for Educators, and the Pratt Institute. As a writer, she has been published in New York Arts magazine, Rhizome.org, and the Baltimore City paper. Margaret has a B.A. from Johns Hopkins University and M.F.A. from Columbia University.

Class Projects and Objectives:

This online class is packed with projects and tips.  Students can expect to: 

• Learn guiding principles for creating Web graphics.
• Learn technical fundamentals on file size and optimization.
• Learn the basics about compression systems and file formats.
• Learn how image size, image category, and color system affect optimization.
• Learn about classic Web graphic categories through a case study.
• Learn the process of creating a Web graphic following step-by-step directions.
• Choose a site with interesting graphics.
• Take a screenshot of the site, using a diagram to analyze the different categories of graphic used on the site.
• Send the screenshot to the instructor along with an analysis of the graphics used and general comments.
• Learn about the common source file formats you'll encounter.
• Learn about file formats for compression and optimization.
• Learn how to open and modify source files in Photoshop.
• Learn about the basis of Web color systems.
• Learn about the applications of dithering, alpha channels, and color palettes.
• Create a home page "comp" design for a B&B site.
• Demonstrate the ability to work with different source materials and file sizes to create a professional-looking final product.
• Learn various strategies for reducing an image's load time.
• Learn through a case study how various imaging techniques are applied.
• Learn how anti-aliased images are created.
• Learn how transparencies and matting are created.
• Learn how image slices are developed.
• Learn how to use Photoshop's color palettes.
• Create a logo and navigation bar for a fashion designer.
• Create a professional-looking nav bar design as a single Photoshop file.
• Slice or excerpt the logo and at least two buttons to demonstrate your ability to optimize files for the Web.
• Get an overview of copyright issues relating to new media.
• Learn how and where to obtain stock photography.
• Examine the creative use of stock photography.
• Learn about ways to obtain digital images from digital cameras or scanners.
• Learn about ways to import and edit type for use as an image.
• Produce at least 3 original images for a financial services Web site.
• Demonstrate the ability to add impact to generic images.
• Demonstrate your ability to explain your design choices to clients in a written summary of your images.
• Learn how GIF animation works.
• Learn about three common applications for GIF animations.
• Learn how to create a motion blur in Photoshop/ImageReady.
• Learn how rollovers work.
• Learn how to create a rollover in Photoshop/ ImageReady.
• Create a banner ad campaign for your favorite musical act consisting of at least 4 GIFs banners, tiles, and buttons.
• Demonstrate the ability to create an ad campaign with consistent look and feel.
• Demonstrate a basic proficiency with animation of text and graphics in the banner ad format. 
• Learn the importance of tracking innovations in the Web design community.
• Get an overview of Web design principles and how to develop your personal style.
• Consider how text treatment, use of color, and visual awareness combine to influence design.
• Study six sites by masters of the medium to learn about advanced graphics design.
• Create a home page and one internal page design for a luxury goods company.
• Write a 2 paragraph summary of your design goals and techniques.
• Demonstrate a basic proficiency in Web page and graphics design in the luxury goods category.