Generate your web design gfx

2009-06-26
Igor
java pragmatic web generator

There are many online applications that generate common elements of web design: rounded corners and CSS sprites, for example. There are also plenty of resources that describes how to make these elements manually, using PhotoShop or Gimp. In any case, this is not the solution I would go for. First, online applications are online, so you need to be connected. Next, working with online generators, especially updating (switch to browser - enter current values - change something - generate - save to disk - switch to IDE), takes time. Working with gfx editing program requires specific knowledge, time and in, some cases, a lot of money (for the license). I do not expect from my developers to know how to generate CSS sprites with PhotoShop - and they really should not care. Even if I have luck to work in company that has gfx department, it takes time to send request and wait for something such trivial as CSS sprite.

Generate gfx with Java

My idea is to generate parts of web design needed for the project. This makes things easier and less time consuming. Every developer can easily create new rounding corners or merge several images into one CSS sprite. This is especially useful in design phase, when we are playing with general look-and-feel of web application and when changes are often. The result is directly stored in the source folder and becomes visible for the web application.

Since I didn't find any other solution, I've coded small quick-and-dirty Java library that generates some elements of web design. To makes things more simpler, I use this library from Groovy script.

Examples

Lets start with CSS sprites:

dest = "../web/gfx/"

println "+ css sprites"
images = new ArrayList();
images.add(loadImage(dest + "firstPage.png"))
images.add(loadImage(dest + "lastPage.png"))
images.add(loadImage(dest + "nextPage.png"))
images.add(loadImage(dest + "prevPage.png"))
img = makeCssSpriteH(images)
saveImage(img, dest + "page.png")

This code may produce the following image: . It is also possible to create vertical CSS sprite.

Next, rounded corners - this has to be programmed right, especially when border has size. Anyhow, usage is simple:

println "+ rounded corners"
saveImage(createRoundedCornersCssSpriteV(50, 50, color(0x992222), color(0xffeeee)), dest + "rc1.png")
saveImage(createRoundedCornersCssSpriteV(50, 50, 20, color(0x992222), color(0xffeeee), color(0xee6666)), dest + "rc2.png")
saveImage(createRoundedCornersCssSpriteH(50, 50, 20, color(0x992222), color(0xffeeee), alphacolor(0xffffffff)), dest + "rc3.png")

Above code generates the following images:

Web badges are also popular:

println "+ web badges"
saveImage(createWebBadge('jodd', 'framework', color(0xff881d), color(0x263248)), dest + "badge2.png")

This badge looks like:

I've also included an arrow generator - it was not developed by me, I found the source somewhere and lost the track about the author:

Download

You can download current version of this library to play with.

What might be a good idea...

...is to make this library more complete, more prettier, more documented, more available to everyone. I would not mind doing that, if you also find this useful.

Contents

Read about...

...loading...