Photoshop: Make a Virtual Gallery


Create a virtual gallery of pupil work Using one of its automatic features, Photoshop makes it easy to build a web gallery with thumbnails and larger versions of images.

	The first step, as for any web page, is to prepare and organise all your relevant graphics in a single folder. Name the folder for the project theme e.g. cinderellas_revenge, or Xschool_gallery2005. All the images should be a manageable size and optimised for the web (the tutorial *Get Organised!* explains how to do this).

	MAC	PC
	Although Photoshop is not a DTP (desktop publishing) or web authoring program, the work can still be contextualised with a short description of the project and some information about the pupils who took part. This can be achieved by creating a new canvas with a plain background colour: from the File menu select New and set the dimensions to roughly the same size as the other images in the gallery. My example is 300 x 300 pixels with dark grey type on on a white background. Choose the Type tool and select a font, colour, point size and style on the Tool Options menu bar. Type your text as usual, but note that you must press Enter/Return on your keyboard for a line break and that there is no spell check. Save the text as a GIF or JPEG picture file to your gallery folder and optimise it for the web as with all the other graphics.
	Give all the images appropriate file names, as these can be used by the wizard to label the pictures in the gallery. it is good practice to use an underscore or capital letter to join words in file names rather than gaps, which can be problematic for some browsers. In the example pupils' names are used. Change file names by right-clicking (PC) or Control-clicking (MAC) on the current name and selecting Rename from the context menu. The screenshots show files in Windows 2000 and Windows XP.

	With an image open in Photoshop, add further details for labelling it in the gallery by selecting File Info from the File menu. In the dialog box that appears type a title, artist/author's name and a caption. Any of these details can then be chosen to label the thumbnails or larger images.
		When these preparations are complete, choose File > Automate > Web Photo Gallery to open the Web Photo Gallery window. Select a page layout from the Styles drop down menu. The example shows the Horizontal Frame option, which is previewed in the small window on the right.
	In the lower half of the Web Photo Gallery window click on each of the 4 headings in the Options menu in turn and choose a format for each - Banner, Gallery Images, Gallery Thumbnails and Custom Colours. (The final item Security is not particularly relevant to school websites).

	Options
		This menu gives choices for 5 options: banner, large and thumbnail images, colours used and security such as copyright markings.
	Options - Banner
	The Banner option allows you to name the gallery/exhibition/project, add a date, identify the artist and choose a font and font size for the heading. Try different combinations to find the layout you prefer, as it's simple to edit formatting and style after viewing the finished page.

	Options - Large Images
	The Options menus also allow you to resize images at this late stage, rather than at step 1. For example, with Large Images selected from the Options menu click in the Resize Images check box and choose a size from the menu or drag the slider. You can also choose a JPEG compression rate from the JPEG Quality drop down menu. In the Titles Use section you have a choice of Filename, Caption or Title to label the pictures from the data you added at step 4.
	Options - Thumbnails
	Selecting the Thumbnails Option allows you to set other layout features such as captions for thumbnails.
	Options - Custom Colours
	On the Options menu you can also select Custom Colours in order to format background, font, banner and hyperlink colours. Click the Web Colours check box to enable a more limited palette of web safe colours for older browsers.
	Options - Security
	This Option enables you to prevent any unauthorized use of images by placing text across pictures to protect copyright for professional photographers or artists. In this case I chose Content > None.
	Finally, select the source and destination folders for the gallery: Click on the Browse button and navigate to the folder you made to store the gallery pictures. Select the folder and click OK. Click on the Destination button and navigate to the folder where you want to store the finished web page and HTML files. You can create a new folder at this stage, if you have not already prepared an empty one, by selecting New Folder, naming it and clicking Open.

	You are now ready for the Photoshop wizard to build your gallery using its actions technology. This script runs automatically, opening, compressing and saving all the photos from your source folder to the destination folder. It organises images, pages, thumbnails and web pages into sub-folders, as in the example below, and launches your gallery in your browser for you to preview the results and test the links. The gallery can then be published to the school website or intranet. To make changes close the web page to return to Photoshop and select File > Automate > Web Photo Gallery again. The screenshots show the gallery files in Windows 2000 and Windows XP.

Browser views of the finished gallery with different styles applied.


© RKM 2002- 2007
Home - Animation - Video - Projects - Image Manipulation - IWBs - Interactive - Presentations - Multimedia Tutorials - Other Tutorials - Art Links - Gallery - About