EOS template and Photoshop CS/CS2/CS3

General • Installation • First Gallery • Options • Part 2 »

General

The EOS HTML template can be used with Adobe Photoshop CS, CS2 and CS3.

Before you start using the EOS template you should get comfortable in generating web galleries with Photoshop. You can access the help page if you choose:
Help → How to Create Web Images → To create a gallery of images for the web

Not all of the gallery options can be used with the EOS template. See below for detailed instructions.

Installation

The installation requires two steps and is very simple. All you have to do is to download two ZIP files and extract their content in the right place.

The files are named eos_common_v25.zip and eos_v25_pscs.zip and can be downloaded from the Yahoo! group's Files section. It's important that their folder structure is still intact after the file extraction!

Common Files

Now you have two folders named "galleries" and "EOS". The first one is your EOS project folder and can be moved to wherever you like. It only contains the "eoscommon" folder. Later it will be the place where all your web galleries reside. There is more information if you click the link above but it is not essential that you read it before you create your first gallery. Example setup:

C:\www\galleries\

Template Files

The next step is to install the "EOS" folder. Locate the Adobe Photoshop application directory and move the "EOS" folder into the Presets\Web Photo Gallery folder. The EOS template will then appear as choice within the Web Photo Gallery interface. Example for a Windows PC:

C:\Program Files\Adobe\Adobe Photoshop CS2\Presets\Web Photo Gallery\EOS\

Template files are files which get scanned by the web gallery generator. Tokens get replaced and rules will be applied to build a complete HTML gallery. There exists only one copy per template file in the template folder. However during the HTML generation process the image template gets applied to every image in your gallery, resulting in multiple image files (one per image) in the output folder.

Template File Type	File name in the Template Folder	File name(s) in Output Folder	Amount
frame	FrameSet.htm	index.html	1
index	IndexPage.htm	ThumbnailFrame.html	1
image	SubPage.htm	pages/<image-name>.html	one per image

There are two more template files available: Thumbnail.htm, which gets incorporated into the image file, and Caption.htm which remain unused.

Your first Gallery

The installation is now completed. Before you generate a new gallery you have to do two things. First go to your EOS project folder and create a new output directory for your gallery. In the example below the output directory is called "event01":

C:\www\galleries\event01\

Then go to the EOS template folder and open the directory "copy_these_files". Copy all files from the folder (not the .htm template files) into the newly created output directory ("event01" in the example above). This step is essential, the gallery won't work without these files. Unfortunately Photoshop does not do this automatically like all other applications.

Next is the decision if you want to start the gallery using Bridge or Photoshop. Adobe Bridge is a file browser that comes with CS2 (or as stand-alone product) and has many advantages but it may slow down your computer due to the additional memory usage. In Photoshop you can only build a gallery from all images in a directory while Bridge lets you select and sort the images before the generation process. Furthermore you have a visual control over your images and easy access to the IPTC/XMP metadata, which is very important for the EOS template. More on that topic later.

OK, you have decided to use Bridge. If you select one or more images, only these will appear in your web gallery. If no image is selected the gallery will contain all images of the shown folder. Then start the Web Photo Gallery as shown in the screenshot below:

Tools / Photoshop / Web Photo Gallery...

Photoshop will be opened and the following dialog appears:

Choose "EOS" from the list of Styles. Then click on the Destination button and locate the newly created output folder, called "event01".

Note: If you only have Photoshop CS or decided agains Bridge then you can open this dialgue also in Photoshop with File → Automate... → Web Photo Gallery.... Then select Folder as source and hit the Browse... button.

Gallery Options

Underneath you can see a dropdown list with various Options. Select one after the other and read the associated explanations. The first one is called General. Make sure that the Extension is set to .html.

Next one is Banner. Here you can enter the Site Name which will be used as gallery title and will show up in the window frame, the page header and in the order. The Date field can contain any ID you would like to attach to your gallery. It will be invisible to your client but can be used to group your orders. One day you scroll through a list of your orders and might want to sort them by event date. That's what this field is for. Unused fields are greyed out.

In the Large Images option dialogue you can set the size and quality of the web images. The settings shown below are good for a start but if you opt for highest quality you can also resize the images with a action beforehand (together with a watermark and USM) and disable the resize feature here. Make sure the Copyright checkbox is enabled, otherwise you cannot define "Special Items" in the gallery. More on that later.

In the options for Thumbnails you can set the thumbnail size. The only advise is that you do not set 120. That is the size of banner ads on web sites and some "smart" software on your client's PC (e.g. Norton Firewall) may suppress all images with that height! Make sure that the checkboxes next to Title and Copyright are checked, otherwise the EOS features "sections" and "special items" do not work.

The settings for Custom Colors can be ignored. The colors can be defined in an external style sheet file, not in this interface.

The last options is Security. Here you can define a text that will be used as a watermark in your pictures. The result can be pretty ugly because there is no outline or background color. That means dark text on a dark part of your image will be unreadable.

But you can always set it to "None" if you do not want a text watermark in your photos. Another option would be to show just a big © symbol with a low opacy value. See below for a sample setting:

That's it. Hit the OK button and watch the images being resized. When the gallery is finished your default browser will be opened and the gallery shows up.

What's next?

Now go to your EOS project folder, named "galleries" in the example, and upload it to your website. If you place it in the top folder on your seb server then you can access it with your browser using a link like this one:

http://www.mywebserver.com/galleries/event01

Once you got that far you can r e l a x . From now on we are able to support you over the web and clean up any mess you might have made during the customization process...

The next step is to explore the EOS settings file in the "eoscommon" folder and make some simple changes. Read the customization intro for more information. Reload the gallery in your browser to see your changes and you're right into the customization process. Note that there are some very helpful scripts in the "help" subfolder. It's also a good idea to have a look at the FAQ (only for clients). It's highly recommended that you read the first entries, marked with BEGINNER. It will save you a lot of time in case you have to deal with a script error.

Part 2 of the Getting Started article will show you how to control the EOS temlplate with IPTC/XMP metadata.

Top