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!
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
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
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”.
Now all thats needing done is for the copied CSS from Photoshop to be pasted into the HTML
Save the page and preview in a Browser. Job done.
Viewed on a Browser