Graphic designer at work.

Exporting Web Graphics and CSS from Photoshop

Designers have been using Photoshop to create web mock-ups for a long time. In recent years, some new tools and trends have been introduced, like designing in the browser, which I’ve embraced and use on many projects, but I still find there are those times when I rely on Photoshop during the first design round.

Photoshop has a steep learning curve. In all the years I’ve been using it (since the early 90s), I still don’t feel comfortable saying I’ve mastered it. Just when I get close, new features are introduced and the learning begins again. When these new features contribute significantly to the production workflow, it’s worth taking the time to learn them. Two of the more recent additions — Generate Image Assets and Copy CSS — make the task of exporting mock-ups for production much easier, and both are very easy to learn.

Photoshop Generator

In 2013, Adobe included the Photoshop Generator plugin with Photoshop CC. To quickly generate image assets from your mock-ups, you just need to turn the feature on and name the layers appropriately. This video will walk you through it:

Copy CSS

The other nice addition is the Copy CSS option. Granted, you’ll probably find that you still want to rework the code a bit, but it gives you a nice start on your stylesheet. This video covers it:

Load swatches from CSS, HTML, or SVG file

Lastly, one more tip that will help when setting up a file from an existing web page or SVG. No need to sample a web page to figure out the color palette — you can just add them from the stylesheet, HTML file or SVG. This video shows you how:

Hope these tips save you some time and make your workflow a little easier!