Advertisement
Tools & Tips

Quickly Convert Objects to CSS Using Photoshop CS6.1

by

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.

Photoshop button
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.

Copy CSS
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.

.button {
border-radius: 10px;
background-image: -moz-linear-gradient( 90deg, rgb( 42, 46, 53 ) 0%, rgb( 104, 110, 118 ) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb( 42, 46, 53 ) 0%, rgb( 104, 110, 118 ) 100%);
box-shadow: 0px 5px 4px 0px rgb( 0, 0, 0 );
position: absolute;
left: 249px;
top: 245px;
width: 300px;
height: 100px;
z-index: 2;
}

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.

Button Comparison
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 was simply 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.

CSS3Ps
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.

CSS3Ps
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.

  1. In Photoshop, choose Help > Updates
  2. 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.

Related Posts
  • Web Design
    Photoshop
    How to Export Photoshop Assets For the Web With PNGHatPnghat thumb
    The recently released "PNGHat" plugin for Photoshop, made by Source, creates an entirely different workflow for exporting PSD elements for use in websites, games, apps or whatever other types of projects you design for.Read More…
  • Design & Illustration
    Interface
    Create a Mobile Downloader App Interface in Photoshop45
    Photoshop is a fantastic app to create mockups for mobile applications. Its vector tools, combined with Layer Style effects, allow designers to quickly create layouts for their projects. In this tutorial, I will show you how to create a downloader app design for an iPhone, in Photoshop. Once completed, you will have a good understanding of how to create modern interface elements, as well as, charts and graphs in Photoshop. Let's get started!Read More…
  • Web Design
    Applications and Tools
    Five Useful Things You Can Do With Adobe Reflow Right NowReflow thumb
    Whether or not Adobe Reflow ever becomes a fully functional website creation tool, there are some really useful things you can do with it right now, and we're going to cover five of them.Read More…
  • Web Design
    Complete Websites
    Building the Responsive Timeline Portfolio PagePortfolio thumb
    During this tutorial we will be building the fantastic Timeline Portfolio as seen in an earlier tutorial by Tomas Laurinavicius. We will be using some responsive techniques as well as CSS3 animations, Sass and a little bit of jQuery.Read More…
  • Web Design
    HTML/CSS
    Finishing Off the Merry Christmas Web App InterfaceXmas build 1 retina
    In this tutorial we will finish off our web app front-end so it all looks perfect and functions nicely on all screen sizes. Last time, we rounded off by styling the message boxes, leaving just the content left to do. Shall we dive right in? Ok!Read More…
  • Design & Illustration
    News
    Complete Guide to What's New in Adobe Photoshop 14.1Preview400
    With the Adobe Creative Cloud, Adobe has promised to deliver speedy updates and frequent new features to our favorite apps. With Photoshop, Adobe has already made good on that promise with the addition of several new features. With the release of Photoshop 14.1, Creative Cloud customers will now have access to several new features, and updates to help streamline and improve their workflow. The biggest of these new updates has to do with Generator and Adobe Edge Reflow. In this article, we will explain both of these features, as well as all the other improvements in detail. Let's take a look!Read More…