Round buttons with Python Image Library

Thu, 11 Jun 2009 10:41:27 +0000

After much hunting, I finally settled on Hedger Wang’s simple round CSS links as the most acceptable cross-browser round button implementation. The minified CSS is about 2.5KB, and the syntax is very simple. To make an input button into a round button, just wrap it within a <span class="button">:

<span class="button"><input type="submit"></span>

… and it’s just as easy to convert a link into a rounded button:

<a class="button" href=”/”><span>Home</span></a>

It works by using a transparent PNG / GIF that looks like this:

The first button is the default button. The second appears on hover. The bottom two are for disabled buttons.

Can we easily create buttons in different colours?

That’s what this post is about: creating that image with round buttons and gradients.

When I tried creating these rounded buttons myself (and trying to do it in an automated was as usual), I saw 3 possible approaches:

Create it using PowerPoint via Python and export as a PNG. So we make a curved box, put in the appropriate gradients and borders, and export it as a PNG. But the problem is I couldn’t figure out how to get transparent PNGs.
Create it in GIMP using script-fu plugin . The problem is, I don’t know scheme or GIMP’s API. So I gave up on this as well.
Create it using Python Image Library . This was inspired by Nadia’s PIL Tutorial: How to Create a Button Generator. Let me explain how this works.

The first step is to create a ‘button-mask.png’ like this one:

Create a transparent 300 x 120 image in GIMP
Selecting a box from (0,0) to (300,30)
Shrink it by 2 pixels
Convert it to a rounded rectangle with a radius of 80%
Fill this in white
Copy it to 60 pixels below

Now, we need code to create a gradient:

start, end = (192, 192, 224), (255, 255, 255)
grad = Image.new("RGBA", (300, 120))
draw = ImageDraw.Draw(grad)
for y in range(0, 30):
    draw.line(((0, y), (300, y)), fill=rgb(start, end, y / 30.0))
    draw.line(((0, y + 60), (300, y + 60)), fill=rgb(start, end, 1.0 - y / 30.0))

Now that the gradient is created, convert that into a round button by loading button-mask.png’s alpha layer onto the gradient:

mask = Image.open("button-mask.png").convert("RGBA").split()[3]
border = Image.open("button-border.png").convert("RGBA")
grad.putalpha(mask)
grad.save("button.png")

There it is: a simple round button generator. You can see a sample of these buttons at my Dilbert search site.

Comments

helpful 27 Jun 2009 8:01 pm: The best way to do this is to use python’s cairo support to fully draw the button and apply the gradient and add text.
S Anand 29 Jun 2009 5:08 am: Thanks – Cairo seems a lot more powerful than PIL. Will give it a shot.

Amazon image abuse

Wed, 01 Jun 2005 12:00:00 +0000

Amazon image abuse. How you can change Amazon images in practically every way that Amazon itself can.

Corporate takeover

Mon, 18 Apr 2005 12:00:00 +0000

The Corporate Takeover Photoshop contests has some cool pictures: Revlon’s lip service, AT&T’s takeover of the moon, and Microsoft toilet.

Comments

Kingsley 19 Apr 2005 12:01 am: and then, there’s the adome macromedia merger. Photoshop that

image-manipulation on S Anand

Round buttons with Python Image Library

Comments

Amazon image abuse

Corporate takeover

Comments