Web Graphics using Fireworks Class

learn to create web graphics online

Web Graphics Using Fireworks 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.

Learn the essentials of making superior Web graphics and interface designs using Adobe Fireworks. We'll explore the technical fundamentals you need to know, including the Fireworks toolset and features, and discuss tips and techniques for the wide range of graphics encountered in a typical Web design project, such as photographs, illustrations, animations, rollover buttons, interactive menus, and advertisements.

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: Six months of access to class materials and instructor feedback. Instructor: Claire Boger Other details: Self-paced, online, 24 access to online learning environment

THIS CLASS IS OFFERED AT SESSIONS COLLEGE: get the details (Check the syllabus at Sessions College for updated class information.)

TOP: . Learn techniques for creating excellent web graphics.

Class Instructor Bio: Claire Boger is an interactive designer and founder of ImaginationAlley.com, a Web-based software training and design resource site. Claire has more than 15 years professional design experience including corporate identity and package design. Over the past 10 years Claire has concentrated on interactive media and was rewarded as co-recipient of a patent for CD-based technology AudioVisionCD. Claire has played a variety of roles in the development of both large and small scaled interactive projects for such notable corporations as Daimler Chrysler, Kodak, Merrill Lynch, Mutual of Omaha, and MasterCard. Claire has an MFA in Computer Art from SVA in New York.

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.