FOOD 1

I was goofing around with The Gimp and noticed it had a couple save as html options. I played around with them and settled on using the colorxhtml one.

This is how I took this image and turned it into a cool text html thingy.

Before:



After:



The process goes like this:

1. Open the image.
2. Make sure the image is in the correct mode.
   
   1. Menu: Image>Mode>RGB
   2. Menu: Image>Flatten Image
3. Get current size of image. (mine is 400x400)
4. Determine the size you want it to appear on the screen. (about 235x235)
5. Divide the height by 6 and the width by 13 (my 10px font is 6x13) to get the size you need to scale the image to. (39x18)
6. Scale the image to that size in The Gimp
   
   1. Menu: Image>Scale Image
   2. Click the Chain/Link button next to height/width. (this "breaks" the link, so you can squish the image.)
   3. Set the height/width.
   4. Select Cubic Interpolation.
   5. Click Scale
7. The image should look like it got pounded with a sledgehammer.
8. Save it as colorxhtml
   
   1. Menu: File>Save As
   2. Enter name and location as normal.
   3. Select COLORXHTML as the file type.
   4. Click Save
   5. Select textfile
   6. Click the ... and pick a file to read. (this is the text that the image is created with.)
   7. Font: 10
   8. Separate CSS file: Yes
   9. Click Ok
9. If you have vim you can reduce the file size some by opening the resulting html file and running the following search/replace several times until it doesn't find any more.
   
   1. %s/<span class="N\(......\)">\([^<]\+\)<\/span><span class="N\1">\([^<]\+\)<\/span>/<span class="N\1">\2\3<\/span>/g
   
   
10. You can also reduce the css file by deleting the background lines and adding a line above the span.xxxxxx section.
    
    1. %s/background-color:black; //
    2. pre span { background-color:black; }


11. You can combine the files by removing the link line in the html and replacing it with
    <style type="text/css">
    (contents of css file)
    </style>

Enjoy!