Speed up your Photoshop workflow, slice and output CSS3 code from Photoshop
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.
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!
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.
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
MONTHLY MARKETING INSIGHTS.
Get thought-provoking and actionable insights to improve how your firm makes a connection with your customers.
LEAVE A COMMENT