Learn your way! Get started

Web Graphics using PS CC, Part 2: GIF, PNG & Slice

with expert John Wiley & Sons

Watch trailer

Course at a glance

Release date 4/9/2015
Level Intermediate
Runtime 1h 24m
Closed captioning N/A
Transcript N/A
eBooks / courseware N/A
Hands-on labs N/A
Sample code Included
Exams N/A

Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

Master the ins-and-outs of creating web graphics using Photoshop CC in this 3 part learning series. The courses start with an overview of web file formats, and then dives into the optimizing settings for JPEGs, GIFs, and PNGs. You will also learn how to create slices for optimization and interactivity; creating buttons, and rollovers, and animating web graphics. The course concludes with automation techniques like batch processing and creating droplets.


This course assumes you have familiarity with Adobe Photoshop CC. This course is part of 3 part learning series, Web Graphics using Photoshop CC: Creating; Web Graphics using Photoshop CC: GIF, PNG, and Slices; and Web Graphics using Photoshop CC: Interactivity. Please be sure to view the courses in order if you are new to the material.

Meet the expert

Our Creative Design courses are presented by experts from Wiley Publishing. Wiley is a global provider of knowledge and knowledge-enabled services that improve outcomes in areas of research, professional practice, and education. They are the publisher of award-winning journals, encyclopedias, books, and online products and services.

Course outline

GIF, PNG, and Slices

Working with GIFs (28:47)
  • Introduction (00:10)
  • The GIF Format vs JPEG & PNG (04:35)
  • Presets & Optimization Settings (02:50)
  • Additional Settings (03:50)
  • GIF Colors vs File Size (04:14)
  • Selective Color Reduction (02:02)
  • GIF Alpha Transparency (02:42)
  • Dithering GIF Files (03:45)
  • Background Matting in a GIF (04:25)
  • Summary (00:10)
Working with PNGs (26:53)
  • Introduction (00:10)
  • The PNG Format vs JPEG & GIF (04:48)
  • Presets & Optimization Settings (04:26)
  • PNG Colors vs File Size (04:49)
  • Alpha Transparency (03:40)
  • Dithering PNG Files (03:27)
  • Background Matting in a PNG (05:21)
  • Summary (00:10)
Working with Slices (29:07)
  • Introduction (00:10)
  • User & Layer vs Auto Slices (04:38)
  • Optimize Areas of Web Graphic (03:10)
  • Layer Based Slice (02:57)
  • Adding Interactivity to Slices (01:50)
  • The Slice Options Dialog Box (04:31)
  • Recognizing Slices (04:02)
  • Converting Slices (02:12)
  • Exporting Slices (03:29)
  • The Web Page & Code (01:53)
  • Summary (00:10)