Using PhotoWebber, Photoshop designs are made into web pages within seconds, and require little to no effort from the user.
Two Steps
Using PhotoWebber is typically a two step process.
First, a Photoshop
file is imported. As it imports PhotoWebber is analyzing it, looking for
button rollovers, popup menus, the documents background color, solid areas
of color that can be defined in HTML, and much more.
Next the Build
All command is chosen and PhotoWebber builds the page. It outputs
every GIF or JPEG, writes the HTML, programs the buttons. Pretty much
everything needed to make a complete working web page. That's it - you
are done!
Comps and test pages usually just use the two step process. Users who
are deploying a final web page may user PhotoWebber's other features in
between the two steps to polish their page. For instance, hyperlinks and
URL destinations for buttons will be assigned, compression settings for
files may be set, or QuickTime or Flash media may be added to the page.
PhotoWebber has a rich environment for building complete web pages.
Why You
Need This
The advantages of the "instant web page" are legion. It can
change your workflow, letting you build comps, experiments, and test pages
as the design develops rather than doing it all at the end. The ease and
power of PhotoWebber mean that very sophisticated web development is within
reach even if you know no HTML at all.
If you are a seasoned web pro then PhotoWebber is heaven sent, because
the HTML it creates is simple, clean, and direct. With PhotoWebber you
can get over the tedious hump of slicing, compositing, and layout and
get to the heart of your work.
In
Photoshop: make another layer, name it the same as your previous layer,
but put _r at the end of its name. (For example,
your layers might be named Resources and Resources_r)
In
Photoshop: add one layer that is the menu background. Place that layer
below the two menu items and be sure it intersects them. Name that
layer the same as your trigger layer, but with _m added to
its name. (For example, your trigger might be named
Resources and your menu background would be named Resources_m)
When
using PhotoWebber users are shown what files will be created when the
page is built. Users can create folders and organize the files into those
directories. Or, optionally, they can specify a directory on their hard
drive to be their site directory. Then they can drag files into
the directories and subdirectories of the site folder. No files or folders
are created until the page is built, so users are free to shuffle and
move files without consequence. Once a page is built, users can choose
an Erase Last Build command and then move files freely again.
). For any conflicting file users can elect to change the name themselves,
have PhotoWebber do it, have that layer/file not output, or simply overwrite
the existing file. These choices can be made on files singly, or across
the board for all conflicting files.
If
clients change their 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 designs at any time without having
to rebuild separate HTML files for each frame just to move a single item.
PhotoWebber
2 outputs much cleaner tables than previous versions and is really focussed
on keeping the number of cells and graphics to a minimum. PhotoWebber
2 also introduces a new setting called table granularity which determines
the minimum size that any cell can be. And, PhotoWebber 2 has table preview
so you can see the table that is going to be generated in advance. If
it is not to your liking then you can manipulate the granularity (or more
drastically, move graphics) until it is.
One
of PhotoWebber's most powerful features is also its most overlooked. As
has been mentioned, PhotoWebber analyzes your Photoshop file while importing.
Along with button states and interactivity PhotoWebber is looking for
opportunities to optimize. If PhotoWebber sees that a graphic is rectangular
and of a solid color then it automatically converts that layer to a Color
Area. When a Color Area is outputted it simply defines the rectangle of
color using HTML, rather than outputting a graphic file.
