How to Copy CSS for Text and Shape Layers in Adobe Photoshop

Designers will commonly use Photoshop to create the look and feel of a website and then transfer the various pieces to a programmer for assembly in an application such as Dreamweaver. With the advent of Creative Cloud, Adobe Generator was added to Photoshop, making it very easy to generate web-ready assets from layers in the Photoshop file. In addition to image assets, Adobe Generator also allows the CSS to be copied directly from text layers. CSS can be generated from any layer that is not a Smart Object.

1. This is a very simple website layout that I'll use as an example for generating assets.
2. First, the preferences need to be checked by going to Edit > Preferences > Plug-Ins and confirming that Enable Generator is checked.
3. Most of the image assets have already been generated, but I'll show one example of how it's done. Adobe Generator is enabled, but it still needs to be turned on by going to File > Generate > Image Assets.
4. Now it's simply a matter of renaming layers in the Layers panel by double-clicking the layer name and changing it so it's all lower-case with the appropriate file extension added. In the example shown, I've changed the name to fimstrip.jpg.
5. When a layer is defined with an appropriate extension (.jpg, .png, or.gif), an assets folder is automatically created with your Photoshop file.
6. CSS (Cascading Style Sheets) can also be captured for both text and shapes by giving the layers appropriate names and then copying to a CSS file. I'll change the Snapshot layer's name to h2 and the Body layer's name to body-text.
7. Next, I'll right-click (PC) / Control-click (Mac) on each layer and choose Copy CSS.
8. I've created a CSS file which I'll go to now and paste [Ctrl+V (PC) / Command+V Mac].
9. The transparency of the white rectangle behind the text also needs to be communicated to the programmer, so I'll change the name of the Rectangle 3 layer to main-content.
10. Then right-click (PC) / Control-click (Mac) on the layer and choose Copy CSS.
11. Switching back to my CSS file, I'll paste.