PI5 Frame Dingbat Splash Page

You may have noticed a trend lately among font artists to make larger frame dingbats. These dingbat fonts make it possible to create beautiful framed web pages. If you've wondered how to use dingbat frames in PI, this tutorial is for you. 

Dingbat Frame Page

View framed dingbat splash page

This tutorial features a stunning dingbat made by my friends, Leah and Rhonda, of Fontitude. They have graciously allowed me to convert a dingbat character, from the Combos 1 Frames collection, into a UFO object so you can follow along. (Download frame object)

This tutorial shows you how to "fill in" the empty spaces typically found in dingbat frame fonts to create a beautiful, textured 3D look! Then we'll slice the image and reassemble it in a table on a web page.

We'll also be using this beautiful swirl background created by Tracy. Right click and save it to your hard drive, so you can use it later.

swirl background texture

Open up the frame object in PI. Select the Text tool. You might wonder how I got the frame to be that large, since PI's font sizes only go up to 128. Since that size isn't big enough for a web page frame, highlight the number in the Attributes toolbar's Size box and enter 350, 400, or however big you want to make the object. Now click on the text object and it will enlarge to that size. That's how I made this frame object large enough to frame a web page.

Open the EasyPalette's Material Gallery, Metallic. While the object is active, double click on Copper 6. A screen shot is shown below at half size.

frame ding. 1/2 size

There are other ways to fill in parts of the frame. You could merge the frame with the base image and use the Magic Wand to select the areas you want to fill, then use Edit, Trace to turn the selection into a 3D path object. However, you are likely to get a lot of "creases" and "wrinkles" in the resulting fill-in object that way. So I'm going to show you a different way to create the fill-ins.

Switch to the Path Drawing Tool. Right click in the base image to deactivate the frame object. In the Attributes toolbar, click Shape and select Rounded Rectangle. Choose 3D Round from the Mode dropdown list. We're going to draw a rounded rectangle shape to fill in behind the top two horizontal bars at the top of the frame. You will need to make this object slightly taller than the empty space to be filled, so that it fills in the rounded top section. Your rounded rectangle object should look something like this:

fill in rounded rectangle object

Select the Pick tool. From the Attributes toolbar's Order options, click on the Send Backward arrow, to send the fill-in object behind the frame object.

send fill-in object to back

Notice that the fill-in object sticks up a bit on top. We'll be getting rid of the excess shortly. For now, switch back to the Path Drawing Tool. In the Attributes toolbar, click in the Color box and choose a dark purple color, RGB=83, 0, 185. From the EasyPalette's Material Gallery, Bump, double click on Diamonds 2.

In the Attributes toolbar, click Shape and choose Ellipse. We're going to make a purple textured fill-in for the rounded curlicues underneath the area you just filled in. Draw a 3D Round ellipse to fit the area.

draw ellipse shape

Switch to the Transform tool. In the Attributes toolbar's Freely transform options, use the Resize and Distort options to reshape the ellipse to fill in the rounded area. You're bound to have some of the ellipse that won't fit no matter what you do, but don't worry about it. Just get it as close as you can.

reshape with Transform options

Select the Pick tool. Use the Attributes toolbar's options to Send to Back. Make note to yourself of the places where the ellipse fill-in object sticks out around the frame (see arrow).

send object to back

While ellipse fill-in object is still active, choose Edit, Mask Mode, or click on the Mask icon in the task bar. Choose the Paintbrush Paint tool. In the Attributes toolbar, edit the brush to 5 pixels, Soft edge=2, and select black paint. Paint out that little nubbin of the fill-in object that sticks out, where the arrow is pointing above. Choose Edit and deselect Mask Mode. Select the Pick tool and use the Send to Back Order option to send the object behind the other objects.

paint out the sticking out part

With the Pick tool, click on the top, rounded rectangle fill-in object to make it active. Choose Edit, Mask Mode or click the Mask icon in the task bar. Use the Paintbrush Paint tool to paint out the part of the object that sticks up on top. Use a larger brush size, about 20, Soft edge=5 or so, to paint out the unwanted part of the object. When you're done, chose Edit and deselect Mask Mode. Now the fill-ins look like this.

fill-ins positioned behind frame

With the Pick tool, right click on the top fill-in and Duplicate. Choose Edit, Rotate & Flip, Flip Vertically. Drag the flipped object down to the bottom of the frame and use the Order options to Send to Back. Right click on the ellipse fill-in object and Duplicate. Choose Edit, Rotate & Flip, Flip Vertically. Drag it down to the bottom left ellipse area and use the Send to Back Order option. While this object is active, hold down on the Shift key and click on the top ellipse fill-in object, so both of them are active. Right click and Duplicate to duplicate both of them.

Choose Edit, Rotate & Flip, Flip Horizontally. Drag the two ellipse fill-ins to the other side. They may not line up perfectly with the left side. Just click in the base image to deactivate them, then move them separately until they are positioned correctly. Use the Order options to Send to Back. Now the frame looks like this 1/2 size screen shot.

frame so far

Next, let's make the jewels that go in the empty circular areas. Choose the Path Drawing Tool. In the Attributes toolbar, click Shape and select Circle. Draw a 3D Round object that will just fit inside the empty circular area of the frame. In the EasyPalette, Material Gallery, Bump, double click Remove Bump to get rid of the bumpy texture.

green jewelIn the Attributes toolbar, click in the Color box and select a very dark green, RGB=0, 64, 0. Use the Button Designer to turn your circle object into a jewel, or download mine

Right click and Duplicate the jewel 3X. Position one over each empty circle area in the frame, as shown below at 1/2 size.

position 4 jewels

Click in the base image to deactivate all objects. Choose Edit, Fill. When the Fill box opens, click the Color tab. Fill the base image (background) with black.

Return to the Path Drawing Tool. In the Attributes toolbar, click Shape and select Rounded Rectangle. Click Mode and select 2D. Click in the Color box and change to black. Draw a rounded rectangle object. It should cover the black in the center completely. Use the Transform tool and the Resize option, if necessary, to make it fit. With the Path Drawing Tool selected, from the Mode dropdown list, choose Selection.  

Copy the swirl background into the Clipboard. Choose Edit, Fill. Click the Image tab and fill with Clipboard contents. Right click on the filled selection and choose Convert to Object. It will look like this. Use the Pick tool to Send to Back.

fill with swirl background

Select the Path Drawing Tool. Make another 2D black rounded rectangle object, slightly smaller than the one you just made. It will fit over top of the swirl-filled object, leaving just a small margin of the swirls showing. Remember that you can resize the object with the Transform tool. Use the Pick tool to Send Back until the black object is behind all of the parts of the frame.

add 2D black object

Right click and Merge All. Now select Web, Image Slicer. When the Image Slicer dialog box opens, first thing, click GIF. Select the Slicer tool and slice the image into 3 columns and 3 rows, as shown below.

slice frame

Click on the cell for Row1Col1 (upper left corner) and then click on the Image Optimizer button. When the Image Optimizer dialog box opens, select 256 Indexed Colors, or one of your custom presets. I'm using my own preset, which is 256 Indexed Colors with Weight=Even.

open Image Optimizer, select preset

Click the Next button to save the next cell to your specifications, and repeat until you've set the attributes for each cell. Click OK to return to the Image Slicer dialog box.

Click the Save As button to open the "Save HTML Code and Associate Images As" dialog box. Browse to the folder to which you want to save the HTML page and images. Give the file a name and save it. PI5 will automatically create an images subfolder, and all of the GIF images making up the frame will be saved to it.

Now it's time to open up the HTML page you just saved in your HTML editor of choice. Open the page you just made. You'll see the frame assembled in a table on the web page document. 

The first thing you'll want to do is to select the table and center it. Since different HTML editors work differently, you'll have to understand how yours works to follow along with the rest of this. Change the page background color to black, so the frame blends in.

screen shot of table, 1/2 size

Next, access the HTML in your web page document. You'll see that the images making up the frame are referenced as being in the images folder, as shown below:

While the IE browser will read the \ after images, visitors to your web page who use Netscape may get broken images. Go through the IMG SRC tags and replace the backward leaning slashes with forward leaning slashes (/). Make sure you replace them all. Change the page properties so that the top and left margins are both 0 pixels.

The next thing to notice is that there's no way to add text to the table, since each cell is filled with an image. The way to resolve this problem is to leave the top and bottom rows as they are. For the middle row, remove the image and use it as a background for the cell instead. This will allow you to make the table taller, so that it fills the page. However, since this is a "splash page," you don't want to make the table too tall. Your goal should be to keep all of the frame showing in the browser without having to scroll down. Add a few lines of text and a few carriage returns in the middle cell only. A screen shot of the page as viewed in a browser is shown below:

screen shot of page

And now your frame page is finished!

There are many cross browser issues associated with lining up graphics in tables. I'm not an HTML genius, but fortunately there are some table gurus out there who share what they know with the rest of us. Check out the excellent table tips available from these sites:

Ann-S-Thesia's Full Border Tutorial

Suzanne's Tables Demystified: The Tables Trauma Tips Page

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.



Back to Homepage