Skinning Images

samtregar has asked for the wisdom of the Perl Monks concerning the following question:

Hello Monks. I'm working on a skin system for a web app which will allow users to easily modify the look of the UI without editing templates. The app uses a single CSS file to set colors and fonts, so most of the required skinning functionality is just a matter of using HTML::Template to generate the CSS file. However, there are a few images used in the interface and these will need to be skinned as well. Of course I'll allow the skin to carry its own images, but it seems like such a pain to make people create new images just to change colors.

So my question is, how would you implement a system that colors images based on runtime configuration? I'm wondering if I can use Imager, which is already part of the project, to do the job. SVG also seems like a possibility, although I think I'd have to pre-render to PNG as browser support for SVG was pretty limited last I checked.

-sam

Comment on Skinning Images

Replies are listed 'Best First'.

Re: Skinning Images
by edoc (Chaplain) on Jan 01, 2004 at 23:11 UTC

You might want to check out BioChrome & BioTint

cheers,

[reply]

Re: Re: Skinning Images

by samtregar (Abbot) on Jan 01, 2004 at 23:21 UTC

-sam

[reply]

Re: Skinning Images
by Aristotle (Chancellor) on Jan 01, 2004 at 23:14 UTC

I would imagine something along the lines of separating the homogenously coloured, skinned part of the image into a separate grayscale file. At least one of the two files needs to have an alpha channel so they can be safely overlayed together. To compose the final image the grayscale part is colourized with a filter, then they're merged into a single image.

This should be very doable with Imager.

Makeshifts last the longest.

[reply]

Re: Skinning Images
by BUU (Prior) on Jan 02, 2004 at 01:13 UTC

Since I dislike image manipulation, especially programatically, I think my first instinct would be to look at just making all the colored parts transparent and then stack the image on top of a colored div. Obviously this would only be able to achieve solid one color replacements though, unless you actually got the png alpha working..

[reply]

Re: Skinning Images
by PodMaster (Abbot) on Jan 02, 2004 at 20:24 UTC

Graphics::ACT

About a month ago I ran into andy wardley's website and saw Image::BioChrome. While I was waiting for the author to upload it to CPAN(I asked where I could get it), I hacked up these two snippets based on what I did with Graphics::ACT:

convert image to greyscale (color to black and white)
EVER MADE FIRE TEXT?
Have you ever made fire text with Photoshop? What you do is you create some text, you blurr it (gaussian) then you stylize with wind, then distort with a ripple.
You grayscale the image, then change it to indexed color mode, and then you modify the color table to black body, and you've got burning text.
Have you ever wanted to make that text burn purple? Pink? Green?

Well I have, that's why I whipped this up (no reason to waste time with photoshop).
Sample input/output and the script I used are available at http://crazyinsomniac.perlmonk.org/perl/act/. Right now it's hardcoded for images with 256 colors (indexed color images).

MJD says "you can't just make shit up and expect the computer to know what you mean, retardo!"
I run a Win32 PPM repository for perl 5.6.x and 5.8.x -- I take requests (README).
** The third rule of perl club is a statement of fact: pod is sexy.

[reply]


Welcome to the Monastery
	PerlMonks

Skinning Images

EVER MADE FIRE TEXT?