Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Hi, this is Chris Converse. And in this course, I'm going to show you how to extract CSS properties from a Photoshop design comp. Now the layers panel contains a copy CSS feature that converts your design and layer properties to CSS properties. And all of these properties that it creates are ready to use in your web and HTML-based projects Now we'll also be using some free sample HTML files that I'm making available to all members, and this will allow us to get hands on with the CSS that we get from Photoshop.
And as a final workflow option, I want to show you how you can use CSS3 animations with the coordinates that we get from Photoshop. So grab a layered Photoshop file and let's get started with the copy CSS feature.
There are currently no FAQs about Design the Web: Getting CSS from Photoshop.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.