Design the Web: Slice Tool

Design the Web: Slice Tool

26mBeginner2013-09-11

Authors

Chris Converse

Chris Converse

Applies design and UX principles to technology

Course details

Learn to create multiple, optimized web graphics from a single Adobe Photoshop or Illustrator file with the powerful and versatile Slice tool. Increase your productivity by exporting many graphics from a single composition, while maintaining the integrity of the design. Design the Web author Chris Converse teaches you how to size, name, and duplicate slices and add transparency to the final graphics. He also shows advanced slicing techniques to generate CSS-based and table-based layouts as well as video-based animations and cinemagraphs. These tutorials work great for websites, emails, and other interactive projects.

Skills covered

Image EditingPhotoshopPhotographyLimited SeriesAdobe

Concepts

Introduction

  • Welcome
  • About the exercise files

Image Slicing and Optimization

  • Using the Slice tool in Photoshop
  • Duplicating slices in Photoshop
  • Adding transparency to web graphics
  • Using the Slice tool in Illustrator

Going Beyond Web Graphics

  • Creating HTML and CSS with Photoshop
  • Creating cinemagraphs with Photoshop