| Seeing Purple Elephants  by Gary W. Priester
Summary You've seen them; they're everywhere: key chains, pens,
coffee mugs, T-shirts, antenna balls, mouse pads, all with a company or product logo on them. In plain site of my computer, I have a screen squeegee, a magnifying loop, a calculator, several pencils, and a mouse pad, all advertising a product or service. Where do all these things come from? These promotional materials, or advertising specialties as they're sometimes called, come from many sources, such as Purple Elephant Promotions, which by no coincidence
happens to be this month's Web site makeover candidate. My first contact with Purple Elephant Promotions came when Polly Marriott, one of Purple Elephant's two partners, called with a production question regarding silk screening they were doing of a logo I designed for the CorelWORLD Conference. I met Polly and husband and partner Darrell Marriott at the same conference several weeks later, where they had a booth virtually overflowing with products, all
emblazoned with the Purple Elephant logo. But most noticeable were the canvas tote bags with the conference logo I had designed on one side and the Purple Elephant logo on the other. Do these people know how to promote, or what? The bags were everywhere, and more often than not, turned with the Purple Elephant logo on the outside. I should point out that the quality and vibrancy of the four-color screen printing on both the tote bags and
T-shirts was the best I've ever seen. During the conference, Darrell and Polly asked if I would look at and critique their Web site. They also solicited comments and I suggested a Web site makeover article, killing two birds with one stone, upon which could be seen the words, Your Advertising Message Here! Before 
In her spare time, Polly created the current Web site using clip art and a variety of programs. "You see, when I made the current version of our Web site," Polly explained, "I didn't have NetObjects Fusion, and the easiest way I could
find to do it was to use Microsoft Publisher. It really was pretty easy for a beginner, and we had set a tight deadline in which to get the site completed. The trouble was, anytime there were overlapping frames, the result was a GIF bitmap image -- even if the overlapping frames were only text."This was apparent when I first visited the site, and I noticed that most of the text on the site was, in fact, GIF files, which
take considerably longer to load, especially on older, slower computers and/or less powerful modems. Text set as GIF files also can't be indexed (unless you create ALT text that includes all of the text), and you'd be surprised how many people view the Web with graphics turned off for speed, so those people can't read the text you set as a GIF. To Polly's credit, the current site design is attractive, fun, well organized and professional, without the clutter I would
have expected from such a site. The graphics are clean and Purple Elephant's tag line, "Promotional Products They'll Never Forget" is a perfect payoff for the elephant logo. 
The Online Catalog page features a powerful search engine that enables the visitor to select a product from an on-line
database in terms of item, price, and amount of production time required. There are additional ways of searching for items by the company's asi (Advertising Specialties Institute) number, line name, and more. Any of the thousands of items can be personalized to include the name of a product or service, just like the items I mentioned that adorn my desktop.
Keeping art within a style  Rather than dive into the makeover, I opted to take a tiny step (by elephant standards) and design a set of navigational buttons featuring an embossed elephant footprint that would look like it sunk into the page when the mouse was over it.With most programs I would have had to program JavaScript to get these buttons to work. But in NetObjects Fusion, I just clicked on the Picture Rollover icon and told NetObjects Fusion which image to use for the initial button, which image to show when the mouse was over the button, and which image to show when the mouse was no longer on the button (in this case, I chose the initial image). Fusion 4 lets you create these mouse-sensitive buttons even easier in automatically
generated navigation bars! Because I wanted the footprints to alternate, left, right, left, right, the buttons had to be custom graphic elements instead of SiteStyle buttons since SiteStyle buttons have to be based upon the same image. The first image is what Fusion refers to as the Initial image, the second image is the Mouse Over image. The first image is also used as the Mouse Out image, or the image that appears
when the cursor is moved off the image. The third image with the dark pink footprint is the image that appears only on the selected page to identify that particular page. In this case, I modified the button so the deep pink footprint appears on the Initial image and the Mouse Out image. Each of the top three images was saved separately and given an appropriate name to help identify the image when creating the Picture Rollover effect explained a little later. The last
image shows how the next button down will be staggered to look like alternating elephant footprints. NOTE: Picture Rollover effects use a special JavaScript and will only function in Netscape 3 (and higher) and Explorer 4 (and higher). In these browsers, the footprint will depress as the cursor passes over it and return to the raised position when the cursor moves away from the footprint. Browsers that cannot display mouse rollovers will just display the raised footprint.
Making tracks  Here you see the steps used to create the footprint.
I arranged five smaller circles around a larger circle and made all the circles one path. I made two sets, one lighter and one darker, which I placed behind the original footprint. The enlarged illustration shows the lighter and darker duplicate shapes spaced farther apart for clarity.To make the footprint appear raised, the lighter duplicate is placed on the top and the darker duplicate on the bottom. The original footprint is made the same color as the button.
The recessed footprint reverses the order and the original footprint is colored darker than the button. As the button color is the same as the background color, only the footprint portion of the button is visible. The invisible rectangle establishes the spacing between the staggered footprints.  That was the
hard part. Creating the Picture Rollover effect in Fusion is a piece of cake. Here's all there is to it. From the View menu, select Toolbars, and from Toolbars, select Component Tools. The Component Tools toolbar will appear on the page as seen here.
1. Click the Picture Rollover button and drag a small rectangle on the page. Don't worry about the size as it will change to accommodate the image. The Properties Palette changes to the Picture Rollover.
2. Click the text "Initial Image." 3. Click the button with the three dots, then locate the folder/directory, containing the Initial image. (The raised footprint). Click the Open button to select the image and close the dialog. 4. Repeat this process to add the Mouse Over image (the recessed footprint) and the Mouse Out image (the raised footprint that appears when the mouse moves away from the button).
5. Click "Link URL," and select the appropriate page to link to from the drop-down list of pages. Easy, huh?
Hide and sleek  I modified a texture fill to add a subtle elephant hide texture to the Layout portion of the page. The fill bore a passing resemblance to leather. Making it almost white as shown here before and after modification ensured that the text and graphics would be easy to read and view. The JPG hide image was selected as the background image in the Layout Properties palette. I established a MasterBorder for the left side of the
page containing all of the navigation/Picture Rollover buttons using the same nondithering color as used on the buttons.Then I modified the MasterBorder, creating a variation based upon the MasterBorder but reflecting the name of the selected page. For example, the Online Catalog page's MasterBorder is
called Catalog, the Special Offers border is called Offers, etc. As each of these variations is based on the original MasterBorder, which has all eight Picture Rollover buttons, only the selected page (the third button shown) image needed to be modified to identify the currently selected page.
Pachyderm art Purple Elephant's logo was created by the graphic design firm Kehoe and Kehoe Design. To continue the woodcut look of the logo, while at the same time creating a different identity for each page, I used some woodcut-style clip art images from Image Club's Art Room CD-ROM..
The woodcut images are now available at the new EyeWire Web site (formerly Image Club Graphics and Adobe Studios). I imported the black and white woodcut images, which are in Adobe Illustrator EPS file format, into my drawing application, ungrouped the elements and added color. You
can do the same thing in any drawing or paint application that can import Adobe Illustrator EPS files.I used nondithering Web-safe colors and added a subtle drop shadow to create depth and exported the images as GIF 89a files with a transparent 20% black background (RGB 204, 204, 204). The light gray is close to the background image and will produce a clean, fringe-free anti-aliased image. Tip: If you get frustrated when copying and pasting images
that don't paste in the same spot you copied them from, here's a tip I learned by accident. Before pasting the image, click on the page to indicate the top left position for the image, this can be anywhere on the page. Then paste and the image will be darn close to where you just clicked. No use crying over… Spilt Milk is the name of the funky font I chose for the page headlines. It added just the right amount of playfulness to balance the businesslike nature of the site. I created the
headlines in Xara (any draw or paint application will work just as well) and added them to the images, as shown in Figure 8, before exporting to GIF. I also used the font to create subheads on various sections of the site and initial drop caps for many lead-in paragraphs. You can download Spilt Milk for FREE. While you're there, be sure to check out the rest of the fine fonts in the collection.Managing an elephant-sized database For the most part, the makeover went smoothly and almost
effortlessly in Fusion 3. Polly sent me the copy in text form (remember, the text on the current site was created in GIF files), which I plugged right into Fusion, and applied a modified Normal SiteStyle text format. My modified Normal text style uses Verdana, a sans serif font that ships and installs with many Microsoft applications and will substitute for the default browser font—usually Times Roman—on most browsers.The real challenge came when I had to figure out how to
incorporate Purple Elephant's massive Online Catalog. At first I tried simply copying the entire HTML document from Purple Elephant's current site and pasting it into Fusion. But the copy was, dare I say, truncated about halfway down due to a file size limitation imposed by Fusion. Next, I tried to insert the file using the Insert function in the HTML Properties palette. As before, the copy was cut off. The situation was looking hopeless.
After a quick search of the manual, I came upon the solution. Smack upside the head! I selected "Reference HTML" from the Edit menu, selected the HTML document containing all of the form information, and bingo! instant form. Although this worked fine, I wanted to make the form look more like the rest of the site so I decided to do a little HTML editing (not recommended for the faint of heart!). The form was set up inside of a table that uses the default browser
font, usually Times Roman, for all of the text and the default font color black. I wanted the page image and title to be included (Fusion set it off to the right of the already too-wide form), and I wanted to use the same background as the other Layout sections. Plus, I wanted the text to be smaller and in purple. The image and the background were pretty basic HTML statements and, as such, were no problem. Making the text
smaller and purple was another matter. I tried a half-dozen solutions, none of which worked. Then I came up with a brilliant (if I do say so myself) solution! I created a small two-column, two-row table in Fusion using the Table button on the main toolbar. I made the text the default Normal SiteStyle text and colored the text purple. Then I peeked at the HTML script created by Fusion. Eh? Eh? And there was the code I needed to modify the existing
table. Why reinvent the wheel when you can learn from the masters? After Click here
to visit my makeover of the Purple Elephant Web site. Please note that I have faked all of the links within the site with the exception of the How To Contact Us page. I did this so you readers with short attention spans would not take off for parts unknown, never to return. The Online Catalog page shows the entries in the drop-down box but the actual links refer to the current site and as such do not work. I could use find and replace to replace the URLs but I think you get the idea.If you wish to visit the actual Purple Elephant site, click here. If you need any kind of promotional materials, this is the place to go. These guys are not only good at what they do (they just won two Golden Pyramid awards!), they're also
two of the nicest people you'll ever hope to work with. Does your site create sore eyes? If you need help with your Web site, let us help. That's why we're here, after all! E-mail us and give us the URL for your Web site as well as a brief description of what you hope to accomplish with your site. If we pick your site for a makeover, we will contact you for more information.
About the Author
 Gary Priester is a partner in The Black Point Group, a Northern California graphic design company. He is the author of Looking Good in Color, Ventana Press and CorelDRAW Studio Techniques, Osborne/Corel Press. E-mail Priester or visit his web site.
© 1998 Gary W. Priester
| |
