Digital Framing - Antique Prints for the Web

[ Home ] [ Gallery ] [ Past/Present ] [ Order ] [ Paper Registry ] [ Search ] [ Help ]

In these pages PaperMatch will examine some of the art and some of the craft involved in digitally matting and framing antique prints for display on the WEB.

The tools, techniques and aesthetic judgements used for electronically matting and framing differ from traditional tools, techniques and judgements. But they don't differ all that much.

We'll look at how understanding some of the basics of HTML allow you to construct workable and pleasing frames and mats. The tutorial will use HTML - the fundamental language for describing the logical structure of pages on the WEB - as the starting point for building mats and frames. In particular HTML tables can be called into play to help you build mats and frames, and to help you easily change those mats and frames when the aesthetic or practical requirements of the electronic room you are building demand it.

Click on one of the links below to tour the frame shop. Or just scroll through from start to finish.

Introductory Carpentry

	Matting Your Print on a Solid Color Background
	Creating a Beveled Mat
	Creating a Double Mat
	Framing Your Print
	Where to Find What Materials on the WEB

Advanced Carpentry Techniques

	Picking Up the Colors in Your Print
	Constructing a Complex Digital Frame From Raw Materials

Matting Your Print on a Solid Color Background

A print's mat is a protective housing for the work of art. The initial housing for a fine art image on the WEB is a 1 x 1 colored (HTML) table.

Define a table which is one row by one column in size.

The code for this skeletal table looks as follows:

<TABLE>

<TR>

</TR>

</TABLE>

If you are unfamiliar with the basics of HTML markup, there are a number of excellent tutorials available on both the basics of HTML and the particulars of table construction.

	NCSA Beginner's Guide to HTML. brought to you by The National Center for Supercomputing Applications
	Microsoft has good information on the basics of table construction.

Insert your fine art print into the table.

The new HTML will look as follows:

Here the image we inserted is a JPEG file named Logo1.jpg.

Choose a mat color.

The mat color should bring out one of the salient colors of your print.

You may be able to choose a mat color from directly within your HTML editor. If not, there are various color charts available on the WEB. Yahoo has lots of color information. See for example,

	The Color Center
	Thalia's Color Guide

Establish an appropriate mat size.

The HTML appears as follows:

Cell padding here is the space between the image and the inside edges of the cell. Padding like most measurements is in pixels. The screen you are working at is probably approximately 640 pixels wide by 480 pixels high, though it may be a good deal larger.

(top)

Creating a Beveled Mat.

There are various options. You can choose to surround the image itself with a black border. Unfortunately, this border has a very flat look to it. A more beveled look would be appropriate.

Note how the table's color shines through the beveled mat. The underlying HTML reveals the problem here:

A better solution would be to define color as an attribute of a cell, not of the entire table.

The HTML appears as follows:

(top)

Creating a Double Mat

Here we have an example of a double mat.

(top)

Framing Your Print

Well, first you got to find yourself a good tree...

Remark attributed to master craftsman
during introductory remarks for a
Fine Woodworking Workshop in Berea, Kentucky

A frame may be thought of as yet another type of mat, one with more sturdy qualities. Framing may be in wood, in metallics, indeed in any appropriate texture. Here is an example:

At the present time, framing is not available to all Internet artisans. To create a frame you must be able to use some image as the background fill for an HTML table. The image could be anything - a picture of a cat, of an amoebae, of a leaf. When the image is of a piece of wood, however, you have the raw material to frame your print.

Using an image as a background fill for a table is allowed at the present time when using the Microsoft Internet Explorer Version 3.0 or higher or with Netscape Communicator. Such backgrounds are not available when using Netscape Navigator Version 3.0 (or lower).

If you are comfortable with the matting techniques developed in the previous steps, framing a picture will be straightforward.

Let's just go through the simple step of mounting a print in a (matless) birds-eye maple frame.

Pick a suitable framing material
(In the best of worlds you would travel that world, find yourself that tree, cut it, plane it, sand it, scan it. Lacking this freedom there are many WEB spots where suitable framing materials can be gotten. See below.)
Create a simple 1 x 1 table.
Assign a background graphic to the table.
Insert the print into the wooden frame.

Here is the HTML for a simple1 x 1 birds-eye maple (HTML) table:

<table border="0" cellpadding="50" cellspacing="0"

background="Resources/Texture_wood_006.jpg">

<tr>

</tr>

</table>

In this example, note that our table has a background. That background is the image named Texture_wood_006.jpg, as found in the Resource directory.

Inserting the fine-art print is simply a matter of placing the image into the appropriate cell in the table. Since there is only one cell, there is little problem:

<table border="0" cellpadding="50" cellspacing="0"

background="Resources/Texture_wood_006.jpg">

<tr>

</tr>

</table>

(top)

Where to Find What Framing Materials on the WEB

Frames may be constructed from a variety of framing materials available on the WEB.

	Yahoo provides a large number of resources for understanding (and acquiring) HTML backgrounds.
	Consult the FAQ on backgrounds if you have more detailed questions.

Once you understand how backgrounds and tables can be used to frame your antique prints and old paper, you can visit the many WEB suppliers of fine digital woods and other framing materials. Some of these sources include:

	Texture Station has a wonderful collection of woods for framing.
	If you are a kid, you might want to mat your picture using crayon colors. Check out Wally's Box O' Crayons.
	You may also wish to experiment with new types of digital framing materials. The Microsoft site has a number of digital backgrounds available. For example, consider the use of Stucco or hard rock, or metallics, matching the frame to the needs of the print.

(top)

Advanced Carpentry Techniques

Picking up the Colors in Your Print

If you are using an advanced graphics program you can probably determine the exact color of each of the colors in your fine art print. These colors are typically given in terms of a RGB value. HTML works with a different, but logically equivalent way of specifying colors - the HEX value. Hence, there are two main tasks to exactly matching a print (or frame) to one of the colors in your fine art print. First, determine the exact RGB value of some color in your print; next translate that RGB value to a HEX value.

Most graphics programs (paint, draw, presentation programs, and so on) provide you with a way to determine RGB values. You can then go on to determine the HEX value of colors in your print by using on of the standard RGB to HEX converters available over the Internet. The UNIVOX converter is particularly simple. When all is said and done, the exact colors you have picked up from your fine art print can then be used as a matting color.

This example proceeds using the Windows95 Utility, Paint as an example of how to determine RGB color. The functionality in Paint is likely found in any graphics utility you might use. Paint does not work with the GIF and JPEG file formats common to WEB graphics. But the ideas hold nevertheless.

Choose Programs > Accessories > Paint

File > Open > filename

Click the Pick Color button. (It looks like an eye dropper).

Click on the color you wish to pick up.
(In this example I am trying to pick up the reddish-brown color found in Jill's dress in the PaperMatch Jack and Jill print. )

Choose Options > Edit Colors > Define Custom Colors.

The RedGreenBlue values will look something like this.

134, 57, 27.

Translate RGB values to HEX using an RGB to HEX converter.

The RGB values above translate to #86391B in HEX.

Place these as color values into your table

In this case we would have BGCOLOR="86391B"

A mat with this exact background color can then be created and the picture can be inserted into the custom colored mat:

Similarly, working backwards we can see that the dark green mat used in previous steps in the tutorial has an RGB color of 0 64 0. Checking the table itself we can see this translates as BGCOLOR="#004000"

Other draw and paint programs have similar eye dropper procedures for custom matching of colors.

(top)

Constructing a Complex Digital Frame from Raw Materials

Digital framing returns to the artisan the ability to custom build his or her frames. Woods of various tenor may be laminated together much as in previous days.

The step here, following on the previous strategy of embedding HTML tables within tables, simply embeds an 1 row by 1 column table with one wood sample within another 1 row by 1 column table of a different wood sample.

Here is an example: