Design the Web: Getting CSS from Photoshop

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.

Note: If you don’t have any HTML files of your own, Chris has provided free files to all members of the library, so you can get hands-on experience integrating the CSS.

The Design the Web series was created and produced by Chris Converse. We are honored to host this content in our library.

About the Author

Chris Converse applies design and UX principles to technology, from motion graphics to CSS-driven websites.

Chris Converse graduated from Rochester Institute of Technology with a degree in graphic design. He began his career in print, designing and preparing digital files for commercial offset printing. Chris has spent the last 22 years studying and applying design and interface principles to technology. His work spans various distribution media (CD-ROMs, web sites, and interactive DVDs) and applies many authoring media and techniques (HTML, CSS, JavaScript, AJAX, image optimization, motion graphics, Flash, Director, Shockwave, sound engineering, digital video compression, PHP, and ASP). Chris has a passion for and a commitment to conceiving, creating, and delivering the best possible user experience, regardless of the medium.

Product Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Beginner
• Video Duration: 24m 4s
• Instructor: Chris Converse