Building and Watermarking Art Gallery Thumbnails

Article Title - Building Art Gallery Thumbnails also known as watermarking

Building Gallery Thumbnails was written to describe processes used in creating thumbnail images at Gallery Renee. The watermarking step is often overlooked but very important to your images and your website.

A large and growing problem with displaying images on the web is that people want to use images both for decorating their websites, MySpace pages, desktops, and to (gasp) print them out for themselves without paying the artist for the image. Renee Lichtman shares her technique with those of you who want to put your original images on the web and protect them from unwelcome usages with a simple text layer or watermarking the image.

I often see people post this question to group mail lists where I am a member. It is a big concern and a valid problem for those of us who want to post pictures of our art, photos or prints for promotion or sales but don't want the images abused. How do I protect my images from piracy? Some people ask to know how to disable the right click; thinking that this will stop copying. This method is easily defeated just look in your temporary internet folder and there it is. It is also very annoying for your visitors. Because of the annoyance factor in the end it may hurt your chances of making a sale or earning a referral to an interested buyer. Why? because people may want to print a small copy of your image for legitimate reasons such as carrying into the next room to see if they like the colors there, or showing the image to their decorator or family members for approval.

With this in mind I have decided to make my thumbnail images as user friendly as possible without making them too easy to steal. I have three image sizes available for use on my web pages and an addition size used for printing a card called an Artist Sample Print Card. There is a full article describing these cards at the Artist Sample Print Cards page.

I work in Photoshop CS2 but these instruction are easily adapted to any other fully functioning image editing program if the program allows you to see and easily change image size, resolution, and file extension.

Although nothing is an absolute guarantee for protecting your images I find this method works well, is user friendly and if an image is used by someone on a website other than my own becomes a free advertisement for me. I simply use a text layer over the image and make sure the resolution of the image is only 72 ppi (pixels per inch). This makes it difficult to use the image without my name, website and copyright displayed on it.

At 72 ppi a thumbnail can be displayed at it's full size but it can't be enlarge either for display or for printing. This is because when you zoom in on or enlarge the image on your screen an image that is correctly sized it will pixilate. This means the individual pixels will spread out to fill the space called for and the image will begin to look like a collection of colored blocks instead of your image. This image sizing will by itself limit your image's usefulness to other people who may want to print it. But its the text layer watermarking which will make the image less desirable for people to incorporate into their web pages. That is unless they are willing to use it with your watermark which works as an advertisement for you.

You need your thumbnails to be as close a representation of your art as possible. For this reason your image's editing should already be completed and, if it is a print file, the test printing phases should be done as well prior to creating your thumbnails.

After you finish editing your image you will duplicate your completed master file, giving it a name to indicate that this copy is one of your thumbnails for that image. Photoshop has a tool for duplicating an image file but if that is not available to you, you can use Save As and a second copy will be created. If using Photoshop's duplicate tool remember to take off the word "copy" which Photoshop automatically adds to a duplicated file name. If you used Save As remember to give the new file the same name as the image adding a number or letter to represent the thumbnail size and an appropriate file extension. For now you need the file extension to be .psd for Photoshop or a file format extensions that allows all the features of your image editing program to work.

Close your master file. The new duplicate file remains open. You could duplicate it once for each thumbnail you will need but the faster way is to create your text layer, your watermark layer, first and then create additional duplicates with your watermark already on them.

I found that the best way for me to resize my images for thumbnails was to pick a set of uniform sizes. By that I mean that every printable #1 thumbnail is 1.75 inches on the *smaller side* of the image, every #3 is 3 inches on the smaller side and every #5 is 5.5 inches on the smaller side and the #9 is 3.75" but it's resolution is 300 dpi.

This is an example of my workflow for creating watermarked thumbnails. This workflow also helps organize your thumbnail images from the beginning so that you can work faster and more efficiently when putting them into your web pages.

1. Open your completed image file.

2. Duplicate and name the new file as;
image-title-9.psd
You can use any naming scheme which helps you to remember the size and dpi (dots per inch) of the thumbnail so that you know what the thumbnail is without opening it. You can use numbers or letters if you prefer. I used to use small, medium and large but found the numbers easier.
Remember to be consistent with your size and naming scheme.
At this point you could create more duplicates naming them for each of the thumbnails you will need. But, if you do that then you will need to put a text layer on each thumbnail file.
The better way is to put the text layer on the first duplicate the (#9)and then copy it with the text already on it.
I start with my #9 300 dpi artist sample print thumbnail first.

3. Close the original file. Your first duplicate remains open.

4. Use the type tool to create a layer with your name, website and copyright claim (your watermark)on it. Note using the type tool in Photoshop creates a .psd file and that is how you will save this particular thumbnail size. To see this effect for yourself open a jpg file. Duplicate the file. Type some text on it. Using the type tool created a type layer. Use Save As instead of Save you will see the file is marked .psd not .jpg.
Start with black for light colored images or white for dark colored images.
Play with the size and placement of the text until you get it the way you think it looks best. If you are not satisfied you can change the placement, text style, size or color of the text.

5. Check that your text is still legible when the image is shrunk down.
To do this use the zoom tool to see if your text holds up as the size of the thumbnail is reduced on the screen.

6. Resize the image to 3.75 inches on the smaller side.
Make sure there is a check in the Constrain Proportions box. It's a good habit to get into looking at that check box every time you use Image Size because Photoshop remembers the last state this check box was in. So if the last time you used Image Size it was unchecked it will be unchecked this time as well.
If you have Constrain Proportions checked off Photoshop will recalculate the second side and keep the thumbnail in perfect proportion to the original as you reduce the file size of the image.
If you don't then the image will get squashed or stretched as your editing program changes your input side but leaves the measurement of the second side unchanged.

7. Enter a resolution of 300 dpi for printing sample cards or flyers.

8. Click ok or press enter.
The image resizes.
Use the zoom tool again. This time to check the thumbnail at its print size and larger.
Notice that you can us the zoom tool to make the image very large on the screen and maintain very good image quality at 300 dpi .
You could also resize the image to lets say 15 x 20 inches and still get a good to excellent print from this file.
At this stage you could easily remove the type layer as well. Which is why this thumbnail is never put on any web pages or stored anywhere on your website that is not password protected and is only used to produce hard copies such as mailers or artist sample print cards.

9. Create a folder exclusively for this thumbnail size.
I keep thumbnails in separate folders by their size. All *image-name-1* go in one folder all *image-name-3* go in another folder and so on.

10. In Photoshop save this printable thumbnail as .psd.
This preserves the text as a separate layer. You may find you need to change this layer for other projects so keeping the file as a .psd gives you the option of reworking or just discarding the text layer. If you save the 300 dpi file as a .jpg the layers are merged making the text permanent. After that you would need to start again with the original file to make a change.

11. Duplicate your sample print thumbnail.
You can now duplicate this file two more times and the duplicates will already have your watermark text layer on them.
As you duplicate the first thumbnail, #9, name the new files according to your naming scheme.

12. Close the 300 dpi printable thumbnail.

13. Resize the next thumbnail.
Assuming your next thumbnail is #1, set the image size to 1.75 inches on the smaller side and 72 dpi for the image resolution.
You can use any inch size you have decided on for your thumbnail but the 72 dpi shouldn't be changed.
This thumbnail size is used for gallery pages where there are many more than one image on the page or the images are sprinkled into a text page.
The #3 thumbnail is used on gallery pages and is 3" on the smaller side.
The #5 thumbnail is 5.5 inches on the smaller side. It is used for an individual detailed image display.

14. Save each thumbnail to it's folder as a .jpg.
If you are using Photoshop you can use the Save For Web tool.
If that is not available to you use the Save As.
Both of these will ask you to choose the level of jpg compression.
Enable preview and move the slider to see how the thumbnail looks with different levels of compression.
I love big sharp thumbnails but the reality is that the larger the thumbnail file and the less compression I use the longer the file takes to load and the more risk I take that someone will try to use my images without permission. Your compression level must give viewers a clear idea of what the art looks like but not weight down your pages or expose the art to unneeded risk.

15. Repeat the process until you have completed each thumbnail size you need for the one image. Follow the same procedures for all of your images to get thumbnails that are consistently sized, easy to find, easy to use, and website user friendly.

To use the Photoshop CS2 Duplicate Image tool.
The top menu bar has File, Edit, Image.
* Pull down >Image.
* Scroll Down to >Duplicate, third one down.
* A dialogue box >Duplicate Image opens.
* Type in the file name you plan to use.
* Click ok.

To use the Photoshop Image Resize Tool
* Pull down >Image
* Scroll Down to > Image Size
* Image Size dialog box opens
* Set either width or length which ever is your smaller side.
* Change the dpi to 300 for your #9 printable file or 72dpi for website display files.
* Click ok.

Be consistent with your watermarking and naming scheme when you build your thumbnails . This will save you time and trouble in the long run

Was this article helpful? Do you have any questions? contact@galleryrenee.com