PhotoWebber Basics

Overview

PhotoWebber is a design-forward Web page creation program. Instead of starting with HTML constraints and forcing designers to begin by making technical decisions up front, it starts with a completed Photoshop design and adds the appropriate HTML commands and features to that design.

Instant Web Pages - Any designer who has created graphics for the web using Photoshop knows how tedious it can be to move ideas from a single Photoshop file to a collection of web-friendly GIF or JPG files. And all web programmers know how difficult it can be to get those graphics to appear in the correct positions on the resulting web page. With PhotoWebber it is no longer necessary to chop Photoshop files into little pieces and reassemble them manually in an HTML editor. PhotoWebber translates layered Photoshop files directly into matching HTML layouts effortlessly. For a basic web page, this takes about 30-seconds.

With PhotoWebber you can build an interactive web page in just three steps:

Design your layout in Photoshop
Import the Photoshop file in PhotoWebber (File, Import Graphics, select Photoshop file)
Let PhotoWebber build your web page (Output, Build All)

Automating Complex Tasks - PhotoWebber makes creating JavaScript buttons with rollovers and popups (even menus!) a snap. If you name your Photoshop layers appropriately and check Auto Button Creation when you import your file into PhotoWebber, you are done before you even start working.

PhotoWebber introduces drag-and-drop frames. Because PhotoWebber was designed to build web pages from complete designs created in Photoshop, working with frames is much more intuitive than in standard HTML-based applications. Simply create your page design in Photoshop, import the file into PhotoWebber, and insert the frames. That's it. PhotoWebber takes care of the technicalities. And, if you change your mind, it's not a problem. Any element can be moved to any frame at any time. Most elements can even cross frame boundaries. This provides the flexibility to change your mind without having to rebuild separate HTML files for each frame just to move a single item.

Flexible Site Design - PhotoWebber allows you to make technical HTML decision late in the process. For example, you can switch between style sheet and table alignment at any time simply by checking a radio button, you can change the page background to any color or any tiled graphic and rebuild your web page in seconds, and you can add, move, or delete frames without having to rework your entire design.

Working with Existing Site Content - You may incorporate existing site content into any PhotoWebber projects by using HTML Extensions, Placeholders and Frame Placeholders.

An HTML Extension provides plug-in support for popular multimedia web file formats including QuickTime, Flash, and Java Applets. (See our web site at www.photowebber.com for additional extensions and instructions on how to create your own.)

A Placeholder is a rectangular area that contains HTML code. Any layer in PhotoWebber may be designated as a placeholder. You can type HTML code directly into the Source HTML window, select any HTML file from your hard drive, or choose from a list of HTML files within the designated root folder. In style sheet layout, each placeholder is a separate HTML layer and supports standard style sheet overflow settings. In table layout, each placeholder is a table cell. HTML incorporated using a placeholder becomes part of the web page built by PhotoWebber.

Frames may also be designated as placeholders. A Frame Placeholder is a frame that contains HTML code created in a separate PhotoWebber session or by any other HTML editor. HTML incorporated using a frame placeholder is referenced by the frame set built by PhotoWebber, but is not incorporated into a page built by PhotoWebber.

Built-in File Management - PhotoWebber's Output View Tab shows you what folders and files will be created when you build your page. If you have an existing site structure, simply set the root folder to the folder that contains your existing site files and you have complete flexibility to move files wherever you like - before they are even built. This is particularly useful for large sites where all images or all files belonging to a specific topic or department are stored in separate folders. Just select the files and drag them to the correct folder.

Running PhotoWebber

Top

To run PhotoWebber:

Double-click the PhotoWebber application icon, alias (Mac), or shortcut (Windows)
or
Select PhotoWebber from the Start Menu (Windows).

To quit PhotoWebber:

Select File, Quit.
If you have unsaved work, PhotoWebber will prompt you to save your work now.

The Work Area

Top

Four main windows make up the PhotoWebber work area: Document, Layers, Properties, and Warnings. Each open file displays a separate Document window. As you switch between Document windows, the Layers, Properties, and Warnings windows change to display information related to the open file.

The Document Window

The Layers Window

The Properties Window

The Warnings Window

Mac	Windows

When you run PhotoWebber, all four windows display. PhotoWebber supports several different user interface styles. If you have questions about opening, closing, or resizing windows, please see Preferences for a description of each of the supported styles.

The layers, properties, and warnings windows all have multiple pages, or tabs, within each window. Each tab contains information about the available settings for the selected layer.

The Document Window

Top

Each web page you create in PhotoWebber displays in a separate Document window. The Document window is the visible work area containing imported layers, linked graphics, text, and placeholders. Use this area to move and arrange elements as you want them to display in web browsers.

If you move an element past the boundary of the Document window or if you resize the Document window so that elements are not visible, horizontal and vertical scroll bars appear, allowing you to move to and view all portions of the document.

The Document window also includes the toolbar:

Tool	Description
	Normal Mode. Select this tool to activate the selection cursor so you can select layers by clicking in the Document window.
	Interactivity Preview. Select this tool to test the behavior of buttons, pop-ups and menus created from Photoshop layers.
	Import Graphics. Select this tool to import a Photoshop, GIF, or JPEG file.
	Build All. Select this tool to build the current page.

The Layers Window

Top

The Layers window contains two views: the Layers tab (named Index by default) and the Output View tab. Both of these tabs reference all of the elements that are part of the page displayed in the Document window.

The Layers tab lists all of the elements that have been imported or created in PhotoWebber. Use the Layers tab to select, hide, delete, and display layers.
The Output View tab lists all of the items that will be created by PhotoWebber when you build the page. Use the Output View tab to create, delete, or select folders and to move graphics to different folders.

Layers

Layers are the imported graphics, Photoshop layers, text, and placeholders that you have placed on the page. While PhotoWebber layers are based on and similar to imported Photoshop layers, there are several important differences to keep in mind. These additional features are designed specifically to improve the web-design workflow.

A PhotoWebber file may include all or only selected layers from a Photoshop file - and layers from more than one Photoshop file.
A PhotoWebber file may include other graphics that were not part of the imported Photoshop file.
PhotoWebber layers may be linked to existing GIF or JPEG files.
Multiple layers can be selected in PhotoWebber. This makes it very easy to convert several layers to JPG format or to assign the same hyperlink to several layers at once.
When a layer is used as a rollover or popup for another button layer, those layers are invisible in the Document window. When you select a rollover or popup layer in the Layers window, a ghosted image of that layer appears in the Document window.
PhotoWebber supports more types of layers than Photoshop. These include graphics, real text, Color Areas, and Placeholders.

Photoshop text layers can be converted to real text in PhotoWebber.

The Layers tab - very similar in appearance to the layers palette in Photoshop - includes thumbnails and information about each layer in the active PhotoWebber session.

The name of this tab is the name you assign to the HTML file to be created when you build the page. If you have not yet assigned a name to your HTML page, this tab's default name is Index.

If you are working on a page with frames and more than one HTML file, separate tabs will display for each frame's HTML file. If you have not yet assigned names to your frame's pages, these names default to Frame1, Frame2, and so forth.

Layers may be visible or hidden, may contain text, graphics, color areas or placeholders, and may include sub-layers for button states. Rollover, click-state, and popup layers are listed below the main button layer and with slightly smaller boxes than regular layers.

To hide or show a layer, in the layers window, click the eye icon to the left of the layer to hide that layer. Click the icon again to show the layer.

Icon	Description
	Layer is visible and will be output when page is built.
	Layer is hidden will not be output when page is built.
	Layer is a button and has a rollover and (white with arrow) click state (red with arrow).
	Layer is Photoshop text, set to text.
	Layer is Photoshop text, set to graphic.
	Layer is text created in PhotoWebber.
	Layer is a color area and will be output as a solid color DIV or table cell.
	Layer is a placeholder and will be output as a DIV or table cell containing any HTML code in the Source HTML box.
	Layer is a Quicktime, Flash, Shockwave, or Java Applet.
Path and file name listed	Layer is a linked graphic.

The Layers tab displays the elements on the page in the same order as they were imported from Photoshop. Each additional graphic or text you add to the page goes on top of the layers that were imported or created previously. The layers at the top of the list are also "on top" or "in front" of the other layers in the Document window.

To change the order of a layer, in the layers window, select the layer to move and drag the layer up or down in the list. Release the mouse button when the layer is in the desired position.

To move a layer to a new location on the page, drag it to the desired location in the Document window or enter the desired X and Y coordinates on the Properties window.
To delete a layer, highlight the layer in the Layers list or Document window and select Delete Layer from the Layers menu.

Media

Media are the GIF, JPG, PNG, and HTML files that will be created by PhotoWebber when you build your page. The media are listed on the Output View tab.

What's the difference between media and layers? While media are created based on layers, there is no one-to-one relationship between media and layers. That is, there may be one or several graphic files created from any individual layer. PhotoWebber automatically determines the optimal number of graphic files necessary to create the web page, so you can continue to work with layers in PhotoWebber just as you do in Photoshop.

Any settings you assign to a layer are automatically assigned to all of the graphics created from that layer. For example, when you assign a hyperlink to a layer or set a layer to GIF format using the web safe colors, each graphic - or each piece of the layer - created by PhotoWebber will also be web safe GIF files and clicking any portion of the image will activate the hyperlink.

Some examples of when PhotoWebber creates multiple graphics from a single layer include:

Graphics crossing frame boundaries - Browsers open a separate HTML file and graphics in each frame. Therefore, the pieces of layers included in each frame's HTML page are created as separate graphics by PhotoWebber.
Table slicing with overlapping layers - When layers obscure portions of other layers so the visible image is not a rectangle, PhotoWebber will automatically slice the images to fit into rectangular table cells.

Real and Virtual Files - PhotoWebber defines all files as real or virtual.

Real files are files that exist on your hard drive. Real files may or may not have been created by PhotoWebber.
Virtual files are files that will be created by PhotoWebber when you build your page.

Icon	Real/Virtual	Description
	Virtual	HTML file.
	Virtual	Graphic will be output as GIF.
	Virtual	Graphic will be output as JPG.
	Virtual	Graphic will be output as PNG.
	Virtual	Folder exists on drive or will be created by PhotoWebber on build.
	Real	Folder exists on drive and was not created by PhotoWebber.
	Real	File is on drive and was not created by PhotoWebber. (Also used for dragging files to a different folder.)
	Real	Multiple files selected. Used for dragging files to a different folder.
	Real	File exists in root folder and will cause a conflict when the page is built. For information on resolving conflicts, see Managing File Conflicts.

If you are working on a page with frames and more than one HTML file, separate folders are automatically created for each frame.

Web pages without frames consist of a single HTML file and its related graphic elements.
Web pages with frames consist of several HTML files - one for the frameset and one for each frame - and the graphics used in each frame. When you create a frame in PhotoWebber, a new folder is automatically assigned to contain the associated HTML and graphics files.

You can also create folders to organize the files according to your preference. Each element can then be moved into a different folder as you wish.

To rename a virtual file or folder, select it on the Output View list and type the new name in the Properties window.
To create a new folder, select Output, New Folder. Change the name if desired.
To move a file to a different folder, highlight the file in the Output View list and drag it onto the desired folder.

The Properties Window

Top

Each element in PhotoWebber has properties. Depending on what type of element is selected, the Properties tabs change to reflect the available settings. If nothing is selected, the properties for the HTML page appear in this window.

To modify the settings for the selected element, choose the appropriate tab on the Properties window and enter your changes.

Each type of layer and media - graphic, text, placeholder, color area, file and folder - has different settings available. These settings are covered in detail in the chapters on Graphics, Text, and HTML.

The Warnings Window

Top

PhotoWebber includes a "back-seat driver" or interactive warnings window that alerts you when an action you have performed or a setting you have chosen is incompatible with a specific browser or operating system. This helps eliminate cross-browser and cross-platform inconsistencies.

Along with each warning, PhotoWebber gives available suggestions for fixing the problem. If you want to make the suggested change, simply click the suggestion.

There are several types of warnings in PhotoWebber:

Icon	Warning Type	Description
	Warn	The warn icon means this has been identified as problematic. It is always associated with a specific layer / action / frame, etc. and almost always has solutions provided by PhotoWebber.
	Informational	The page icon mean for your information. Informational warnings are advisory, but not directly connected to something being "wrong".
	Warn - Fixed	The gray warn icon means the issue has been corrected. For example, clicking the Closest Safe Color button changes the item to a web-safe color and the warning is marked as "fixed".
	Informational - Fixed	The gray page icon means the issue has been corrected. For example, if text is dragged on a frameset border, a gray informational warning appears. PhotoWebber has fixed problem and moved the text to a legal area. There is no outstanding issue, but the warning is shown to explain why text cannot be placed there.

For a complete list of warnings with descriptions, see the Appendices.

You can configure PhotoWebber to warn you when selections you make are incompatible with specific browsers by setting Preferences.

Setting Preferences

Top

PhotoWebber allows you to set preferences and settings for a variety of options. These include Output Settings (settings that apply to pages and files that are built), Warnings Settings (settings that apply to the types of warnings you want to receive), and Preferences (settings that apply to basic PhotoWebber operation).

Output Settings

Output settings apply to the way files and folders are created when you build a page in PhotoWebber. These settings also define the default settings for optimizing GIF, JPEG and PNG files created by PhotoWebber.

Changes you make to Output Settings apply to the current PhotoWebber session.

To restore the original configuration of any Settings or Preferences, click the Restore Factory button at the bottom of the window.
To save the current settings as your defaults for all future PhotoWebber sessions, click the Make Default button at the bottom of the window.

To change Output Settings, select Edit, Settings, Output.

Select one of the following tabs: File Management, General, GIF Settings, JPEG Settings, or PNG Settings. Make the desired changes and click OK.

File Management

Name Conflict - Set the action when duplicate file names exist.

Mark - When this option is chosen, PhotoWebber will display a conflict icon on files that have name conflicts with existing files. To manually resolve a conflict, select Manage, Conflict and choose one of the available options.
Overwrite - When this options is chosen, new files built by PhotoWebber will automatically overwrite and replace existing files with the same name.
Don't Output - When this options is chosen, files are skipped on build if existing files have the same name.
Rename - When this options is chosen, files are automatically renamed if existing files have the same name. The HTML code generated is automatically updated to reflect the new file names.

Delete Previous Build - When checked, automatically deletes previous build when a page is rebuilt.

General

HTML Suffix - Sets the file extension to HTML or HTM.
Support Netscape 4 - When checked, all HTML files built will Include special code to address the Netscape 4.x "redraw bug" by forcing Netscape to redraw the page when the browser is resized (Netscape 4.x does not reposition layers properly when the browser is resized) and to add a layer tag (ignored by Internet Explorer) when color areas are used in style sheet layout (Netscape 4.x does not support color backgrounds for DIV tags).

GIF, JPEG and PNG Settings

Select the desired optimization settings for each type of file (settings for individual files can be changed in the Properties window).

GIF - Select a palette, number of colors, and dithering option.

You can specify the palette to be used, either "adaptive" (based on the actual colors used in the layer) or "web 216" (the web-safe colors). To reduce the size of each GIF file, PhotoWebber automatically reduces the number of colors in the palette to the actual number of colors used. You can force PhotoWebber to write GIFs with fewer colors by specifying the maximum number of colors to use.

You can also specify whether or not dithering is used. When dithering is checked, PhotoWebber will apply a random pattern of pixels to simulate color blending. When dithering is unchecked, each pixel will be mapped to the closest color in the selected palette. In images with color gradients, this may produce visible banding.

PhotoWebber automatically drops the background color of GIF files for better display quality on 16-bit monitors and for improved rollover and popup quality.

JPEG - Select the desired degree of compression.

You can specify the quality of the graphic, with higher quality associated with less compression, lower quality with greater compression.

PNG - Select a palette, number of colors, and dithering option.

You can specify the palette to be used, either adaptive (based on the actual colors used in the layer) or "web 216" (the web-safe colors). You can further limit the number of colors to be used by specifying the maximum number of colors to use.

Warnings Settings

Warnings Settings allow you to choose wish issues you are concerned with and have PhotoWebber's "back-seat driver" alert you when you have chosen settings that conflict with your particular areas of concern. (For a complete list of warnings with descriptions, see the Appendices.)

Changes you make to Warnings Settings apply to the current PhotoWebber session.

To restore the original configuration of any Settings or Preferences, click the Restore Factory button at the bottom of the window.
To save the current settings as your defaults for all future PhotoWebber sessions, click the Make Default button at the bottom of the window.

Warnings Categories

Web safe colors - Check this to activate warnings when non-web safe colors are selected. PhotoWebber suggests fix of selecting the closest web safe color.
Cross-platform issues - Check this to activate warnings when selected features are not cross-platform compatible. PhotoWebber suggests fixes that are cross-platform compatible.
Cross-browser issues - Check this to activate warnings when selected features may cause problems with specific browsers. PhotoWebber suggests fixes that are cross-browser compatible.
Layer position issues - Check this to activate warnings when layer positioning will cause problems in HTML. These warnings are informational. PhotoWebber automatically performs fixes.
Internal PhotoWebber issues - Check this to activate miscellaneous warnings. These warnings concern actions that may be problems, and should be examined carefully by the user.

Browser Support

3.0 Browsers and later - Check this to activate warnings when selected features are not compatible with HTML3.
4.0 Browsers and later - Check this to ignore warnings about 3.0 browser incompatibility.

Preferences

Preferences define the general settings for PhotoWebber and allow you to define browsers for previewing your web pages before you build the final files.

Changes you make to Preferences apply to all PhotoWebber sessions created or opened after the changes are made.

General

Country - Reserved for future localization.
Language - Reserved for future localization.
Layout - Select the default Layout option.
Root Directory - Select the default Root Folder. Type in the path or click "Set Root Directory..." to point to a folder on your hard drive.

Browsers

Add browser - Click to add another browser to the Preview in Browser menu.
Remove browser - Highlight a browser and click to remove it from the Preview in Browser menu.
Change browser - Highlight a browser and click to select a different program to run when this item is selected from the Preview in Browser menu. For example, use this to when you upgrade to a new version of Netscape if the program file is in a different folder or has a different name than the previous version.

Note: When you add a new browser, the name will default to the name used on your computer. For example, if you add several different versions of Internet Explorer, they will all have the same name. Most likely you would prefer to see the version number as part of the name: Internet Explorer 3.0, Internet Explorer 4.5, Internet Explorer 5.0. You can easily change the name of any browser in the list.

To change the name:

Double-click the browser in the list
Type in the new name
Click OK to save the new name in the list

Appearance (WINDOWS ONLY)

Individual Panes - PhotoWebber 1.0 style. Each PhotoWebber window (Document, Layers, Warnings and Properties) is a separate window with a separate close box. In this appearance setting, use the View menu to hide or show individual windows.

Midi Panes, Tiled - All PhotoWebber windows are represented as panels inside one window.

	Use the minimize, maximize and close buttons to control the Document window.
	Use the expand and collapse buttons to control the other windows.

Midi Panes, Windows - All PhotoWebber windows are represented as sub windows inside one main window.
In this appearance, use the View menu to hide or show individual windows.

Use the minimize, maximize and close buttons to control the sub-windows.

Top

Copyright � 2000 - 2001 Media Lab, Inc. All rights reserved.
PhotoWebber is a trademark of Media Lab. Photoshop is a registered trademark and GoLive is a trademark of Adobe Systems Incorporated.
All other trade names are trademarks of their respective owners.