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

See Adobe Photoshop: Tips and Tricks for similar articles.

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.Website Layout
  2. First, the preferences need to be checked by going to Edit > Preferences > Plug-Ins and confirming that Enable Generator is checked.Preferences
  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.File Menu
  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.Layers Panel
  5. When a layer is defined with an appropriate extension (.jpg, .png, or.gif), an assets folder is automatically created with your Photoshop file.Assets Folder
  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.Layers Panel
  7. Next, I'll right-click (PC) / Control-click (Mac) on each layer and choose Copy CSS.Copy CSS
  8. I've created a CSS file which I'll go to now and paste [Ctrl+V (PC) / Command+V Mac].CSS File
  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.Layers Panel
  10. Then right-click (PC) / Control-click (Mac) on the layer and choose Copy CSS.Copy CSS
  11. Switching back to my CSS file, I'll paste.CSS File

Related Articles

  1. How to Create a Solid-Color Fill Layer in Adobe Photoshop
  2. How to Change Color in Parts of an Image in Adobe Photoshop
  3. How to Create a 3D Sphere in Adobe Photoshop
  4. How to Apply a Perspective Warp in Adobe Photoshop
  5. How to Use the Black & White Adjustment Layer in Adobe Photoshop
  6. How to Create Image Slices Using Existing Guides in Adobe Photoshop
  7. How to Use a Gradient Mask in Adobe Photoshop
  8. How to Save an Action Set in Adobe Photoshop
  9. How to Create 3D Extruded Text in Adobe Photoshop
  10. Convert Point Text to Paragraph Text in Photoshop CC
  11. How to Prepare an Image for Print Production in Adobe Photoshop
  12. How to Use the Magic Wand in Adobe Photoshop
  13. How to Apply an Iris Blur Effect in Adobe Photoshop
  14. How to Apply Lighting Effects in Adobe Photoshop
  15. How to Use the Clone Source Panel in Adobe Photoshop
  16. How to Create a 3D Postcard in Adobe Photoshop
  17. How to Create a Custom Warp in Adobe Photoshop
  18. How to Use Variable Fonts in Adobe Photoshop
  19. How to Apply a Tilt-Shift Blur Effect in Adobe Photoshop
  20. How to Use Panels in Adobe Photoshop
  21. How to Use the Curvature Pen Tool in Adobe Photoshop
  22. How to Use Retouching and Restoration in Adobe Photoshop
  23. How to Work with Stroke Smoothing in Adobe Photoshop
  24. How to Use Brush Blending Modes in Adobe Photoshop
  25. How to Insert Action Stops in Adobe Photoshop
  26. How to Copy CSS for Text and Shape Layers in Adobe Photoshop (this article)
  27. How to Apply and Copy Layer Styles in Adobe Photoshop
  28. How to Apply Content-Aware Scaling in Adobe Photoshop
  29. How to Use Quick Share in Adobe Photoshop
  30. How to Use Guides and Organization in Adobe Photoshop
  31. How to Place and Align Thumbnails on a Page in Adobe Photoshop
  32. How to Use Blending Modes for Simple Color Correction in Adobe Photoshop