PI5 Five Easy Pieces: Faux Dingbats


faux dingbat borderBeautiful dingbat fonts are great for making web graphics, but you may not always be able to afford the ones you want. While I'm not suggesting that you give up your ding habit, you might be surprised at how well you can improvise to make faux dings with Path and Text objects. 

This tutorial shows how to use five simple shapes to create a lovely jeweled border background. First we'll make the shapes and then we'll put them all together. I'll be using a coppery-gold metallic preset from the EasyPalette's Material Gallery to make the shapes, but you can use any metallic that you like. If you have trouble making the shapes, you can download the UFO kit.

Start with a new True Color image 200 X 200 pixels, with a black canvas. Select the Path Drawing tool. In the Attributes toolbar, select the Ellipse shape. Draw an ellipse like this one.

ellipse

From the Mode dropdown list, select 3D Pipe. You'll get a fat donut shape at first. Click on the Materials icon in the Attributes toolbar to open the Material dialog box. Click on the Border/Depth tab and set the border at 2. You'll be left with a narrow, gold, elliptical frame. 

narrow elliptical frame

So that you can use the elliptical frame again and again, drag it over to the EasyPalette. Doing so opens the Save to EasyPalette box.

add to EP box

Name the object and save it to Library and Tab group. I made a tab group called "dingpieces" in the "My Objects" Library. Click OK to save.

While the Path Drawing tool is still selected, from the Attributes toolbar select Circle from the Mode options. Draw a small circle in 3D Pipe mode. Again, it will look like a fat little donut.

Just as you did for the ellipse, click on the Material box icon to open the Material dialog box. Click on the Border/Depth tab to take the Border down to 2 and click OK. Save the circle frame to the EasyPalette.

narrow round frame

Select Diamond from the Mode options. Draw a 3D Pipe diamond like this one. Return to the Material box to take the border down to 2 pixels. Save the diamond frame to the EasyPalette.

narrow diamond frame

While the Circle is still selected, choose 3D Round from the Mode dropdown list. Draw a teensy little circle like this one, which we'll use as a gold bead. Go to the Material box again and click the Border/Depth tab. This time increase the Border to 30, so the bead is nice and round. Save it to the EasyPalette.

tiny circular bead

To make a little curlicue shape, find one of your regular letter fonts that makes a nice S. I'm using Bilibin, size 30, Bold, 3D Round. This is one of my favorite fonts of all times, Bilibin.

letter S, Bilibin, size 30

To free the object from the constraints placed on it by being a Text object, choose Object, Convert Object Type, From Text to Path. 

Choose Edit, Rotate & Flip, Flip Vertically. Hit Ctrl+C to copy the rotated curlicue into the Clipboard, and hit Ctrl+V to paste it back into the image.

While the pasted curlicue object is active, select Edit, Rotate & Flip, Flip Horizontally, so that it is the mirror opposite of the first one.

pasted copy flipped

Switch to the Transform tool. Click on the right curlicue to make it active. In the Attributes toolbar, rotate the curlicue 40 degrees clockwise. Click on the left curlicue, and rotate it 40 degrees counterclockwise. 

rotated curlicues, paired

Drag the curlicues together at the lower edges. Click on one to make it active, then hold down on the Shift key while clicking on the other, so both are selected. Choose Object, Align, Center Horizontally. While they are both selected, right click and choose Group. 

Copy the grouped curlicues to the Clipboard by hitting Ctrl+C. Paste them back into the image by hitting Ctrl+V. Choose Edit, Rotate & Flip, Flip Vertically. Position as shown.

Drag the diamond frame from the EasyPalette into the image. Select the Transform tool, Resize option. Hold down on the Shift key while dragging a corner control point to make the diamond frame about half of its original size.

resize diamond frame

Use the Pick or the Selection tool to drag the diamond frame so that it is centered between the two sets of curlicues, just touching them. 

insert diamond frame

Click on the diamond frame to make it active. Hit Ctrl+C to copy it to the Clipboard, and Ctrl+V to paste it back into the image. Drag it away from the other objects. Select the Path Drawing tool and in the Mode dropdown list, choose 3D Round. You will get a flat looking diamond. Click the Material icon in the Attributes toolbar to open the Material dialog box. 

Click the Border/Depth tab. Enter a value of 30 for Maximum Border Depth, which will round up the diamond. Click OK to close the dialog box. 

small 3D round diamond

In the Attributes toolbar, click in the Color box to change the color of the diamond to red (RGB=255, 0, 0). Apply special effects if you want to. Here I've used a PI 4.2 Any Shape Button Designer Advanced option (which you can Import into PI 5.0)  to make a red jewel. 

Use the Pick tool to drag the red diamond jewel onto the diamond frame. Use the Order options to Send to Back, so the frame is on top of the red jewel.

add red jewel

Drag the small circle frame into the base image. Copy it to the Clipboard by hitting Ctrl+C. Alternatively, hold down on the Control key while dragging the circle frame to create a duplicate. Position one circle frame in the middle of the curlicues, top and bottom, as shown.

add circle frames

Next, drag the ellipse frame from the EasyPalette into the base image. Center it directly below the bottom circle frame, so the edges are just touching. Hit Ctrl+C to copy it to the Clipboard, and hit Ctrl+V to paste it back into the image.

add ellipse frame

While the ellipse frame is active, switch to the Path Drawing tool. In the Attributes toolbar, choose 3D Round from the Mode dropdown list. You will have a very flat ellipse. Click the Material icon in the Attributes toolbar to open the Material dialog box. 

Click the Border/Depth tab and enter a value of 30 for Maximum Border Depth, which will round up the ellipse. Click OK to close the dialog box. In the Attributes toolbar, click in the Color box and select green (RGB=0, 136, 0).

green jewel

Apply special effects if you want to. Here I've used a PI 4.2 Any Shape Button Designer Advanced option (which you can Import into PI 5.0)  to make a green jewel. Drag the jewel on top of the ellipse frame.

add green jewel

Right click and Merge All. Choose the Selection tool with the Shape set to Rectangle. Make a selection from the left edge, getting as close as possible to the top and bottom of the jeweled border. Click on the Crop tool or hit Ctrl+R to crop. 

select, then crop

Drag a small gold bead from the EasyPalette onto the image. Position it on the right side of the ellipse frame. Drag another bead out and position it on the other side. To line them up, Shift-Click, and choose Objects, Align, Center Horizontally. Right click, Merge All.

add bead on each side of ellipse

To make sure the border will tile smoothly, choose Web, Shift Image. When the Shift Image dialog box opens, enter a value of 25 for the Vertical Offset. Leave the Horizontal Offset as is.

shift image 25 pixels vertically

The border looks like this after Shift Image. We're going to add a few more small gold beads to finish the border. 

now it looks like this

Drag a few more gold beads from the EasyPalette onto the image. Position beads at the center top and bottom of the ellipse frame. Add more beads on top, bottom and sides of each small circle frame, and on each side where the curlicues meet, as shown. Right click, Merge All. 

add a few more small beads

To make the border 1200 pixels wide, note how wide the image is and choose Edit, Expand. Deselect the lock and Expand to the Right only, black canvas, as many pixels as it takes to equal 1200 pixels. Click OK. I added two narrow vertical gold bars on either side of the jewels to better define the border. Here's what the border looks like tiled:

tiled border

View border tiled full size on page

Now that you know how to use simple shapes to make faux dings, you'll probably find lots of different ways to combine these to create new effects!

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

 

 

Contact
Back to Homepage