Master-Title

by Paul Rego

Written 6/12/08
Updated 11/30/10

This page is a part of the M.A.C.S. (Macintosh Asheville Computer Society) website. If you linked directly to this page, click here to visit our home page and to access our menu.

Click here to read our review of "Freeway 5.5 Pro"

madewithpro5

Configuration

  • Computer: iMac Core Duo (not "Core 2 Duo"), 2GHz, 1.5GB RAM
  • Mac OS X: Snow Leopard (10.6)
  • Web Software: Freeway 5.5 Pro (by Softpress)
  • Graphic Editing Software: Fireworks (by Adobe)
  • Clip Art: The Print Shop (by Software MacKiev) and iWeb (part of Apple's $49 "iLife")
  • Service Used: The iDisk part of Apple's MobileMe service.

Timings

  • Pre-Work: In thinking about the current "look" of this site, it took me about 3 or 4 weeks, off-and-on, to finalize an idea.
  • References: During my pre-work stage, I sifted through several web page designs for ideas. For the most part, I started from these 2 web sites:
  • Assembling: It took me about 2-weeks to do all the work... find and edit the clip art, create the web pages, copy, paste and arrange the text and graphics, etc.
  • Uploading: It's easy to setup Freeway to upload your web site. Once that's done, the amount of time it takes for the actual "uploading" depends on how many pieces your site consists of, how large those items are and how fast your Internet connection is. In my case, it took 45-minutes. (Remember, it was uploading EVERYTHING.

Statistics

  • New M.A.C.S. Site:
    • Number of Pages: 25 (in Freeway); 10 (in iWeb)
    • Number of Freeway Pieces: 618
    • Note: Although Freeway can easily handle all the pages I can pour into it, I use iWeb for those pages which never change. These are the "5-Click Products" reviews. The "5-Click Products" page is still handled by Freeway but the reviews themselves are managed by iWeb. (These pages have a gray background at the top.) I did this because there's no need to have Freeway load and track those non-changing pages.)

The Navigator's Symbols

Since we feel that Macintosh user groups should share as many tips and techniques as possible, especially through their respective newsletters and web pages, I thought it would be a good idea to explain how I made the navigation image located at the left side of this page.

Before I explain how the Navigator was created, let me explain those strange symbols...

In various Macintosh programs, if you pull down enough menus you'll probably find one or more of these "other-worldly-looking" designs. However, they are nothing more than Apple's mark (or symbol) for a certain keystroke. Look on your keyboard, to the left of the Spacebar and you'll see the most common symbol -- the "Command" ⌘ key symbol. Here is a list of those symbols, which I found tucked away in the "Help" menu of Mac OS X (see chart on the right).

The Navigator's Design

Although I have the very powerful Fireworks program (by Adobe), which allows me to create "paint" and "draw" images, as well as edit photos and create some web page features, I wanted to use as many of Freeway's features as possible. (I never use Fireworks' web-based features because they're a bit too involved for my way of working. Plus, I like to have as many related tools as possible within the main program -- in this case "Freeway 5.5 Pro".)

So, I began creating the Navigator's green section by dragging a rectangle onto one of Freeway's pages. I filled it with "M.A.C.S. green" (which I created years ago and had stored in OS X's Color Palette for quick access). Then I experimented

KeyboardSymbols

with Freeway's Outer Shadow, Inner Shadow, Outer Glow, Inner Glow and Fill Master until I had just the right look. (This added shadowing and gradient, which gave the green rectangle a 3D look.)

item5

Next, I copied those strange symbols from the OS X Help system and pasted them in Fireworks, so I could make them a bit larger, change their black color to yellow and clean them up a bit. Each was then saved to the hard drive as a separate file and later loaded into Freeway for placement.

The symbols you now see in the Navigator, without moving the Pointer over them, are really the same symbols you see when you DO move the Pointer over them. The difference is, the non-Pointer version has had Freeway's "Inner Glow" (of "M.A.C.S. green") applied. (Because I used the "Rollover" effect, I needed two different graphics. Your web browser, such as Safari, switches between them whenever the Pointer is over one or not over any.) Of course, Freeway handles all the details of "how" all that programming must be written. I don't have to deal with any of that, unless I want to -- which I don't.

(HTML is the underlying programming language used in most web pages.)

Because of HTML's lack of flexibility, I now had to do a little troubleshooting. At this point, my Navigator has 3 graphic layers: 2 Rollover symbol graphics, representing each button, and the tall green section underneath. Although each was interacting with the others, it produced a confusing effect.

The solution to this was to click on the green area and turn OFF Freeway's "Combine Graphics" feature.

The M.A.C.S. logo, was previously designed in Fireworks.

item8
item8 GreenSample item8
item8
item8 As you can see by item8
item8

The Site Map

This is an automatic feature of Freeway. You simply pull down the "Insert" menu, drag down to "Action Item", slide to the right (onto the submenu) and choose "Site Map". Freeway then places a 1-inch square box on the page. Drag this to designate the "top" and "left" side of your Site Map list and Freeway does the rest. While in Freeway, nothing appears in this box. You don't even have to resize it. Freeway will "add to" and "remove" web pages in this list as you add and delete the actual pages. If there's a specific page which you don't want listed in the Site Map, such as the Site Map page itself, you place an underline (_) character in front of its name in the Inspector.

Today's Date

Just as with the Site Map, getting your web page to display the current date is a simple process. I feel the current date gives the site a bit more credibility and it tells me the person, organization or business behind that site, is keeping it up to date -- even if I know this is an automated process.

  • Note: The font, size and color of text used to display the current date can be changed -- even though the Freeway manual states that this may not be possible.

The "Welcome" Page

The table itself started out as the top-down photo you see to the right. I found this in "The Print Shop" and exported it to the hard drive. I then brought it into Fireworks, so I could use the "Distort" tool. This allowed me to create the image you see on the "Welcome" page.

Once I got the perspective I was looking for, I realized tabletops in reality have 3 dimensions but my tabletop looked like it only occupied a single plane. So I opened the same file again -- this time into a Fireworks "layer". I then rotated it 90-degrees and brought its top edge down just below the bottom-edge of my other "tabletop" piece. When I cropped off all but about an inch, I had the "appearance" of a large, 3-dimensional board -- the one you now see on the "Welcome" page.

I had a difficult time managing multiple graphics which overlapped each other, on the table. Because of this, I laid out all the graphics the way I wanted and then took a screenshot (Command, Shift 4) I then turned that page into a stand-alone (one which wouldn't upload) Master page, which I could manipulate any time I needed to change one of the graphics. The last step was to simply open that screenshot file as the Welcome page's background image. Since this is now being treated by Freeway as a "background", any graphics I place on top of that page will not directly interact with it -- giving me a little more flexibility.

item12

The large "June Edition", "July Edition", etc., text, as well as the "(Updated...)" areas, are "graphics" text. Although I could have used an HTML text box in these areas, "graphics" text allowed me to use Freeway Pro's" "Skew" feature to distort the angle of the letters. Yes, even though those letters are "graphic" and "skewed", they are still editable within Freeway! (The "Skew" feature is not available in Freeway "Express". So if I didn't have access to this feature, I would have had to use those text elements in a different way or distort the text in Fireworks -- or another program -- which would have been difficult to match the precise angle I wanted and I would have to go through all those steps, every time I wanted to change the "Updated" date..)

The text which keeps changing on the iPod's screen, is automatically cycled (shown and hidden) using 2 of Freeway's functions: "Target Image" and "Sequence Timer". The "Sequence Timer" is a cycle of events which can be set into motion when the Visitor to that page clicks on something or simply when that page is loaded (shown to a Visitor). The "Target Image" function is applied directly to the image(s) which you would like to "show" or "hide" when a certain action takes place. I then tied these 2 functions together with a single menu option and Freeway did the rest. Any time I want to update the information displayed by one of the iPod's Target Images, I simply edit the text which is currently within any one of those boxes. Since the Target Image "function" is applied to the "box" holding the text, changing the text does not interfere with the Sequence Timer's ability to show or hide the iPod's boxes. (This can sound a bit confusing but, as with any program, it becomes clearer after you've had a chance to work in the program youself.)

The information displayed on the iMac's screen was set up in a very similar way as the information on the iPod... The difference is, instead of having the "Sequence Timer" automatically cycle through all the text boxes, I connected each text box on the iMac to one of the objects on the table. However, because most of the objects on the table are now part of one large image, I needed to employ another feature of Freeway to help me connect the object with a specific text box on the iMac. This feature is called the "Map Area". It allowed me to designate which part of the screen would be clickable and attach a link or function to that action. For my purposes, I attached Freeway's "Rollover" function to each area I outlined. I then connected each Map Area with a specific text box on the iMac's screen. Basically, all the text boxes are there, one on top of the other, but they're all hidden until the Rollover function tells the Visitor's Browser (such as Safari) to show a certain box of information. At that point, the program which Freeway created for me, tells the Browser to hide whichever text box is currently showing on the iMac's screen. In the Browser, this all happens in an instant. Try it! Move the mouse around the "Welcome" screen and whenever the Pointer is over a Map Area a "Rollover" is detected and the switching happens.

With the "Coffee Cup" and "Keys", an extra graphic is involved for each one. Instead of using a Map Area for these, I used a second graphic image to do the same work AND to present a different image, when a Rollover was detected. The Rollover image on the Coffee Cup shows a semi-transparent Freeway logo, which I modified in Fireworks. (I did this to not only make the image semi-transparent, which I probably could have accomplished within Freeway, but to also distort the image to fit inside the shape of the cup. Although Freeway offers a "Skew" feature, this does not allow the same flexibility as a true "Distort" feature.)

item3a

The "Upcoming Demos" Page

The cork used in the large background was found on the web. The frame itself was created within Freeway. To the right, you'll see a sample of the frame and Freeway's Inspector showing the settings I used to create it.

The beauty of creating as many elements as possible within Freeway is that you won't have to jump out to another program just to make a slight change in the future -- which I don't personally enjoy. Using the features of a program, such as Freeway, also means you'll have more instant flexibility to modify whatever you created with it. For example, because of the settings I used to create the "Upcoming Demos" frame, simply dragging the frame, to make it slightly longer or wider, will instantly produce a different overall look.

The "Reference" & "WebLinks" Pages

The menus, located at the top of the "Reference" and "WebLinks" pages, provide feedback when the Pointer rolls over one of the menu options. Feedback, some indication that a Visitor to your site has just moved the Pointer over a clickable item, is always the polite thing to do.

The feedback on the Reference page is a magnifying glass and the WebLinks menu displays a pushpin.

To accomplish this, with both menus, I simply used Freeway's "Rollover" function. However, since I wasn't about to write any HTML code, I had to duplicate one magnifying glass, or one pushpin, for each menu item. (When the Pointer is over THIS menu item, display THAT magnifying glass.) If I wanted to dig into HTML programming, I

could have written "When the Pointer is over THIS menu item, display the magnifying glass HERE. Each menu item, in turn, would have a different location associated with it and a single magnifying glass image would be displayed in different locations.)

Irregular Paper

The irregular-looking papers found on various pages, such as "Members Only" and "5-Click Products", were created in Freeway. Each started with a graphic box as a rectangle and, using Freeway's builit-in edge effects, I quickly and easily turned a simple rectangle into a well-worn piece of paper -- complete with darkened edges, which enhanced its outline.

The irregularly-shaped "paper" found on the "Map" page uses a similar effect but this time no "randomness" or burnt edges.

item15

iWeb

I had previously been using Apple's iWeb program, for my personal blog. So when it came time to borrow some clip art and great ideas, the first program I opened was iWeb.

For clip art, I gathered the map for our "Map" page, the 2 coins used on the "MACS News" page, as well as a piece of masking tape, a paperclip, etc.

I also remembered being surprised when I first saw what Apple did to create the realism of the paperclip. Not only was this a photograph of an actual paperclip, but they created a very short line, applied a simple shadow to it and placed it under the paperclip.

After studying this, I realized it was the shadow which gave the credibility to this optical illusion. Afterall, without the shadow, the paperclip looks as though it's sitting directly on the table... but how can this be, if the paperclip is partially "under" the paper it's supposedly attached to? The shadow gives the eye that little extra piece of information, which then fools it into thinking the paperclip really is pushing up the paper at that point.

  • See the difference for yourself. Move the Pointer over the paper-clipped area. When you do, the shadow will disappear. (Moving the Pointer over the curved paper to the right also removes its shadow.)

I used this same technique on a few pieces of curved paper -- such as the yellow sticky-note on the "Welcome" page and the blue sticky-note on the "Apple News & More" page.

Tape
ShadowPaperclip

(Updated 6/19/08)

Graphics & Web Pages

Even with more and more people using high-speed Internet connections, it's still a good idea to keep your file sizes as low as possible. There are several graphics formats available, which will compress your images (removing unnecessary information) and still retain of the colors and quality. Although printing a high-quality image requires 150-dpi (dots per inch) or higher (up to 2400-dpi and beyond), a computer screen can get by with images which contain only 72-dpi or 96-dpi.

If you want to display a 2-inch by 2-inch photograph, don't use a photo which is 12-inch by 12-inch. Instead, use a photo-editing program, or even Apple's "Preview" program, to scale it down to a closer size.

  • Note: It's better to "reduce" the size of a photo than it is to "increase" it. Making an image smaller, means the program doing the scaling must remove information (pixels) which are already there. To make an image larger, the software must add information which does not exist. It must calculate (determine) what must be added based on what is currently in the photo and some programs do this better than others. So, when reducing a photo, so it can be used in another program (especially in a web-page-creation program, such as Freeway or iWeb), it's better to make the image the same size or larger than what you will ultimately need.

Another way to reduce the file size of an image is to change its format. Different file formats offer different benefits and sometimes, you'll find that there is no set formula because some situations require a little experimentation. For example... When preparing an image for use on a web page, you might want to keep a master copy for editing and, from that, generate a small-file-size version for your web site. The master should be in the highest-quality state possible -- probably Photoshop's "PSD" format. (Since I use Fireworks, I keep my master files in its native "PNG" format.) Keeping a master (editable) file is smart because it allows you to make unlimited changes in the image's size, colors, content, etc.

Here are some of the "Pros" and "Cons" associated with various filetypes...

File Type

Pro

Con

PDF

Can duplicate the look of the original page. Text and graphic quality is high (for screen and printer) and placement of these items is precise.

File size can be large.

JPEG (or JPG)

Small file size.

Doesn't handle transparency. Sometimes artifacts (unwanted pixels) can be seen.

GIF

Small file size. Saves transparency information.

Can't handle more than 256 colors.

PICT

One of the original Macintosh graphic formats. Saves Raster (paint, dot-based) or Vector (drawing, math-based) images.

File size is not as good as JPEG.

TIFF

Can store complex picture information.

File size can be larger than JPEG, PICT or GIF.

PNG

Saves transparency information.

File size not as good as GIF.

When preparing graphics for use on web pages, one other thing to keep in mind is "shadows".

PushpinPurple2
PushpinPurple1
PushpinPurple PushpinPurple1a

The purple pushpin on the far left is the original image -- which does not contain an "outside" shadow. (It does have a shadow on its right side -- on the image itself. If the image I'm going to use already has a shadow "outside" of the object, I remove it in Fireworks. By doing this, I can more freely apply (or not apply) a shadow to that object and as you can see above, I can have Freeway apply the shadow at different angles, distances and with different blur factors.

Click here to read my review of "Freeway 5.5
Click here to read my article "Website Design: Art versus Function

This page was updated on 11/30/10