Design the Web: Getting CSS from Photoshop
24mBeginner2013-11-21
Authors
Chris Converse
Applies design and UX principles to technology
Course details
The Photoshop Layers panel contains a feature to extract CSS markup from an existing design comp automatically. Copy CSS allows you to scrape styles, colors, positioning, border effects, CSS3 gradients, and even CSS3 animation positions from your designs. Chris Converse shows you how to extract the CSS necessary to render the same effects shown in your comp in a web browser, and incorporate the markup into an HTML file. Speed up your CSS workflow with this fast and easy feature.
Skills covered
Web Design BusinessWeb StandardsWeb DesignSmall Business and EntrepreneurshipPhotoshopFront-End Web DevelopmentLimited SeriesAdobeWeb Development
Concepts
0. Introduction
- 01 - Preview the final project
- 02 - About the exercise files
1. Extracting CSS Properties from Photoshop
- 03 - Getting CSS properties from text layers
- 04 - Art layers vs. vector shapes
- 05 - Converting layer styles (effects) to CSS
- 06 - Getting CSS for multiple layers
- 07 - Getting coordinates of CSS3 animations