Teach Yourself Photoshop 4 in 14 Days -- Ch 14 -- Photoshop for the Web






Teach Yourself Photoshop 4 in 14 Days







- 14 -
Photoshop for the Web

To quote Stewart Brand, with the emergence of the Internet, "The odious have
their podium." Well, that might be a little extreme...but kind of funny. He
is, however, correct. The odious, as well as anyone else (odious or not) who can
write a little bit of HTML (HyperText Markup Language), can publish documents on
the World Wide Web.
You've heard about the web, you have probably "surfed" it with your
favorite browser, such as Internet Explorer or Netscape Navigator, but let's
take a moment to review what is really going on out there in cyberspace. I won't
delve into the history of the Net, but I think that knowing what is actually transpiring
out there when you click that hyperlink is important enough to merit a few paragraphs.
First of all, although the web is what you might call a virtual space, meaning
that it creates the illusion of space and distance, it also exists in a physical
space. It is comprised of computers called servers that serve files across
networks that stretch around the world. The computers can be anything from supercharged
sparc stations with 200 MB of RAM or a machine not unlike the one sitting on your
desktop. These machines run software that can talk with your machine via what
are known as protocols.
Thus, when you type a URL (Uniform Resource Locator) into your browser to get
access to a web site, a message, made up of electronic pieces of information called
packets, goes out to these remote machines. These machines then serve up the files
for which you have asked.
The files that make up all of the sounds, pictures, and text of the web then have
to travel across phone lines. This creates a problem. A problem that you have to
keep in mind as you work with Photoshop to create graphics for your web site. Phone
lines are slow. There is only so much information that can travel at a time. If you
are lucky enough to have a T1 connection, you are doing okay--speedwise. A 28.8 modem
is fairly fast. A 14.4 modem is fairly slow. This, however, is always changing. Soon
a 28.8 modem will be slow. In fact, I have recently seen ads for 56.6 modems (but
never trust ads).





NOTE: The numbers you see on modems, the
14.4s and 28.8s, refer to a modem's speed or baud rate. This is the amount of information
that can fit through the pipe.





The most popular language used to publish documents on the web is HTML (HyperText
Markup Language). HTML isn't really a computer programming language, so relax.
It is, as its name suggests, a markup language. A series of relatively simple
tags that enable you to specify how text appears in the browser, images, and
links to other sites.
I will devote a section in this chapter to HTML, but before I get into that, you
need to learn how to create the graphics for which the web has become so popular.
This is of course a simplified version of what really happens out there on the
web, but it is close enough to give you an idea of what is going on. Keeping this
information in mind will help you develop web pages that are attractive as well as
functional.
File Formats and File Size
The first thing that you need to learn is the type of file format that you need
to use for the web. There are two standard choices and an emerging third. The first
two are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group).
The other format is known as PNG (Portable Network Graphics). It promises to be the
best choice of all three, but is not widely supported by the major browsers. So,
for the time being, it is enough to know that Photoshop will enable you to save to
this format, but it is currently beyond the scope of this book.
The most important thing to remember, regardless of the file format you decide
to use, is that the web has limited bandwidth. This means that if you create an absolutely
beautiful image, and, say, it weighs in at something like 2 megabytes, on a 14.4
modem, it will take forever to download. This is not to say that you can't create
images with as large of a file size as you want. I am just suggesting that few web
surfers out there will have the patience to sit there and wait while your 2 MB image
downloads.
It is best to keep your entire web page file under, in my estimation, 30 kilobytes.
This, however, is a matter of opinion. You might not care about the guys (like me)
with 14.4 modems. Maybe your main audience is surfing with faster connections. In
that case, go for bigger files. Conversely, if you know that your primary audience
is surfing from home with slower modems, you might want to keep your web pages well
under 30 kilobytes apiece.
This is the challenge of web development. There are ways around it, but you will
ultimately have to make sacrifices. It's OK though... everybody does it.





NOTE: If you have some big files that
you want to publish on the web, don't fret. There are ways around the big file issue.
Most surfers won't mind the wait for a big file if they have a warning. Give them
a thumbnail version of the image and tell them how big the file is. This way, they
can decide for themselves if they want to spend the time waiting for the download.
A little courtesy, as in all aspects of life, goes a long way on the web.





JPEG (Joint Photographic Experts Group)
Depending on your needs, JPEG could be the best file format for you. To save as
a JPEG, you need to work in RGB mode within Photoshop (see Figure 14.1). It is great
for photographs and other continuous tone images. JPEG maintains color information.
It does, however, employ a lossy compression scheme, which means that you
can adjust and reduce the file size (see Figure 14.2)--at the expense of the
image quality.
Figure 14.1
The JPEG Options dialog box.
Figure 14.2
Saving a smaller file.
Figure 14.3
Two GIF files with similar quality but very different file sizes.
The figure on the right in Figure 14.3 is 21.1 kilobytes. The figure on the left
is 181 kilobytes. This is a staggering difference in file size for a minimal difference
in file quality.
Give any image that you plan to take to the web a close look. Use the File+Save
a Copy command so that you don't lose your original image, and try different compressions.
If using a heavy compression (one that reduces the file size a great deal) causes
degradation to the image quality, save again with less compression to get a better
quality image.
Also, notice the section in the JPEG Options dialog box that prompts you for format
options.


Baseline (Standard): This is the standard option.


Baseline (Optimized): This option optimizes the colors in the file. When
I tested to see if Optimized created a larger file, I was surprised to see that the
Optimized file was actually smaller than the Baseline standard file.


Progressive: For web work, this is your best bet. Progressive means that
your file will be loaded into a web browser faster and then refined by subsequent
passes or scans as more file information is downloaded. Notice the drop-down
menu that becomes active when you select this option. This enables you to specify
how many scans you will permit before the image is finished downloading to a user's
browser. A good choice would be three, but if your file is fairly large, go with
four or five.







NOTE: Always keep your web browser open
when you are creating web graphics. This will enable you to take a look at them to
determine their quality.
Also, don't be fooled by how quickly File+Open File in your browser opens one
of your files. These files are on your hard drive, or local. When a person has to
go out on the web to get your pages, the process is slowed down incredibly.





GIF (Graphics Interchange Format)
GIF is your other option for web file formats. It is probably somewhat more flexible
than the JPEG format. You can work with files you intend to save as GIFs in RGB,
but to save these files you will have to convert to Indexed Color. For more information
on Indexed Color, turn back to Day 4.
GIFs enable you to save files with transparent backgrounds, which is extremely
useful when you are creating buttons and other round graphics. Photoshop will not
allow you to have anything but a square or rectangular canvas. Thus, if you don't
save your button as a transparent GIF, you will end up with a white square of canvas
around the image.
Let's try creating an image for the web with a transparent background:


1. Open the file 14file01 from the CD-ROM (see Figure 14.4).


Figure 14.4
Flower image.


2. Double-click the Lasso tool. In the Lasso tool options palette, set the feather
pixels box to 5 and carefully drag a marquee around the flower (see Figure 14.5).


Figure 14.5
Flower selected with the Lasso tool.


3. Select Edit+Copy to copy the flower.

4. Select File+New to create a new canvas for your selection. Be sure to click the
transparent background radio button (see Figure 14.6).


Figure 14.6
Be sure to make the background transparent.


5. Select Edit+Paste.


Figure 14.7
Flower on a transparent background.
Now, let's try something before we finish--changing the mode to Indexed Color
and Interlacing the image:


1. Select Image+Mode+Indexed Color.

2. Click OK at the Flatten Layers prompt.

3. In the following dialog box, choose Web for the palette (see Figure 14.8).


Figure 14.8
Choosing the web palette.


4. Click OK.

5. Select File+Save a Copy.

6. In the drop-down menu, make sure to select CompuServe GIF.


Figure 14.9
The CompuServe GIF option.


7. Give the file a name and click OK.

8. In the dialog box that appears, choose Interlaced. This is like the Progressive
option that you used with JPEG files. It enables the user's browser to download the
image and then progressively refine it as more information arrives.


Leave your image up on the desktop. You will return to it in just a moment. Since
you used the Save a Copy command, your image has remained untouched.
Now, let's open the file via a web browser:


1. Open your web browser--Netscape Navigator or Internet Explorer.

2. In the browser, select File+Open File. This enables you to open files on your
own hard drive.

3. Navigate to and open the file that you just saved in the last batch of numbered
steps (see Figure 14.10).


Figure 14.10
This GIF's border is not transparent at all.





NOTE: For those of you on the bleeding
edge of technology, running Netscape version 4, you won't see the white border, because
version 4 has set white as its background color. This means that you are off the
hook for this exercise, but if you end up with a different color that you need to
remove, the steps remain the same.





To get rid of the white border surrounding the flower, follow these steps:


1. Return to the flower that you left active in Photoshop a few pages ago.

2. This time, instead of selecting Save As, choose File+Export+GIF89a Export (see
Figure 14.11).


Figure 14.11
The GIF89a Export Options dialog box.


3. Click on the Eyedropper tool.

4. With the Eyedropper tool selected, click in a white portion of the image. This
will change the white to gray.

5. Click OK. Name the file and save it as a CompuServe GIF just as you did in the
previous exercise.

6. Open your web browser again.

7. Select File+Open File.

8. Find the file you just saved and open it. It should look something like Figure
14.12.


Figure 14.12
A transparent GIF on a white background. Still a few artifacts floating, but otherwise
pretty close to final.





NOTE: A good way to select which file
format is right for you is to visit web sites that have graphics similar to what
you want to publish. To find out what kind of file format an image is, simply click
the image. On a Macintosh, click on the image and hold until a dialog box appears.
On a Windows machine, click on the image with the right mouse button.
In the dialog box, choose to save the image. When you are prompted for where you
want to save the image, note the file extension--.jpg for JPEG or .gif for GIF. Click
OK to save the file or click Cancel if you were just looking.





The ability to save GIFs with transparent backgrounds opens up a lot of possibilities
for web publishing. Transparent GIFs are great for creating buttons, toolbars, and
any other, mostly interactive, graphic that wouldn't normally be contained in a box
or a frame like a photograph or a piece of art. You'll be using this technique again
in this chapter.
Now let's look into creating some cool backgrounds for our web pages.
Backgrounds
I admit that I have mixed feelings about backgrounds on web pages. These can really
add personality to a web site, but they also can make reading the text of your site
really difficult and frustrating. To quote web designer David Siegel, "Gift-wrap
makes poor stationery." That said, however, if you use backgrounds with discretion
they can add to a site's presence and look.





NOTE: If you just want a solid colored
background, you are better off just specifying this in the HTML code. Use the <body
bgcolor="# "> tag to define the color-- inserting the desired letters
after the # sign.
For example:
White = "#FFFFFF" Black = "#000000"
See the end of this chapter for more information on HTML.





Tiled Backgrounds
There are really two ways that you can go about creating backgrounds. The first
background that you will look at is created via a small image that is tiled across
the browser.
When creating a background by using this method, you need to keep the original
image small--no bigger than an inch or so square. The browser will read the image
once and tile from that one little square. This saves space as you try to keep your
web page a manageable size.
Another thing you have to be careful of is patterns that run off the edges of
your image. Sometimes it is difficult to align these. Second only to a background
that makes text unreadable is a background in which you can see seams.
To create a tiled background, follow these simple steps:


1. Select File+New.

2. Create a 72-pixel square canvas, using a transparent background setting (see Figure
14.13).


Figure 14.13
Settings for creating a tile.


3. To make sure that you don't end up with any nasty color surprises, select
Image+Mode+Indexed Color.

4. Choose Web for the palette (see Figure 14.14).


Figure 14.14
The Indexed Color dialog box.


5. To create my background, I selected the Airbrush tool and used a very thin
brush.

6. Double-click the Airbrush tool to bring up the options palette.

7. Select Dissolve for the blending mode.

8. Now, paint a thin line across the canvas (see Figure 14.15).


Figure 14.15
The tile.


9. Save the file as a GIF (refer back to the section in this chapter on GIFs
for more information).







NOTE: Use the <body background="
"> tag to insert the tile. See the end of the chapter for more information
on HTML.





This is the way the image will appear in Netscape. This is only one of an infinite
number of possibilities for creating backgrounds. Try applying filters to create
effects. Just be careful how you utilize this technique. After all, you have a web
page because you want to communicate. This can help, but when it is used to an extreme,
it can be a hindrance.
Border Backgrounds
This is, in my humble opinion, the better, more professional option for creating
a web page background. This method creates a column or border along the left side
of the page, which then transforms into white or another solid color. This offers
much more visual interest to a page, and gives you an area where you can set navigational
buttons or other marginalia (see Figure 14.16a).
Figure 14.16
The tiled image in Netscape., A site with a side column.
To create a border background, use the following steps:


1. Select File+New to create a new file.

2. Most browsers are set to view at something like 640 by 480 pixels. To make sure
that you are covered for horizontal width, set your width to 640 pixels.

3. Set the height to 1 pixel. This conserves file size (see Figure 4.17)


Figure 14.17
New file setup.


4. Make sure that the background is set to white.

5. Now, we need to change the mode from RGB to Indexed Color. Select Image+Mode+Indexed
Color.

6. Choose Web for the palette (see Figure 14.18).


Figure 14.18
The web palette.


7. Click the Zoom tool and magnify the leftmost part of the canvas.

8. Click in the Color Swatches to select a foreground color. For my own image, I
chose a deep blue. You, however, may choose any color you like.

9. Select the Airbrush tool. Open the Brushes options palette and select a brush
that is larger than 1 pixel (see Figure 14.19).

10. Now, using the Paintbrush (or whichever paint tool you feel the most comfortable
with), paint. Fill up about a fourth of the canvas (from left to right) with the
color you've selected. You may have to zoom out to make sure that you have covered
the right amount of the canvas. This doesn't have to be exact.

11. When you are satisfied with the image, save your file as a CompuServe GIF. It
should only take up about 1 kilobyte of file space, which isn't much at all.


All you have left to do is to put this file into an HTML document and open it
via your web browser. Here is what mine ended up looking like.
Figure 14.19
Zoomed into the canvas.
Figure 14.20
A border background.





NOTE: Another cool thing that you might
want to try is to blur (using Filter+Blur) the edge where the color meets the white.






As you can see, some of the text is difficult to read. That is due to the dark
color I chose for the border and because HTML doesn't allow you to create very elegant
or interesting text (that is without the stylesheets, but that is beyond the scope
of this book. Check out Hayden's Web Designer's Guide to Stylesheets for more
information on that topic).
There is, however, a way around this, by using Photoshop to create the text.
Text
Photoshop creates wonderful text. The one thing that you must remember, however,
is that this text is a bitmap. It may look editable, but it is not. It is an image.
The web is evolving and the emergence of style sheets gives web authors another
way of controlling the typography of their web pages, but Photoshop still offers
the primary way of creating interesting text for the web.
As you begin, you must keep in mind that, because the text you're creating is
really an image, the same file size concerns are present.
To create text in Photoshop, use the following steps:


1. Create a new file using File+New.

2. Make the file rectangular, say, 3 inches tall and 7 inches wide (see Figure 14.21).


Figure 14.21
Settings for the canvas.





NOTE: I always find that when I am working
with text it is useful to make the canvas bigger than you think you will require
it to be. It is sometimes difficult to judge how much space a string of text will
occupy. You can always reduce the size by simply selecting the text and copying it
into a new, more appropriately sized canvas. If, however, you run out of space, you'll
have to create a new file and go through the whole process again.







3. Make sure that the background is white.

4. Click the Type tool in the toolbox. Make sure that you select the Type Mask tool
(see Figure 14.22). It enables you to move and manipulate your text, whereas the
plain Type tool just sets your text on the canvas in the foreground color.


Figure 14.22
The Type tool.


5. With the Type tool selected, click in the left of your canvas.

6. This prompts the Type Tool dialog box to appear (see Figure 14.23). The Type Tool
dialog box is where you specify the type of font you want to use, its size, leading,
spacing, weight, and alignment.


Figure 14.23
The Type Tool dialog box.


I suggest that you keep the font fairly simple and straightforward. Fancy fonts
tend to look kind of bad. Feel free to try them and see what works and what doesn't.
For this example, I chose Arial.

The leading refers to spaces between lines of text, and spacing refers
to spaces between words (see Figure 14.24). This gives you a lot of control, especially
if you work with multimedia programs or want to create animated GIFs for the web
(which I will get into later in this chapter).







NOTE: You can create the effect that text
is expanding, which appears to be the current rage on television commercials. If
you haven't noticed, you probably will now that I mentioned it. It's true, though.
There is a lot of type manipulation on TV and in beginning movie credits. Keep an
eye on these for inspiration and possible tricks you might try in Photoshop.







Probably the most important setting for good-looking type is the anti-aliased
checkbox. This smoothes the edge of the letters via interpolation and prevents the
edges from looking jagged or stair-stepped. I can't think of a time in which you
wouldn't want to have this feature clicked on. There may be times--I just can't think
of any at the moment.


Figure 14.24
A display of spacing and leading.


7. Choose a font and type a string of text into the box. For this example, I
chose the title of this book. You can, however, type in anything you want.

8. Hit OK.

9. The outlined text should appear in your canvas (see Figure 14.25).


Figure 14.25
Outlined text ready to be filled with color.


10. Select Edit+Fill and fill with the foreground color.

11. Click the Marquee tool and then click in the canvas to deselect your text.


You're done! And although this text is a bitmap and you can't edit it like you
would text in a word processor, you can make some changes and manipulations. Use
the Layer+Transform tools to change the appearance of the text (see Figure 14.26),
or you might try a filter. In Figure 14.27, I used the Filter+Blur+Motion Blur filter.
Figure 14.26
Text distorted by using the Layer+Transform+Perspective command.
Figure 14.27
Text distorted by using the Filter+Blur+Motion Blur filter.
Feel free to experiment with other filters and other transformation tools. Let
your imagination be your guide.
Filling Text with a Pattern
I will preface this section by saying that this technique works equally well for
plain, run-of-the-mill selections as well as text--after all, text is really just
a selection in the shape of letters.
This exercise will show you how to define a pattern based on one image and then
use that pattern to fill a selection (or in our case, text) in another.


1. Open the file 14file01 from the CD.

2. Create a new file by selecting File+New.

3. Make the canvas 7 inches wide and 3 inches high. Remember, you can always cut
it down to size when you are done.

4. Select the Type tool (the Masked Type tool-- the one that looks like an outline
of a T).

5. Click in the canvas you just created. This opens the Type Tool dialog box automatically.

6. Select a font size and type a word. For this exercise, I chose 60 point Arial
and typed the word "Photoshop" into the box (see Figure 14.28).


Figure 14.28
The Type Tool dialog box.


7. After you have selected your type and entered a word, click OK. Your screen
should look something like that in Figure 14.29.


Figure 14.29
Your setup so far.


8. Click file 14file01 to make it active.

9. Choose Select+All.

10. Now, in the Edit menu, select Define Pattern. This creates the pattern you will
use to fill the text.

11. Click in the other canvas. With the word still selected and unfilled, select
Edit+Fill.

12. Choose Pattern from the drop-down menu (see Figure 14.30).


Figure 14.30
The Fill dialog box.


13. Click OK in the Fill dialog box.







NOTE: For a cool effect, try applying
a filter, such as Spherize or Motion Blur, to an image before you use it to define
a pattern. This will make the fill look even more abstract.





As I said earlier, you can use this for any type of selection, but I think that
it is especially nice when used with text.
You might have noticed that you had to select the entire image for the Define
Pattern command to become available. This is true. You can't define a pattern from
a partial selection within an image. There is a way around this, though.
Say that you just wanted a pattern fill based on a part of an image. Just select
that piece of the image and copy it into a file of its own, select all, and you are
in business. There is always a way.
Preparing Text for the Web
This procedure is the same as the one described in the section on the GIF file
format discussed earlier in this chapter.
You have the option of converting your file to JPEG or to GIF. One good thing
about text is that it usually, but of course not always, is applied to a white background.
If this is the case with your web site, there is no need to go through the trouble
of exporting a GIF89a file. Just make sure that your background is white and save
it as a plain GIF file.
When designing images for the web and writing the HTML code, save yourself work
as often as possible because new problems and new challenges will always appear--usually
when you least expect it, and when you're absolutely sure that you've got it right,
but it refuses to work.
Take heart. You are by no means alone. I don't know a single web developer or
designer who has the process of web publishing so streamlined and perfect that a
mysterious problem or difficulty never crops up. The sign of the Photoshop pro is
the one who realizes that there are about 10 ways to accomplish any one given task.
Keep experimenting and never give up.
Buttons
The next aspect of web development using Photoshop that you need to learn is interactivity--specifically,
the interactivity brought to the web via the myriad buttons and button bars on the
pages.
You see them everywhere. You would be hard pressed to find two pages in one surfing
session (unless you are a marathon 12-hour-at-a-time surfer) that didn't feature
some sort of navigational button or graphic device.
These are easy and fun to create and use. Let's see what you can do with this:


1. First, create a new file. Make it approximately 1 inch square on a transparent
background (see Figure 14.31).


Figure 14.31
Settings in the New File dialog box.


2. Select the Elliptical Marquee tool (see Figure 14.32).


Figure 14.32
The Elliptical Marquee tool.


3. Drag out a marquee in the canvas. It doesn't have to fill the canvas, but
try to make it circular. You might want to use the Alt or Command modifier keys to
drag the marquee from the center outward. This will help ensure a perfect circle.

4. Zoom in to about 200% and fill the selection with the default foreground color,
black.

5. Choose Select+Save Selection. In the following dialog box, click OK (see Figure
14.33).


Figure 14.33
The Save Selection dialog box.


6. With the marquee still active around the selection, choose Select+Modify+Contract
(see Figure 14.34).


Figure 14.34
The Contract Selection dialog box.


6. Enter 5 into the box, as shown in Figure 14.34, and click OK. This will cause
your selection to become contracted a space of 5 pixels (see Figure 14.35).


Figure 14.35
A contracted selection.


7. Next, choose a foreground color. For this exercise, I chose red. Now fill
the contracted selection with your foreground color.

8. Choose Select+Load Selection. Since there is only one saved selection, just hit
OK in the dialog box that appears (see Figure 14.36). This precisely reselects your
original circle.


Figure 14.36
The Load Selection dialog box.


9. From the Filter menu, select Distort+Spherize and click OK. You should end
up with something like what you see in Figure 14.37.


Figure 14.37
The button after being spherized.


10. Next, making sure to keep your button selected, choose Filter+Render+ Lighting
Effects.

11. In the Lighting Effects dialog box (see Figure 14.38), adjust the light source
by dragging the handles on the circle that surrounds your image. The idea here is
to give your button a 3-D effect with lighting. Consult Figure 14.38 for an idea
of how your setup should look and then drag around until you are satisfied with the
look of your button. Then click OK.


Figure 14.38
The Lighting Effects dialog box.





NOTE: Some Macs live without an FPU (or
a floating point unit). The Lighting Effects filters are highly math intensive filters,
so they require this bit of hardware. Do not, however, despair. There is a software
fix called SoftFPU, which you can download and install.







12. Now to add that final touch of 3-D reality to your button. Select Filter+Render+Lens
Flare (see Figure 14.39).


Figure 14.39
The Lens Flare dialog box.


13. Adjust the flare by dragging the crosshair in the image, so that it comes
off the upper-left of the button (see Figure 14.39). Also, I suggest that you click
the 105mm Prime radio button. It gives you a wider flare. You can adjust the brightness
of the flare by dragging the slider at the top of the dialog box. I went with 105%.
See what you like. You may want to go with more or less.

14. When you are satisfied, click OK.


All that remains for you to do now is to reduce the magnification of your button
to 100% and give it a look over. If you are happy with how it turned out, save it
as a transparent GIF (or don't, if you are going to place it on a white background)
and drop it into your HTML document.
If you want to make the button even smaller, simply select Image+Image Size and
enter new height and width measurements (see Figure 14.40). If you want to adjust
one measurement without the other, say, just the width, deselect the constrain proportions
checkbox at the bottom of the dialog. Beware, though, when you uncheck this box your
images can turn out looking squashed or stretched.
Figure 14.40
The Image Size dialog box.
Rollover Buttons
Rollover buttons are buttons that change when you move your mouse pointer over
them. It appears to be magic, but in fact, it is JavaScript.
I'm not going to go into the intricacies of JavaScript in this book, but I have
included a script (borrowed from the Hayden web site--http://www.hayden.com)
on the CD. This script, when included in your HTML document, will, in effect, exchange
one button for another.
The basic idea of this script is that when you have it up and running and a hapless
victim is drawn to your web site and rolls his or her mouse over the particular JavaScripted
button, the browser knows to load another button or image.
In other words, when you hit that particular hot spot as defined by the script,
the script loads another image in its place. Usually, since the images are small,
this takes place very rapidly, so the button changes--hence, rolls over.
The first thing you need to do is modify the first button so that you will have
two buttons--a normal one and a highlighted one.
There are a variety of ways you can change the button, but for now, let's try
the following:


1. If you haven't completed the preceding exercise, open the file button.jpg
from the CD.

2. Bump up the magnification to about 300% so that you can see what you are doing.

3. Select the Magic Wand tool from the toolbox (seee Figure 14.41).


Figure 14.41
The Magic Wand tool.


4. Click in the white part of the image (see Figure 14.42).


Figure 14.42
The Magic Wand's selection.


5. Choose Select+Inverse (see Figure 14.43).


Figure 14.43
The inverted selection.


6. Choose Select+Modify+Expand. Enter 2 into the box (see Figure 14.44).


Figure 14.44
The Expand Selection dialog box.


7. Choose a color that you would like to use to highlight your button. For this
exercise, I chose a deep blue.

8. Select the Paint Bucket tool and click in the white area within your selection
(see Figures 14.45 and 14.46).


Figure 14.45
The Paint Bucket tool at work.
Figure 14.46
Filling the selection.
The Paint Bucket tool will fill the white area of your selection, leaving the
button itself untouched.
Now for the hard part--the JavaScript. Actually, if you will look on the CD, I
have saved two buttons: button.jpg and button1.jpg. These are already in the JavaScript
HTML document called javatest.htm.
All you have to do is open your web browser (given that you are driving a late
enough web browser model) and then open the file javatest.htm.
If you want to use this JavaScript, I have bolded the lines of code that you need
to replace. Just drop the script into the header of your HTML and go.
Animated GIFs
Now for the really fun stuff--animated GIFs. Again, although animated GIFs are
cool, I caution you not to overuse them. For one thing, they tend to be fairly large,
and for another, a page full of animated GIFs can be a little annoying.
There are a variety of applications you can use to create these, notably:


GIF Builder (Macintosh)


GIF Construction Set (Windows)


All right--enough of that...let's set something on fire. For this example, I am
going to create a somewhat more elaborate animation than you might want to include
on your web site--for demonstration purposes, of course.
The idea, as I am certain that you already know, is to create a number of frames
(probably no more than 5) that provide slightly different permutations of a scene,
which, when played back, create the illusion of smooth animation. Granted, this is
easier said than done, especially with the limited number of frames you have available,
but it is possible to create a number of cool effects. In the following steps, I
am going to set the words, "in 14 Days," on fire.
Let's see how to do this:


1. Create a new file. Make it 3 inches wide and 2 inches high. Also, be sure
to select Grayscale in the New File dialog box.

2. Fill the canvas with the default foreground color (black) (see Figure 14.47).


Figure 14.47
Your setup so far... not much at this point.


3. Click the Type tool (the outline or masked one).

4. Click in the canvas and the Type Tool dialog box will appear (see Figure 14.48).


Figure 14.48
The Type Tool dialog box.


5. You may type any word or phrase you like. For this exercise, I used the phrase
"in 14 Days."

6. Fill the text with white (the foreground color).

7. Use Select+Save Selection to save the current selection, or in other words, size,
of the text. In the dialog box that appears, simply click OK.

7. Click your mouse in the image to deselect the text.
8. Rotate the canvas by using Image+Rotate Canvas+90° CCW (see Figure 14.49).


Figure 14.49
The rotated canvas.


9. Select Filter+Stylize+Wind (see Figure 14.50). The settings should be correct
by default. Select the option Wind and the direction from the left. Check the preview
box. If you like what you see, click OK. If, after you click OK, you don't like what
you see, remember to select Edit+Undo.


Figure 14.50
The Wind filter.


10. Rotate the canvas back to normal by selecting Image+Rotate+90° CW.

11. Load your saved selection (Select+Load Selection) (see Figure 14.51).


Figure 14.51
Text with selection added.


12. From the Select menu, select Modify+Contract. In the dialog box, enter 1
for the number of pixels you want to contract your selection.

13. Now, fill your contracted selection with the foreground color (black).

14. Change your image to Indexed Color by selecting Image+Mode+Indexed Color.

15. To get the cool flame effect, select Image+Mode+Color Table. It's the last choice
on the menu.

16. In the Color Table dialog box, select Black Body and click OK (see Figure 14.52).


Figure 14.52
Color Table dialog box with Black Body option selected.


17. You need to apply a filter to the flame so that it doesn't look so straight.
Use the Polygon Lasso tool to select the flames above the text as shown in Figure
14.53.


Figure 14.53
The Polygon Lasso tool.


18. Choose Image+Mode+RGB. Remember, filters don't work in Indexed Color.

19. Apply the Ripple filter by selecting Filter+Distort+Ripple (see Figure 14.54).
I set the amount to 259. Set it higher for more pronounced curves in the flame and
lower for more subtle curves. Press OK.


Figure 14.54
The Ripple Filter.


20. Select File+Export+GIF89a Export and save the file. Give it a name like fire1.gif.
This will help you to remember which version is which as you continue to change the
flames (see Figure 14.55).


Figure 14.55
Flaming text.
The hard part is over. Your text should look like it is on fire. All that is left
for you to do is to repeat steps 19 and 20 until you have 3 or 4 frames of flame.
It is really beyond the scope of this book to go into GIF Builder or GIF Construction
Set. Although GIF Construction Set is somewhat more difficult to learn than GIF Builder,
neither is very tough. The idea is to bring your images into the application, order
them how you want, select how many times you would like your animation to run, and
save. It is really simple, and if you have problems, both programs have great documentation.
If you would like to take a look at the animated GIF in action, just open test.htm
in your web browser. I also included the constituent files on the CD under a folder
in Day 14 called, appropriately enough, Fire.





NOTE: If this technique interests you,
check out Hayden's Photoshop Type Magic, volume 1 and volume 2. Those guys (Greg
Simsic and David Lai) are the true Photoshop gurus, to whom I am deeply indebted
for a great deal of my own knowledge, as well as the preceding technique. I have
used it on web pages and in multimedia. It is a great one.





HTML Primer (or Steal This Code)
This book isn't a book on HTML. There are plenty of good ones out there (some
bad, too). In fact, if you are really interested in HTML, I suggest that you purchase
one of Hayden's fine titles on the subject. I recommend either HTML Studio Skills
or HTML Web Magic. For a more complete look at HTML, as well as some scripting
languages, I suggest that you take a look at Hayden's Web Authoring Desk Reference.
That being said, I am still going to give you a very basic, crash course in writing
HTML--enough to get you up and running. I also have included the HTML that I wrote
as you went through this chapter on the CD. Look for the file titled "test.htm"
in the folder for Day 14. Feel free to take this file, use it, learn from it, change
it, or, if you are more advanced in the art of HTML, toss it.
First things first, HTML is not difficult. It is not some arcane programming language.
It is a simple markup language. Using simple tags, you can indicate how text should
look, where you want an image to appear, and other pages and sites to which you want
to link.
It requires no special software to write HTML. Any word processor, such as SimpleText,
Notepad, all the way up to Word 7.x will do. The trick is to save the file with the
extension .htm. This means that the web browser, such as Internet Explorer or Netscape
Navigator or the browser used by America Online for that matter, can read your file.





NOTE: For Macintosh Users Only: Since
3-character file extensions aren't part of the Mac world, you guys can save your
files with .html as the suffix as well as .htm. It is a matter of your own preference,
but whichever you choose, be consistent. If you start mixing and matching, you'll
undoubtedly end up with files that won't link properly.





The other important thing (that you absolutely cannot forget because it will not
work if you don't do it) is that you must keep all your images in the same folder.
If you don't, or if you move one, the browser won't know where to look for it, and
you will get an error. Not the end of the world, just annoying.
The last thing that you need to know, before I deconstruct an HTML document before
your very eyes, is that most tags appear in pairs. That is, there is an opening tag,
such as <HTML>, and a closing tag, such as </HTML>. The backslash indicates
the closing tag. You'll see more of what I mean here in a minute.
Deconstructing Some Simple HTML
In the following few pages or so, I am going to briefly deconstruct a page of
HTML from the headers right down to how images are used and how hyperlinks are created.
All tags are in the proper order as they should appear on your page. This is, however,
not to say that there aren't other ways you could organize your page, but this is
the way I did mine. It is very simple and straightforward.
Notice that some tags are nested (meaning that they fall within) in other
tags. For example, you wouldn't put the cover of a book in the middle of the book.
It goes on the outside. Therefore, the text is nested, so to speak, within the covers.
Make sense? I will attempt to demonstrate this by using indentations.





NOTE: To see the page that corresponds
to this deconstruction of HTML, open test.htm from the web folder in Day 14 on the
CD-ROM.





<HTML>
This appears at the beginning of each HTML document. It, in effect, tells the
web browser that this is indeed a page of HTML and that it should take the time and
trouble to read it and display it. It has a corresponding tag of </HTML>, which
will come at the very end of the document.
<HEAD>
This is the next tag that needs to go in your document. It describes the information
in the header of your HTML document. Information within the <HEAD> tag will
not show up in your browser.
<TITLE>
This tag is used to create a title that will appear at the very top of the browser
window. I called mine Teach Yourself Photoshop in 14 Days.
</TITLE>
This the ending tag for <TITLE>. Note the backslash.
</HEAD>
This is the ending tag for <HEAD>.
<BODY>
This tag indicates what will actually display in the user's browser. There is
a closing tag for <BODY>, but it will not appear until the end of the document.
This is where the real fun starts.
There are a number of options that you can define in the <BODY> tag, but
for our purposes, I am only going to describe two of them.
<BODY BACKGROUND="file name">
If you have, like I did in the test.htm file, a graphic that you want to use for
the background of a web page, specify it here. Enter the file name between the quotation
marks.





NOTE: If you choose one of these options,
use the full tag instead of just the <BODY> tag. You can't have both.





<BODY BGCOLOR="# ">
If, on the other hand, you want a solid color background, go with this option.
FFFFFF=White
000000= Black
0000FF=Blue
336666=Green
There are a lot more colors than this available. Visit http://www.stardot.com/~lukeseem/hexed.html
or http://www.physics.purdue.edu/~snc/color.html for a full listing of colors
and their corresponding alphanumeric designations. These are hexadecimal code for
RGB values.
<IMG SRC="filename">
This tag enables you to insert images. Make sure that your image stays in the
same folder throughout this process. If you move it, your browser won't be able to
find it.
In between the IMG and the SRC, you have a few options that you can insert to
control the placement of your image.
<IMG align=left SRC aligns the image to the left of the browser.
<IMG align=center SRC aligns the image to the center of the browser.
<IMG align=right SRC aligns the image to the right of the browser.
<IMG Vspace= enables you to control the vertical spacing of your image.
Simply enter a number after the = sign. Experiment and adjust to your liking.
<IMG Hspace= enables you to control the horizontal spacing of your image.
Simply enter a number after the = sign. Experiment and adjust to your liking.
<br>
This indicates a line break. Note that Netscape Navigator and Internet Explorer
deal with this tag differently. Make sure that you preview your HTML in both browsers
before you publish. Of course, this is good advice on any account. Always preview
in both Navigator and Explorer.
<hr>
The <hr> tag creates a horizontal rule. You can adjust the height and width
of the rule as follows:
<hr width=300>
The numbers indicate pixel values.
<H1> <H2> <H3> <H4> <H5> <H6>
These are headings. Text goes between these tags. <H1> is the largest. <H6>
is the smallest. Their respective closing tags are as follows:
</H1> </H2> </H3> </H4> <H5> </H6>
<a HREF="http://www.--.com"> </a>
This is the heart of the World Wide Web and that which makes it worldwide. This
is how you specify hyperlinks to other documents posted on the web. The address or
URL to which you want to link goes between the quotes as indicated. That which represents
the link on your page, be it text or a graphic, goes between the angle bracket that
follows the URL and the closing tag, </a>. See the following for examples of
a text link and an image link.
<a href="http://www.--.com"><H3> The World of Photoshop</H4></a>
<a href="http://www.--.com"><img src="button.jpg"
border=0></a>
Notice that I included "border=0." This keeps those annoying blue boxes
that indicate links away. You also can enter numbers into this space to make the
blue boxes as big or as small as you want.
</BODY>
This indicates the closing of the body of our HTML document. See above for the
corresponding opener tag.
</HTML>
And this brings our HTML document to a close.
Summary
I hope that you have enjoyed Day 14--the last day. We examined a variety of graphics
that you can post on the web to make your pages more interesting. We looked at backgrounds,
text, and buttons. We also examined what file formats the web uses, and how you might
best choose the right formats for your own work.
In the last section of this chapter, I took the time to explain some of the rudiments
of HTML. You saw that it is not a complex programming language, but a very simple,
easy-to-understand markup language. I hope that the deconstruction was helpful.
Well...now what? You've finished your 14th day and presumably you know a lot more
about Photoshop than you did when you began-- perhaps more than you ever wanted to
know. Hopefully, you learned what you needed to know about Photoshop and were able
to solve any problems or questions you might have had.
I hope that you will continue to learn and explore all the capabilities that Photoshop
possesses. There is still plenty out there to learn and discuss, but you now have
the tools--your imagination, creativity, and a basic understanding of Photoshop.
Go forth and imagine all the new worlds and images that you can, and remember...don't
forget to have some fun while you're at it.








© Copyright, Macmillan Computer Publishing. All
rights reserved.