: WebDev : GUI : Design&Cultures1 : Consumer Studs : Portfolio Pres : Prev
web dev main

web dev class

image ready

ImageReady is an Adobe product related to Photoshop which can deal with animation and other web-design related whizzery.

This course pretty much assumes you're already completely confident with Photoshop - which for the few people who don't have a computer at home, that might not be the case! perhaps the resources on my Cert IV page might help if you need a bit of brushing up with Photoshop, typography or other basics.

My guess is that you probably want to do Roll-overs to make your site more interactive. You can do this very simply in Dreamweaver and any graphics package - you make both states of the graphic (the "off" version and the "on" version) in Photoshop/PaintShop Pro, then using Dreamweaver you insert a rollover image, specifying the "off" and "on" versions and where the user goes when they click it. Easy peasy!

Or you can use ImageReady, which does both the graphic manipulation for your two states and the scripting to make the Roll-over work. Here's a good tutorial that shows you how to do it step-by-step (sorry about all the ads):


Some other ImageReady tutorials that might be of help:


meow & ciao,

kat =^..^=


Making basic transparent tile gifs in ImageReady (adapted from my PC PaintShopPro version)

1. Start a new file based on the longest title. Make the width to fit your layout and choose a transparent background layer.

2. Using the Text Tool with your choice of font, sharpness and text colour, add your longest title then adjust the size to fit. Then use the Move Tool to position it appropriately (I'm lining these ones up with the first checkerboard square on the left).

3. To maintain it's transparency save it as a gif, (File>Save Optimized>gif).

4. If you want to make a second state (to use as a rollover) do it while you still have your layered file open, so that matches position, font size etc perfectly. Eg, you can change the colour of the text (using the colour palette in the text toolbar) and add a drop shadow (click on the little f icon at the bottom of the layers palette to get the Drop Shadow options).

5. I save my second-states as the same file name with a 2 after it. eg resources.gif and resources2.gif.

6. Go through and make all of your titles in the same sitting, or you'll never get them to match exactly. If ever I have to restructure a site such that the titles change, it's usually easier to remake all your gifs rather than trying to match the original set with a new title.

Kat's Web Rescue Site

retrokat.com quite nice sites

all graphics, text and design: copyright retrokat.com 2001-4

Note: If you personally hold copyright to any images or other content herein and wish it to be removed or credited, please email me on kat@retrokat.com and I'm more than happy to do so.