Speed up your Photoshop workflow, slice and output CSS3 code from Photoshop

Posted by JD Collier on November 13, 2012

When I discover a new product or service that is amazing, I have to share…especially when something small has a big impact. I recently discovered two new tools that help you speed up the development process by auto-slicing a Photoshop file and generating CSS3 for your layer styles.

Automatically slice your Photoshop files with Slicy

Slicy ($29 from MacRabbit) is an incredible tool. The old process every developer knows involves going into Photoshop and selecting layers one-by-one, creating layer-based slices and outputting each slice as a JPG or PNG. This involves a bit of work and takes time to complete. 

Image removed.

With Slicy, simply add a .png or .jpg to the end of the layer names to slice, then drop the PSD on the tool and it will save the sliced images to a folder of your choosing. Amazing! 

Image removed.

Slicy can also handle more complex slicing situations. You can slice groups of images by naming the Photoshop layer group and you can even explicitly identify where you want the image sliced. There are example files that come with the tool so you can see how to use it.

Use CSS3Ps to output the CSS3 code for your layers in Photoshop

CSS3Ps (free) is a Photoshop Extension that allows you to select layer(s) in Photoshop and it will output the CSS3 in CSS, SCSS or SASS. Before, I would have to use a tool (that I've written about in the past) to recreate the closest visual style in CSS to match the Photoshop layer style. 

With the CSS3Ps extension installed in Photoshop, I simply select the layer or layers that I want to output to CSS and click the button for the extension. The tool will then open a browser window and output the CSS for you to copy into your CSS editor.

For example, some of the buttons in my design have a background that I can generate with CSS3 rather than outputting an image slice. I selected the tab-light layer and clicked the PSS3Ps button and the following code output for me to use.

Image removed.

Summary

With these two tools, I can speed up my development workflow. I can slice and output the code to replicate the Photoshop design with great fidelity to the original without so much zooming in and ensuring I am pixel perfect in my recreation of the design.

Full disclosure: I want to acknowledge that I am not affiliated with either of these tools … I'm just a fan and I would love to hear if you become a fan too.

Related reading

Marketing Guide

Monthly Marketing Insights.

Get thought-provoking and actionable insights to improve how your firm makes a connection with your customers.

LEAVE A COMMENT

The content of this field is kept private and will not be shown publicly.

Plain text

  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.