When designing for the web, it's important to know how your design will translate into actual styling. In this video, explore two options for exporting the CSS values of text, shapes, gradients, and styling.
- [Host] When you're working to design websites…it can be handy to be able to grab all of the CSS…directly from a design.…To keep things simple, I have modified some of the interface…that we designed previously…so that I can show you these features.…Photoshop has a builtin feature for exporting CSS.…For example, if I come to the Let's Get Moving text layer…I can right click and choose copy CSS.…Let's come into a text editor and paste that…to see what the CSS looks like.…
Right from the get go you'll see that…it's declaring it based on the name of the layer…Let's Get Moving, it gives us a font size, the font family,…color in an RGB format of the font, line height.…Now this is given as a multiplier of the base size…of the font, text alignment,…and some vendor prefixed transforms.…CSS exports from Photoshop…also include positioning information.…Mostly this is useful if you're exporting multiple layers…of CSS and you want to make sure…that the Z index is set appropriately…so that the right content floats to the top.…
- Creating a document with artboards
- Using grids, guides, and guide layouts
- Adding placeholders and text
- Using ligature fonts for icons
- Using layer comps to display states
- Using Adobe Preview CC
- Exporting artboards for review
- Exporting assets for use in InVision
- Working with user interface kits
- Extracting CSS values from a design
Skill Level Intermediate
Q: This course was updated on 11/14/2017. What changed?
A: New videos were added that cover how to use user interface kits to create pixel-perfect designs.
Q: This course was updated on 07/10/2018. What changed?
A: We added one video, "Mobile preview on Adobe XD."