Framing The Photographic or Photo_Haiku Haiga Image
Ray Rasmussen [email] [website]

Introduction:

The position taken in this presentation is that the framing of a haiga image on an Internet page is as important as the image itself. This presentation covers the options that a haiga artist has in presenting his or her work and provides examples from various web sites to demonstrate those options. The presentation will begin with photographic images and later add comments about art images. If you would like lessons on how to create a frame in photoshop, go to this website: framing lessons

Displaying Photographic Prints:

Contemporary haiga are done in various mediums, including photography or photo-haiku. When photographers hang prints in galleries, most, not all, prefer a simple off-white slightly textured mat. This responds well to being part of a wall display with warm indoor lighting, and sometimes spotlighting.

Here's an example: Canoe on Lake Edith - Mock Gallery Background

This example displays the 4 components of an image display in a photography or art gallery:

  • a small inner border [in computer terms, 2 pixels on each side and top and bottom]
  • a larger off-white textured mat [in computer terms, it's approximately 50 pixels on each side, with more pixels on the bottom than on the top].
  • a small silverish frame [in computer terms, it's 8 pixels on each side] - often larger frames are used.
  • a cream colored wall on which the framed photograph hangs [in computer terms, the browser window serves the wall]

We don't have the luxury of a large gallery wall when viewing this photographic presentation on the Internet, so I've configured this browser presentation to center the image and to mimic a gallery wall by using a light cream color in the browser window.

However, a computer screen is quite different from a gallery wall. Instead of front lighting, the lighting on a computer is from the back and the backlit photographs look more alive on the screen than they might as a print on a wall. And, the browser window itself can be very bright, so bright that it makes it more difficult for the eye to see the photographic image ... it's a bit like having someone shine a flashlight in your eyes while you're trying to talk to them. You can't see the person nearly so well.

Displaying Haiga on an Internet Page:

When an image is displayed via a browser window, the browser window has a certain color and position ... it is, itself, a frame and it affects how your image looks on the computer screen.

Here's what most browsers do: Canoe on Lake Edith - Typical Web Page Format

Note that the image is in the upper left and that there is a bright white space competing with the image. Thus, the quality of the presenation of the image is degraded by its placement and by surrounding bright white color which makes it more difficult for the eye to see the detail in the image. Put another way, your computer is shining a bright light in your eyes making it harder for your eyes to take in the various shades present in the photograph.

Here's the same image with a 2 pixel inner light gray border with a 50 pixel darker gray frame/mat.

Canoe on Lake Edith - Web Page Format with Photograph Framed

Better? But, not good enough. While the border/mat do a better job of allowing the eye to focus in on the image, there is still a large amount of bright white space and the image is still off center.

We can use a web page presentation to take control of the presentation space and to make the image center itself, as below:

Canoe on Lake Edith - Web Page Format with Photograph Framed & Centered

But the brightness of the white space still makes it more difficult for the eye to adjust to the darker image.

What about a dark background for the page?

Canoe on Lake Edith - Web Page Format with Photograph Framed & Centered With Black Background

Better? the black is pretty harsh, isn't it, but still, I think that it allows you to see the image better.

Here's a gray background ...

Canoe on Lake Edith - Web Page Format with Photograph Framed & Centered With Gray Background

Better? To my eye it is.

In sum, the following display options all affect the viewing of an image:

  1. position: upper left vs center
  2. inner border: size and color
  3. mat: size, color and texture
  4. browser background: color and texture

Other Framing Variations:

We've had a look at some basic framing/positioning variations. A look around the Internet allows us to view how photographers and artists use these and other options to display their work. These are presented as food-for-thought for your own work and also to allow you to see variations of the four key variables that you can learn to control in your own work: position, inner border, mat, browser background.

1. Ron Rosenstock: photo-haiku, World Haiku Review

Here's a standard photographic presentation of a print with haiku [or photo-haiku] which uses a dark background:

  1. position: center
  2. inner border: 1 pixel black
  3. mat: white, 50 pixel top, sides, 100 pixel bottom
  4. browser background: gray, textured

2.a. Ron Moss: deep woods

This isn't a web page, so the photographer is simply posting and images, allowing the browser to control both position and background. This example shows an interesting variation in the matting.

  1. position: upper left fixed by browser
  2. inner border: black, 2-3 pixels
  3. mat: an interesting texture with gray tones ... reflecting the gray tones of the image.
  4. browser background: pure white fixed by browser

Here's the same image presented on a web page and centered with a medium gray background:

2.b. Ron Moss, deep woods centered, gray background

3. Ron Moss: mountain track, World Haiku Review

This is a web page format which allowed control of all 4 variables. The variation shows an unusual artistic treatment of the mat.

  1. position: centered
  2. inner border: none
  3. mat: a top & bottom framing without sides, the color tones matching the tones in the image, and a cloud like mottling of the bottom frame.
  4. browser background: an off-white that mirrors the color tones in the image.

4. Doris Kasson: reflections, World Haiku Review

This image by Doris Kasson shows a standard white mat with background and inner border a deep blue.

  1. position: center
  2. inner border: 1 or 2 pixel, blue matching color in image
  3. mat: varied ... top/bottom larger than sides, white, no texture
  4. browser background: deep blue, no texture

5. Ray Rasmussen: weathered bench, personal website

This image shows a dark textured background with a mat variation of mottled gray.

  1. position: centered
  2. inner border: gray, 2 pixels
  3. mat: a mottled medium gray with top smaller than sides and sides smaller than bottom
  4. browser background: a dark checked texture

6. soji: dragonfly, personal web site

Here's another unusual and artistic framing treatment by soji. Note that he too has taken control of the browser background and uses a darker, mottled page. In this case, the image itself has no inner border or mat—the page background serves as the frame.

  1. position: centered
  2. inner border: none
  3. mat: none
  4. browser background: black with gray-specks texture

Poor Presentations of Photographic Images:

In order to not present a criticism of the work of others, I will mirror what I see as common mispractices using one of my own images:

7. Too heavy an inner border: tipi 1

8. Off color for an inner border/mat: tipi 2

This is an exaggerated example to make a point. When selecting the colors for both the small inner border and the mat, the best pratice is to use the eyedropper and select colors from the image or to use a dark inner border and an off white mat or a light inner border with a dark gray tone mat.

tipi 3: Here's the same inner border/mat sizes but with a darker gray taken from the mountains in the background, and the lighter gray taken from the tipi poles. In this case, you might argue that the inner border is too large ... it's 5 pixels.

tipi 4: Here's the same border/mat colors, but with an inner border of 2 pixels.

------

Next issues:

  • framing artwork
  • text placement and font selection