Help making glowing text and beveled text

[duckx0r]

I'm trying to make dynamically generated image in PHP (Imagick) that has text with the following features:

• First of all there is a background image that cannot have any effects applied to it
• First text layer has a glowing background (like with gaussian blur) and this should blend into the background image without applying the effect to the background image
• Second layer of text right on top of it has a stroke and the text will be raised 1 px with a bevel

I basically have nothing. I have been working on this for a while now and even simple things are proving to be extremely difficult for me. Just trying to do a layer with the glow effect is producing some undesired results. This is my code:

Code: Select all

<?php
$im = new Imagick('left_menu_bg.jpg');

$glowlayer = new Imagick();
$glowlayer->newImage( $im->getImageWidth(), $im->getImageHeight(), "transparent", "png" );

$glow = new ImagickDraw();
$glow->setFont ('arialbd.ttf');
$glow->setFontSize( 24 );
$glow->setGravity (Imagick::GRAVITY_CENTER);
$glow->setFillColor ('transparent');
$glow->setStrokeColor ('#ffffbe');
$glow->setStrokeWidth (8);

$glowlayer->annotateImage($glow, 0, 0, 0, 'Testy :P');
$glowlayer->gaussianBlurImage ( 0 , 5, imagick::CHANNEL_OPACITY );

The glow works just how I would want it, but for some reason it creates weird gray pixels in the background that I cannot explain for the life of me. This is the generated image:


I have been able to successfully create the top layer with the stroke, however I am unable to bevel the text on that layer. When I try to do raiseImage() it does it to the whole image, but I only want it on the text itself.

Any help you can give me would be great.

[duckx0r]

Ok update, I was able to get the glow effect to work using shadow instead of blur. There are now just two things I would like to know how to do:

1) If it's possible to do a bevel on text (like raising it). When I try it doesn't do anything.
2) Is it possible to change the letter spacing? The current letter spacing for the font I am using is way too wide and I would like to make it smaller. I tried setFontStretch() and it has no effect.

Here is my current code:

Code: Select all

$text = "Rooms";
$fontsize = 20;

$im = new Imagick('left_menu_bg.jpg');

$glowlayer = new Imagick();
$glowlayer->newImage( $im->getImageWidth(), $im->getImageHeight(), "transparent", "png" );

$glow = new ImagickDraw();
$glow->setFont ('arialbd.ttf');
$glow->setFontSize( $fontsize );
$glow->setGravity (Imagick::GRAVITY_CENTER);
$glow->setFillColor ('transparent');
$glow->setStrokeColor ('#ffffbe');
$glow->setStrokeAntialias (1);
$glow->setStrokeWidth (8);


$glowlayer->annotateImage($glow, 0, 0, 0, $text);
$glowlayer->setImageBackgroundColor( new ImagickPixel( '#ffffbe' ) );
$glowlayer->shadowImage( 70, 4, 0, 0 );

$im->compositeImage( $glowlayer, Imagick::COMPOSITE_OVER, -8, -8 );

$draw = new ImagickDraw();
$draw->setFont ('arialbd.ttf');
$draw->setFillAlpha( 1 );
$draw->setFontSize( $fontsize );
$draw->setFillColor( "white" );
$draw->setGravity (Imagick::GRAVITY_CENTER);
$draw->setStrokeColor ('#113b02');
$draw->setStrokeWidth (1);

$im->annotateImage($draw, 0, 0, 0, $text);

Thanks again.

[anthony]

If you plan to use blur to generate a glow with transparency, you need to set -channel RGBA so that Im understands transparency will be involved. By default it ignores transparency, producing gray pixels from the hidden fully-transparent black.

See IM Examples, Blur
http://www.imagemagick.org/Usage/convolve/#blur_channel

The shadow operator is probbaly better for generating the glow, as it does the channel handling, coloring, and even give you a extra transparency control. It also ensures the layering offsets will remain correct, so if you position (-repage) your text in the right place, ten create the glow using shadow, the glow will also be positioned correctly.

See IM examples, Shadow
http://www.imagemagick.org/Usage/convolve/#shadow

[duckx0r]

Hey Anthony,

Thanks for the reply. I got the glow effect working very will using shadow now.

I wanted to know if it's possible to do a bevel on text and if it's possible to change the letter spacing for text

[fmw42]

see http://www.imagemagick.org/Usage/text/#kerning and http://www.imagemagick.org/Usage/fonts/#bevel

[anthony]

Also see
Masking Shaded shapes.
http://www.imagemagick.org/Usage/transform/#shade_mask

the main problem with using shade is that you get no control of the width of the bevel, and that the bevel actually goes BOTH into and out of the given 'shape'.

What I would like to to figure out how to generate something like


This has a lovely bevel, but only going inward, with a good handling the thin lines of overlaid text characters.
More than likely each character was generated separately and appended together, producing a fix-width font.

[duckx0r]

see http://www.imagemagick.org/Usage/text/#kerning and http://www.imagemagick.org/Usage/fonts/#bevel

Yes, these were definitely the examples I needed. Thanks so much! The bevel part was easy since I just used Imagick::shadeImage() however it took a LOT of looking around to try to get the kerning to work since it is only in the latest release candidate versions of Imagick and I had the stable version installed.