Teach Yourself Photoshop 4 in 14 Days

Previous chapterNext chapterContents


- 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.


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:

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.


Previous chapterNext chapterContents


Macmillan Computer Publishing USA

© Copyright, Macmillan Computer Publishing. All rights reserved.