What is Spriteowl?
Spriteowl is a Photoshop extension that takes over the boring part when working with sprite images and CSS. In other words, no more annoying measuring.
Place your elements and name your groups and layers in your Photoshop file.
Choose your export options in the Spriteowl Photoshop extension and let the magic happen!
Code + PNG
Import the generated CSS, LESS, SASS/SCSS, Stylus code + PNG file(s) into your project.
What others say about Spriteowl
For devs who love PS and sprites, Spriteowl lets you export your PS sprites to PNG/CSS/LESS/Sass/SCSS and Stylus.
Spriteowl is a Photoshop extension that takes over the boring part when working with sprite images and CSS.
We have used Spriteowl and Cssowl in several large projects and it works like a charme!
J. Halfar, CTO
Just wanted to say thank you for putting this together and making our development cycle so much easier!
A. Humphrey, Web Developer
I want to tell your plug-in is just great, and solved me a lot of problems when working with sprite images.
M. Patterson, Frontend Developer
Spriteowl retrieves x, y, width and height info of all sprite elements for you. No more boring measurements!
Spriteowl generates two PNG files. A 100% sized PNG (Retina) and an additional 50% downsized PNG and all the required media queries.
Good news for those working with preprocessors: Spriteowl supports LESS, SASS/SCSS or Stylus!
Just name your groups and layers and don't worry about position changes of your sprite elements any longer.
Spriteowl works for Photoshop CS6, CC, CC 2014 & CC 2015 on Mac & Windows platforms.
Besides the basic mixins, Spriteowl is designed to work well with the Cssowl mixin library. Check it out!
Getting started with Spriteowl
The screencast shows you how to install the Spriteowl Photoshop extension, create and export a sprite PSD, working with CSS and using Cssowl.
How you benefit from Spriteowl
Writing CSS code for a sprite image is a time-consuming job as you always have to measure x, y, width and height of all sprite elements. And if elements change or new ones are added, you have no choice but to start measuring again. Wouldn't it be great, if you could just do your updates and let someone else take over this annoying job? Well, lucky you, that's where Spriteowl comes in.
What you get
With Spriteowl you will not only get retina ready PNG files of your Photoshop sprite file, but also a stylesheet which contains each layer's position (x/y) and dimension (width/height)!
When working with one of the preprocessors LESS, SASS/SCSS or Stylus you will get a stylesheet as well as useful mixins from the Cssowl mixin library with many functions to easily position your sprite elements.
Spriteowl uses namespaces to bring sprite elements into your HTML. So by just naming your groups and layers, you no longer have to worry about position changes of the sprite elements in your original Psd file.
The usual workflow with sprites and CSS can drive you mad
Create a sprite Psd
Export the sprite image
Look up each element
Write CSS code
Save time and nerves with the Spriteowl way
Place your elements and name your groups and layers
Choose your stylesheet syntax and export options in the Spriteowl Photoshop extension and let the magic happen!
CSS, LESS, SASS/SCSS, Stylus + PNG
Import the generated sprite stylesheet + PNG file(s) into your project