«sad.ark.tutorials.remote.rollovers»

CUSTOMIZING WEB PHOTO GALLERIES FROM PS TO GL

My wife is a scrapbooker. So, what to do with digital photos? Print them out just to decorate them? No I say! Make them available for everyone on acid free, non-discoloring web pages! The best way I know of is to use PhotoShop's Automate Web Photo Gallery command. The only downside– I don't like the existing templates. Or, what if I want to make the photo pages look like part of my company website? Well, let's walk through a quick and easy way using GoLive! No, really, this rocks!

Step One - Working in the Shop

This is what we are going to do: we are going to use PhotoShop's most generic template, and my favorite at that, the SIMPLE layout. I have placed all the photos I want to use in a folder called tutorial photos. I've made another empty folder called webphotos. This is where I will have PhotoShop export the web photo gallery.

Now, In PhotoShop go to File > Automate > Web Photo Gallery. Select the simple template. It will look like this:

Adjust your settings for Banner, Large Images and Thumbnails. Don't worry about Custom Colors. We will take care of all that on the GL side of things. Now, when PS is done, it will launch the web site to proudly show you it's prowess in generating a fine photo gallery for you. Here is what mine looks like:

Example One

Step Two - From PS to GL!

Next, we need to bring GoLive into the mix. To make this example simple, I am going to make a new site so we don't confuse our photo gallery with an existing site. However, it is just as simple to bring this into an existing site if you have one. The steps are basically the same and I'll give a quick once over for that too after this.

So, now that I have my new site, it will look like this:

NOTE! Our new site will come with a page called index.html. We need to change this to another name because we are going to be bringing in a new page called index.html. You can see that I have renamed mine above to something meaningless since I will delete it next.

Now go to the folder that we set to hold the pages exported from PhotoShop. Mine is the webphotos folder I showed in the first step. Open your folder and drag all the files INTO your site file in GoLive. You may see a little window popup like this:

Hit OK and let GL update it's site file with the new pages we are bringing in from PS. Now our site window will look like this:

Notice our old index page that we renamed is in bold. This means that GoLive is using this page as the root, or home page of your site. Since we don't want that, we are going to tell GoLive to use our new index page as the home page. Select the new index.html page in the site window and go to the inspector pallet. Select the page tab of the inspector and select the Home Page box. This tells GoLive that we want to use our selected page as the new home page for the site.

Now simply delete the old page and we're done here.

Quickly, if you have an existing site that you will be bringing the pages into, I suggest one of two options. In your site, make a new folder to hold your web photo gallery and then drage the pages that PS exported into that folder, OR, just drag the actual folder that we told PS to use for our pages INTO your site file. In my example it is the webphotos folder:

No need to mess with changing the index.html file since we won't be at the same level. OK, Move on peple.

Step Three - Let the assimilation begin!

Now we get to the fun part! We are now instantly, well almost instantly, going to assimilate all our pages to reflect the desired look of our site by using CSS! I have covered to some great extent how to create and apply a style sheet to pages in your site. So I don't have to go through all that again. Please see the tutorial for the creation of and applying of style sheets HERE. Or, feel free to use my style sheet. Since I have allready set this template sheet up, simply drag it into your site file and proceed. Grab it HERE. Feel free to change the colors to whatever you wish!

I've allready gone through the process on my end and saved the style sheet to my site file. Now, to apply it to our pages, simply select the pages in the aptly named pages folder that PS made for us. Here is what my site file looks like now:

Notice my style sheet called 'myphotostyle.css'. Simply select the pages you want to apply this style to, as I show above, and open your CSS window by goint to Window > CSS (in case you don't know where it is and have not had a look at the other tutorial). Next, click on the arrow popup menu as I have shown below. Any style sheets you have in your site will show up. Select the style sheet you want to apply to your pages. Then, click the ADD button. INSTANTLY all your pages now have been assimilated to the new look! Now repeat this for the index.html page and you're finished!

Now, if you decide you want to change the colors of the page background, the text, the tables, anything, all you have to do is change the style sheet and ALL your pages will be updated! Sweet. Now this is what my pages look like:

Example Two

Step Four - Erm... About those previous & next arrows...

Em Let's say you really don't like the navigation arrows that PS puts on your page. Let's fix them. I've made my own navigation buttons here:

Name them previous.gif, home.gif and next.gif. Then drop them into the images folder that PS created when it exported your pages. Replace the old images. Now your new navigation images will be in your pages! Try it by downloading mine. Save the above images to disk and then drop them in the images folder of your web photo gallery and see how it works! Here is the final example with our new buttons replacing the old:

Example Three

Notice how the buttons all look squished? Yeah. Me too. Now that really sucks. PhotoShop exports it's pages with the images for navigation at a hard-coded size. In this case 30x30. You could go through each page and simply click the 'use image size' button for each image shown here:

But that would suck. I swear I used to be able to do this before PS7. Perhaps not. So for now, I'll leave this step in just for information but you may want to avoid it. I will see if I can find a way to do a search and replace to correct this. If I can get it to work, I'll amend the tutorial. Anyway, have fun with this!

Step Five - Drinking a nice Coke

That's right. Go ahead. You've earned it.