Performance

Making your pages load & execute faster.

Use More JPEG

There is a fairly common myth that the JPEG file format should be used for photographs and just about everything else should be GIFs. Strictly from a compression standpoint this is bad advice. JPEGs compress smaller than GIFs in almost all cases, even graphics with a lot of solid color in them.

GIFs have the advantage of having tranparent empty pixels that don't obscure what is beneath them, whereas JPEGs are always rectangles and completely filled with graphic data. This means that GIFs make better buttons because they don't trip until the user mouses into the real graphic area of the button, not just the surrounding rectangle.

Since PhotoWebber is performing the compositing at the time of creation, you can freely use GIF or JPEG anywhere - buttons can be JPEGs, photos can be GIFs.

Our final advice when choosing graphic formats is to use GIFs for layers that have a lot of empty space in them (widely spaced letters, borders, etc.) and buttons, but use JPEG for everything else.

How to make a bunch of files be JPEG
From the Output View select the files that you want to be JPEG. PhotoWebber supports multiple selections. Then from the Media properties pane choose JPEG as the file format.

Using Preload

All rollover, click states, and popups have a preload check box. Turning this check box on will make the page load those graphics into memory before it load the whole page. The advantage of this is that your rollovers and popups will execute faster. The disadvantage is that your page will initially take longer to load and display.

Large Sites

Managing and building multi page sites with PhotoWebber

Very often you'll find that many of your pages are sharing a similar design and share a lot of elements with only the content area changing on each page. PhotoWebber is a great tool for building sites like these. This site was built in that fashion. Here we discuss tips for making that process go as smooth as possible.

One Photoshop File - Many Pages

When building multiple pages off of on Photoshop document, save each page from PhotoWebber as its own .pws file. Use the .pws file to remember which layers are supposed to show on a page. Use it to distinguish unique pop ups, etc.

Working this way, you can keep all of your graphics for your web site inside one Photoshop file. You can set up new web pages by simply making layers visible and invisible in PhotoWebber.

When PhotoWebber saves a PhotoWebber Session file (.pws) it does not save the graphic data into the file. Instead it just notes for every element which layer of which file it came from. This not only makes PhotoWebber into a great round-trip authoring tool, but also means you can save as many .pws files as you want without taking up much space. Each one will refer back to the original Photoshop document(s).

Another clever use of .pws files is to use one a sort of page template. Presumably most of the pages will not only have similar graphics but may have similar HTML settings (hyperlinks, graphic output formats, etc.). Make a .pws file that represents the common baseline for these settings. Then whenever you need to a make a new page open that .pws file and use Save As to give it a new name and then customize it into your page.

Use the Site Directory

PhotoWebber has the option of specifying a directory as the root folder for your site. When building multiple pages having this set will make it much easier to manage files, incorporate in other media, etc. It can be set individually in a document, or from the Preferences dialog you can specify a directory to be the default site directory.

Linking Pages Together

Once you start creating a lot of pages for your site, you'll need to start linking them together. PhotoWebber has an excellent way to easily perform this task. If your site directory has been specified then the hyperlink browser control opens a popup menu that mirrors the hierarchy of your site. This makes it very easy to link your pages together.

But how do you link pages to each other if they haven't been created yet?
Good question! There are two techniques for accomplishing this. First, if the site is relatively small, then just set up each page in a separate .pws file and build them without hyperlinks. Then go through each page in PhotoWebber linking them together, and use the Build HTML* command to rebuild each pages HTML without re-outputting the graphics.

*For those readers not familiar with PhotoWebber, it has three build commands: Build All, Build Graphics, and Build HTML. The last two commands build only graphics or html. Build HTML is very fast.

This second technique works well for larger sites. Create empty HTML files for your entire site before building any pages. Then, as you build each page you'll be able to link it to the dummy files. And each page you build replaces one of the dummy files with a real one. So when the last page is built the site is complete, linked together properly, and the dummy files are gone.

Incorporating Text and Other HTML

Web pages are rarely just graphics. Most pages need to include large amounts of discourse (like this one). But long text passages aren't anything we should be attempting in Photoshop, so how do you get them into PhotoWebber?

Placeholders
Probably the best way approach is to use a placeholder*. In PhotoWebber placeholders simply set aside space on the page for other HTML to be inserted. When using style sheets placeholders can be set to vertically expand to fit their content (the visible setting), stay the same size and have scrolling content** (scroll or auto), or remain fixed and simply crop any content that doesn't fit within the placeholder (hidden). If using tables then the cell will be expanded down to fit the content (like visible).
* the other way would be to use framesets and frames, which PhotoWebber also handles very well.
** the scroll and auto settings are not supported in Netscape 4.

If you've decided to use a placeholder, then the next question is when will it be populated with content? There are two standard ways of approaching this.

1. Build the page with an empty placeholder, and then open it in the HTML editor of your choice and put the remaining content into the placeholder at that time.
2. Build your other content in an HTML editor first. Then, in PhotoWebber, import that content into the placeholder and then build the completed page.

Many users prefer the first method because its quicker and it has a workflow that looks like this:
Design in Photoshop => PhotoWebber => Content in HTML Editor. This methodology has one disadvantage in that if the original Photoshop design is changed then all the work done after PhotoWebber (but not in PhotoWebber itself) must be redone. Of course, if faced with this problem a savvy developer could salvage the content done in the editor and jump over to the second method

Personally, this author prefers the second because I like having my flowing content in a file that's removed from layout. And since PhotoWebber is great for cranking out test pages, those pages will be more complete. The second method requires that the design and the other content be complete before building the final pages. Its workflow is more like this:
Design in Photoshop =>
                                                      PhotoWebber
Content in HTML Editor =>
If for any reason the Photoshop design changes, then I'm still just seconds from rebuilding that page, since the content is separate and still intact. If, on the other hand, the content has to change then I can either just jump over to the first method and make the changes using an HTML Editor on the page thats already built. Or, I can make the change in my separate content file, open my .pws file in PhotoWebber, load in the changed content, and use the Build HTML command to only re-output the HTML, leaving the graphics alone.

Round Trip Production

Making Your Photoshop File Your Master Template

PhotoWebber is not a true round-trip html production tool, because it cannot open web pages and edit them. However, PhotoWebber, with its deep reach into HTML capabilities and instant web page creation can move the round trip cycle closer to your design cycle, rather than having them be irreconcilably separated.

When PhotoWebber saves a PhotoWebber Session file (.pws) it does not save the graphic data into the file. Instead it just notes for every element which layer of which file it came from. This is great for roundtrip development. Users can use PhotoWebber to import a Photoshop file, set their HTML settings, and build a web page and save their .pws file. Then, if some of the layers in the Photoshop file change, they can simply open the .pws file, which will load the new changed layer, and rebuild their web page.

Refresh From File
PhotoWebber 2 has a new command Refresh From File. This command will retrieve the selected layers from the original Photoshop file. This command is great if you are working in Photoshop and PhotoWebber at the same time. Change a layer in Photoshop, save, and then in PhotoWebber select the layer and refresh - voila!

PhotoWebber Conveniences

This next section is a hodge podge of useful features that PhotoWebber has that many users don't know about. Of course, users are rarely in PhotoWebber for more than a few minutes at a time, so they don't often have the opportunity to explore.

Selected Layer Import
You don't have to import an entire Photoshop document. If you want just some of its layers then those can easily be gotten. Simply choose import, and at the bottom select the checkbox we've hilited below. After you open the file you'll be presented with a list of all the layers in the file and you can choose which ones you want to import.

Selected Layer Export
Just as you aren't required to import a whole Photoshop file, neither are you required to build a whole web page if all you want are a few of the layers saved out. From within PhotoWebber select one or more graphic layers, and from the file menu choose Export.You'll be presented with the compositing and saving options you see here.

Browse Button
Whenever setting hyperlinks, placeholder content, QuickTime, Flash, or Shockwave content there is a nifty little button that looks like this: . This button will bring up a hierarchical popup menu that lets you navigate your site organization looking for the appropriate media. It's a quick and convenient way of setting hyperlinks, etc. It's a lot quicker than a file dialog, plus it will remind you to keep linked content within the organization of your site.

Cool Graphic Tricks

Hiding A Layer
You may have seen this in the Samples portion of our site. This little geegaw was done using layer hiding. Most HTML pages use the metaphor of showing to do popup menus and the like, and PhotoWebber is no exception. But PhotoWebber also makes it easy to hide layers revealing what is underneath. For those of you who just joined our program, PhotoWebber uses a layered metaphor for development of pages, but when pages are built it will build flat tables as easily as it develops CSS layered pages - and all without the user having to make one slice. If you want to see this same geegaw done in tables, look here.

PRODUCT | BUY | RESOURCES | SUPPORT | NEWS & REVIEWS | PRESS | HOME   [ edit ] [ add ]