Layers can be managed from the Layers panel. A layer can be renamed by double clicking. The lock icon will freeze the layer in position. And the eye icon will show / hide the layer.
Button actions from left to right:
- Move layer up
- Move layer down
- Delete layer
- Add new layer
- Duplicate layer
Layers can be selected by clicking on them and moved by dragging them on the screen. Holding down the Control(ctrl) key will cause the layer to be snapped to any other layers side.
There are two kind of inputs: range and color. The range sets values as pixels. Their minimum and maximum values differ by filter. Double clicking on the input opens a prompt where you can set the value manually (without limits).
Clicking in a color input will open the color picker where you can visually set the color.
Typing a hex color into the input will set the value also.
Images can be added by dragging and dropping them into the application, or via the background filter. Images that are dropped are converted to layers, thier size will match the image dimensions and added as the background filter.
All of your layers can be exported to separate CSS rules, by clicking the download icon in the toolbar. You will be promted for a filename, and then the file will be downloaded to your machine.
Rules are named as the Layers are named, with the difference that any none alphanumeric(plus: -_) characters will be stripped from them converted to lowercase, and spaces will be converted to dashes(-).
For example if you have a layer named
the rule will be named
The exported rules will have all styled css except position.
In the free version you are limited to one document at a time wich is stored at your local machine.
You can leave feedback in the Support Page of the application.
* Desktop only
|up||Move Layer Up 1px|
|down||Move Layer Down 1px|
|left||Move Layer Left 1px|
|right||Move Layer Right 1px|
|shift-up||Move Layer Up 10px|
|shift-down||Move Layer Down 10px|
|shift-left||Move Layer Left 10px|
|shift-right||Move Layer Right 10px|
|ctrl-plus (+)||Zoom In|
|ctrl-minus (-)||Zoom Out|
|ctrl-f *||Toggle fullscreen|