Home | Spriteowl Photoshop extension

Save time, work faster!

Export your Photoshop Sprites to PNG and CSS, LESS, SASS/SCSS or Stylus code

CS6 / CC / CC2014 / CC2015

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.

Photoshop

Place your elements and name your groups and layers in your Photoshop file.

Spriteowl

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.

Check out the Spriteowl documentation and walktrough.

Watch our screencast how to get started with Spriteowl.

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.

Smashing Magazine

Spriteowl is a Photoshop extension that takes over the boring part when working with sprite images and CSS.

Photoshoplr

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 Features

Save time

Spriteowl retrieves x, y, width and height info of all sprite elements for you. No more boring measurements!

Retina support

Spriteowl generates two PNG files. A 100% sized PNG (Retina) and an additional 50% downsized PNG and all the required media queries.

Preprocessor support

Good news for those working with preprocessors: Spriteowl supports LESS, SASS/SCSS or Stylus!

Changes welcome

Just name your groups and layers and don't worry about position changes of your sprite elements any longer.

Platform support

Spriteowl works for Photoshop CS6, CC, CC 2014 & CC 2015 on Mac & Windows platforms.

Handy mixins

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)!

Preprocessors support

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.

Namespace support

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

Photoshop

Create a sprite Psd

Export Image

Export the sprite image

Measure

Look up each element

Code

Write CSS code

Save time and nerves with the Spriteowl way

Photoshop

Place your elements and name your groups and layers

Spriteowl

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