Although you can use Freeway's box-drawing tools to draw simple graphics, usually you'll import graphics from a dedicated program. Freeway can import graphics either as editable graphics, which can be cropped, scaled, combined with other text and graphics, and modified in other ways, or as pass-through graphics, which are exported unaltered. Pass-through graphics are discussed at the end of this chapter.

Editable graphics

You can import the following graphic file formats as editable graphics:

GIF (Graphics Interchange Format)

JPEG or JPG (Joint Photographic Experts Group)

TIFF (Tagged Image File format)

PICT

BMP (Windows Bitmap)

EPS (Encapsulated PostScript)

QDGX (QuickDraw GX)

When your Web pages are built, Freeway exports graphics as either GIF or JPEG depending on which export type is applied to the imported graphics. GIFs are normally used for simple graphics, containing a limited range of colors, while JPEGs are used for photographic and other continuous-tone images. Freeway usually defaults to the appropriate type for each graphic.

You can scale, crop, and transform editable graphics, alter their color palette, vary the compression level of JPEG graphics, and select progressive or interlaced display. These, and other issues which relate specifically to graphics on Web pages, such as image groups and image maps, are explained in this section.

Freeway will keep track of graphic source files if you move the document around on the same volume. In addition, if you move a whole Freeway document and all its imported graphics onto a different volume, keeping the same relative directory structure, you won't need to re-import graphics the next time you open the document because Freeway uses relative pathnames to locate graphics.

Importing and deleting graphics

Graphics in Freeway documents are held in boxes (one box for each graphic). Once imported the graphic and its box are referred to as an item. There are two ways you can import a graphic into a box.

Using the Import command

To import a graphic using the Import... command:

Click on a GIF box so that its selection handles are visible, then choose File/Import.
Use the resulting dialog box to find and select the graphic file you want to import.
If you decide you wish to import the graphic as pass-through, ensure that the Pass-through checkbox is selected - this is selected by default when importing images into HTML boxes, and deselected by default when importing images into graphic boxes.
Click Open.

Note: Computers with QuickTime installed show an additional option which allows you to create a Preview of the graphic if one does not already exist.

Freeway imports a screen version of your chosen graphic into the selected box and establishes a link to the original file.

Using drag and drop

Another way to import a graphic is to use drag and drop:

1. Select or create a box to hold the graphic.

2. Locate a file on the desktop or in a Finder window, or open an application that supports drag and drop.

3. Drag the file or graphic over the box in your document (as you drag the pointer over different boxes, their borders will be highlighted in turn).

4. Release the mouse to place the graphic in your chosen box.

Note: A box can only hold one graphic. If you try to copy or import a graphic into a box which already holds a graphic, the first graphic will be replaced by the second.

Replacing text with a graphic

A box can either hold text or a graphic, not both. If a box contains text and you want to replace it with a graphic, you must first delete all the text (click inside the box, choose Edit/Select All, then press Backspace).

Pasting a graphic from the clipboard

If you've previously cut or copied a graphic to the clipboard, you can simply paste the graphic into a selected box (choose Edit/Paste).

Deleting a graphic

If you make a mistake or change your mind, you can easily delete or overwrite a graphic. There are several ways to do this:

· Select the box holding the graphic, then press Backspace or Delete. This deletes the box and the contents

· Select the box holding the graphic, then choose Edit/Clear Content. This deletes the content but leaves the box.

· Select the box holding the graphic and import another graphic into the same box. This will delete the first graphic.

Note: When you replace an existing graphic by importing a new one in its place, the new graphic retains any transformation applied to the original (such as skew, rotation, etc.). If you clear the first graphic, the default mapping options are restored.

Moving graphics

Once you've placed a graphic, you can move it around inside the document by moving its box. You can also move a graphic around inside its box using the grabber hand tool or the Graphic File dialog box.

Using the grabber hand

To drag a graphic around within its box:

1. Using the Selection tool, move the pointer onto the box. The pointer tool changes to a Grabber hand.

2. Drag the graphic to its new position.

Using the Graphic File dialog box

You can use this dialog box to position a graphic accurately within a box:

1. Double-click the graphic to display the dialog box or select the box and choose Item/Modify....

2. In the Horizontal and Vertical offset boxes, enter the new position for the graphic.

3. Click OK.

Using the arrow keys

You can move a graphic and its box using the arrow keys on the keyboard. Select the box and press the appropriate arrow key to nudge by the nudge distance set in Preferences.

Hold down Option and press an arrow key to nudge by 10% of the amount set in Preferences.

Centering a graphic within its enclosing box

You can center a graphic within its box by selecting the graphic or its box and choosing Item/Graphic/Center.

Resizing graphics

Imported graphics in a Freeway document are always held in their own boxes. You can resize an imported graphic.

Resizing a graphic to fit its box

You can resize a graphic to fit its box by selecting the graphic or its box and choosing Item/Graphic/Scale To Item Frame. The short cut for this is to hold down Command-Shift-F. To resize the graphic to fit the box but retain the graphic's proportions, choose Item/Graphic/Scale and Pad or press Command-Option-Shift-F. You can also resize a box to fit a graphic by choosing Item/Graphic/Fit Item Frame or by pressing Command-Shift-D

A graphic will resize as you resize its box if you hold down the Command key when you drag the box handle. If you hold down Command-Option as you drag the handles, the graphic will resize, keeping its existing cropping and proportions.

You can also control resizing behavior by preselecting the way the graphic will behave when you resize a box. You set this behavior the in the Graphic File dialog box. Double-click the graphic to display the dialog box.

Freeway gives you four options of controlling what happens to a graphic when its box is resized. These are known as:

· Preserve Size The graphic's size remains unaltered, no matter what happens to its box. This means that the graphic may be cropped if its box becomes smaller, or may be padded with white space if its box becomes larger.

Original

· Scale Graphic The graphic is scaled in direct proportion to its box. The graphic's aspect ratio is not preserved.

· Scale and Pad The graphic is scaled to fit its box's smaller dimension. The graphic's aspect ratio is retained. If necessary, the graphic is padded with white space to fit its box's larger dimension.

· Scale and Trim The graphic is scaled to fit its box's larger dimension. The graphic's aspect ratio is retained. If necessary, the graphic is trimmed to fit its box's smaller dimension.

Setting graphic sizing behavior

To set how a graphic behaves when you modify its box:

1. Double-click the graphic to display the Graphic File dialog box:

2. Choose one of the four resizing methods from the popup menu labelled Sizing behavior.

3. Click OK.

The resizing method you've chosen will only apply to that graphic.

Scaling a graphic up and down

You can resize a graphic in 5% increments by selecting the graphic or its box and choosing Item/Graphic/Scale Up or Scale Down.

Restoring a graphic to its original size

You can restore a graphic to its original size by choosing Item/Graphic/Original Size.

Scaling a graphic using the Transform dialog box

You can select a graphic and scale it using the Transform dialog box.

Transforming graphics

You can transform a graphic, either with its box or independently, by using the Tools palette or the Transform dialog box.

Transforming an item

To transform a graphic at the same time as transforming its enclosing box:

1. Select the box and choose Edit/Transform....

2. Enter the transformation values for rotation, horizontal and vertical skewing and scaling:

3. Check the Content box to make the contents transform with the box.

4. Click OK.

You can also use the Skew, Mirror and Rotate tools to achieve the same effect. Hold down Option when you transform to create a copy of the item as you transform it.

Transforming a graphic independently from its box

To transform a graphic independently:

1. Select the box and choose Item/Transform....

2. Check the Content box.

3. Enter the required transformation values in the Content area only.

4. Click OK.

Freeway transforms the graphic, but leaves the box unaffected.

Note: The transformation tools affect only the box if you hold down Shift while using them.

Note You cannot transform HTML boxes.

Image control

Freeway offers you control over:

· the ways a graphic is displayed, saved and published.

· how a graphic is updated.

The Graphic File dialog box displays information about the graphic, such as its location in the computer, the date and time the graphic was last modified and its status.

Displaying the Graphic File dialog box

To display the Graphic File dialog box, select the graphic or its box, then choose Item/Modify....

Alternatively, you can double-click the graphic with the Selection tool.

Using the Graphic File dialog box

Information about a selected graphic is available in the Graphic File dialog box, including its name, size, type, status and modification.

Note: If you select a graphic pasted from the clipboard, Freeway displays a smaller version of this dialog box which omits the file information.

There is also a smaller version of this dialog (without graphics editing options) for pass-through graphics

The following information is then displayed:

Name The file name and its location.

Size The size of the file.

Type The file type and creator.

Modified The date and time of the last alteration to the file.

Status Shows the following information:

OK The file's location is known.

Missing The file cannot be located.

Modified The file has been modified since it was imported.

· Click Locate to display the dialog box allowing you to find and open files. Use this option to locate missing graphics.

· Click Update to update the graphic. Use this option to update modified graphics

· Click Resample to resample the graphic after scaling.

Resampling a graphic

You can resample graphics which have been resized after being imported into Freeway. This process adjusts the file data brought into Freeway from the original graphic file. A graphic which has been enlarged will display more accurately on the screen, and one which has been reduced will require less memory to display.

Setting graphic publishing options

To define whether a graphic is published:

1. Double-click the graphic to display the Graphic File dialog box.

2. Uncheck the Publish box.

The graphic will not be published. It's enclosing box will publish, however, if it has a border or color defined.

The Resources dialog box

The Resources dialog box contains a list of all the graphics and other content files (such as plug-ins) which are used in the current document. As well as displaying information about each individual graphic, you can use this dialog box to delete, update and resample graphics.

To display the Resources dialog box, choose Edit/Resources....

File Shows the file name and location.

Type Gives the file type.

Status Shows the following information:

OK graphic is up to date.

Missing File is not present.

Modified File is not current.

Page Gives the page on which the graphic appears.

Publish Shows whether graphic will be exported as part of the Web page. A tick indicates the graphic will publish while no symbol indicates the graphic will not publish.

· Click Update All to update all the graphics in the document.

· Click Resample All to resample graphics to their current size.

· Select a graphic from the list and click Show to display the graphic.

· Select a graphic from the list and click Edit to display the Graphic File dialog box for that graphic.

· Select a graphic from the list and press (Backspace) to delete a graphic.

· Click Done to close the dialog box.

Alt text for GIF and JPEG boxes

Alt text, short for Alternative text, is a short description of a graphic or its hyperlinks. Some Internet users prefer not to view graphics since their size can delay downloading the page. If the graphic has been supplied with Alt text, this descriptive text will display in place of the graphic.

In cases where the graphic contains a hyperlink, you can use the Alt text to indicate the link to your readers. Alt text is limited to 255 characters and is set for GIF and JPEG boxes.

Note Some site designers warn readers that they will not see the full impact of the site when they choose to omit the images. If you plan to make use of GIF characters and paragraphs, you may want to include a similar comment about omitting images.

You enter the Alt text for graphics boxes using the Export panel of the Inspector palette. By default the Alt text is the box name.

To set the Alt text

1. Select the graphic box and display the Box panel of the Inspector palette.

2. Select the entry in the Title box and enter the Alt text.

When the box is exported, this text is added as HTML and will be displayed in place of the graphic in the browser.

Browser with images

Browser without images (showing Alt text)

Displaying and hiding graphic images

You can display or hide graphic images imported into a Freeway document. By default they are displayed.

To hide an individual image:

1. Select the box.

2. Display the Box panel in the Inspector palette.

3. Uncheck the Show box.

Check the box to redisplay the image.

Exporting graphics

When items on your page are exported as GIF or JPEG there are various options which can be set for the exported graphic. Items are exported as graphics when the site is built using the Preview or Publish commands, but individual items, selections including multiple objects or even the entire page can be exported using the File/Export... command. The Export dialog offers the same control over graphic export options as the Inspector palette, and is described further on.

The following values can be set for graphics using the Export panel of the Inspector palette and these take effect only when items are built using the Publish or Preview commands.

Export settings for GIF graphics

File name

When a site is built into the destination folder, any graphics which are identical to ones which have already been built are NOT exported - this is called Reusing images, and is one of the main ways in which the download time of your Web pages is kept small. However, because of this, it's possible that an individual item on the page will not be exported and a previously built identical graphic will be referenced by that Web page instead. For this reason, there is no facility within Freeway to positively name the file which will be created from any particular item.

However, if you give the item a meaningful title, and it is built as a graphic, the title will be used as the basis for its filename. For example, on a Master page one might define a GIF item as a banner for the page, and wish it to be called "banner.gif" when it is output as a graphic. To achieve this, the item is titled banner in the Item panel of the Inspector palette, and when the site is built, unless an identical image is encountered previously, the resulting filename will be banner.gif. If there is already a non-identical image called banner.gif, the resulting filename will be bannera.gif or bannerb.gif

Note: Freeway never overwrites graphics (or other content files) which it has not created

File size

The Size area shows the size of your GIF graphic files. This value depends on the dimensions, colors and other attributes of your graphic and is displayed only when you have the View/Preview Graphics option turned on, or if you have built the site with this graphic. You can also get feedback on the overall size of your page after you have previewed or built the site by turning on Show File Sizes in the Site palette popout menu.

Options for GIF graphics

You can interlace and dither GIF graphics and anti-aliased GIF text.

Interlacing GIF graphics

Interlaced GIF graphics are displayed gradually as the file is downloaded by the browser. Your reader sees the image forming as they wait for the full file to download. This effect is on by default. Deselect the Interlaced checkbox to turn this effect off.

Dithered GIF graphics

Dithering tries to match colors in your graphic using only those available in the browser. For example, a full color image uses thousands of colors but GIF graphics are limited to a maximum of 256 colors. Dithering provides a way of making your graphic look as though it is using a wider range of colors.

Dithering is on by default for GIF graphics. Click the Dither check box to turn this effect off.

Anti-Alias GIF

The Anti-Alias option allows you to soften the outlines of GIF text and box shapes when they are displayed by the browser. Anti-aliased text can be difficult to read at small sizes, since the outline of letters is blurred, so you may want to test this effect.

The Anti-Alias option is on by default. Click the Anti-Alias checkbox to turn this effect off.

To view anti-aliasing in Freeway, choose View/Anti-Aliasing.

Export settings for JPEG graphics

File size

The Size area shows the size of your JPEG graphic files. This value depends on the dimensions, colors and other attributes of your graphic (Graphic file issues) and is displayed after you have previewed or built the site.

JPEG quality

You can choose amount of compression applied when the graphic is exported. The amount of compression affects the quality of the image seen in the browser. One hundred gives the highest quality image and applies the minimum amount of compression. Drag the slider bar or enter a value in the text box to alter the quality of your JPEG images.

Progressive display of JPEG images

Browsers can display JPEG images gradually as the file is downloaded so that readers see the image forming on their page. By default, Freeway will export progressive JPEG files.

Anti-Alias

The Anti-Alias option allows you to soften the outlines of text and box shapes when they are displayed by the browser. Anti-aliased text can be difficult to read at small sizes, since the outline of letters is blurred, so you may want to test this effect. It’s not recommended to include text in exported JPEGs, however, as the artefacts created by JPEG compression of text can look unsightly.

Animated GIFs

Animated GIFs change as the viewer watches the page. You may have seen Web pages with waving flags or moving water. The effect of movement is created by a series of GIFs displayed in rapid succession. In many cases, only a small area of the image changes. "Optimized" animated GIFs download data only for the animated area, resulting in a smaller file size.

Animated GIFs are created using animation software. When an animated GIF is imported into a Freeway document, the optimization is retained and remains part of the file when it is exported. Animated GIFs can be combined with other GIF boxes in Freeway.

Image maps

Sometimes, you may want to assign more than one hyperlink to different areas of a graphic. When you do this, Freeway creates an image map. The map records the area on the graphic which contains the link so that when your reader activates the link, the corresponding file is downloaded and displayed.

Freeway creates client side image maps. These are supported by most new browser versions, but are not be supported by all older versions. If your design uses image maps, you may want to test them in a wide range of browsers.

Applying more than one hyperlink to a graphic

You can set up a single hyperlink on a graphic box. When you want to add more than one hyperlink to a graphic, you draw GIF boxes on top of the graphic and add the hyperlinks to these additional boxes.

1. Draw GIF boxes on the graphic where you want the reader to click for the hyperlinks.

This will create an image group but because the overlying boxes are empty, no change will be made to the resulting image.

2. Add hyperlinks to the GIF boxes.

When the page is exported, Freeway will create an image map for this graphic.

Image groups

Although you can design a page with overlapping boxes in Freeway, standard HTML cannot display two overlapping objects on a Web page. To overcome this limitation of HTML, Freeway combines the overlapping items into one new image, and this process is referred to as forming an image group. The outline of the new image which will be generated in the output is represented on the screen as a light grey line outlining the combined boxes.

When Freeway converts these into a group, the group takes on the format and settings of the underlying box. These are displayed in the Group panel on the Inspector palette. The Item panel for the original items then displays only the Title box and Format popup menu.

Creating groups containing both GIF and JPEG boxes

You can overlay GIF and JPEG boxes. Since the group takes on the characteristics of the underlying box, GIF or JPEG options will show in the Group panel depending on which format applies to the underlying box. When you select a box that is part of a group, and alter the settings in the Group panel, you are only altering the settings for the underlying box. If you subsequently separate the boxes, the changes you made in the Group panel will not have affected the top box.

Groups with an underlying JPEG box

The JPEG format does not support transparent pixels. If you create a group where the underlying box is in this format, or use a non-rectangular box for a JPEG image, the pixels which Freeway inserts to fill out the group are opaque and will obscure any background image for this page or an underlying HTML box.

Pass-through graphics

Pass-through graphics are graphics which Freeway exports without modifying them in any way. You might wish to import an animated GIF as a pass-through graphic if it does not need to be resized or combined with other graphics. You might also import an image as a pass-through graphic if you have already optimized its color palette in another program (although Freeway's Adaptive option also preserves existing color palettes). Pass-through graphics must be in GIF or JPEG format, since browsers do not normally support other formats. You can import other formats into Freeway, but they will not display in a browser unless the user has a plug-in which can deal with this format (Freeway treats pass-through graphics which are not GIFs or JPEGs as plug-in content).

To import a pass-through graphic:

1. Draw or select an HTML (blue) box, and choose File/Import...

2. Use the file dialog to find and select the graphic file you want to import

3. Click Open

Note: You can also import Pass-through graphics into a rectangular graphics box by selecting the pass-through option in the file dialog. The box will be converted into an HTML box after the graphic has been imported.

Because pass-through graphics cannot be cropped, you must ensure that the box which contains the graphic is not smaller than the graphic. You can do this by selecting Graphic/Fit Item Frame from the Item menu after the graphic has been imported. If the frame is smaller than the graphic, Freeway displays a blue cross to indicate that the content has overflowed. This can also happen if the graphic is too big for the page.



		Back to the top Introduction \| Getting Started \| User Guide \| Contacting SoftPress