Skip to content

Stunning/gimp-export-layers-to-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 

Repository files navigation

GIMP plugin: Export layers to CSS

This plugin gives the option to paste all layers of a graphics file into a web graphics file. A CSS stylesheet is generated so that any layer can be used as background on a html element by simply giving the element the layer's name as class.

Example:

<div class="graphics-sample Cross"></div>

There is also an example HTML file generated for copy-pasting from.

Should be cross platform, but only tested on GIMP 2.8 on Windows 7.

Installation

Install GIMP 2.8

Copy plug-ins/export_layers_to_css.py to <Your home dir>/.gimp-2.8/plug-ins

Usage

Open a layered file. You can try sample/sample.xcf.

Any layers that belong to the same element must be grouped in a separate layer group. Make sure that every layer and layer group is properly cropped. You can use Layer -> Autocrop Layer.

Click File -> Export Layers -> To CSS

Select your web static root, and select the scale.

Click Ok to generate the files.

Copy the parts you need for your webpage from the generated HTML.

Compatibility

PSD-files can be opened by GIMP, but not all features are supported.

To prepare a PSD for GIMP created with PS CS6, do the following in PS:

  • Image -> Mode -> 8 Bits/Channel
  • Select -> All Layers
  • Layer -> Rasterize -> Layer Style

About

GIMP plugin: Export layers to CSS

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages