Recently I’ve been working on a redesign of our website from a Photoshop (PSD file) and it gave me an idea for a helpful piece of content.
Did you know that you can export CSS from each element in your Photoshop design?
There are some questions online that suggest not everyone knows about this cool tool built into Photoshop. So, if you’ve ever been confused or frustrated at how to get the exact measurement, color or dimensions of an item in element in Photoshop, read on for a solution!
Exporting CSS from Photoshop
Photoshop is for graphic designers and CSS is for web designers (generally), so understandably it can be a bit confusing when you start designing websites using Photoshop files.
PSD files are scary when you first start using them. They’re full of layers, elements, effects and all sorts of stuff that is foreign to a web designer.
Don’t worry though, layers are actually quite simple. Layers separate elements into their own ‘space’ and determine the position of elements on the page (whether they are behind or in front of something, for example).
Using the export CSS tool
To export the CSS on a Photoshop element, follow these two simple steps:
1. Right click the layer or object you’d like to export the CSS from in Photoshop
2. Click ‘Copy CSS’
3. Paste your CSS into a code editor like Sublime Text
4. Convert your CSS into a class or ID that you can apply on your website
Copy CSS can be used on anything within Photoshop to my knowledge, so you can grab the CSS for buttons, backgrounds, font or whatever you may need.
This is also very useful if you want to take just some of the properties from an element. It’s not always necessary to use this tool if already know the color used on an element for example, if its using your brand colors, but you may be unsure on the padding or border radius which the tool can help you get.
