In Photoshop its possible to easily create interactive photo albums or presentations; be it, Html tables to flash picture galleries for the web. A useful feature for creating online portfolios for personal websites or simple products showcase.
Step 1
First off, create a new folder for where all your images will be stored in and name it ‘Web Gallery.’ You could also use Adobe Bridge within Photoshop to source your images. But we’ll be sticking with the first method right now. Launch Photoshop and open a new document Ctrl+N.Go to File>Automate>Web Photo Gallery.
Step 2
In the Web Photo Gallery Dialog box, select the Gallery Styles as ‘Flash – Gallery 1.’ The thumbnail of every other Gallery appears on the right of the Dialog box.
Step 3
For your source files, under Source Images choose the folder you created earlier on when you click on Browse. Locate the folder, as in my case, the folder was stored in C://Documents and Settings>My Documents>Picture Gallery.
Step 4
For where the final output will be saved, click on Destination to locate your prefered folder or create a new folder by clicking on ‘Make New Folder’ and rename it as ‘Web Gallery’.
This is what the directories of where your folders are located would look like:
Step 5
Still within the Web Photo Gallery Dialog box, under Options choose General and the Extension as .html or .htm.
Step 6
Select Banner and type in the Site Name to whatever you want as your title. Fill in the other fields with information required.
Step 7
Choosing Large Images, you’ll be able able to set the size and picture quality of your images. The state of quality of your images determines their download time when they are live on your web server.Under Title Use you might want to check Title and Description or anything else. These options displays additional information on images when click on.
Step 8
For the Thumbnails (that would appear below the main images), set their Sizes to Large and resolution to100 pixels. Now click OK to generate the gallery.
Step 9
The web gallery launches automatically from your default web browser. If Internet Explorer is your default browser, you may encounter a problem.
Here, you’ll be confronted with a security warning restricting the use of Javascripts that the web gallery needs to run. Just click once on the security warning’s tab and on the pop-up that shows up, click on ‘Allow Blocked Content’ to get the flash web gallery running.
Below you have the flash gallery up and running. It also comes with a nice and smooth transition effect when navigating between images.
On the bottom right corner of the web browser window, are some simple controls . For instance, the button with the question mark when clicked on, reveals the metadata or information that you might have added or embedded in your image. Such information could include description, title and soon. These can be set under the Options: Security>Content: Custom Text. Here you’ll find basic text formatting options like font colour, size, type e.t.c.
You can also embed watermarks unto your images for copyright purposes by selecting Security under Options. (Note: the image below is not mine – its a free stock image from
www.sxc.hu. I’m using it for demonstration purposes alone for this post).
Other Customizations:
To add sound to your presentation or gallery, choose an mp3 file of choice and rename it ‘useraudio’ and have it copied. Head on to the directory where the Flash gallery style in use is (you may have to close Photoshop first). This should be inC://Program Files/Adobe/Photoshop CSx/Presets/Web Photo Gallery. Open the ‘Flash-Gallery 1′ folder and paste your mp3 file in there.
If you’re familiar with basic HTML coding, you further customize the outlook of gallery. Opening your ‘Web Gallery’ folder, select and right-click on the ‘Photos’ XML file and choose the Notepad or any text editing application you might have.
Everything editable in this open XML file. We are just going to edit the obvious – that is, the colour elements in the photo gallery.
For the gallery’s Background colour, change “#0F0F0F0″ TO “#FFFFFF” (white), the Banner’s colour to “#000000″ (black); here the gallery title, authors name,contact info and so on is turned to black. Save the file when you’re done.
The result below:
