PDA

View Full Version : [release] Filburt's Fun Shadow System


filburt1
11-13-2002, 10:00 PM
Author: filburt1
Description: Given a plethora of parameters, generates a PNG image with shadowed text in it.
Demo: http://www.turtletips.com/testing/createshadowedtext.php?bgfile=catprebg.png&color=ffffff&shadowcolor=204E6B&fontname=trebbold.ttf&fontsize=13&&textoffsetpxx=7&textoffsetpxy=5&shadowoffsetpxx=0&shadowoffsetpxy=2&s=Some%20Category%20Name&skipshadow=0 (I told you, plethora of parameters ;))
Screenshot: http://www.vbulletintemplates.com/mods/attachment.php?s=&postid=15585 . This image was generated by the demo URL above.

You need PHP with the GD library for this to work. I think this is standard for Unix and OS X, but it isn't for Windows.

If you look at my forums (see sig) there's a universal virtual light coming from 90? (i.e., exact center-top of the screen). Therefore all text and images have shadows accordingly for consistancy.

You can make shadowed text via CSS/HTML, but it will look horrible. The first method, just making two layers, produces just too plain a look. The second, a Microsoft DirectX filter, only works in IE5.5+ and looks absolutely horrible in Windows XP with ClearType.

So, the attached script generates PNG images with shadowed, antialiased text. It's reasonably well commented too if you want to modify it.

Look at the sample URL for how to state parameters. The available parameters are:

// $bgfile as the background
// $color as the font color
// $shadowcolor as the color of the shadow in HTML hex color format (no leading #)
// $fontname as the TTF filename
// $fontsize as the font's size (note: shouldn't exceed 100px-y!)
// $s as the actual string to display
// $skipshadow (optional) as a flag to disable the shadow

English:

bgfile: a .png (must be .png, no .gif, .jpg, etc!) image to use as the background
color: a hex code for the font color without a leading # (000000 is black, FF0000 is red, FFFFFF is white, etc.)
shadowcolor: same as color but used for the shadow color instead
fontname: the filename of a .ttf (true type font) file to use. Your fonts are in C:\Windows\Fonts, just upload the one you want
fontsize: the size of the font to use (not sure if PHP's GD library uses points or pixels for this)
s: the text to actually write
skipshadow: skips rendering the shadow and just draws only the text


There are no template modifications with this release; rather it is a starting point for making all sorts of crazy modifications. Whenever you want to generate an image and display it in a template, just do:

<img src="createshadowedimage.php?parameters...">

Just remember that like any URL you have to escape strings; i.e., "Some Category" would have to be "Some%20Category" because spaces aren't allowed in URLs.

And finally, this is clearly not a release for the weak. Questions will be answered but I have to assume that you have at least some knowledge of what the hell I'm rambling about. :)

filburt1
11-14-2002, 12:15 AM
Forgot the four (!) most important ones:

// $textoffsetpxx is the x-offset of the main text in pixels
// $textoffsetpxy is the y-offset of the main text in pixels
// $shadowoffsetpxx is the x-offset of the shadow relative to the main text
// $shadowoffsetpxy is the y-offset of the shadow relative to the main text

English:

textoffsetpxx: the number of pixels from the left edge horizontally of the image to draw the text
textoffsetpxy: Same as textoffsetpxx, but pixels from the top edge vertically
shadowoffsetpxx: The number of pixels relative to textoffsetpxx horizontally to shift the shadow. For example, -3 would be three pixels to the left. 8 would be 8 to the right. 0 would be no shift.
shadowoffsetpxy: Same as shadowoffsetpxx but a vertical shift. Negative is up, positive is down.


Screenshot:

TDS
11-14-2002, 12:19 AM
cool
when I breath life back into my fourms I'll probaly use this

Bungie
11-14-2002, 01:11 AM
Neat, I will find this again when it's not so late.... ;)

Cypher720
11-14-2002, 01:47 AM
weird...im not gonna use it - but it is crazy!

Tony G
11-14-2002, 03:28 AM
Some nice work there filburt. :)

LiL pImPsTeR
11-14-2002, 05:50 PM
looks kinda complicated, i might try it out one of these days, good work man.

imported_Mathiau
11-20-2002, 04:11 PM
definetly looks sweet! gonna haev to try this one out!

imported_N!ck
11-22-2002, 11:57 AM
if i don't have GD, it will just come up blank, right?

i've been told i have GD, but that's what happens. :confused:

filburt1
11-22-2002, 12:02 PM
If you don't have GD then you'll get PHP errors; if you do and it comes up blank then you screwed up in the arguments or the .png you gave it.

imported_N!ck
11-22-2002, 11:04 PM
i uploaded createshadowedtext.php along with your png (catprebg.png) and a ttf and changed your link to my URL, and still nothing.

filburt1
11-22-2002, 11:17 PM
What's the link?

imported_N!ck
11-23-2002, 12:48 AM
<a href="http://www.chevystreettrucks.com/createshadowedtext.php?bgfile=catprebg.png&color=ffffff&shadowcolor=204E6B&fontname=serpentine.ttf&fontsize=13&&textoffsetpxx=7&textoffsetpxy=5&shadowoffsetpxx=0&shadowoffsetpxy=2&s=Some%20Category%20Name&skipshadow=0" target="_blank">http://www.chevystreettrucks.com/cre...e&skipshadow=0</a>

filburt1
11-23-2002, 01:00 AM
Something's wrong with your PHP configuration: http://www.chevystreettrucks.com/createshadowedtext.php?bgfile=somefilethatdoesntex ist&color=ffffff&shadowcolor=204E6B&fontname=serpentine.ttf&fontsize=13&&textoffsetpxx=7&textoffsetpxy=5&shadowoffsetpxx=0&shadowoffsetpxy=2&s=Some%20Category%20Name&skipshadow=0

That should generate an error, most likely "imagecreatefrompng failed." It's been a few weeks since I wrote the script but I remember putting in a crapload of error traps.

geniuscrew
01-14-2003, 04:18 AM
Looks great but I'm stuck on what to do.

Can you please give us a sample link? parameters doesn't show how it's meant to be layed out [for me anyway]

Thanks in advance.

filburt1
01-14-2003, 01:28 PM
There's already a demo link, just examine that.

geniuscrew
01-14-2003, 04:24 PM
Doh! Sorry I didn't see that -

Cheers!

Orfejs
01-30-2003, 03:51 PM
If I only had a GD library. I tried to make this hack myself 2 years ago - but failed. Now you did it even better. Will explore it later. Great.