Getting the Original Web Site Graphic

Posted by mdrisser on 2009/11/02 under Design | Be the First to Comment

I recently was tasked with moving an ASP.NET site to a Joomla template, on the surface this seemed like a fairly easy task, but as I began delving into the original source files I realized that it wasn’t going to be as simple as I first supposed. I found it would be far easier to just start over from scratch, trouble was I didn’t have access to the original graphic. So here’s the solution I came up with.

Aside from your graphics app you’ll also need Firefox with the Firebug extension to use this method. (Note: This may work with other browsers and their respective developer tools, but I haven’t tried it yet. If you have and it works, please let us know in the comments.)

In order to get the graphic so that I could slice it up for the Joomla template, I thought I could just take screenshots and stitch them together, the trouble is that due to the complexity of the image, and the gradients used I couldn’t easily remove the text from the screenshots, I needed a way to get the screenshots without the text. Setting a negative text indent is a great way to hide text, for animations, etc., and should be a part of a web-designer’s repitiore.

So using Firefox and Firebug I set negative text indents, text-indent: -999999px. This worked great on MOST of the text but there was still some that just didn’t want to cooperate. Now what? Well it turns out that Firefox supports setting text color to transparent using color: transparent. I used this on the stubborn text and it disappeared. Now it was a simple matter of screenshots and stiching them together. In less than 5 minutes I had the graphic I needed to create the new Joomla template.