I’m old enough to still remember the ubiquitous ‘black’ folio case. In fact I think my chiropractor remembers it as well; I have been a regular client ever since. It wasn’t just the weight of 30–40 matted prints that made the task difficult; it was the unwieldy size of the case that made touting the folder from office to office a daunting task.

I’m happy to say that there is a new set of imagemakers (professionals and amateurs alike) who have no knowledge of my folio-carrying woes. The notion of the folio still exists and remains the stable marketing device of most creative professions, but the black case may be gone forever. In its place is a cyberspace folio, accessible any time, and place, for potential clients or admirers, armed with nothing but a common web browser.

Open 24/7

The web is a ‘godsend’ for photographers who are eager to display their pictures. An on-line gallery space which contains biographical and résumé details, as well as a folio full of examples of past work, is like having a personal promotions manager on hand 24 hours a day, 7 days a week. Never before has it been possible to share your photographs with such ease or obtain this much exposure of your talent and abilities for such little cost.

Gone are the days where you have to send your precious images to far flung parts of the country in order to share that precious moment of little Johnnie’s first step. A few simple clicks from anywhere in the world and Johnnie’s agility and prowess can be admired by all.

Photo Site Styles

Photo sites come in all shapes and sizes and no matter whether you are part of a multinational imaging company or a weekend shooter who wants a few images on a page, a little design thought early on will make for a better site. Just as there are various styles of digital imaging magazines there are also different forms of the humble photo website.

A little time spent surfing will have you easily identifying different types of sites made by photographers. There are those that are full of shooting information – facts and figures, others that display a design-based approach, and the most popular – the virtual gallery. Time spent on the web will also provide you with the opportunity to see what works and what needs to be avoided when creating your own site.

Using what you learn from your on-line roaming make some decisions about the style of site you want. Are the pages full of information about you, your history and your past work, is the site a sales point for your images or is your web presence designed to ‘wow’ your friends and family with the vibrancy and energy of your imaging and/or design skills?

Building Websites – the Basics

All websites are constructed of several different components or elements. These separate pieces, which include text, images, buttons and headings, are called web assets and are arranged, or laid out, in groups on individual pages. When viewed on screen these pages appear as a single document, much the same as a wordprocessed page. But unlike a typical printed page the components that make up a website remain separately saved files and the web page document itself simply acts as a series of pointers that indicate where elements are to be found and how they look and where they are placed on the page.

You can view the source code or HTML text of any page by selecting the View > Source option in your browser. What you will see is a series of instructions for the location and layout of the page parts and their files. When a viewer looks at the page, the browser software recreates the document, finding the component files and laying them out as instructed by the HTML code. As you start to make your own pages this is an important concept to remember, as you will need to keep track of all the various files that are used throughout the site and ensure that they are available when requested by the browser.

Creating Web Pages without Writing HTML

Until recently, creating your own web pages required budding net designers to have a good working knowledge of HTML. Now there are many software programs on the market including Elements that allow you to create a web page or site without ever having to resort to HTML coding.

There are essentially two approaches. You can:

• Choose to use a package designed specifically for web page production such as Microsoft FrontPage and use Elements to optimize your pictures and make your buttons and headings, or
• Employ some of the great automated web production features bundled as extras in Elements.

Either way you get to concentrate on the design not the code. Thank goodness! In this chapter we will look at both approaches by firstly creating a multipage website using the newly revised Elements’ Photo Gallery feature and then go on to create all the web assets for a second site in the program before laying them out in a web production program.

10.01 Elements’ Photo Galleries Websites

Suitable for Elements – 5.0 | Difficulty level – Basic | Related techniques – 10.02, 10.03 | Menu used – File

The Elements Photo Galleries tool (previously called Web Photo Gallery and HTML Photo Gallery tool) is a purpose-built feature designed to take a selection of images and produce a multi-page fully linked gallery site in a matter of a few minutes. The updates of the feature over the last few editions of Elements mean that users now have even more choice and control over the way their site looks and works. You now can choose between basic thumbnail and gallery type sites or new animated or interactive designs. All sites produced by the feature use Adobe Flash technology and so the pages load quickly and the animated components in the productions work smoothly. The feature contains a variety of settings in its two dialogs that allow the user to select the style of the site and then to customize both the look of the pages as well as the information presented. Viewers navigate round the site, from image to image or back to the front page via a series of arrow buttons or, with some designs, the images automatically change in a slide show format. Once completed the finished site can then be shared with the world; Elements 5.0 is the first version of the program where the often confusing task of uploading to an ISP or web server is also handled inside the feature. So with as little as five mouse clicks it is possible to select, create and upload your very own professionally designed web gallery.

Choose the Images

In Elements 5.0 you can multi-select the images to include in the gallery from the Organizer workspace before opening the Photo Galleries feature. Don’t panic if you forget an image though as you can also choose to add or remove photos from inside the feature’s first dialog. Select your images and then choose File > Create > Photo Galleries.

As no edit or enhancing options are available inside the Website Production feature make sure that the photos that you want to include are already enhanced before starting the process.

Select a Website Style – Screen 1

The Photo Galleries feature contains two wizard based-screens. The first is used for selecting the type of website that you want to create and the second is where you customize the presentation before uploading it to the web. The photos that you selected in the Organizer workspace are automatically imported into the first screen and are listed on the left of the dialog. If you have sourced the photos from an Elements’ collection then the sequence of images is preserved during import, otherwise the images are listed top to bottom in the same order that they were selected (left to right) in the Photo Browser. The order can also be adjusted once the files are in the dialog by click-dragging individual thumbnails up or down the list.

Now on to selecting the template to use for the site. Elements 5.0 has a choice of three different types:

Web Galleries – Traditional thumbnail and gallery image sites with plenty of customization of the site’s look as well as the option to save your custom changes as a new style for later use.

Animated – Fully animated and themed sites with less customization opportunities but plenty of wow factor.

Interactive – Again less options for altering the look of the design but many of the templates here are truly dynamic and provide the option for the user to control the way that the pictures are viewed. Very cool!

The site type is selected at the top of the screen from the drop-down menu. This choice will alter what is displayed in the rest of the dialog. Selecting Web Galleries will display two sets of thumbnails. The upper ones allow you to choose a Type, or basic look, and the lower set displays color or style variations of this type. Choose the Type first and then the Style. Choosing the Animated or Interactive templates displays a single set of thumbnails as well as a preview of the website in action in the lower section of the dialog. Once you have made your selection click the Next Step button.

Adjust the Website Settings – Screen 2

The second screen in the wizard contains custom settings, site preview and share and save options. The number and type of customization options will depend on the website template that you have selected. For all templates you can add in a site title and contact details for the photographer, however when selecting the web galleries you will find that you have many more customization options. With this set of templates you can also adjust site colors, border and button opacity, connection speed optimization, slide show settings, and caption and file name inclusion.

Previewing Your Site

Once you have completed adding in details and adjusting the site’s settings you can preview the results via the preview space in the top right of the screen. You may need to press the Refresh button to display any recent changes. To see how the site will look and function in a real web browser click the Preview in Browser button and a temporary version of your site will be displayed in your computer’s default browser. You may also be prompted to download the latest Flash plug-in, if you don’t already have it installed in your default browser.

Sharing the Site

The only job left now is to share your masterpiece of web design with the world. This used to be a tricky task involving complicated procedures and extra bits of utility software but Elements 5.0 has thankfully streamlined the process. Now the Photo Galleries feature also includes three quick ways to share your website (plus a non-share or purely save option). The choices are listed in the Share To drop-down menu at the bottom of the dialog and include:

Photoshop Showcase – Upload to a free on-line sharing area provided by Adobe Photoshop Services.

My FTP Site – Transfer to your own ISP or net space provider.

CD – An option for burning the gallery directly to a CD.

Do Not Share – The option used for just saving the gallery.

Creating Individual Web Assets Using Photoshop Elements

Now that you have seen how to create pages and their assets automatically using the Web Gallery let’s take a little more control of the process by manually creating each of the major assets using Elements. We will then lay out the results of our labor in a web production package to create our final site.

10.02 Optimizing Photos for the Web

Suitable for Elements – 5.0, 4.0, 3.0, 2.0, 1.0 | Difficulty level – Basic Related techniques – 10.01 | Menus used – File

The skill of making a highly visual site that downloads quickly is largely based on how well you optimize the pictures contained on the pages of the site. The process of shrinking your pictures for web use involves two steps:

• Firstly, the pixel dimensions of the image need to be reduced so that the image can be viewed without scrolling on a standard screen. This usually means ensuring that the image will fit within a 640 × 480 or 800 × 600 pixel space
• Secondly, the picture is compressed and saved in a web-ready file format. There are two main choices here – GIF and JPEG.

The best way to optimize your pictures for web use is via the Save for Web (Editor: File > Save for Web) option in Elements. This feature provides before and after previews of the compression process as well as options for reducing the size of your pictures, all in the one dialog. Using this feature you can select the file format, adjust compression settings, examine the predicted file size and preview the results live on screen.

To create a typical ‘thumbnail and gallery’ site you will need two different versions of your images – full screen size images suitable for use as gallery pictures and small thumbnails that can be laid out together on an index page. To make these resources you will need to size and compress each image twice and then save the finished files into two separate folders titled ‘thumbnails’ and ‘gallery’. Make sure that the gallery images are no bigger than one full screen and that the thumbnails are small enough to fit several on the page at the one time.

File Formats for Images on the Web

The standard PSD or Photoshop Elements file format is not suitable for web use; instead several different picture types have been developed especially for on-line work. The two most common are JPEG and GIF.

1. JPEG, or JPG, or Joint Photographic Experts Group, is a file format specially developed for photographic web images. It uses a lossy compression technique to reduce files to as little as 5% of their original size. In the process some of the detail from the original picture is lost and ‘tell-tale’ artifacts, or visual errors, are introduced into the picture. The degree of compression and the amount of artifacts can be varied so that a balance of file size and image quality can be achieved. More compression means smaller file sizes, which in turn means poorer image quality. On the other hand less compression gives larger files of better quality JPEG images that can contain millions of colors rather than the comparative few available when using GIF. The format has massive support on the net and is the main way that photographers display their web pictures.

2. GIF, or the Graphics Interchange Format, has had a long (in internet terms) history with web use. It has the ability to compress images mainly by reducing the numbers of colors they contain. For this reason it is great for headings, logos and any other artwork with limited colors and tonal graduation. It can also display pictures that contain areas of transparency and can be used for simple ‘cell-’ based animation. This format is not suitable for most photographic images.

How Big is too Big?

When you are producing your first web pages there is always the temptation to keep as much image quality in your pictures as possible, resulting in large file sizes and a long wait for your site visitors. Use the table aside to help you predict how long a web picture will take to download to your recipient’s computer.

Generally, a delay of 10–15 seconds for large gallery images is acceptable, but download times longer than this may cause your audience to surf elsewhere.

Pro’s Tips for good image compression:

•  Always use the Save for Web compression tool to preview the side-by-side images of the original and compressed picture.

•  For GIF images try reducing the number of colors to gain extra compression.

•  Always view the compressed image at 100% or greater so that you can see any artifacts.

•  For JPEG images carefully adjust the Quality slider downwards to reduce file size.

•  Do not sharpen the photos to be compressed. Non-sharpened pictures compress to smaller sizes.

•  Take notice of the predicted file size and predicted download time when compressing images.

10.03 Button Creation

Suitable for Elements – 5.0, 4.0, 3.0, 2.0, 1.0 | Difficulty level – Basic | Tools used – Shape tools, Type tools Menus used – Layer, File,

In their simplest form, the buttons on a web page are nothing more than a small graphic or picture file similar to those that we created as thumbnails in the last technique. The same process of careful sizing and compression used to help keep image files small is employed to ensure that buttons take up very little space and download extremely quickly – so in this regard they should be treated exactly the same as any other image. It is the step after these simple buttons are placed on a web page that makes them different from just another graphic.

During the web page assembly process the button images are positioned onto the page. Each image is then selected and linked to a web page or HTML file. This simple step converts the graphic from a static picture to a working button. When the page is displayed and the mouse pointer moved over the linked button, the standard ‘arrow’ cursor will change to the familiar ‘pointing finger’ to indicate that a link can be clicked at this section of the page. In essence, buttons are just hyperlinked graphics.

Animated Buttons – ‘Rollovers’

Not all sites contain simple buttons. In fact there are many pages that make use of animated or rollover buttons. Designed so that the button image changes as the mouse moves over it, this button style requires a little more planning and design. A new graphic needs to be created for each of the different mouse actions or button states and then these images need to be integrated into the web page via some simple ‘java scripting’. Don’t panic, there is no coding needed here as in most web layout packages. Simply input the file names of the different rollover button states into the dialog and the program handles the rest.

10.04 Effective Headings

Suitable for Elements – 5.0, 4.0, 3.0, 2.0, 1.0 | Difficulty level – Intermediate Tools used – Type tools | Menus used – Layer, File

Headings, which are usually placed at the very top of the screen, provide a title for the page, or site, and sometimes include a series of buttons called a menu or button bar. Like buttons this web asset is usually created as a graphic and then positioned on the page using a layout program such as Adobe GoLive. Text and images are often combined to create the heading and even though the text remains editable in the original file, the final design is saved as a picture in JPEG or GIF format. In either of these two forms the text becomes just another picture element.

Keep in mind that just as much care needs to be taken when making and optimizing headings as with any other graphics, as the speed that your page will display will be based on the combined file size of all the page’s assets.

Animated Headings

In addition to creating static headings it is also possible to make animated banners using the Save As GIF features in Elements. Adobe has merged traditional techniques with the multi-layer abilities of its PSD file structure to give users the chance to produce their own animations. Essentially the idea is to make an image file with several layers, the content of each layer being a little different from the one before. The file is then saved in the GIF format. In the process each layer is made into a separate frame in an animated sequence. As GIF is used extensively for small animations on the net, the moving masterpiece can be viewed with any web browser, or placed on the website to add some action to otherwise static pages.

The GIF file is saved via the Save for Web feature. By ticking the Animate checkbox you will be able to change the Frame Delay setting and indicate whether you want the animation to repeat (loop) or play a single time only. This dialog also provides you with the opportunity to preview your file in your default browser. Keep in mind when you are making your own animation files that GIF formatted images can only contain a maximum of 256 colors. This situation tends to suit graphic, bold and flat areas of color rather than the gradual changes of tone that are usually found in photographic images. So rather than being disappointed with your results, start the creation process with a limited palette; this way you can be sure that the hues that you choose will remain true in the final animation.

10.05 Making Seamless Backgrounds

Suitable for Elements – 5.0, 4.0, 3.0, 2.0, 1.0 | Difficulty level – Intermediate Tools used – Selection tools, Clone Stamp | Menus used – Filter, File

The HTML language has a specific feature designed for including backgrounds with your pages. As you can imagine, using a full size image for a background would greatly increase the file size and therefore the download time of your pages, so in their wisdom, the early web engineers included the ability to tile a small graphic pattern over the whole of the background of each page. Using this method, a small, highly optimized picture can be repeated in a grid over the expanse of the whole screen, giving the appearance of a seamless background with little download time cost. Using the Offset filter (Filter>Other>Offset) in Elements you can create a special background graphic containing matched edges that will seamlessly tile across a whole web page. Select a section of a suitable image. Copy and paste the selection as a new document. Apply the filter using offset settings that are exactly 50% of the dimensions of the image and choose the Wrap Around option. This displays the edges of the tile in a cross in the center of the image. Use the Clone Stamp tool to disguise the joins by merging similar areas and textures together. To finish save the file in JPEG format using the Save for Web feature. With the tile made you can now select it as the background image in your web layout program.

10.06 Using Background Matting

Suitable for Elements – 5.0, 4.0, 3.0, 2.0, 1.0 | Difficulty level – Basic | Menus used – File

Most photos that are optimized for use on the internet are saved in the JPEG format. As part of the construction process of a web page, the pictures are placed on top of a colored background. The JPEG format does not contain a transparency option and so when an irregularly shaped graphic is saved as a JPEG and placed onto a web page it is surrounded by a plain colored box, usually white. Background matting is a technique for adding the web page color to the background of the object at the time of web optimization. When the matted object is then used to create the web page, it appears to be sitting on the background as if it was surrounded by transparency. The transparent pixels surrounding the object are replaced with the matte color and the semi-transparent pixels are blended. The Matte option is located in the settings area of the Editor: File > Save for Web feature.

10.07 Creating Downloadable Slide Shows

Suitable for Elements – 5.0, 4.0, 3.0, 2.0, 1.0 | Difficulty level – Basic Menus used – File

Version 2.0 of Elements introduced a PDF slide show making option. The feature proved so popular that Adobe introduced two slide show features in version 3.0 for Windows – Simple and Custom. Elements 5.0 continues this development and the program now contains a common Slide Show Editor interface which can produce multiple different types of slide shows. The feature contains a host of options that allow users to create true multimedia slide shows, complete with music, narration, pan and zoom effects, transitions, extra graphics and backgrounds and titles.

Photoshop Elements 5.0 contains a new workflow for creating slide shows. Previously you had to choose the type of presentation you wanted to create from the onset; the new approach centers all slide show activities around a single editor interface and it is only at the time of outputting that you choose the type of slide show that you want to create. In this way you can create (and save) a single slide show project and then repurpose the presentation in many different forms (on-line, DVD, PDF slide show or direct to TV) by simply selecting different output options. For more details on how to use the Slide Show Editor see Chapter 13.

10.08 Assembling the Site

Suitable for Elements – 5.0, 4.0, 3.0, 2.0, 1.0 | Difficulty level – Intermediate Related techniques – 10.02, 10.03, 10.04, 10.05, 10.06

Using the last few techniques you will have created images, thumbnails, page heading, buttons for navigation and a background tile. It is now time to bring all these parts together with the aid of a web page layout program.

The most well known of these types of software packages are Adobe’s Dreamweaver or GoLive and Microsoft’s FrontPage. They work in a similar way to desktop publishing programs in that they allow the user to lay out images and text before publication. Unlike DTP software though, the end designs are meant to be viewed on the web rather than the printed page.

Even though these big name packages lead the field, there are more economical options and even some free programs that provide the basic functions needed to construct the pages. In particular Netscape Composer, which is part of an older release of Netscape browser programs called the Communicator Suite, is an example of a simple web layout package that contains all the features needed to create a simple multi-page website. What’s more it can be downloaded and used for free. Alternatively you may find that your well-used word processor is now so ‘web aware’ that it is more than capable of laying out and linking the files and pages in your site. Some of the larger hosting companies such as www.tripod.com supply basic layout and design features on-line to their subscribers. Using their step-bystep screens you can create and lay out a series of linked pages and then publish the whole site in a single setting. This feature is great for first-time web producers as the template-driven interface takes a lot of the guesswork out of the process. You can customize text, headings and images but the basic design elements and layout are fixed.

10.09 Uploading the site

Suitable for Elements – 5.0, 4.0, 3.0, 2.0, 1.0 | Difficulty level – Intermediate Resources – Web link to www.tripod.com | Related techniques – 10.08

With pages created it is now time to put your site on the web. You will need to secure drive space on a machine that is permanently connected to the internet. Such space is provided by specialized businesses called Internet Service Providers (ISP). They host the files that make up your site. You will also need to obtain a web address. This is used to enable web surfers the world over to locate and view your pages.

Before going out and buying the space and web address check to see if the company you are currently using for access to email and web browsing includes some free space as part of the monthly dial-up charge. Most of the bigger ISPs provide 10–20 Mb as part of their dial-up services as well as a web address which combines their domain and your name, usually in a form such as ‘www.isp.com/philipandrews’. If you don’t have an internet connection, or you browse via a network at work or school, then you can obtain an address and some storage space from any of the many free hosting companies. Simply search the net using a ‘free hosting’ as your subject to get a list of candidates. Most provide a few different products at various prices along with their free hosting plan. These companies pay for their free provision by including banner advertisements at the top of your web pages.

With your space and address secured, it is now time to transfer your site, with all its images, buttons and pages, to the host computer. Until recently this task was handled by an FTP or File Transfer Protocol program. This utility connected your computer with the ISP machine. Files and folders could then be copied from one machine to the other. Most of the larger ISP companies now provide a web page interface for transferring or uploading your files. You simply locate the Upload option in the File Management section of the members’ pages for your ISP and then browse and select the files to be transferred. Click the Upload button and a few moments later the files appear on the ISP’s computer.