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

A few years ago, using color on the web was a real issue. Because of the differences in platform displays of colors, the measly 256 colors that monitors could display was reduced to a pitiful 216 colors that were available for “safe” web viewing. When people refer to “safe”, they mean there are only 216 colors that all major platforms, monitors and video cards will display. So people will see your web page the way you intended, albeit under a restricted color choice.

I don’t know about you, but 216 colors are just not enough for me to express myself fully. Especially when you consider that most of these colors are never used. Some of those muddy orange colors are just not in style these days and most of the very dark colors and very light colors are pretty much useless for day-to-day use.

In Photoshop, you can set the preferences of all of the color options to let you choose only web-safe colors. See below:

This looks like a lot of colors, but it is only 216 total. By turning off the Web only colors checkbox, do you run the risk of having people view your page is weird colors that their computer is generating to try and fake it? Yes. But the risk is growing smaller every day.

The current statistics say that the vast majority of people can view at least 65,000 colors on their monitors. In fact, it is thought that as many as 94% of people can view at least this many. 10% can view millions of colors on their monitors. I would venture to guess that 10% is a little bit low.

So what should you do? Well, I say ditch the 216 color web-safe palette and do what you want. There is not an option in Photoshop for displaying and selecting only the 65,000 colors that most people can see. But you are probably pretty safe when choosing most, if not all colors. Computers will fake the rest of the colors by dithering available colors together to make it look pretty close.

So the bottom line is to start creating for the new generation. Stop using that heinous 216 color palette and explore the greater good of at least 65,000 colors. This give you so many more options to choose from, that you are sure to enjoy yourself so much more.

Now I have to give myself a little disclaimer. I can’t be responsible if you do a job for a client in millions of colors when most of the users are on older computers. You will have to do a little research for each job you do (this should be standard anyway) to find out what sort of systems people are using. If the majority of your users will only have access to 256 colors, then use the 216 color web-safe palette. You should always think about your users when creating pages and choosing colors anyway. It will make you a much better designer.

So with that, I will bid you farewell. Remember, more options for color does not mean use all of them in a single page. Pace yourself. But you can create a much more engaging site with more color options, even I your color scheme is monochromatic.

Talk to you soon.

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

Start with a new document. Use the pixel size you want for the scrolling text box on your Web page. Make it RGB, fill it with white or your background color. Add a pattern or other background content. We’ll keep it simple.

Select the Type tool from the Toolbox. In the Options Bar, choose your font, size, color, and other options. Remember that sans serif fonts, such as Arial, look better in a Web browser than more complex fonts, such as Times.

Drag the tool to create a rectangular text container. Using a text box (“area type”) rather than simply clicking the Type tool (“point type”) creates a text column. When your typing hits the edge of the box, a new line will start automatically – there’s no need to hit the Return/Enter key at the end of each line. And if you re-size the bounding box, the type automatically re-flows to match the new dimensions.

Type your message. Make sure that it runs longer than the height of your image, just so you have something to scroll.
TIP: In the Character palette menu, select the option No Breaks to prevent hyphenation.

When you type more content than fits in the type container, there will be a little symbol at the bottom of the bounding box. You can keep typing – even if it doesn’t show in the bounding box, the type is still being added. If you want to see the type, you can reposition the box in the window and drag the bottom of the bounding box downward to expand it.

Don’t get too carried away. If you try to write a scrolling book, you’re going to have a very large GIF file. Once the message is complete, move to the beginning of your text and add a bunch of returns, pushing the top line downward to the bottom of the image window. (The text isn’t being replaced, just moved downward in the bounding box.)

Now it’s time to make the layers that will serve as the frames of the animation:
• Drag the type layer to the New Layer button at the bottom of the Layers Palette. This creates a duplicate. Click the eyeball icon to hide the original type layer.

• With the duplicate type layer active, position the Type tool just before the first word of your message and hit the Delete/Backspace key. That removes on of the extra Returns from above the type and moves the text up one line.

Repeat these steps, duplicating the most recent type layer, hiding the previous, moving the text up one line. After several repetitions, your Layers Palette should look something like this:

When your first test line reaches the top of the bounding box, continue making new layers, but delete an entire line of text from the top. Continue until you reach the end of the text. You can keep deleting lines from the top of the type container until your message “scrolls” right off the top of the image.

When you’ve got your layers copied and edited, jump to ImageReady. In ImageReady, you’ll be working with the Layers Palette and the Animation palette.

The process is this:

• Hide all the type layers, leaving just your background visible.

• Click the New Frame button in the Animation palette.

• Make the bottom type layer visible.

• Click the New Frame button.

• Hide the bottom type layer, make the next type layer visible.

• Click the New Frame button.

• Hide the current type layer, make the next higher type layer visible.

Continue until you have a frame for every type layer. Each frame should show only one type layer.

In the Animations palette menu, choose Optimize Animation and check the boxes for both Bounding Box and Redundant Pixel Removal.

From the Animation palette menu, choose Select All Frames. At the bottom of the Animation palette, click on the Timing pop-up menu and select something reasonable for your message frames. This is the delay between frames. Too short and no one can read the message as it flashes by; too long and the “scroll” becomes too jerky.

Test the speed by clicking the Play button. For narrow messages, just a word or a couple of words per line, consider using the Other option and 0.3 or 0.4 seconds per frame. Use the menu command File> Save Optimized As. Select a name and location and save the image.

TIPS:

• You can change the delay on an individual frame to make it hold on screen longer.

• Try duplicating a frame a couple of times and adding frames between with only the background showing. That makes the frame flash on and off.

First of all, you have to make sure that you know how many pixels a pixel font should be. Usually, the font designer will tell you this. Some fonts are 7 pixels, some are 5 some are 9 etc… You have to either have them be exactly this size, or a multiple of this number. For example, a 7 pixel font will look good at 14 pixels as well. It will be pixelated looking, but many people like this look. Take a look at the following image.

I have written a few lines of text using a couple of different pixel fonts. Some are sized exactly, and others are not. You can see how difficult they are to read when they are not the correct size. Sometimes you can experiment with different sizes to see how they look. But very rarely does a pixel font allow you to deviate from the recommended size.

Also pay attention to the lines that say they have antialiasing turned on. Antialiasing is a way to make your fonts look smooth by adding pixels to the edges of themin lighter and lighter shades until they fade out to nothing. Since pixel fonts require a specific map of pixels to make them perfect, you can’t do this. They will get very blurry and impossible to read. The only way to make them look perfect is to turn the antialiasing off.

Below is you upper options palette in Photoshop. There is a drop-down box that I have circled that dictates what antialising scheme you use. To turn it off, choose “none” in the options. You will have to select the Type tool in your tools palette to do this.

That’s pretty much it for this week. Pixel fonts are great, and you can pick up a lot of them for free. Just do a search on the internet or visit your favorite type foundry and you are sure to find some that you like. Many times designers will design the same style font in several styles and widths. You can find all capitals fonts, or both upper and lower case fonts in a number of great styles. Have fun!

If you have surfed around graphics-related websites for awhile, you have certainly come across those fancy little 88×31 pixel buttons. They are the standard for linking websites these days, as they are functional, stylish and save space over those huge banners of yesteryear. Granted, you can’t display entire ads on the buttons; their size is a bit restrictive in this regard. When done right they can be incredibly attractive, just begging a person to click and see the wonders beyond.

I receive several requests for a link button through the course of a week, but had procrastinated in generating one because, quite frankly, I couldn’t seem to achieve the resolution that so many of these buttons displayed. Animating the thing wasn’t a problem; Image Ready takes care of that rather nicely. The problem stems from creating text that a vie

wer can actually read. Even crisp fonts set to 6-8 points would turn out fuzzy or otherwise unimpressive when applied to the buttons.

So what is the answer? Well, for me it was choking down a bit of pride and actually asking another webmaster how they did it. The response I received was a real head-slapper… I should have known.

First, the fonts: The primary concern here is resolution, something the true type font style has a problem with when reduced to 6-8 points. This is resolved by downloading a few bitmap or pixel wide fonts; these were designed to give you great resolution in a small viewing area.

Here are a couple resources to download fonts of this caliber:
http://www.miniml.com/

http://www.geocities.com/Area51/Shadowlands/7677/

http://www.xs4all.nl/~remcodek/fontpage.html

http://techfonts.ellicit.org/

http://www.04.jp.org/extra/bitmap

Another trick used by the ‘Button Masters’ deals with single pixel offset beveling. Say you want to add a bit of texture or depth to your button… too much is going to distort the image beyond recognition. The size simply doesn’t allow for much in the manner of styles. When you decide to apply a bevel, reduce the bevel settings to a single pixel… this will still give the illusion of depth. The eye expects subtlety… you brain will recognize the size of the image and say’ hey, that’s small, so the effects should be small’.

The last tip deals with the Highlight and Shadow modes for the bevel. Instead of using the standard Screen/Multiply modes, use the Color Dodge/Color Burn modes respectively. This helps to further draw contrast out of small characters, creating legible text.

After all this, here’s the button I came up with for http://actionfx.com:

Crisp, stylish, and catchy… just what a button is supposed to do.

Until next week, Caio!