Photoshop for the web: part II

Having a professional website to showcase your photography is an essential tool that every photographer needs. However, when it comes to presenting your portfolio, taking the pictures often seems to be the easy part. One problem that arises is choosing your best shots. Remember that quality comes before quantity, and a potential buyer is not going to sift through hundreds of your photos. A handy tip is to make prints (small in size and cheap), lay them out on the floor, and make your selection. Most people find this easier than ranking them on screen.

Another problem is that you have no control over the conditions in which your images are going to be viewed — you are entering uncharted waters. There is only so much you can do in presenting your images in the best light. In the previous instalment we discussed the basic steps to get your images online: sizing, colour management, choosing the right file format, and file compression. In this article I will discuss website favicons, image slicing, the new Generator for exporting, and last but most importantly, safeguarding your images.

Designing a website favicon

You will have seen them many times, those tiny little icons on the left edge of your web browser’s address bar. They’re called favicons, short for ‘favourite icons’. They do a great job in giving your website a memorable, distinctive identity. Just think of the symbols for Google and YouTube. 

If you want to design your own favicon, you first need to download a plug-in that lets Photoshop save the file in the ICO file format. Telegraphic.com offers this as a free plug-in. Once you’ve expanded the downloaded zip file, you need to drag the file to the Photoshop plug-in folder, restart Photoshop, and you are ready to go.

You might want to spend some time researching a number of websites to see what others are doing, and how effective their favicons are.

The main challenge is to brand your website with a 16×16-pixel graphic. That’s all they give you — no more, no less. You might consider using part of your logo, or your company’s initials. The rest is easy.

To save yourself some eye strain, start with a 64×64-pixel design, and then downsize it to 16×16 pixels. If it looks blurry, run it through the Unsharp Mask filter, then choose File > Save As, pick ICO from the format drop-down menu and name it ‘favicon’. Finally, you need to upload the file to the root level of your website.

Slicing web pages and the Generator

If you use Photoshop to design a web page mock-up, either your own or for a client, the Slice tool comes in handy. Once you slice up your design and assign different hyperlinks to navigation bars, you’ll get a good sense of how the navigation will feel in the finished product. 
You can also slice an image to add hyperlinks to certain parts of a single image, which creates an image map. If a web page is very image heavy, you can make it load a bit faster by chopping images into smaller pieces. This used to be a common use of the Slice tool, but is less popular now since fast internet connections are becoming the norm.

Once you’ve created an image or design and want to chop it up, grab the Slice tool (it looks like a scalpel and lives behind the Crop tool) and draw the pieces by hand. A more convenient way is to divide the image with guide lines to let Photoshop do the work, and break up the image into rectangles. Use the Rulers (Ctrl+R) and pull out horizontal and vertical guide lines, then head for the Options bar of the Slice tool and click Slices from Guides.

If you work with layers you can also choose Layer > New Layer Based Slice to make Photoshop create a slice of whatever is on the active layer, for example a button graphic. Photoshop will label and number the slices for you, but you can rename them. There is plenty you can do with slices: resizing, rearranging, aligning, dividing (yes, you can slice a slice), combining, hiding, locking, etc. Eventually you’ll want to add a link, which will transport visitors to a particular web address. Double-click the slice, and in the resulting Slice Options dialogue box enter the full web address into the URL field.

Finally you’ll want to save your slices to use on the web. Use the File > Save for Web command to set the file type, compression, and other options, and you are ready to go.
You’ll probably only work with slices if you are brave enough to design your own website. The same applies to exporting your web graphics with the new Photoshop Generator, which I’ll briefly mention here.

Once you’ve finished designing your imagery for your website, you need to export those graphics from Photoshop into a web-design program of your choice. That’s where the Generator comes in. The main advantage of using this tool is that it lets you specify the quality setting and size, on top of the exported file’s name and format. For example, the file name product.jpg5 will export the graphic as a JPEG file with a quality setting of 50 per cent (on a scale of 1–100 per cent). Similarly you can set a specific image size through a prefix. Once you decide to tackle your own web design, you’ll discover many more of the Generator’s bells and whistles. 

Protecting your images

One of the downsides of digital technology is the ease with which files can be copied. We want to show our work, but don’t want to have it stolen off our website. The best way to protect your images online is to add a watermark — a logo or text on top of the image, or embedded invisibly. This is to let any would-be thieves know that you’re onto their game. However, if this watermark is too bold, or right in the middle of the image, it will also deter any potential buyer.

One solution is to use Photoshop’s Digimarc filter. It doesn’t come cheap, but it creates a nearly invisible watermark by adding noise to your image (a digital watermark). You also get other features like image linking and tracking, but it won’t stop anybody from stealing your images and printing them.

Another option is to use Photoshop’s Zoomify function (File > Export > Zoomify). This will chop your precious prize-winning, full-size image into pieces and display it in a flash-based window with controls that visitors can use to zoom in and move around the image.
The most common deterrent for would-be image thieves is a custom-designed watermark with your logo and web address, tucked into a corner.

The principle is simple: you type some text, using a suitable font, size, and colour, and Photoshop will automatically put your text into a new layer on top of the image layer. Grab the Move tool from the Tool palette and you can move the text around. You can also change the opacity of the text layer to make it semi-transparent and less obtrusive.

This all works fine if you apply it to one image only, but there are two problems once you try to run this as an action on a bunch of images: the position of the watermark will change depending on whether it is a landscape or a portrait shot, and the watermark will become invisible if it is dark and sitting on top of a dark part of the image, or if it is light over a light section of your image.

However, there is a simple way of overcoming both problems. The first step is to type in your text — to get the copyright sign type Alt+0169 (Option+G on a Mac). Next you need to get the watermark to align properly for landscape and portrait shots. Select both layers by clicking on them with the Shift key pressed, then select Link Layers under the Layer menu. Select the Move tool from the Toolbox and you will see a couple of choices for the layer alignment in the Tool Menu bar (see Image 4).

This allows you to align the watermark to the middle or to any side of your image. If you don’t want it right at the edge or in a corner, you can use the arrow keys to move it more to the middle. This solves the problem of placing the watermark manually once you put this step into action. Now you want to make the text clearly visible, no matter if it sits over a dark or a light image area.

Start by duplicating the image layer. This is best done by going to the Layer palette, grabbing the image layer (not the text layer) and pulling it over the ‘Create a new layer’ button at the bottom.

After this you need to drag the duplicate image layer on top of the text layer. The watermark will disappear, but we’ll get it back. Go to the Layer menu and select Create Clipping Mask. The last step is to invert the top layer (Image > Adjustments > Invert). If you now select the text layer and move it around, it will take on the complementary colours of the background. If you want the text in greyscale only, which does look better, then you need to desaturate the top image layer (Image > Adjustments > Hue/Saturation). Image 5 shows you the final result.
Needless to say, with a folder full of images going into your photo gallery, you don’t want to spend hours resizing, sharpening, changing the colour profile to sRGB, adding a watermark and saving them individually. That’s where Photoshop’s Action palette comes in handy. Using the Fit Image command, which we discussed in the last instalment, and the steps for generating a watermark, you shouldn’t have a problem turning the whole process into a simple one-click job. Don’t forget a step for flattening any layers you might have, and possibly a conversion to 8-bit, if you are in the habit of working in 16-bit.