How to Prepare Photos of Glass

Review the below information and keep it as a guideline when preparing glass photos for your website.

The goal is not just posting good images of your artwork but to also provide a visually pleasurable experience for the visitor. Encouraging them to stay longer on your website and perhaps make a purchase.

What does a visually pleasurable experience entail?

• Making sure the images are optimized enough that the pages of your website load quickly.
• Having thumbnail images that are all the same dimensions so that a gallery page will have the same width and height for rows and columns of images.

When the thumbnails are different widths and heights the website gallery appears uneven or requires the visitor's eye to move all over the page causing visual.

distraction. It is important to remember the average visitor is from the US and will start to view or read at top left and then visually move to the right as they work down the page.

Consistent sizes to the thumbnails presents a more professional appearance. The only other optional item would be to add a frame to each image.

Making all image .jpg should improve the quality of the final webready image versus a .gif file type and is more browser friendly.

Below are instructions for Basic Image preparation.

BASIC PHOTO Preparation Instructions:

These steps are are for Adobe PhotoShop Elements but the steps are similar for other photo editing software. Using the free software that comes with you camera will most likely not lead you to as much success as there is no industry standard in the way they are created. They give you very basic functions with simple click and point control. PhotoShop Elements is a great learning tool from which you can build your skills if you wish to learn more in the future and advance beyond the Elements version and perhaps even learn photo editing.

Note: The ORDER of the steps is the most important part. START with a photo, from either a scanner or a digital camera:

Scanner:

A. Clean off any smudges and de-lint the glass surface of scanner.

B. If you are actually scanning an actual piece of glass and it has any thickness make sure to drape the scanner with a dark cloth so no light comes in around the sides.

C. Place the brightest white or the desired background color on the lid backing and make sure it is matte (not shiny).

D. If it is an actual piece of glass, scan and then turn the item 180 degrees and scan a second time. So you have the best image to choose from or when your skills are better, merge the two images to create one great one.

E. Scan in at the highest resolution you can, not more than 300 dpi is needed.

Digital Camera:

A. Take photos at highest quality setting when possible.

B. Make sure if you are indoors, to adjust your Whiting setting to brighten the image.

C. Whenever possible, use 100% natural lighting (full spectrum) or take your photos outdoors to reduce the yellowing or graying effect to the entire image and colors.

Photo Software Steps to prepare your glass images:

A. Open your photo or start with your scanned image.

B. Optional: Rotate the picture until straight.

• Select All
• Edit Cut
• Edit Paste

The 3 steps above take the image from a one layer (background image) to a 2 layer image that you can now manipulate. You can see the background layer and the image layer on the right side of the screen. If you do not, select Window, Layer and it will display).

• Select the Move Tool (top left, it is an arrow with a plus sign icon in the tool menu on the left).
• Go to the corner and the tool changes to a curved set of arrows, just hold down your mouse pointer button and turn the image until straight.

C. Crop the photo to eliminate all non-essential background when possible, you want the focus on your item and not the background. With good cropping the item fills the entire image.

These instructions are to allow you to create a perfectly square image so you will end up with thumbnails that will provide you nice even rows and columns:

• Optional Background Color Control (3 steps).
• Double click on the Background Color Square at the bottom of the Tool Bar on the left and set the color to the same colors as the background on your website pages. Example: white, is the easiest and if you do not know the color then pick a webready color to use for all image backgrounds.
• Click on the Back Ground Layer on the right.
• Select Edit Fill, Layer Fill and set the Content drop down to Background Color, OK.
• Select View, Grid.
• Select the Crop Tool, 4th icon on second row of tools (it looks like a crossbow).
• ONLY crop the sides left and right or the top and bottom but it not necessary to crop both. Use the lines in the grid to help you make a straight crop.
• Select All, Edit Cut.
• Select Image, Image Size and "uncheck" constrain proportions.
• Note: The largest number and adjust the height and width to be the same.
• Example: 631 wide x 723 height now becomes 723 wide x 723 height.
• Select Edit, Paste.

D. Optional: Auto adjustments:

• Select Enhance and either Auto Levels, Auto Contrast or Auto Color Correction.
• You will notice that photos that are all taken at the same time will respond to the same auto adjustment. The goal is to make sure each photo has bright and accurate colors, minimal shading.
• Note: Each Auto adjustment that is used will add a little more weight to the image.

E. Image size:

• Adjust to 72 dpi FIRST, then adjust width ONLY to:
  • 400 to 450 pixels wide for a large image on a detail page.
  • 550 to 600 for an enlarge optional image.
  • 125 to 150 for a thumbnail image.
• Note: make sure that the constraint box is checked prior to changing the width so the image will hold proportion. Click ok. Also make sure you do the steps in this order.

F. Optional: Sharpen or Sharpen Edges (only if needed to compensate for a fuzzy or poor image):

• Select Enhance, and either Auto Sharpen or Adjust Sharpness and adjust the percentage.
• Note: sharpen does add a little more weight to the image).

G. Save for the web:

• Select File, Save For Web.
• Select .jpg file format.
• Select 50% to 70% reduction in quality.
• Tip: Click anywhere in the grey background. You will see the right hand window at the bottom left the final size in kilobytes (kb). You want the physical size of the file, kb(kilobytes).
• Average Image Sizes need to be:
  1. Thumbnail (125 to 150 pixel) 4kb to 8kb.
  2. Large (400 to 450 pixel): 25kb to 35kb and not more than 50kb.
  3. Giant ( 550 x 600 pixel): 40kb to 65kb and not more than 75kb.

H. Image Names:

• Consider using a keyword in the name and no spaces, dashes or underscore in the name. Use upper and lower case letter like: FusedGlassPlate1.jpg This will help you with keyword density on your website.

Best wishes for your success in showing you off your finished art glass images and with your internet goals!

Ann Sanborn
President, A Sanborn Corporation
Promoting the Future of Customer Art Glass™