Wednesday, March 18, 2009

'Dynamic' Image Headers

Sure, sifr is probably the way to go. Unless it's not. Or the client says no.

Prerequisite: A text file listing all the headers to be made.

So, first off, I tried ImageMagick. It worked like a charm for OPAQUE gifs. Then stirred in some fancy masking stuff to clear out all white pixels. Now I had very nice 22pt headers. But the small headers looked miserable. 13pt looked just fine, but 12pt looked terrible. And it had to be 12pt. I tried smoothing commands to no avail.

So I decided to create one tall image with all the headers by just pasting the text file into fireworks and saving as png8 with transparency. That way, they *look* perfect. And I wrote a processing script, or "sketch" to create all the headers from the master headerlist-image.

Processing Code Snippet


String[] headlineStrings = {
"HOME",
"ABOUT US",
"ETCETERA",
"THESE ARE NOT THE HEADERS I WAS GIVEN",
"THE LIST WAS 168 HEADERS"
};

int LARGE = 1;
int SMALL = 2;
int usingSize = LARGE;
String mySize = usingSize == LARGE ? "large" : "small";
String prefix = usingSize == LARGE ? "lrg" : "sm";
int myWidth = usingSize == LARGE ? 391 : 213;
int myHeight = usingSize == LARGE ? 16 : 9;
int myOffsetHeight = usingSize == LARGE ? 22 : 12;

PGraphics pg = createGraphics(myWidth, myHeight, JAVA2D);
PImage a = loadImage("c:\\documents and settings\\dennish\\desktop\\columbia headers\\headers-" + mySize + ".png");
//PFont font = loadFont("DispatchCond-Bold-48.vlw");
//PFont font = createFont("DispatchCond-Bold", 12, true);

//String[] fontList = PFont.list();
//println(fontList);

//size(440, 900);
//fill(0);
smooth();

for(int i = 0; i < headlineStrings.length; i++){
    //textFont(font, 12);
    //text(headlineStrings[i], 0, i*12);
    pg.beginDraw();
    pg.background(0,0);
    pg.image(a, 0, 0 - (i * myOffsetHeight)); //12px because the font-size is 12px, and therefore each line of text will occupy 12px vertically.
    pg.endDraw();
    pg.save("c:\\dev\\headlines\\20090317\\hdr-" + prefix + "-" + headlineStrings[i] + ".png");
    pg.dispose();
}

One last problem: these have to be GIFs, and the only way the technique would work so far is by making them PNGs.

So .. back into fireworks for a batch export. Final gotchya: have to click "edit" next to the filetype export selection dropdown, and make sure the GIF has (alpha) transparency enabled.

Wednesday, March 11, 2009

LinkMania

I plan to post more links here over time. Linkrot commence!

Have I just become a tool?

Can you detect font availability?

Speaking of Fonts...

jquery-fontavailable

cufón - fonts for the people

cufón is a newish sifr [clone].

Just posting here for my ~ahem~, our future reference.

http://cufon.shoqolate.com/

JAWR = awesome, but please make it work with sitemesh

Any astute reader out there.. use JAWR on your J2EE projects. It's fabulous. It just doesn't seem to play well with sitemesh (and I put the blame on sitemesh).

JAWR allows for properties-file-driven bundling + auto-minification (via YUI-Compressor [or your favorite, maybe]) of CSS and JS. It also supports a debug mode, which you can switch on with one variable change.

Know of a great .NET, PHP, or Python equivalent of JAWR? Please comment!

H1 > IMG or CSS-Replacement?

It always depends on the circumstances, but I'm generally leaning slightly in favor of using img tags in headers instead of the fuss of css image replacement.

And please don't bring up sifr (siffer) - I like, you like it, or maybe neither of us do... but sometimes it just isn't a good fit.

  • + Css image replacement: a touch more accessible
  • + IMG tag in the header: faster to code, easier to maintain, unless you've already built/bolted on an automated solution for both the images and the css.

SEO values for either are open to wild speculation, but the general opinion is a tad in favor of the img tag setup. Add to it the dev. time (time=$, no not javascript library, money) you save, and that explains my leaning. Note - leaning - not zealotry or dogmatism, just leaning.