Working with Graphics

PhotoWebber supports several different graphics formats:

• You can convert complete layered Photoshop files directly into web pages
• You can import individual Photoshop layers
• You can add existing graphics to your page designs

After importing Photoshop files and other graphics, PhotoWebber provides the tools necessary to fine-tune your design, apply effects, and define web objects such as buttons and frames.

Importing Photoshop Files

Importing Other Graphics Files

Graphics Optimization and Properties

Adding Hyperlinks

Creating Buttons and Menus

Using Graphics as Page Background Tiles

Dividing Large Layers into Smaller Pieces

Table Slices and Style Sheet DIVs

Building and Exporting Graphics

Importing Photoshop Files

Top

PhotoWebber is a conduit between Photoshop files and the web. Layered Photoshop files are imported, fine-tuned, and converted to web pages. PhotoWebber reads Photoshop files as complete designs, with all layers intact. Because other applications which optimize graphics for the web can only use pieces of the file that have been predefined by the graphic designer, the PhotoWebber route from Photoshop to the Web is much shorter.

Layers may be imported from any number of Photoshop files. You can import all layers of a Photoshop file, or specify one or more layers to import.

To import a complete Photoshop file:

Select File, Import Graphics. Select the Photoshop file to import. Click Open.

To select and import individual Photoshop layers:

1. Select File, Import Graphics. 2. Select the Photoshop file to import.
3. Click Select Individual Layers for Import to choose one or more individual layers to import.
4. Click Open.
5. Highlight the layer or layers you wish to import.
6. Click OK.	Note: You can update layers from the Photoshop file at any time by selecting Layers, Refresh from File.

What Photoshop properties are used by PhotoWebber?

PhotoWebber imports and interprets the following Photoshop features:

• Layers - When you import a Photoshop file, you may select to import all of the layers in the Photoshop document, or you may select individual layers to import. (See above.)
• Position - Each layer imported by PhotoWebber retains the precise positioning defined in Photoshop. Measurements are determined from the upper-left corner of the page.
• Layer effects and Layer Styles - Layer effects and layer styles are seamlessly imported into PhotoWebber 2.0
• Layer transparency and layer masks - The layer transparency is used to simulate transparency in the JPG, GIF, and PNG files output by PhotoWebber. While JPG supports no transparency, GIF supports single-color transparency, and PNG supports alpha channel transparency (however, this is not yet supported by browsers), PhotoWebber can simulate full antialiased transparency by compositing layers with those below it and with the page background to create a final image that looks exactly like the original layers in Photoshop.
• Layer names - Imported with each layer. The layer names are used to name the JPG, GIF, or PNG files that are output when you build your page. In addition, named layers can be used to automate button rollovers and popups.
• Layering order - Layers are imported in the same order as they were in the Photoshop document.
• Hidden layers - Are imported, but are not output when the page is built unless they are made into visible layers in PhotoWebber.
• Text - PhotoWebber imports Photoshop text layers as graphic images and maintains the text information should you decide to convert that layer to a type object. If you convert a Photoshop text layer to real text, you lose the text formatting applied in Photoshop and the text is output as part of the HTML document rather than as a graphic file. Do not render text layers in Photoshop if you want to convert them to text in PhotoWebber.

What Photoshop properties are not used by PhotoWebber?

The following Photoshop features are not supported by PhotoWebber.

• Grouped layers - PhotoWebber ignores layer grouping. Each layer in the group is imported as a separate layer.
• Adjustment layers - PhotoWebber ignores adjustment layers. Layers beneath an adjustment layer are imported as if the adjustment layer were not present. The adjustment layer is not imported.
• Non-RGB color models - PhotoWebber only imports Photoshop files in RGB mode.
• Non-72dpi resolution - PhotoWebber will import a Photoshop file at any resolution. However, no conversion is done. The files are imported pixel-by-pixel. Web pages should be designed to the size of the user's browser. Standard screen resolutions are 640x480, 800x600 and 1024x768. Additional space is taken up by menus, tool bars, and status bars in different browsers. You should test all pages in a variety of browsers to determine how the Photoshop design will fit in each.

Keeping your Photoshop files

When you import graphics, PhotoWebber does not create or save a copy of these elements in the PhotoWebber file. It maintains pointers to the locations of the original files - called source files - on your hard drive.

When you open a PhotoWebber Session file, PhotoWebber first checks the original location of the imported graphics. If the file(s) are not found in their original locations, PhotoWebber will check in the folder containing the PhotoWebber Session file. If the file is not found in either of these locations, PhotoWebber prompts you for its location.

If you move a source file, PhotoWebber prompts you for its location the next time you open the file that includes that graphic.

If you delete a source file, PhotoWebber has no way to reference those layers and they not appear in the Document window or Layers list.

• If you make changes to Photoshop layers, those changes are also reflected in PhotoWebber.
• If you add layers to a Photoshop file, the new layers are not automatically imported.
• If you delete layers from a Photoshop file, they are also deleted in PhotoWebber.
• If you rename layers in Photoshop, they are deleted in PhotoWebber.

To import new or renamed layers see above.

You also need your original Photoshop files because other file formats, even when created with PhotoWebber, do not retain all of the image information. Some issues to keep in mind include:

• GIF, JPG and PNG files are "flat." Only Photoshop files can contain layers.
• Photoshop requires RGB images (images with 24-bit color, or 16 million colors) for many of its operations.
• GIF files can only save up to 256 colors and only support "on or off" transparency.
• Each time you save an image in JPG format, you lose some image quality due to "lossy" compression. JPG does a good job of compressing the image because it blends some of the colors together - but if you save a JPG several times, the loss of quality becomes very noticeable.
• JPG files do not support any type of transparency.

Working with Other Graphics Files

Top

In PhotoWebber, you can import or link to existing web graphics files. (You can also create Placeholders with HTML code to access files that are already on your web site such as rotating banner ads, flash animation files, QuickTime movies, or other special file formats. See Placeholders.)

PhotoWebber can import the following graphics formats, however there are some issues you should consider before deciding on how to use existing graphics.

• GIF - If you import an animated GIF, PhotoWebber imports only the first frame of the animation. If you want to include the actual animation on your page, use linking.
• JPEG - Because JPEG files are compressed with lossy compression (that is, colors are averaged and the image quality is degraded), you should only save files in the JPG format once. Each additional time you save the same image in JPG format, you lose additional color information. For best results, import original Photoshop layers or link to existing JPEG file.

Keeping your original graphics files

When you open a PhotoWebber Session file, PhotoWebber first checks the original location of the imported graphics. If the file(s) are not found in their original locations, PhotoWebber will check in the folder containing the PhotoWebber Session file. If the file is not found in either of these locations, PhotoWebber prompts you for its location.

See Keeping your Photoshop files for more information.

Importing existing graphics

Importing a file means that the graphical element is treated as if it were a Photoshop layer. That is, you can use this graphic in any way you would use a layer of a Photoshop file - for example, you can place the graphic across a frame boundary or overlap other graphics.

When you build your pages and graphics, PhotoWebber creates a new, optimized graphic file using the specifications you assigned in the Properties window.

Linking to existing graphics

In addition to importing files to build complete web pages, PhotoWebber also allows you to link to existing web graphics as part of your page layout. For example, your company may have an approved version of their logo that should be used consistently. In many cases, an artist has provided an approved version of the logo as a GIF file.

When you link to a GIF or JPG file, you are choosing to use the existing file on your hard drive rather than having PhotoWebber create a new file when you build the page. Linking to a file means that PhotoWebber does not create a new instance of that graphic when you build your page. The original file on your hard drive or web site is displayed in the browser.

Because you are not allowing PhotoWebber to optimize the graphic, you are limited in what effects and features can be applied to the graphic:

• Linked graphics cannot cross frame boundaries
• Linked graphics cannot be hidden or partially hidden behind other layers
• Linked graphics are always "on top" or "in front" of all other layers

To link to a GIF or JPG file: Select File, Import Graphics... Select GIF or JPG from the list of available file types. Make sure the Linked box is checked. Highlight the file to import and click OK.
When you link to an existing graphic, you cannot change the file format or adjust the image optimization settings. You can change a linked graphic to a regular PhotoWebber layer at any time by un-checking Linked Media in the Properties window.

Graphics Optimization & Properties

Top

All graphics layers in PhotoWebber have Properties. These properties are related to:

• Media - the file type and optimization settings for files that are output when you build a page
• Layout - the way the objects are positioned on the page in Style Sheet Alignment
• Interactivity - hyperlinks, atl-text and the layers that are used for rollover and click-states
• Popup/Menu - the layers that are used for popups and menus when the mouse moves over the button in the browser
• Location - the x-and-y coordinates of the element for manually positioning layers

To change the properties of a graphic:

1. Select the layer you wish to change.
2. In the Properties window, select the Media, Layout, Interactivity, Popup/Menu, or IMG tab.
3. Enter the new information.

Media

On the Media tab, you can define the type of file to be output (GIF, JPG or PNG) and define the optimization settings for each layer.

Linked Media - When you link to a GIF or JPG file, you are choosing to use the existing file on your hard drive rather than having PhotoWebber create a new file when you build the page. Linking to a file means that PhotoWebber does not create a new instance of that graphic when you build your page. The original file on your hard drive or web site is displayed in the browser. This option is not available for Photoshop layers.

Note: When you link to an existing graphic, you cannot change the file format or adjust the image optimization settings.

File Type - The default file format for all graphics layers in PhotoWebber is GIF. You can specify any supported format for each graphic that PhotoWebber outputs. The formats that can be used on the web are GIF, JPG (or, JPEG), and PNG (pronounced ping).

Name - Enter a name for the file if you do not wish to use the layer name.

Optimization Settings - Depending on the file format you select, you can specify different optimization settings. To see how the different settings will change the final graphic, select File, Preview to view the page in a browser.

GIF Palette - 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. Num. Colors - When an Adaptive palette is used, you can force PhotoWebber to write GIFs with fewer colors by specifying the maximum number of colors to use. Dither - 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.
JPEG Quality - You can specify the quality of the graphic, with higher quality associated with less compression, lower quality with greater compression.
PNG (8-bit PNG format) Palette - 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). Num. Colors - When an Adaptive palette is selected, you can further limit the number of colors to be used by specifying the maximum number of colors to use. Dither - 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.

Layout

On the Layout tab, you define settings specific to Style Sheet Aligned pages.

Note: The Layout tab is not available when Table Alignment is selected for the current page or frame.

Position:

• X Pos (Horizontal position) - Select Pixels when you want the graphic to remain the same distance from the left edge of the browser window; select Percentage to allow the graphic to shift left or right in relation to the other graphics in the frame as the browser is resized.
• Y Pos (Vertical position) - Select Pixels when you want the graphic to remain the same distance from the top edge of the browser window; select Percentage to allow the graphic to shift up or down in relation to the other graphics in the frame as the browser is resized.

Size:

• X - Select Pixels when you want the width of the graphic to remain constant; select Percentage when you want the width of the graphic to scale as the browser window is resized.
• Y - Select Pixels when you want the height of the graphic to remain constant; select Percentage when you want the height of the graphic to scale as the browser window is resized.

To see how the different settings will change the final graphic, select File, Preview to view the page in a browser. Resize the browser window to test relative position and size.

Border - You can create a border around the perimeter of any graphic layer in PhotoWebber:

The types of borders you can apply include:

• None
• Solid
• Dotted
• Dashed
• Double
• Groove
• Ridge
• Inset
• Outset

You can specify the border's width in pixels, its spacing (or offset) from the graphic, and its color. To see how the different settings will change the final graphic, select File, Preview to view the page in a browser.

Interactivity

On the Interactivity tab, you define the attributes that are included in the HTML IMG tag for the selected graphic, as well as choosing rollover and click state graphics if the layer is a button.

Rollver - You can select a layer for the rollover state of the selected layer. This layer will replace the button layer when the user points to the button with the mouse cursor. If you name your layers in Photoshop, PhotoWebber can create rollovers automatically.

Click - You can select a layer for the click state of the selected layer. This layer will replace the button layer when the user clicks the button. If you name your layers in Photoshop, PhotoWebber can create click-states automatically.

Alternate Text - You can add text that identifies your graphic during download (an aid for the visually impaired) and which, in newer browsers, acts as a popup if the cursor hovers above the graphic.

Hyperlink - PhotoWebber allows you to add a hyperlink to any graphic layer on the page.

• A layer does not have to be designated as a button to be used as a hyperlink. To add a hyperlink to any graphic layer, see Adding Hyperlinks.
• A hyperlink is not required to create a button. Any graphic layer can have rollover or popups assigned to it.

To add a link to a graphic, select a layer. In the Properties window, select the IMG tab and type in the name of a URL or HTML file in your root folder or click the Hyperlink Browse button to select any HTML file existing in the root folder.

You can also select the Target Frame for each hyperlink:

• This Frame (no target) - the new file opens in the same frame as the current file.
• This Frame (_self) - the new file opens in the same frame as the current file.
• Parent Frame (_parent) - the new file opens in the frameset containing the current frame.
• This Page (_top) - the new file fills the entire current browser window, replacing the current file.
• New Window (_blank) - the new file opens in a new browser window.

Popup/Menu

On the Popup/Menu tab you choose layers that will pop up when the user points to the selected layer with the mouse cursor. These pop-up layers may, optionally, be used as a menu.

If you name your layers in Photoshop, PhotoWebber can create popups and menus automatically.

Delay - Set the time, in milliseconds, that the pop-up will remain on the screen after the user moves the mouse cursor away from the button or pop-up.

Rollover Pop Up - Select layers to appear on the screen when the user points to the selected layer wtih the mouse cursor. These pop-up layers may, optionally, be used as a menu if they have hyperlinks assigned to them (see Adding Hyperlinks).

If you name your layers in Photoshop, PhotoWebber can create popups and menus automatically.

More About Rollovers and Popups

Rollovers	Popups and Menus
A rollover graphic replaces the button graphic when the user moves their mouse over the button in their browser.	A popup or menu graphic appears in addition to the button graphic when the user moves their mouse over the button in their browser.
A button can have one and only one rollover assigned to it.	A button can have any number of popups assigned to it.
The size and location of the button and rollover graphic are combined to create two graphics that exist within the same bounding box. If your rollover graphic is not the same size and shape and in the same exact location as your button graphic, a transparent area is created around both the rollover and the button so that both maintain their correct size and positioning when the rollover replaces the button.	Popup graphics may appear anywhere in the browser window and have no effect on the button graphic. Popup graphics may also disappear, or be hidden, when the mouse hovers over the button. If you are using Style Sheet layout, you can set the layout properties of a popup graphic just as for any other graphic layer.
A button can have both a rollover and popups assigned to it at the same time. As you can see, this system is flexible enough to allow more than one way to implement any button concept.

The easiest way to create buttons is by using the following naming conventions for your Photoshop layers:

Auto Button Creation

Just name your layers according to those simple naming conventions, check Auto Button Creation when you import your Photoshop file, and you're done - buttons, rollovers, popups and menus! It really is that simple. Preview the page in your browser if you don't believe it.
Whether you've automated buttons using Photoshop layer names, or created them manually in PhotoWebber, you can modify the behavior of rollovers and popups in the Button Properties window.	Check Preload to download the selected rollover or popup graphic when the rest of the page is downloaded. This provides faster response times when the cursor moves over the button. If preload is not checked, the rollover or popup graphic will not download until the cursor moves over the button for the first time. By default, popup graphics are hidden until the cursor moves over the button. Un-check Show if you want the selected popup layer to be visible when the web page initially displays and disappear when the cursor hovers over the button graphic.

Location

To exactly specify an element's x-and-y location within the Document window, select the layer and click Location in the Properties window.

To force a graphic layer to be a specific number of pixels from the upper left corner of the browser window, enter the appropriate coordinates here. By default, the x and y positions will be the same number of pixels from the upper-left corner of the browser window as they are from the upper-left corner of the original Photoshop document.

Note: Size options are only available for color areas and placeholders. (See Working with HTML for more information.)

Using Graphics as Page Background Tiles

Top

When a Photoshop file contains a solid color layer named "Background", PhotoWebber disables this layer and uses its color for the page background. When frames are created, they maintain the background color of the original page.

You can also specify any layer, GIF or JPEG file to be tiled as the background for any page or frame.

To create a tile background using a layer, select an HTML file in the Output View list or by clicking on an empty area in the Document window. On the Background tab of the Properties window, click the Tile drop-down list and select any layer from the list.

To create a tile background using an existing GIF or JPEG file, select an HTML file in the Output View list or by clicking on an empty area in the Document window. On the Background tab of the Properties window, click the Tile drop-down list and select File. The remaining process is the same as importing a GIF or JPEG as a layer or linked graphic.

Dividing Large Layers into Smaller Pieces

Top

If you have a large Photoshop layer that overlaps a large portion of your page, you can divide it into smaller pieces in PhotoWebber to create smaller web graphics. This does not change the layer in your Photoshop file.

This feature is particularly useful if the large layer contains small areas divided by large transparent spaces.

To divide a layer, highlight the layer then select Layers, Divide.

PhotoWebber will automatically isolate portions of the layer separated by transparent pixels and create separate web graphics.

Table Slices and Style Sheet DIVs

Top

PhotoWebber allows you to choose the best Alignment option for your specific web page and audience - Style Sheets or Tables. In either case, PhotoWebber handles all of the calculations and manipulations necessary to create the individual web graphics and HTML code. (For details on switching between Style Sheet and Table Alignment, see the Tutorials.)

Tables and slicing - When you select Table Alignment for your page or frame, PhotoWebber automatically calculates the best size and placement for each table slice - based on the size and position of each Photoshop layer and the necessary adjustments to optimize rollover and popup performance.

Each slice created from a single layer inherits all of the graphics properties and optimization settings assigned to that layer.

You can also adjust the size and number of table cells by changing the granularity.

1. Select an HTML page and the Layout tab in the Properties window.
2. Select Tables (HTML 3) and click Options.
3. Enter a number between 1 and 9999.
   Select a lower number for a more precise table. This means you will have more, smaller table cells.
   Select a higher number for a simpler table. This means you will have fewer, larger table cells.
4. Click Preview Table to see the outlines of the table cells in the Document window.

Style Sheets and DIVs - When you select Style Sheet Alignment for your page or frame, each layer in PhotoWebber will be output as a separate graphic with its own DIV tag.

For samples of Table and Style Sheet code generated by PhotoWebber, see the Appendices.

A note about 16-bit color:

To address this browser bug, PhotoWebber automatically drops the background color of GIF files.

Image with solid background color.

Image with solid background dropped (transparent background).

Note: As of this writing PhotoWebber is the only commercially available tool that addresses this particular browser bug and provides any sort of work around.

Building and Exporting Graphics

Top

After you have imported your Photoshop file, text, and any other graphics, you are ready to build your page. You can build everything at once, or you can build HTML and graphics separately.

• To build graphics, select Output, Build Graphics. Each element of the Photoshop file is output to a web-ready graphic.
• To output all of the graphics plus the HTML files to display pages as they were designed, select Output, Build All.
• If you have created frames, you can also choose to build files for an individual frame.

You can also export individual web graphics from PhotoWebber using the Export feature.

1. Select that layer or layers to export, then choose File, Export.
   If you have more than one layer selected for export:
   Choose Inter-Layer to create one web graphic including all of the selected layers merged.
   C hoose Individual to export each selected layer as a separate web graphic.
2. Select a background color and click Export. The graphics will export using the file format and optimization settings defined in the Properties window.

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.