Web Design Tutorial
Part 3: Graphics

BY MELODY REED

Editorial

President’s PDA

MWSF 2004 Report

Computer
Connections

Web Design Part 3

Studio Artist 2.0

Squeezing the Apple

Apple Confidential
2.0

Qaptain Qwerty’s
Qorner

From My Keyboard

Volunteer for
Express!

The Story This Far
If you followed along in the previous tutorial, all the text should now be in place and you are ready to prepare the graphic element of your web page – a 858x120 pixel banner – which I told you to create in any program of your choice – Illustrator, Photoshop, whatever.

In this tutorial I will be using Macromedia Fireworks to create a simple, text-based graphic for our banner. However, you will be glad to know that when you become familiar with Fireworks you can use it to create quite complex, sophisticated pages.

True, you could even get along without Fireworks. But I don't recommend it. You'll understand why when you consider the overall process. Here are the basic steps you would have to take:

1. Create any vector-based graphic elements you want (type, logos and the like), in, say, Adobe Illustrator.
2. Create any pixel-based (continuous tone) objects you want (photographs etc), in, say, Adobe Photoshop.
3. Save each in its native format, in layered, editable form, for future re-use or modification.
4. Also save them as rasterized files – GIF for type-based objects or line art, and JPEGs for continuous tone art, such as photographs – for export. (Note that all art on the web is raster-based with the exception of Flash graphics, which produces a resolution-independent, scalable graphic or animation, and which we wont go into here). Finally,
5. Export them to Dreamweaver, which takes over from there.

The Power of Fireworks
Now you will see why I advocate the use of Fireworks. First, because of its seamless compatibility with Dreamweaver, and second, because of its unique hybrid character; it is a raster-based program combined with a vector art program specifically focused on the web. So it does everything needed. It gives you tools (which will be intuitively familiar to you) with which to create or modify your graphics. Then it gives you the ability to save these graphic files (as a PNG file) intact for future, editable use. Finally, it enables you to convert them to bitmaps, (as JPG or GIF files) for export and use on the web. You can appreciate what this does for the workflow and ease of creating or updating a web page!

Fireworks realizes it has to woo the other "big guys" to its site, so it accepts just about all file formats – Photoshop's PSD, Illustrator's AI (though only up to v.8), etc. The native file format for Fireworks is PNG. Note that this is different from Photoshop's PNG or any one else's. It is unique to Fireworks, and its main attribute is that it maintains a "live" file. All the layers, text, non-destructive special effects, etc. always remain editable.

I assume here that you know all about vector and bit-map graphics and the advantage and limitations of each. If not, read the sidebar "Raster v.Vector: Strengths and Limitations."

Ready, Get Set…
If you don't have Fireworks you should get it for this test run. If you're not ready to buy it, you can download a 30-day free trial version from the Macromedia web site. It is a fully functioning program, the only limit being that it won't work after 30 days. (Then see if you can live without it!)

… Go!
Let's get to work. Go to the Dreamweaver file you started last lesson and click on the empty placeholder at the top of your document. Your page should look something like the image below. Notice that the banner placeholder is selected. (I've exaggerated the black square selection points for clarity.)

Fig. 1

Now look down at the Property Bar ( Fig. 2) and notice the button that I've circled. Click this button and you will be brought into a special mode of Fireworks within Dreamweaver. Give the program a moment to whirl around. It finally opens up Fireworks, with a file the exact size of your placeholder.

Fig. 2

Now create your banner. As I noted before, you could import, open or drag in files from another program. But now, let's do it all in Fireworks. Let's keep it simple and create a text-based logo.

If you know Illustrator or Photoshop, this is a very intuitive process. On your toolbar is an "A" tool, the Fireworks icon for text. Click on it and you get a context-sensitive Property bar, which displays all the text options for font face, color, size, tracking and leading. As in DW, all the palettes are located in the Windows menu. Type in the wording for your logo, and for any other text. I suggest that you create each piece of text separately so you can move them around independently. This will free you to position, resize, angle or change the tracking of each piece of text individually. Once the type is set the way you want it, you can create secondary effects. Go back to the tool palette, choose the selection tool (the black arrow) and click on the text. The property bar now displays the Effects drop-down menu. Select Drop Shadow, as I did, or experiment with any of the other effects shown.

When all is as you want it, hit the Done button in the upper right corner. You will be prompted to save your document in PNG, the Fireworks-native file format, and then export it as either a GIF (for type or line art) or JPG(for photos). It is important that you be aware of where you are saving your file; it must be in the initial Site Root Folder you created in Dreamweaver. The beauty of this procedure is that it converts the text to a graphic, assuring that the actual font, size, positioning etc. will appear as you want it to – something not true with regular HTML text.

Testing: I, 2, 3…
You should now be back in Dreamweaver with the new banner artwork in place. Now hit the small "globe" icon on the upper left corner of the title menu bar, or press its keyboard equivalent, F-12, to launch your primary browser, and see your page in full splendor. Wow! (But don't be satisfied with just one browser. Go again to globe icon and under the Edit submenu , choose your secondary and tertiary browsers. It's smart to have all your browsers available at this F-12 button, and to preview on all of them. Only then can you know how your web art will appear in the real world.)

Fig. 3

There is more to consider on graphics. Next month we will look into optimization, a process critical for all graphics, especially photographs and high resolution art work, to assure their best display on the web.

Assignment for Part 4: Have ready a photo of yourself – as author – as a jpeg approximately 300x300 pixels, at a resolution of 150dpi. See you next issue, and be sure to have fun.

Melody Reed is a native of Manhattan and has been an instructor at Pratt Institute for 18 years. She is the chairperson for the Macromedia MX web design sig of NYPC, and is also a computer consultant, web designer, digital photographer, and tutor. She can be reached for questions or consultation at 917-721-9696 or inspiration@melodyreed.com.

Fireworks realizes it

has to woo the other

"big guys" to its site,

so it accepts just

about all file formats –

Photoshop's PSD,

Illustrator's AI (though

only up to v.8), etc.

Vector v. Raster:
Strengths & Limitations
Rasterized graphics are pixel-based, or bitmapped, with the result that they are "resolution-dependant" artwork. If, for example, you scan something at 72 dpi – an appropriate amount for the web – you can not successfully resize the resulting image – on a monitor or as a printout; you are pretty much stuck with the size at which it was scanned. If you try to enlarge it much, you get an unpleasant looking pixilation or "stair-step" effect. If you try to reduce it much, you get a degraded, compressed image. So if you really must have your art bigger – or at a higher resolution – rescanning is be your best bet.

The most common use for raster graphics is with photographs or any continuous tone art, where you can manipulate the file by changing the actual pixels, i.e., by retouching. The most popular standard in raster-based program is Adobe Photoshop.

Vector art, on the other hand, is "resolution-independent". It is used for type and line art. It is not pixel based, but mathematically constructed, so it can be scaled to any size. A two-inch vector-based logo could be cleanly scaled to a 20-foot billboard (or reduced to postage stamp size) without difficulty. Fortunately, you, the designer don't have to deal with the underlying formuas; they are created automatically as you create the curves. But you should know that at the heart of it is the "Bézier curve." And behind that is Pierre Bézier. (See below "The Man Behind The Curve.")

The Man Behind the Curve
Pierre Etienne Bézier (1910-1999), a long-time employee of the auto maker Renault, developed the system which we use today. Faced with the need to enlarge and transfer curved lines and shapes from small models to full-size mock-ups and machine tools, he saw these math-based curves as a perfect solution. (The formula for a circle – or any other curve – is the same regardless of size; only the constants change. While it took him years to persuade Renault to accept the system, he finally succeeded, and it has found its way into many facets of life. Bézier curves are firmly at the heart of the desktop publishing revolution, being integral to Adobe's PostScript page-description language. Vector art is based upon and created with Bézier curves, but you can call them "paths.")