Thursday, September 28, 2006

Have you ever wondered what the xacto knife is in photoshop? It's the slice tool, and I just learned how to use. Yes, I used to do rounded corners by manually chopping up an image. In imageready, you can use the slice tool to do it for you.

First I made this simple box with rounded corners (photoshop/imageready file). Then I sliced it up in imageready into three pieces and "Saved Optimized" to generate an html file with gifs. The I cropped the center image to be very thin (save bandwidth) and changed the html to make it the background of the middle cell instead of an image in the cell. This way the image can be scaled for non-fixed width, so-called "liquid" layouts.

The results are below. You can see the image in context at ditchwork.com which is currently a work in progress. You can of course extrapolate this to make a 2-way scalable box, liquid in both dimensions. CSS is cool, but stuff like this is still much easier to do with tables and with monstercommerce, it's the only option. Maybe a future version of imageready will generate styled output instead of tables.