Creating Frames and Setting Colors

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.

In standard web-design applications, frame design can be quite complex. First you have to decide where your frames will be, and what size they will be. Then you must create separate HTML pages for each frame. Finally, you assign a specific web page to be "inside" each frame.

PhotoWebber introduces drag-and-drop frames. 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.

In this tutorial we will create a page with frames.

1. Create a new document and import TUTORIAL2.PSD.

 

2. Create a frameset.

Web pages with frames contain several HTML files: one for the content of each frame and one that ties all of the frames together. This is known as a frameset.

From the Insert menu, select Horizontal Frameset Divider.

The frameset divider line will appear in the middle of the document window. Drag the gray line up so it is just below the black bar.

A folder and layers tab will be created for the contents of each frame.

3. Change the background color of the top frame to green and delete the green Color Area.

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. In this example, we want the background of the the top frame to be a different color.

  • First, select Frame 1 by clicking in an empty area of the frame background.
  • Then click the eyedropper on the Background tab of the Properties window and click within the green Color Area.
  • Finally, select the green Color area and delete it.

4. Resize the purple Color Area in Frame 2.

PhotoWebber automatically converts all layers containing rectangular areas of a single color into Color Areas.

Move the purple color area so it is centered behind the PhotoWebber logo graphic. Drag the resize handle to enlarge the color area past the bottom of the graphic and text.

To see how this page differs from the non-frames version created in the Instant Web Page Tutorial, build the page view it in your browser.

 

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.