Adobe Photoshop Advanced Web

Web and UI designers who use Photoshop to create and export graphics for the web.

After completing this course, students will be able to:

• Master advanced selection tools, masking techniques, and non-destructive workflows using smart objects.
• Organize multi-screen artboards, grids, and layer comps efficiently for responsive UI design.
• Extract CSS code and export multi-resolution web assets optimized for performance.
• Build custom actions, batch commands, and scripts to automate asset production workflows.

Lesson 1: Precision Selections, Masking & Smart Objects

• Master advanced selection tools (Color Range, Focus Area, Channels), Quick Mask Mode, Pen Tool vector paths, and the Select & Mask workspace.
• Work effectively with Raster Masks, Vector Masks, and Layer Masks.
• Design non-destructively using Smart Objects and Smart Filters.

Lesson 2: UI Design, Artboards & Layer Comps

• Create, manage, and organize Artboards for multi-screen responsive design.
• Utilize grids, guides, and alignment tools to ensure layout precision.
• Create, edit, and manage Layer Comps for design variations and export them to files and multi-page PDFs.

Lesson 3: CSS Generation, Assets & Exporting

• Extract CSS code directly from shape, text, and layer styles.
• Configure Asset Generation settings for automatic real-time asset slicing.
• Export multi-resolution assets using the Export As dialog while optimizing graphics for web performance (SVG, PNG, WebP, JPEG).

Lesson 4: Automation & Batch Processing

• Create, edit, and organize Photoshop Actions.
• Automate web asset production using the Batch command and Image Processor.
• Utilize Photoshop Scripts for advanced workflow automation.

• Practical working knowledge of computers and basic Mac OS X or Windows skills.
• Photoshop Fundamentals: An Introduction to Photoshop class or equivalent experience is recommended.

None

None