Introduction

System Requirements

Prerequisites to Using PhotoWebber

What is PhotoWebber?

What PhotoWebber is Not...

What's new in version 2.0

Where to Get Help

System Requirements

Top

The following hardware and software is required to run PhotoWebber:

Prerequisites to Using PhotoWebber

While PhotoWebber is by far the easiest way to move PhotoShop files designs onto the web, a basic understanding of Photoshop and how the internet works are necessary to properly understand and use PhotoWebber.

PhotoWebber users need a basic understanding of the following:

• Creating multi-layered Photoshop files
• How to open and find files on a computer hard drive
• What the internet is
• What a web page is
• What HTML is
• What web graphics formats are (GIF, JPEG, PNG)
• How to get finished web pages transferred to a web server using an FTP program

Most, if not all of this information is available on the Internet. For a list of additional Resources and links to a variety of tutorials on the basics of web design, visit the PhotoWebber web site at www.photowebber.com.

Anyone creating web pages also need the following:

• An Internet connection
• A web server or a web hosting agreement with server space

These items are available through local and national ISPs (Internet Service Providers). For more information on what is available in your area, check with alocal computer store or yellow pages directory.

What is PhotoWebber?

Top

PhotoWebber is a new generation graphics production tool that takes the headaches out of creating web sites. PhotoWebber is a complete stand-alone application. It is not a plug-in for Photoshop.

Just as in print - where many designers and production artists started on typewriters and rubdown type and have successfully transitioned to Pentiums and True Type - now, in web development, designers and programmers can move from manual production to automated site design.

When the World-Wide-Web and HTML were first introduced, all elements presented in browsers were text-based. Words were displayed on screen with text links to other words on other pages. Original HTML editors were also text-based. Programmers wrote code that instructed web browsers how to display text on the screen, and what page to display next whenever a link was activated. Pages had to be viewed in the actual browser programs before the programmers knew if their code resulted in what they had envisioned.

A few people today still feel that text-based web pages have tremendous advantage over their graphics-laden counterparts. For the vast majority of web surfers, however, graphical elements add a level of enjoyment and ease-of-use that cannot be provided by text-only information displays. Just as illustrations and photographs are the first things readers tend to look at in printed documents, so graphics and photos on the web can draw readers’ attention to key points and help interpret complicated information.

But, with the introduction of graphics to web pages, the level of complexity increased tremendously. Newer HTML editors do provide some level of visual design features. Graphic designers are accustomed to working in programs, however, that were designed from the ground up to work with graphics. The many steps required to move graphics from design applications (such as Adobe Photoshop) into web-development applications (such as Microsoft FrontPage) and displaying them on-screen in web browsers (such as Netscape Navigator) do not always yield predictable results.

PhotoWebber eliminates the guesswork and manual steps in this process of moving graphics from concept to published web page.

As the first tool to automatically convert layered Adobe Photoshop files into finished web pages, each element of the Photoshop file is output to a web-ready graphic, complete with HTML code, to display pages as they were designed.

Now graphic designers are able to provide programmers with pre-assembled page templates and not worry about the elements shifting around to new locations when the HTML code is written. And, programmers are able to focus on critical programming aspects of the site, such as e-commerce secure transaction processing, instead of spending their time writing code to re-create designs that have already been laid out once in Photoshop.

With PhotoWebber you can:

• Create individual web pages
• Create a user interface or template for a complete web site
• Provide realistic site prototypes for clients to review online
• Design and test site layout and rollover button ideas

How does PhotoWebber work?

Top

With PhotoWebber, creating a web page is as easy as 1-2-3:

1. Design your layout in Photoshop
2. Import the Photoshop file in PhotoWebber
3. Let PhotoWebber build your web page

PhotoWebber integrates the process from design ideas to actual web pages - it is no longer necessary to chop Photoshop files into little pieces and reassemble them in an HTML editor. Everyone in the creation process benefits, for example:

• Because PhotoWebber translates Photoshop files into matching HTML layouts, designers work where they are comfortable without getting bogged down with technical details and worrying that their designs will not be interpreted properly.
• Because PhotoWebber translates Photoshop layers into browser-friendly elements, programmers work confidently knowing that the files they receive from designers will be in the correct formats and will display properly in browsers without further tinkering. And, because PhotoWebber produces fully commented and human-friendly HTML and JavaScript code, the programmer knows exactly what's going on underneath.

PhotoWebber eliminates the manual tasks no one wants to own by:

• Reading native-format Photoshop files
• Breaking Photoshop layers into web-ready objects
• Keeping the original position of all elements as the designer arranged them in Photoshop
• Understanding alpha channels and compositing graphics to simulate transparency in browsers
• Creating GIF, JPG, and PNG files from Photoshop layers
• Writing HTML and JavaScript code for page layouts and animated rollover buttons
• Providing the option to create HTML 3.0 compatible table layouts or use DHTML to position objects on the page

Who should use PhotoWebber?

Top

Who should use PhotoWebber? Anyone wanting to prototype or create graphical web pages without the hassles of manually converting complex graphics into web-friendly formats and reassembling pieces step-by-step in an HTML editor benefit from using PhotoWebber. Experts find themselves spending less time on manual tasks, allowing them to focus on the more critical design and technical aspects of their jobs. Even those who might never have contemplated building a web site before, might find themselves reconsidering:

• Graphic designers benefit because the easy-to-use visual environment they've become accustomed to in print and multimedia design is now available for web site design. In addition, they no longer have to be concerned that the designs they create might not be reproducible in HTML.
• HTML programmers avoid the confusion and misunderstandings that arise when they receive large one-piece graphic files from designers and must decide how to best display them in a browser - or, worse, when they receive bits and pieces of a larger graphic with no clue of how to put the puzzle together.

PhotoWebber easily fits into a wide variety of workflows and can help improve efficiency no matter what type of organization you have. Whether you build your site completely in-house, outsource your web design or production to an agency, or provide site design and programming services to outside clients, you'll find that PhotoWebber makes your job easier:

• Corporate web managers gain the confidence that the prototypes and comps they are shown will match the actual web sites that are developed. They also find that they save money by taking advantage of the creative Resources available in their agencies without paying for designers to perform manual labor.
• IT department staff discover that the demands on their time are reduced because in-house web developers no longer need to learn complicated technical processes before they can create their departmental Intranet pages.
• Agency project managers are confident that what they show their clients will match the end results. They are also able to offer production services at lower costs (and protect their profit margin) because so much of the graphics conversion process is automated by PhotoWebber.
• Small business webmasters realize that they can reduce (or even eliminate) costly programming by having their designers use PhotoWebber to create web site templates into which they can simply import content.
• Web site hosting operations benefit by smoothing the frustrating transitions that occur when a site prototype is developed by a designer at one agency, code is written by programmers at another, and the final site that is sent to the server does not match their clients' expectations.

What can PhotoWebber do for me?

Top

PhotoWebber can save you from many of the pitfalls that arise when web sites are developed manually.

Save you time -

• Speeds up site design by keeping each graphical element in the exact position it had in the Photoshop file
• Automates user interface and template production by saving linked layers as composited graphics and automatically generating buttons from specified elements in Photoshop files
• Replaces complex programming tasks, such as animating rollover buttons, with easy-to-use menus allowing you to spend your time on more critical aspects of your business

Save you money -

• Eliminates time consuming monotonous tasks and lets designers and programmers concentrate on the creative and technical aspects of their jobs
• Lets designers and programmers work in their areas of expertise rather than having designers trying to understand technical programming and programmers trying to understand the concepts of graphic design

Save you headaches -

• Eliminates double work from duplicating a Photoshop layout in tables or DHTML code
• Reduces learning curves. While you still need a basic knowledge of HTML to understand how your browser will display the pages you are creating and to make the correct choices in PhotoWebber’s configuration, the mechanics of putting the code together and piecing together your graphics is handled behind the scenes.

What PhotoWebber is Not...

What's New in Version 2.0

Top

User Interface Improvements - New user interface makes PhotoWebber easier and faster.

Automatic Pop-up Menus - Pop-up menus are automatically created using Photoshop layer names.

Added "clicked" State for Buttons - Buttons can have a different graphic assigned as a click state.

HTML Extensions - 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.)

Photoshop 6 Text Support - Photoshop6 text is recognized and can be set as a graphic layer to preserve formatting, or converted to HTML text.

Support for Layer Effects (PS5) and Layer Styles (PS6) - Layer effects and layer styles transfer seamlessly from Photoshop into PhotoWebber.

Layer Division - Divide large graphic layers into separate pieces to reduce graphics size and decrease download times.

Table Options and Cell Preview - Adjust table cell granulatiry to control the size and number of cells and preview the resulting table cells in PhotoWebber, without building HTML.

Interactivity Preview - Preview the results of button and pop-up menu animation inside PhotoWebber, without building HTML.

Export Layer(s) as Individual Graphics - Select one or more layers to export as a single web graphic.

Page Alignment - Pages created in PhotoWebber can be set to align Left, Right or Center in the browser window. These alignment options are available for both Table and Style Sheet layout pages.

Where to Get Help

Top

The following Resources are available at no charge to all registered PhotoWebber users:

Tutorials - Step-by-step tutorials covering all of the basic features of PhotoWebber can be accessed from the Help (Mac) or View (Windows) menu in PhotoWebber, in any browser by opening the files from the PhotoWebber application folder, or on the Web at www.photowebber.com.

Documentation - This documentation is provided in HTML and PDF formats. The HTML version can be accessed from the Help (Mac) or View (Windows) menu in PhotoWebber. The most recent documentation is available on the Web at www.photowebber.com.

Free Email Support - For information not found in the documentation or on the PhotoWebber Resource Center web site, email pw-help@medialab.com.

Disucssions and Mailing List - For updates, recent information, tips and more, sign up for our mailing list or visit our discussion boards.

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.