This task is boring because it involves absolutely zero creativity and difficult because it requires careful attention to avoid frustrating mistakes.

Luckily many jobs that are boring can be automated and this one is no exception. The challenging-to-pronounce but simple-to-use PSD2FLA plug-in allows you to save your Photoshop layers into a native Flash FLA file in a single step, preserving the layers' transparency, layer positions, and layer names.

Here's how to pronounce it: : either "Pee Ehs Dee To Eff Ell Ay" or my personal preference, "Pee Ehs Dee To Flash". Read on to learn how to use it.

STEP 1
First I'll create a good candidate Photoshop document. I happen to be working on a Flash piece for a pension benefit guarantee trust corporation. They need a clear representation of various financial actuarial risk/benefit scenarios, liquidity requirements, and repurchase obligations. Predictably I thought of surreally colored rubber ducks flying around a giant sunflower. As you can see from the layers palette, each duck is on its own layer so it can be animated. The sunflower and background are also on their own layers.

STEP 2
Now to open PSD2FLA. If you have made changes since the last document save you must save again before opening PSD2FLA. It's located, logically enough, in Photoshop's "Export" menu under the "File" menu.

STEP 3
The job of PSD2FLA is pretty straightforward, so not many options are needed.

Turning off the "Export Hidden Layers" option allows you to export only those layers which have their visibility on. This can be very useful because you often have work layers that you want to keep around in the document but which shouldn't be moved to Flash. Just hide them before invoking PSD2FLA.

The "Open In Flash After Export" option will cause PSD2FLA to automatically open the resulting FLA file in Flash after creating it.

STEP 4
When you click the "Okay" button PSD2FLA creates a new FLA file on your desktop based on your Photoshop document. Its name will be the name of your Photoshop document with the "fla" extension added to the end. If you have the option set then the file will automatically open in Flash even if Flash isn't currently running.

Notice that the layer names have been preserved in the Flash score. Notice that the layer positions match those in Photoshop and that the movie size matches the Photoshop document size.

The careful reader will be wondering where the blue background layer went. The skeptical reader will declare there to be a bug! But the skeptical reader would be wrong. To save layers and file size, PSD2FLA checks to see if the bottom layer of your document is all one color. If it is then PSD2FLA sets the background color of the movie to this color rather than importing the layer. Neat, hunh?

Well, that's it. I'm sorry there aren't more steps. If it's steps you want, you should check out the "Getting Photoshop Layers To Flash Without PSD2FLA" tutorial. Thanks for listening, and if you have any questions about PSD2FLA the unusually responsive and not at all commitment-phobic media lab tech support team will be more than happy to answer them - as long as they don't involve an ongoing investigation.

Lets demonstrate this by creating a metal panel with some rivets on it.

Start with a new document. 300 x 300 pixels.

Apply a linear gradient using the default copper setting.

Create a new layer and name it "rivet"

Choose the elliptical marquee tool.

Change the gradient to radial

Draw a small rounded selection and fill with the gradient.

Add a bevel layer style

Use the settings here. Make it a "pillow emboss" to give the appearance of the rivet being recessed.

Here is the finished rivet

Duplicate the layer 3 times and roughly space them out. Don't worry about precision at this point.

Link all the rivet layers in the layers palette. The align feature will only work on linked layers and wont effect the layers that are not linked.

Click the "distribute Vertically" button from the top toolbar.
Notice the rivets are now evenly spaced.

Click on the align left button and notice that they are now perfectly aligned.

The evenly spaced riverts.

Here I merged the rivets, duplicated the layer and dragged it to the right hand side. I then used curves and the hue/saturation controls to get a nice bluish gray metal feel.

Have fun with the alignment tools and plaster all your images with rivets.

See you at the café www.photoshopcafe.com

Documentation is superb, with a full color manual and an updated quicktime tutorial on the enclosed CD. In about 15 minutes I was ready to try out the software.

Installation was a snap on OSX as the product is fully carbonized for OSX. To date, Corel Corp. have more products for OSX than any other company. (It also works on 8.6 and up and Windows 98, 2000 and XP.) Knockout 2 is the 3rd Program to be released from Procreate. Procreate is a new branch from Corel which handles the professional graphics side of things. The previous 2 releases are Painter 7 and KPT effects.

The first improvement to strike me immediately is that Knockout is now a plug-in instead of a stand alone product. This saves a lot of time and hassle with alpha channels. Another great improvement is the memory hungry beast has been put on a diet. The folks at Procreate have reduced its memory demands, and anyone who has used 1.5 on the Mac can now allocate that RAM somewhere else. It also now supports CMYK images.

Using Knockout 2 is more streamlined than before with the addition of Photoshop Shortcuts, no more having to learn a whole new arsenal of keyboard tricks. It did a splendid job of quickly lifting this image.

KO is fairly easy to use and had 4 different levels of masking. I was surprised to find that version 2 doesn't just have a lot of usability enhancements but also does an even better job than 1.5 of detecting the edges of an image. If you don't get the image quite right there are tools that enable you to fine tune the selections.

There is also the welcome addition of the "touchup tools" yes, we now have a paintbrush and eraser tool for quick fixes, this is one of my favorites. You can view your work as an alpha channel or choose different colors to display against your masked image, you can even choose another image as the background. If you totally mess it up you can revert the file and there are now 99 levels of undo.

If you look at the close up here, you can see how clean the masking is around the hair. I was very impressed with the results. With a little practice and time you could remove almost anything.

My conclusion is that Knockout 2 is well built and the new features certainly make it worth the upgrade. It is a strong program that does what it is designed to do very well. If you are a professional designer who regularly extracts images from their backgrounds it is a must buy. The only draw-back is a pretty steep recommended price of $329 and the upgrade for US$149.

In my review of Knockout 1.5 I said "with a stronger undo feature, 1.5 would receive a solid 5 out of 5." Version 2 definatly deserves that rating.

Until next week, see you at the café www.photoshopcafe.com

Create a new document. The first thing you will notice I a new feature in IR 7. Preset doc sizes. Choose Web Banner and click ok.

Add some text.

Now, to animate it. Using the move tool, drag the text all the way to the right and off of the page. Hold down the shift key to constrain the baseline.

In the animation palette, Click duplicate frame.

With frame 2 selected, drag the text into its ending position, the center of the document.

You will now see the 2 frames.

We now need to generate the in between frames showing different stages of the animation.

The good news is that Image Ready can create the in between frames automatically, there are called tween frames. Open the drop down in the animation palette by clicking on the little arrow at the top right and choose tween.

Choose Previous and add 5 frames.

See how IR has created all the frames for us.

Press the play button to preview the animation.

The only problem is that we would like it to pause at the end of the animation for a little while so the viewer can read the message.

Click on thelast frame where it says "0 sec" and change it to 5 seconds.

Press the preview in browser button.

Now view your animation in the web browser with all the vital statistics of your animation.

Lastly Adjust your optimization until you are happy (subject for another tutorial)

Choose save optimized to save your animation and publish to the web.

That's all for this week. For those of you heading to Mac World NY this week, have a good time and don't spend too much money! See you at the cafe www.photoshopcafe.com

Resizing
When resampling blocks of text, there is an option that you may not have noticed, that will help you achieve sharper results. This is particularly useful when you have scanned in blocks of text or line art.

When we go to resize the image, Bicubic resampling is the default option. This works best for most images.

Here is the result on our text.

Try it again, this time choose bilinear resampling

Notice how much sharper the text is?

The second trick is for small text and is tracking, or kerning. This means the spacing between letters. Here is a line of text with standard tracking.

In the tracking box, increase the amount to 20

See how much more legible the text is. Look at a road sign and you will notice that the tracking is set very wide. That is why you can read them from a distance.

Here is a line of text with the crisp anti-alising, kind of blurry.

Photoshop 7 ships with a new level called Sharp, notice the difference?

I hope these little tips will help you to produce webpages with sharper, easier to read text.

Happy 4th of July all.

Until next week, see you at the cafe www.photoshopcafe.com

Begin with your sliced image.
Edit>save for web

The save for web window will open.

Choose the slice select tool and click on a slice. On the right you can adjust the image quality and select a format. I used jpeg.

Double click a slice with the select tool still active and you will see the slice options dialog box pop up.

You can enter a url to link the slice to and even a target if you want to open a frame.

Enter text into the alt box, this will show when the image is being loaded.

Choose a clice that you would like to replace with text.

Choose the "no image" option and this slice will now become a blank cell.

Click on text is html and type into the window. This will be added as HTML text in the cell on your webpage just as if you had created it in Dreamweaver or Golive.

You can also change the alignment of the text by centering it in the Cell alignment boxes.

Under background click the box and choose custom.

The color picked will pop up and you can select a color. You can check the "Only Web Color" box to restrict the picker to the 216 web safe colors if you want. Click ok to apply.

Press the preview in browser button at the bottom of the window.

And here's your image in the web browser complete with the text.

Well that wraps it up for this week. I hope you learned some new thongs that will help make you web life a bit easier. See you at the café www.photoshopcafe.com

We are beginning with the same document we used last week.
Select the first button.

Open the rollover pallette and you will see the rollover that we created last week.

Open the animation pallette.

On the Rollover pallette, select the Over state. Now all the changes will only be applied when the mouse rolls over the object.

Create a new layer. This layer will accommodate the object to be animated.

Draw a shape into our image area.

Click the new frame button.

Drag the object to a different position.

The object will now move when we rollover. However the animation would not be very smooth with only 2 frames. Rather than create all the frames, Imageready can do it for us with a feature called "tweening"

Click the little arrow on the top right of the animations pallette and choose "tween" (Tween is an old animation term short for "In-between")

Choose Previous frame and 5 for the frames to add.
Click ok.

Imageready ha now created 5 in between frames for us, allowing for a smooth animation.

You will notice a little icon next to the rollover state. This means there is an animation attached.

Lets see it in the Rollover palette….

Click on the top right of the rollover palette and when you see the drop down menu, select Palette options.

In the top of the options window you will see a box "Include animation frames" Check this box and click OK.

Expand the view in the Rollover palette by clicking the collapse arrow next to the "over" state. You can now view all the frames of the animation.

Click the preview in browser button.

Roll your mouse over the button and watch the animation and imagine the possibilities!

If you wanted the animation to run once and then stop choose "once" in the bottom left of the animation palette.

With this kind of technology at your fingertips, imagine what you can do to your webpage? I think we are going to see an influx of animated rollovers on the web when Photoshop and Imageready 7 are released. Until next week... see you at the café www.photoshopcafe.com

Here is a menu bar I made for an example.

Choose the slice tool

Click and drag to define a slice area.

Continue until you have defined a slice for each button.

When you are finished, select the first button. This is the one we will work with for the rest of this tutorial.

In the rollover pallette you can see that all the slices are automatically assigned rollover numbers. These do not actually become rollovers until a new state is added, but they are all ready to go and you can see them all at a single glance.

Click the new state button in the bottom of the palette.

The over state is appliedabd you will see it nested in the palette.

To change the rollover, apply a color overlay layer effect to the button text.

Choose red. The text will now change to red when the mouse rolls over the slice.

Click the add state again, and we have the default down state. This will change the image when the mouse is clicked.

With the color overlay palette still open (I wish they would introduce these palettes to Photoshop) Choose blue as the color.

You will see the blue color in the rollover palette thumbnail.

Here is the document with the blue text.

What if we don't want the color to change until we release the mouse button?

Easy, just click on the arrow at the top right of the rollover palette and the drop down menu will appear. Choose Rollover State Options...

A pop up appears. Select "Click" You will notice all kinds of option including custom where you can do a little javascript.

The Name on the thumbnail will now be changed to "Click State"

You can test your rollovers in the web browser to check they work correctly.

That's all we have time for this week. I hope you enjoyed our little venture into the rollover palette. Next week we will look at animations in the new rollover palette and a couple of the new options. Until then, see you at the café www.photoshopcafe.com

Open Imageready. Choose the rounded corner rectangle shape tool.

Create a new layer and draw a simple pill shape. This will be our button, the color is not important.

In the styles palette, you will notice that There is an arrow on the top left of some of the styles. This indicates that they are styles that have rollover states included in them. Choose one and click on it to apply the style to your shape.

(Click on the top arrow and choose "rollover buttons" to load more style sets into the pallette.)

You will notice that the style is attached to the button. Not only that but a slice has also been automatically created .

Look into the new rollover palette and you will notice an over and down state. This will cause the button to change when your mouse moves over it and change again when you click on it. All this in one click, That's pretty slick!

The biggest change you will see in the palette is that it's now vertical and not a horizontal palette any more. Before you panic, realize that this palette packs a lot more power than the old one. You can now view all the rollovers for an entire document at once. Not just that but it can also display all the animations too. In future columns we will explore these powerful options.

Lets preview our rollover.
Click the rollover preview button on the tool palette.

Move your mouse over the button and notice it changes color.

The palette will also reflect the change by highlighting the "Over State"

Click on the button and notice it now appears depressed.

You will also see the Down state highlighted.

This completes our first look at the new rollover palette. See you next week where we dive in a little deeper and explore some more of this new power. Until then see you at the café www.photoshopcafe.com