Quickly Convert Objects to CSS Using Photoshop CS6.1
The latest build of Photoshop has some great new features that are sure to catch the attention of web designers. You can now convert a layer’s shape and style to CSS with a single click. In this article, we will explain how this works. Let’s take a look!
Copy to CSS
This new Photoshop feature that we’re going to look at is one that I’m pretty excited about. The ability to convert Photoshop layer styles to CSS has been around for a while through third party tools, but never natively out of the box. Web developers are constantly tasked with converting Photoshop artwork to live CSS3-powered designs. Depending on the complexity of the object, this can take some serious time.
Wouldn’t it be nice if Photoshop could just do the conversion for you? Good news: now it can. Let’s see how it works.
To begin, let’s try converting a basic button in Photoshop. As you can see, I started with a simple rectangle with rounded corners, then I add on some layer styles. First, I used gradient overlay. Next, I’ll used an inner shadow set to overlay to put a nice highlight across the top. Finally, I created a subtle drop shadow.
Our Photoshop CSS test case.
Now that we have a decent idea of how the button is built in Photoshop, let’s convert it to CSS. There are two ways to do go about this. The first, is to select the layer and go to Layer > Copy CSS in the menu bar. The other way is to right click on the layer and select the “Copy CSS” option from the menu that appears. This will copy the CSS code to our clipboard so we can insert it into our favorite code editor.
You’ll find the Copy CSS command under the Layer menu.
Before we go check that out, note that I’ve named my layer “button” in all lowercase. This is important because this will be converted to a class name in our final code.
Testing the Converted Code
If we jump over to a code editor, we can try out our button code to see if it worked. First, I’ll create a div in my html and give it a class of “button”. Now I’ll jump over to the CSS and simply paste in the code that Photoshop placed into my clipboard.
As you can see, a pretty big chunk of code has been written for us. It looks like the shape and color are spot on with our Photoshop version, but not everything was copied successfully.
The original button vs. the CSS version.
For starters, the drop shadow is at full opacity despite the reduced opacity in our Photoshop version. I would’ve expected Photoshop to use RGBa to pull off this effect. In addition to the drop shadow problems, our inner shadow wassimply ignored so there’s no highlight across the top.
All in all though, we’re off to a strong start. Photoshop saved us quite a bit of coding and even went the extra mile to include some browser prefixes to ensure maximum compatibility.
The Competition
Just for the sake of comparison, let’s compare Photoshop’s new built-in Copy CSS feature to a free Photoshop plugin called CSS3Ps, which essentially promises the same functionality.
The free CSS3Ps Photoshop plugin converts layer styles to CSS
Once again, I’ll select my layer, only this time I’ll hit the CSS3Ps plugin. This launches a web page where I have to wait a whopping 20s to see my results. This is admittedly super annoying, but once the results do pop up, they’re actually better than the built-in Photoshop feature.
The result from CSS3Ps
As you can see, both the top highlight and the reduced opacity of the box-shadow are present in this version. To take things even further, you can get your results in Sass, an awesome option that I’d like to see from Photoshop in the future.
How to Get This Update
To get this update, customers can follow the following instructions.
In Photoshop, choose Help > Updates
The Adobe Application Manager will launch. Select Adobe Photoshop or and choose “Update.”
Upgrade to Creative Cloud
Not using the Creative Cloud? You can subscribe to the Creative Cloud and get access to all these updates, as well as the rest of the Creative Suite for just $49.99/month.
TutsPlus+ is a blog/Photoshop site made to house and showcase some of the best Photoshop tutorials around.