Using Photoshop CC’s new CSS Workflow

I’m loving this new and very easy to use feature in Photoshop CC. If you, like me are more designer than developer. The subtle intricacies of creating attractive CSS3 design features such as Drop Shadows, Rounded Corners, Gradient Fills can ;ooh somewhat daunting. Photoshop CC has come to my rescue however with this almost embarrassingly simple workflow that lets anyone design stunning web assets in Photoshop (as so many of us do already) and then re-create those same design parameters in their CSS. Fab-U-Lous!

 

Here goes.

 

Start off by drawing a shape with the shape tool in Photoshop (using a Page Size Preset that matches a web standard would be a good idea). Ive drawn a rounded rectangle

Blue Box in Photoshop

New Shape Properties

 

Use Photoshop CC’s new Live Shape Properties options to create a Linear Gradient and round the corners to 15px (still loving that feature). Add a stroke around the edge as well, I’ve set mine to 8pt.

 

Next add a Layer Style to the Shape Layer of Drop Shadow.

 

Set the Angle to 135 degrees

Set the Opacity to 60%

Set the Distance to 13px

Set the Size to 10px

Photoshop's style settings

Style completed

 

OK, so that might make for a nice background for a block of text.

 

Re-name the layer, I’ve chosen “bluebox” as my shape is Blue, this name will become the name of the Class in your CSS.

 

Next copy the CSS from the stylised shape by choosing Layer > Copy CSS.

 

Move on over to Dreamweaver (though any web editing tool will do).

 

Create a <section> or <div> in the HTML around some text or other content, and apply a class with the same name as your Photoshop Layer in my case “bluebox”.

HTML Text

Now all thats needing done is for the copied CSS from Photoshop to be pasted into the HTML

CSS Pasted from Photoshop

CSS Pasted

 

Save the page and preview in a Browser. Job done.

 

Viewed on a Browser