Nah, I just happened to be narrowing down a technique the other day for a specific issue, and thought I had something unique to contribute. Here, in a nutshell, is the task:

Can we have colored bullets without having to produce a little graphic?

Yes, we can, as Lea Verou answered when a user asked this question on Stack Overflow. You give the li element list-style: none, natch. And then you add a bullet with the CSS :before declaration.

The CSS looks like this:

(Note: You also need to set a negative text-indent—Lea suggests -.7em—and left padding. If you aren’t saving your stylesheets as UTF-8, you’ll also need to use the escaped unicode character for the bullet, like-a-dis: content: "\2022; ";)

li:before {
    content: "• ";
    color: red; /* or whatever color you prefer */
}

This gives us the following:

• Example

The Stack Overflow thread goes on to mention using a square (■) instead of a disc, which is exactly what I needed for a client’s site. But I quickly noticed that the font-size of the square in different browsers and platforms was radically different:

The square bullets were looking different across browsers. For this client, that would not do.

Huh. The main issue was Windows vs. Mac. If we are going to avoid adding little square bullet images (the old way) this has to be more reliable & consistent than this.

One eyebrow furrow later, (okay maybe more than that) I thought—different font? So what would be cross-platform? Using a handy CSS font-family list developed by (ref?), I maniacally set up square bullets in different font-sizes for comparison (See example) and found that across browsers, the following font-stack was the most consistent:

font-family: AppleGothic, "Lucida Sans", Impact, Verdana, sans-serif;

It was also consistently too small. The best bullet look utilized this CSS:

ul { padding: 0 30px; }

li { list-style: none; }

li:before {
    font-family: AppleGothic, "Lucida Sans", Impact, Verdana, sans-serif;
    content: '■';
    color: red;
    float: left;
    width: 1em;
    margin: .5em -1.2em;
    font-size: 60%;
}

And there we have it:

• Square bullets, colored differently from the text, without images.

You can extract images, as is, directly from a PDF file, in Photoshop. I knew it had the ability to open a PDF and turn into a rasterized image, and that has been helpful from time to time.

But, try this:

1. In Photoshop, Go to File->Open, and select a PDF with images in it.
2. You should get an "Import PDF" dialog box, with options for how to crop the page, resolution, and so on.
3. In the upper left, you should see radio buttons to select pages or ... HMMMMMM ... images. Choose images instead of pages, and suddenly your cropping and sizing options are grayed out. But you will see a list of all the images embedded in the PDF:
   

Isn’t that hunky-dory?

Pick an image from the list, and press 'OK'. You will open up the actual image embedded in the PDF. This is why the options are all grayed-out—you aren’t changing anything about the image.

Now you can work your evil ways on that l’il image. Oh no, don’t thank me.

If you just want to see the completed poster, you can find it here. Otherwise, read on.

Drew Emmitt is a Colorado native, part of Leftover Salmon, and someone whose music you’d think I would know better. A local favorite tune he wrote with Leftover Salmon is "Gold Hill Line," for crying out loud. But I didn’t really know his stuff. So first I picked up his new album, Long Road, and started listening. (it is really good, by the way)

The distinctive shape of Drew’s mandolin became my inspiration for a poster. Somehow I wanted to take that shape and, I don’t know, carve it in stone, paint it, something. I searched for pictures, found one to trace, and that was the beginning.

And then I started looking at the paint peeling off the fence outside my window. And I had my idea. I drew a grid on some large sheets of paper, and taped them up to the fence:

Then I searched for a photo that gave me a clear shot of Drew’s mandolin, and traced it in Illustrator.

The perspective needed tweaking, so I experimented with the shape on its own to find the right feel:

I exaggerated the lighting levels of the fence picture so I could find the grid lines, plotted the points in Illustrator, and overlaid the distorted grid with the mandolin shape:

The grid allowed me to distort the vector art until I had an image which looks funny straight on, but, when shot from the correct spot (gaff tape on the concrete marking the points of the tripod, tripod locked in lowest setting—the marks stayed there for weeks). I printed this and then used it as a guide to draw onto the paper on the fence.

Then I really got to work. With a utility knife, I carved the distorted mandolin shape out of the fence, and then stripped the paint back, leaving the peeling paint in the shape of the mandolin.

Finally, I had an image with the composition I wanted. The diagonal line of the fence and the mandolin shape gave me dynamic areas for type, and the whole image had a nice, laid back late summer afternoon feel. Just right for the Faire.

It was time to work on the type. I had considered carving letters, but that seemed plain crazy. The simple mandolin shape had already eaten up most of a day in carving alone. So I found other ways to go crazy. So I drew some letters on paper, and then traced them in pen to clean them up:

I thought they looked so-so, but a little cheesy. Not really that tight yet. So I traced them in Illustrator, straightening and cleaning things as I went, adding flourishes, and skewing the type upwards a bit to fit better into the poster:

After dropping the type into the poster, I thought the type had gotten too sterile, so I printed out the type, and then—madness beginning to really show here—re-traced the inner and outer lines of the letters with a graph pencil.

I then scanned that back in, and did clean up work in Photoshop. I had to find the solids:

The lines needed some clean-up, but they had the roughness I wanted:

Finally I took the type back into Illustrator, used the Live Trace feature to trace the art, and I had my tight, clean, dirty, rough letters. Smmmokin!

The poster was looking pretty good, but lacked a little oomph. The lighting didn’t quite feel right. And the mandolin didn’t really stand out as much as I had expected. I ended up scraping off more paint to make the shape more prominent, and then I had another idea.

I had occasionally been using my iPod Nano as a flashlight, flicking a button to see my way down the steps. What about using that with a long exposure on the camera? This might look really cool.

I also have a solar hanging lantern with 6 yellow LEDs I got from my sister a few years back, and I brought it into the mix in different ways:

All the setup. Might as well take more, experiment:

AAANNNNNDDDD some more. Oh - looks like the moon’s coming up. I think we’re done.

Now remember, all of these shots were taken from exactly the same spot, and I never changed the zoom. So I was able to stack them up in Photoshop, set each layer’s transparency to lighten, and experiment until I had the right blend of images. Dang, looks like fire’s coming out of that there mandolin!

I put it all together and proudly showed it to Mark Zaremba, who had commissioned the poster, and who had final say. His first take: "This is wicked, but, um, Drew Emmitt doesn’t play heavy metal!"

REALLY?!? I thought I was done. But, he was right. So I tried a few more things:

"It’s still ... just ... creepy," Mark told me, after some experimenting. "The trees are just not friendly. You’ve got to put in a nice sky."

So, finally, I had to do what I really did not want to do: cut out the fence in Photoshop.

That, a decent starry sky image from somewhere, and a LITTLE MORE WORK, got me to a more friendly glowing mandolin image.

And finally, we were there.

Phew.

At this point, I'm using the Raw HTML plugin, so I can write in HTML. I don't really want to write in HTML, but it took me 20 minutes to get that last post working correctly. I've been working on design stuff, not the mechanics of simple writing, apparently to my detriment.

This is almost as bad as, ahem, Microsoft WORD. I'm just saying.

It has rough edges, but it was time to get this site out into the open and let it breathe.

I started exploring how to re-do the old site in May, 2007. Wait, as I check file creation dates, it looks like I first created some sort of comp in October 2006! Ideas were kicking around, but I wasn't making any headway. And when my 20-Year High School Reunion was popping up in August '08, I just didn't want to show my old site, so I whipped out a very basic "interim" site showing a few portfolio pieces, which I figured would be there for a couple of months, and I'd get my shit together.

‘Life is what happens to you when you're busy making other plans.’

—John Lennon

Well, it took a little longer than that.

And at the end, am I happy? Well, SORTA. No, not really. I want to re-work already. At least I hope that the framework will allow changes on the fly a lot more, you know, like a website.

Anyways, there we have it.

More to come soon, I hope :)