Instant transparent PNG generator v0.2

Earlier, I needed a semi-transparent png. I couldn’t be bothered to fire up Photoshop, couldn’t be bothered to steal one from another project, couldn’t find a png maker online, and yet I could be bothered to write an app to do it for me and share it with the world. F’kn stupid huh?

I’ve still not done the task I wanted it for in the first place!

The project utilises jQuery 1.4.3, jQueryUI 1.8.6 slider and Stefan Petre’s jQuery Color Picker plugin:

jQuery: The Write Less, Do More, JavaScript Library

jQuery UI – Slider Demos & Documentation

ColorPicker – jQuery plugin

Assistance with png generation garnered from this Codecall Forum post by AfTriX

This is a first, but fully functioning, release. As such, it still requires a decent user interface, and the code needs commenting, but it’s pretty simple stuff, thanks to Jquery. The png creation (once you get it to create an initial transparent png, which is much harder than documentation would suggest) is very simple, and achieved in just a handful of lines.

[UPDATE 1321-13112010]

The interface has now been fully styled for a much more pleasant appearance, and to match the blog. It’s quite CSS3 heavy for the spankier effects, so of course looks best in an up to date browser.

[/UPDATE]

I started by collecting the libraries and jigged the directory structure to my liking:

First up is the form and UI – this is actually html and Javascript, but I gave the file a PHP extension for forward compatibility.

index.php

As this code contains a complete HTML page, it’s a bit difficult to include in the blog, so here it is on paste bin:

http://absolutedisaster.pastebin.com/CjCkrHBk

colorpicker.js

A small hack is required to get the colorpicker to populate the hidden form fields with RGB values – there are of course other ways to do this, but as this hack is unobtrusive, and being jQuery will fail gracefully if this version of the plugin is used anywhere else, it seems the tidiest way to do it to me.

l.28 – 34 <<

l.28 – 40 >>

And the second half of it is the png script

png.php

The script in action

http://blog.absolutedisaster.co.uk/png-maker

 

Source files

The custom jQuery UI files have been further reduced as much as possible – uneccessary images and CSS rules have been removed. This means this version of the UI plugin may not be suitable for use in other projects unless you just want a simple slider as in this case. Also the colour picker background image and css have been modified to simplify the interface slightly.

I’m releasing this as GPL – feel free to install, modify, whatever, as long as it is not sold or otherwise charged for, and, wherever you use it, be good enough to give me credit, retain my credits in the files and drop me a line.

http://blog.absolutedisaster.co.uk/png-maker/png-maker_v0.2.zip

2 thoughts on “Instant transparent PNG generator v0.2”

  1. Been doing this the old-fashioned way for years – with paint programs. This is one great utility!!! Can you use this to generate two chart of all possible colors, one with 50% opacity and the other with 75% opacity. That way I can just click the color I want from the chart and download it. It would work well with any eyedropper browser plugin.This should cover about every possible need for a semi-transparent overlay on a background image.

Leave a Reply

Your e-mail address will not be published. Required fields are marked *