Introduction to Designing Web Graphics

This course will teach students the skills needed to enhance your Web pages with attractive, fast-loading graphics, as well as how to create a user-friendly overall page design.

After completing this one-day course, students will be able to:

• Understand Graphic File Formats
• Edit Images and Create Special Effects with Photoshop and ImageReady
• Master Color Scheme Aesthetics and Advanced Page Layout Techniques
• Know When to Use Image Compression and Color Reduction

Target audience

All students should have a good understanding of HTML acquired through practical experience or attendance on an intermediate level course. No knowledge of Photoshop or ImageReady is required for course attendance.

Course content

Design for Aesthetics and Functionality Exercise 0: Downloading and Installing the Files for Class

Graphic File Formats for the Web Image Compression for the Web • File > Save vs. Save for Web • Exercise 1: Optimizing graphics for the Web

Site Design Metaphors • Branding

Basics of Web Design: Color Techniques to choosing a unique palette • Color Theory • RGB Color Space • Bit Depth • Adding Color Swatches to the Palette • Creating a Stored Color Table • Exercise 2: Choosing your Color Palette

Design Basics: Page Layout Design Theory • Other Variables: Monitor size and Resolution • Image Size Example • Page Dimensions • Exercise 3: Creating a General Mockup for your site

Photoshop Basics Photoshop Overview • History Palette • Layers • Creating an Image • Selecting Parts of an Image • Drawing/Editing Tools

Adding the illusion of a 3rd dimension Perspective • Photoshop Layer Styles & Effects • Exercise 5: Adding Dimension with Photoshop Effects

Slicing and Custom Optimization Slicing • The Optimize Palette • Exercise 6: Slicing your mockup

Naming Slices, Empty Table Cells, Transparency, & Backgrounds Empty Table Data Cells • Setting Background Color or Image • Exercise 7: Applying empty cells, links, backgrounds, and transparency

Aliasing and Anti-Aliasing, Vector Graphics and Raster Graphics Vector Graphics versus Raster Graphics • Anti-aliasing • Setting a Matte • Why Use Transparency? • Exercise 8: Setting anti-aliasing

Appendix A: Background Images Column Backgrounds • Full-Screen Images • Seamless Background Tiles • Creating column or full page backgrounds in Photoshop

Appendix B: Specifying Colors How Colors are Specified • Converting a Base 10 Color Number to Base 16 (hexadecimal)

Appendix C: Useful Links for Designing Web Graphics Resources for Web Graphics

About Courseware Company :: Instructor-led training courseware :: Self-study solutions :: Buy online today