Tutorials and Online Training Videos

Adobe Photoshop CS4 for the Web Tutorial

Photoshop, the de facto graphics application in the world of print design, turns its sights on web design! In this course, Geoff Blake will demonstrate many practical and useful techniques for working with Photoshop in a web design capacity. You'll learn the fundamentals of web design, including HTML and CSS basics, the challenges of web browsers, and how monitor resolution affects design. Geoff will also demonstrate how to coordinate Photoshop and Dreamweaver so that you can edit layout images in Photoshop. You'll master Photoshop selections, how to use layers to organize your layouts, and how color works in an online environment. Finally, you'll construct an entire layout from scratch in Photoshop and discover techniques for exporting it for online use. To begin learning today, simply click on the movie links.

Introduction & Setting Up

Welcome & About this Course
The Role of Photoshop in Web Design
Working with Photoshop & Dreamweaver

Internet & Web Design Fundamentals

How Web Delivery Works
Web Browsers
Understanding HTML & CSS
Web Page Structure
Monitor Resolution

Photoshop Basics

Setting Photoshop Preferences pt. 1
Setting Photoshop Preferences pt. 2
Setting Photoshop Preferences pt. 3
Exploring the Photoshop Toolbox
Tool Settings on the Options Bar
Photoshop Application Bar
Exploring the Panels
Touring the Document Window
Working More Efficiently pt. 1
Working More Efficiently pt. 2

Getting Around

Navigating Through Images
Creating New Images
Using Grid/Guides/Rulers
Saving Your Work

Understanding Web File Formats

Raster vs. Vector
Web Graphic File Formats
Basic Image Optimization for GIF
Saving a Transparent GIF
Basic Image Optimization for JPEG
Basic Image Optimization for PNG

Resizing Images for Web Output

Understanding Resolution
Touring the Image Size Dialog
Resizing Fundamentals

Working with Selections

Shape-Based Selections pt. 1
Shape-Based Selections pt. 2
Transforming Selections
Color-Based Selections pt. 1
Color-Based Selections pt. 2
Using Quick Mask Mode pt. 1
Using Quick Mask Mode pt. 2
Using Quick Mask Mode pt. 3
Saving & Reusing Selections
Editing Alpha Channels

Organizing Web Projects with Layers

Understanding How Layers Work
Removing Objects from Backgrounds
Combining Images Together
Using Free Transform
Organizing with Layers
Opacity & Blending Modes
Special Effects with Layer Styles
Creating Web 2.0 Buttons pt. 1
Creating Web 2.0 Buttons pt. 2
Typesetting Fundamentals
Type on the Web
Understanding Styles
Creating a Website Header pt. 1
Creating a Website Header pt. 2
Creating a Website Header pt. 3

Color on the Web

Understanding Color Modes
Mixing & Specifying Colors
Using Web Safe Colors
Using Color Between Applications

Optimizing Images

Optimizing Images as GIFs
Creating GIF Animation
Optimizing Images as JPEGs
PNGs with Alpha Transparency pt. 1
PNGs with Alpha Transparency pt. 2

Creating Backgrounds & Textures

Background Techniques
Tiling Background Examples
Creating Gradient Backgrounds

Building a Full Layout

What We Will Build
Laying Out the Guides
Creating the Main Layout Blocks pt. 1
Creating the Main Layout Blocks pt. 2
Creating the Main Layout Blocks pt. 3
Laying Out the Banner Ad Blocks
Getting Organized in the Layers Panel
Finishing Up the Layout

Adding Content to the Layout

Formatting the Overall Layout
Building the Lead Story Box
Building the Story 1 Box
Building the Story 2 Box
Building the Story 3 & 4 Boxes
Building the Feature Box
Creating Title Text
Inserting Placeholder Text
Formatting the Footer
Inserting the Header

Slicing a Photoshop Layout

Creating Slices by Hand
Guide-Based Slices
Layer-Based Slices
Dividing Slices
Slicing Apart the Layout pt. 1
Slicing Apart the Layout pt. 2
Slicing Apart the Layout pt. 3
Setting Slice Properties pt. 1
Setting Slice Properties pt. 2

Exporting a Photoshop Layout

Slice Export Settings
Exporting a Table-Based Layout
Viewing the Table Results
Exporting a CSS-Based Layout
Viewing The CSS Results
Final Exporting & Results
Replacing Text
Formatting the Layout


Wrap Up
About the Author

Related Books on Adobe Photoshop CS4 for the Web

Save $80 on the
by Motorola with Verizon Wireless service for less than from Verizon Wireless directly.
Save $80 on DROID BIONIC
More Cell Phone Discounts