Skip navigation.

exploreopera

| Help

Sign up | Help

Linux for Designers

a blog by Eckhard M. Jäger

CSSdev for Gimp

, , , , , ,

So here comes my announced and awaited script "CSSdev for Gimp" that is a remastered and more feature rich Python implementation of the old and buggy Gimp2CSS. After a hacking session at area42 this is a first cool working version was available. Meanwhile i updated this script various times and added more features. The major goals for the future are adding support for floating design and nested layers.

How it work:
* open your designed draft in Gimp
* Goto "Filter > Web > CSSdev"
* select your options and a folder where to export the "gimp_cssdev.html"
* After export you will find an XHTML source in the given directory that includes CSS styles too

What still works:
* Visibility for layers and the options of the CSSdev dialog
* Opacity for layers
* Creating an z-indexed based layout
* Layer positions and layer size
* Default font and alternative faces based on my CSS font matching
* default font, its size and its style
* Link colors
* Background color and forground color are based on the actual background colors and forground color of the toolbox
* optional export of layer height
* optional automatic color picking for DIV background color
* The CSS property Clip is supported via layer masks
* Creating additional CSS code for text layers (requires Gimp 2.5.x +)
* Export content of text layers (requires Gimp 2.5.x +)
* Croping layers to their content on export

All other options did not work at this moment but will coming soon.
Download
Download the CSSdev script and copy it to
/home/aeggy/.gimp-2.4/plug-ins

Windows user have to copy it to
C:\Dokumente und Einstellungen\#YourProfileName\.gimp-2.4\plug-ins


Make sure your Gimp-Python is installed and working, Windows users will find more informations about Python and Gimp here. The cssdev.py must be marked at the accessrights as an excutable.

Wine 1.0Firefox download day

Comments

avatar
Awesome. I'm looking forward to giving this a go.

Thanks for your hard work!

By crazybilly, # 18. June 2008, 13:56:22

avatar
Michael writes:

Well, hello from the guy who has brought you gimp2css...

I wrote this script for Gimp 1.x, that is ages ago, no wonder the produced html+css is not up to date... besides, I'm not really a designer, I work mainly as a backend developer (databases, models etc.) and I needed something pure and simple (well, it doesn't use td tags for layout, now, does it?) for a couple of freelance projects I was involved in at the time. I have posted it online hoping it might be of use.

http://freeyourtech.wordpress.com/2008/06/04/gimp2css/

Now, the fact that you have professional expertise in Design, Bart, raises the stakes - I'm expecting to see great stuff. Good luck with CSSdev!

By anonymous user, # 20. June 2008, 11:34:34

avatar
Hi Michael,
i'm on it :smile: Today i fixed a small bug in the "clip" feature and i started thinking about an algorithm to analyze a design with nested layers. That's the next step. After that i will export implement the image export.
I'm a little bit disappointed that there is no access in GIMP to text layer and the font informations :frown: Hopefully this will be better after the GSOC GIMP Python project.

By area42, # 20. June 2008, 14:48:30

avatar
Tenno writes:

I must be missing something as i can't get it work...

I've installed it in C:\Documents and Settings\Tenno\.gimp-2.4\plug-ins

I've follwed the path filters>web ... but no CSSdev just image map and semi-flatten (grey'd out)

so what am I doing wrong?

By anonymous user, # 28. June 2008, 16:58:02

avatar
@Tenno:
Make sure Gimp-Python is working, check the link in the article about Windows and Python.

By area42, # 28. June 2008, 21:23:37

avatar
micker writes:

hello i discover your script
i am really imprecive !!!
but when i try with gimp 2.4.6 i didn't have the same option with you no div link color
ect
can you help me ?
micker@free.fr
Thanks

By anonymous user, # 30. July 2008, 10:36:52

avatar
CSSdev is in development so may there are variations about the options. I planed creating a various range of web tools for Gimp:
- a flash gallery export http://my.opera.com/area42/blog/gimp-flash-gallery
- SuperSlice - a powerfull slicing tool
- CSSdev

Let us talk about bugs when CSSdev 0.5 will be available (soon) :smile:

By area42, # 30. July 2008, 11:35:45

avatar
micker writes:

hello do you have some news ?
i am really impressive !

By anonymous user, # 1. September 2008, 09:19:43

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

Please type this security code : c1fefc

Smilies