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, Joshua Johnson will explain how this works. Let’s take a look!

To begin, let’s try converting a basic button in Photoshop. Joshua Johnson started with a simple rectangle with rounded corners, then he adda on some layer styles. First, he used gradient overlay. Next, he’ll used an inner shadow set to overlay to put a nice highlight across the top. Finally, Joshua Johnson created a subtle drop shadow. Now that he has 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 you can insert it into your favorite code editor.