[Return to EDIT 772 schedule][Photoshop basic]
1. Use layers for multiple images - If you have to make a slew of similar images, such as a group of buttons or a group of switching images for mouseovers, you'll get more consistent and manageable results if you make them all as separate layers of just one image, e.g.
- background - blank button
- layer 1 - home (on state)
- layer 2 - home (off state)
- layer 3 - products (on state)
- layer 4 - products (off state)
Turn layers on and off, and Save Copy as or Export to GIF to make the individual files. (from The Non-Designer's Design Book)
This looks like a great technique for generating mouseovers - for more info see my Javascript page on Rollovers
To do (maybe): Make some buttons for your site. Make 'em do rollovers. Or slice up the images and put them into a table, maybe for animation or just links.
Picture Dicer from Shoestring Software (thanks to Lisa Saavedra)
eval version of Photoshop plug-in SPG Web Tools (slices and optimizes)2. Make seamless background tiles - You're going to love this one...Photoshop's Offset filter makes it criminally easy to make your own seamless background tiles. The general idea is just to take an image and offset it (Filter menu, Other, Offset, set pixel values to 1/2 your actual image and select "Wrap Around") once, which splits it into nicely tiling quarters. Then just clean up the middle.
To do (recommended): Make a background tile
from Adobe's Tips site
3. Make animations - You won't like this one as much in Photoshop; it's a big weakling for animations (I think v5.5 with Image Ready will remedy this, with yet more $$). There's no animation utility in Photoshop; you'll have to make the animations in it and get an animation utility from elsewhere. GIFBuilder is probably the one you'll see mentioned most, but it's Mac-only. For the PC, you could try GIF Construction Set, but I'll recommend PaintShop Pro instead - it's has an easy to use animation program, as well as a thumbnail browser, and well, I think it's faster, more web-friendly image editor that's a whole bunch cheaper than Photoshop.
To do (recommended, as homework): Make an animation
More basic info? See my page on animations
Why animation (besides this sort of thing)?
Animations are a good way to display twice as much (or more) info in the same space. A logo I needed to make for a student project couldn't really expand enough to accomodate text, so I animated it and put text on a separate screen.
Animations are also a good way to direct users - think of the way "Start here" animates to the Start button on Windows 95. Minor example here.
This doesn't fit in either category, but I think it's an interesting use of animation
4. Create effects - All I have in mind here is just playing with the built-in filters. I have no favorites or recommendations
To do: Try out various filters on your images. Make note of the effects which seem most useful to you
