Can you help me generate an alpha channel gradient image?

/ TimBunce

Here’s an extract from a treemap generated by the perl Devel::NYTProf profiler:

ZZ60011314.png

Notice the shading on the boxes? That’s done by setting the background color of the box to green, and also setting the background image to one that’s mostly transparent. The image doesn’t contain any color. It’s just an ‘alpha channel gradient’ — in this case a radial gradient that’s nearly fully transparent at the center and less transparent at the edges. It overlays the color and creates a visually pleasant effect. (I didn’t come up with this idea, I saw it used in one of the JIT examples.)

Here’s an example of a transparent alpha channel gradient image (of course, this may not show up well as it’s mostly transparent :-)

gradient40.png

The transparent image gets stretched to fit the box, as you can see above. That works fairly well but ideally I’d like to get a more ‘cushioned’ effect with a ‘highlight’, like the illumination was coming from the top-left direction.

Something more like the boxes in this treemap from schoschie:
82244D56-FA2C-4044-AE46-EE53B63861BE.jpg
(Though if you look at that image carefully you’ll see that the location of the highlight isn’t consistent. I’m not sure what logic was used for that, or why.)

So anyway, I want to create a new alpha channel gradient image, but one where the gradient isn’t simply radial.

I’ve struggled with this in tools like Acorn and Seashore but failed. Mostly, I imagine, because I’m very unfamiliar with the tools, and especially working with the alpha-channel in non-trivial ways. There seem to be very few resources that cover more than simple examples.

Here’s an image that contains a monochrome mask that gives a rough idea of what I’m looking for as an alpha channel image. Here darker represents less transparent:

square gradient mask.png

As you can see, I want the bulk of the central space to be nearly fully-transparent, with a fully-transparent highlight near a top corner. The lower-level of transparency should be limited to a fairly sharp gradient near the edges of the square image. That should work well when stretched to fit the variously sized rectangles in the treemap.

So, can you walk me though generating a non-trivial transparent alpha channel gradient image in a tool like Acorn or Seashore? Or perhaps the simplest approach would be a command-line utility to convert a monochrome gradient like the one above into a pure alpha channel gradient. If there is such a thing, can you talk me though using that?

Of course none of this is essential to NYTProf, and I won’t hold up the next release for this. This is pure gloss — but sometimes gloss is important.

4 thoughts on “Can you help me generate an alpha channel gradient image?”

  1. Here’s how to do it using Image::Imlib2:

    #!perl
    use strict;
    use warnings;
    use Image::Imlib2;

    my $source = Image::Imlib2->load(‘square-gradient-mask.png’);
    my $destination = Image::Imlib2->new( $source->width, $source->height );

    foreach my $x ( 0 .. $source->width ) {
    foreach my $y ( 0 .. $source->height ) {
    my ( $r, $g, $b, $a ) = $source->query_pixel( $x, $y );
    my $average = int( ( $r + $g + $b ) / 3 );
    $destination->set_colour( 255, 255, 255, $average );
    $destination->draw_point( $x, $y );
    }
    }

    $destination->save(‘square-alpha.png’);

  3. I’m confused, and perhaps only because I’m misunderstanding the question. I assume you want to pre-generate the gradient, so that’s easily accomplished with The Gimp. Here’s how I did one:

    * File->New (select desired size and Advanced->Fill->Transparent)
    * Select foreground color desired (black is the default)
    * Select blend tool (“L”)
    * Now, in the options at the bottom of the tool window:
    * Click on “Gradient” widget to get popup
    * Select “FG to transparent”
    * Clock the arrow next to Gradient to reverse direction
    * Select “Radial” under “Shape”.
    * Now, in the image window:
    * Click and hold mouse where you want the alpha overlay to be centered (transparent)
    * Drag to farthest (from where you clicked) corner, and just a little past it.
    * Release to draw.

    Done.

    • Oh right, and you can modify the opacity of the blend tool to modify the max alpha value at the edges, though this is also accomplished by dragging further past the edge of the image, so that max opacity would be somewhere off-image.

Comments are closed.