Welcome!

Ron Rockwell

Subscribe to Ron Rockwell: eMailAlertsEmail Alerts
Get Ron Rockwell via: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Article

The Object Panel

The Object Panel

The Object panel is the key to virtually everything you can do in FreeHand MX. Most of us don't take the time to understand the Object panel, however, and it becomes a source of frustration.

The Object Panel
It seems as though every time you look at the Object panel, its appearance has changed. That's because the panel changes to reflect the attributes and features of whatever is selected or "live" in the document. Vector objects will display fill, stroke, and effects information; text will show font name, size, color, and more. If you select an imported graphic, the panel will tell you what kind of graphic it is and will provide a button to allow you to edit the graphic in Fireworks or Flash, or the Links button so you can change the object or gain further information about it.

To compound your initial confusion, effects that are added to any object appear in a hierarchical list that can be rearranged - sometimes. Obviously, an understanding of this powerful panel is in order. By the way, if you don't see the Object panel, go to Window>Object (Cmd/Ctrl+F3) to pop it up - you can move it anywhere on your screen that's convenient.

By default, the Object panel is docked with the Document panel in the Properties "barge." To select one or the other, click its tab. If you want to separate the two panels, click on the Properties Options icon in the top-right corner of the barge and select Group Object With (or Group Document With), then either choose another panel to dock with, or New Panel Group. Other panels may be added to the barge in the same manner, but these two panels get a lot of use and should probably remain in the default arrangement.

Image I shows the Object panel with a simple path selected. There are three buttons at the top left of the panel. The first has a pencil and a plus sign - this is the Add Stroke button. In the middle is the Add Fill button, which shows a paint bucket and a plus sign. The third button has an embossed dot with a drop shadow, and indicates the Add Effects feature. To the right side of the panel head are two icons that have trashcans. The large trashcan on the right deletes any item in the menu that is highlighted. The smaller trashcan with the red menu marks is used to delete an entire branch from the menu. If you had added a fill and a stroke and an effect or two to an object, clicking the Delete Branch button would remove the fill, stroke, and all the effects, leaving the original object untouched. If there is no "branch," this button is grayed out.

The rest of the panel is divided into two areas: the Properties list and the Attributes area. Depending on the object that is selected, and the property in the list, the contents of the Attributes area will display different information.

We could take several pages to describe the various looks and types of information that the Object panel can provide. To alleviate boredom, it might be easier and more informative to see how everything works in action. I've designed a logo for a phony product in order to use as many tricks and tools as possible. It will be obvious to you that many of the tricks wouldn't be used in a decent logo, but you can at least get an idea of what can be done. Just as obviously, some steps have been added just to show a FreeHand feature.

Imported Graphics
I started by importing (File>Import) a grayscale image of a tiger. In order to separate the tiger's head from the background and the rest of his body, I needed to trace an outline with the Pen tool. You can change the color of a grayscale image, so I made it a lighter color in order to make the tracing more visible. To do so, I created a brown color in the Mixer panel and dragged a swatch of the new color onto the Image properties Fill box in the Object panel (see Image II). Now tracing the tiger's outline would be less confusing. The Object panel displays the size and location of the image on the page, along with any scaling changes I may have made. The Image Source drop-down menu would be active if I had color management turned on. The Links button is active only when an imported object is selected. Clicking the button opens the Links panel, where you can see the names, locations, and sizes of the files; extract, change, or embed the files; or select a link from the list and select it (show) in the document.

Image III shows examples of the use of alpha channel and transparency. The top image is a simple grayscale image placed on top of a blue fill. The middle image has an alpha channel and it is displayed via the button in the Object panel. The alpha channel has been knocked out of the image, allowing the background color to show. On the bottom of the figure, the alpha channel has been displayed, and Transparency has been checked. Doing so allows the background fill color to show through the grayscale image.

For my logo, I wanted to have a posterized look for the tiger's head, so I selected the grayscale image (CMYK or RGB images can't be adjusted like this) and clicked the Image Adjust button in the bottom of the Object panel. Image IV shows the result. I clicked the stairstep icon to get a predefined four-color posterization for the image. If I wanted, I could move the individual bars in the Image Adjust window to create a custom curve as you would adjust the Curves panel in Fireworks...which brings up the next button - the roundtrip Fireworks editor. Clicking this button opens your image in Fireworks for any editing you would like to do. Interestingly enough, any scale or color modifications you've made to an image in FreeHand will not be applied when the image opens in Fireworks. But be careful when doing the roundtrip. You have a choice of using the original image or a PNG of the image. If you choose the original, any changes you make will be permanent, and there's no going back. However, if you choose the PNG option, you will be asked to find a Fireworks PNG document to work with. If the image you've selected isn't a Fireworks PNG, your only option is to open the original and Save A Copy as a PNG. Then you can click the Done button, which will return you to FreeHand. Once there, place the PNG you just created and click the Fireworks roundtrip button. At that time you can make any adjustments you wish. Clicking the Done button brings you back to FreeHand, where you'll see your updated image. Please keep in mind that when you select a grayscale TIFF in FreeHand and use the Fireworks roundtrip button you will convert the grayscale to RGB, and whether you use the PNG option or work directly on the original, the original grayscale will be modified permanently. Be careful!

A gray tiger in a logo isn't too exciting, so I changed the colors by employing Xtras>Colors>Name All Colors to add four gray tones to the Swatches panel. Then I created new colors for the tiger in the Mixer panel and used the Find & Replace window to change colors. That was a simple matter of selecting a gray tone in the From column and choosing a color in the To column.

At this point, I had a traced, posterized tiger on the drawing board. I cut (Cmd/Ctrl + x) the posterized tiger, selected the outline path, and chose Edit>Paste Inside to create what other programs call a clipping path. The tiger's head was now separated from its background, and finished for the moment.

Text Handling
As soon as you select the Text tool, the Object panel changes appearance to give you a multitude of text attribute options. Image V shows the initial attribute area setup. There are so many variables that a separate article is needed to do it justice.

The product needed a name, so I typed "TIGER CHOW" in a bold, heavy font (Block Heavy), with a carriage return (Return/Enter key) between words, and centered both lines of text.

I drew a circle with the Ellipse tool by holding down the Shift and Option/Alt key and clicking/dragging from the center of the tiger's face. The circle wasn't quite centered, so I added the Spacebar with my thumb and was able to drag the constrained circle to a better position.

Leaving the circle selected, I Shift-selected the text block and chose Text>Attach to Path (Shift+Cmd/Ctrl+Y). "TIGER" went to the top of the circle, and "CHOW" moved to the bottom (see Image VI: 1). And, boy does it look ugly! FreeHand admittedly has a problem in that it doesn't anti-alias fonts after they've been attached to paths or rotated/skewed. It will print fine, but looks a little scary on the monitor. Have faith.

The text was given a yellow-orange "tiger" color, but looked pretty wimpy, so I added a heavy black outline (8 points) by clicking the Add Stroke button in the Object panel. If you've got typographical sensitivities like I do, you can understand why I was horrified - the bold stroke encroached on the inside of the letterform (see Image VI: 2), and the text was getting uglier by the minute. There are times when this will work - but I can rarely find them. Try as you might, you cannot rearrange the stroke and fill in the hierarchy of the Object (Text) panel. The stroke will always be on top. So, to get above the problem, so to speak, I cloned the text and deleted the stroke from the Properties list. Bingo! The text was outlined as I had in mind, (see Image VI: 3) and my sensibilities were calmed, even though the orange letterforms were truncated due to the transforming and kerning I had done.

At this point I should tell you that you can eliminate the poor text rendering entirely by choosing Text>Convert to Paths (Shift+Cmd/Ctrl+P). Since the text becomes vector art at that time, rendering is not a problem - but you cannot edit the text as I'll do later in the article.

The text was still a little on the boring side, so I selected the top text block and chose Bevel and Emboss>Inner Bevel from the Add Effects drop-down menu. After adjusting the settings to my pleasure, I pronounced the text done (see Image VI: 4).

Wrapping Up the Cat
Okay, the text is okay, now to add some punch to the cat. I started by selecting it and moving it to a new layer above the text layer. To accomplish that, I went to the Layers panel, chose New from the Layers options drop-down menu, and named the new layer "Tiger." I switched to the Scale tool (keyboard shortcuts really help in FreeHand, the Scale tool default is F10, but I use Shift+Cmd/Ctrl+S so I don't have to move my hand too far out of typing position). I enlarged the tiger's head so it overlapped the text enough to make it interesting. But that wasn't enough, so in the Object panel I selected Add Effects>Shadow and Glow>Drop Shadow, and increased the distance to really raise the head above the text (see Image VII: 1).

That was okay, but it still lacked something, so back to Add Effects>Bend (see Image VII: 2). Bad idea. Kitty is wet and mad. The solution was to clone and hide the tiger's head (View>Hide Selection). I enlarged the original tiger head. Then I chose Edit>Cut Contents and deleted the colored image. That left the outline path of the tiger, which I filled with red. Now when I chose the Bend effect, I got the splash I was looking for. I sent the red splash behind the text, and chose View>Show All to bring the head back into view. The splash looked a little stark, so I added a glow (Add Effects>Shadow and Glow>Outer Glow) to soften the effect and give a little added weight to the logo (see Image VII: 3).

Editing
I felt pretty good about my efforts so far, but then my wife told me that the product name is "Tiger's Chew," not "Tiger Chow." Boy, I have to pay closer attention to her when she's talking on, and on, and on… If I had converted the text to paths way back at the beginning, I'd have a lot of work ahead of me, and I'd be pretty much like the bent cat in Image VII: 2. Luckily, I chose to go with live text, so it was a matter of choosing Edit>Find & Replace>Text. When that dialog box opened I typed "TIGER CHOW" in the Find field, and "TIGER'S CHEW" in the Replace field. I clicked the Find First button, then Change All, and closed the box. All the effects, strokes and basic placement are still in place. This task could have taken several minutes had the text been converted to paths, but was done in a few seconds by keeping the text live.

Finishing Touches
The product had to be mentioned, so a rectangle was drawn and ungrouped. In the Object panel, I added a light fill color, and for a little texture, I applied another fill. This time it was a tiled fill made of a few lines to indicate patches of hair. Since the tiled fill is above the solid colored fill, both are seen. I added a 2-point brown stroke to the rectangle, but for interest I added a Ragged effect, with three copies. Then for good measure, I tacked on an inner shadow.

I set the text for the box and thought that the whole arrangement was still a little bland. So I selected corner points on the rectangle and dragged out control handles to give the rectangle a slight S-curve as shown in Image VIII. Notice in the figure that all the ragged lines, the solid fill color, the tiled fill, and the inner shadow adapt immediately to the new path without any work on my part. FreeHand takes care of everything!

I still wasn't satisfied, so I applied an envelope to the rectangle and text. Again, the effects follow my changes perfectly. A few more tweaks of the logo in general and I had my final logo as seen in Image IX.

Objects with a Grain of Salt
There are several things about the Object panel that can drive you crazy until you figure out what's going on. Number one on most people's list is when you attempt to change attributes on objects within a group. I'll start with text objects. When you have live text, you can change the fill color and/or add a stroke and change its color from any of the usual spots - Swatches, Mixer, Tints, or Object panels, or the color wells in the Tools menu. Nothing new here. But if you convert the text to paths you'll notice that all indicators show a fill and stroke of none, and you can't seem to change the colors at all. That's due to the text characters being in a group, and in some letters, compound paths (o, e, a, P, Q, and so on). In order to change the color, you have to change the way you think about changing color. First you have to burrow down into the group until you reach the lowest common denominator. The quickest way is to use the Edit>Subselect command. Depending on the situation, one or two applications of this command will fill the panels with your color options. The easiest way to Subselect objects in a group is to create a keyboard shortcut. I use Cmd/Ctrl+Opt/Alt+X; you can make it anything you want - there is no default shortcut.

"Normal" grouped objects work in the same manner as with text. The first time you look in the Object panel, you'll see "Group" as the Property area's first listing, with Contents listed beneath. Double-click Contents to Subselect the objects within the group, and the number of objects will be listed, with an entry for whatever Stroke and Fill is applied. If your items have the same stroke and fill, you can make a change to them all at this point. However, if you have multiple objects that have different color attributes, the stroke and fill wells will have a dash in them, indicating multiplicity. To make changes, you must isolate individual items. At this point, you could hold down the Shift key and deselect items you don't want to change, but it's almost easier to use the Ungroup command in the beginning and go straight to changing attributes.

If you apply a stroke or fill to the group, all objects will receive the new fill color (or tiled fill, or patterned fill - whatever you choose), and gain the new stroke. All this is in addition to whatever strokes and fills the objects have originally. It's important to keep in mind that you can easily move strokes and fills up and down in the Object panel - with the exception of live text.

Summary
FreeHand's Object panel is a fascinating part of the program's operation. Spend some time on noncritical drawings and text treatments until you become proficient with all the variables within the Properties area and the Attributes area.

Acknowledgments
Many thanks to John Nosal, Delores Highsmith, David Spells, Peter Moody, and other engineers at Macromedia for the technical editing they provide.

More Stories By Ron Rockwell

Illustrator, designer, author, and Team Macromedia member Ron Rockwell lives and works with his wife, Yvonne, in the Pocono Mountains of Pennsylvania. Ron is MXDJ's FreeHand editor and the author of FreeHand 10 f/x & Design, and he co-authored Studio MX Bible and the Digital Photography Bible. Ron has just introduced a "Casual FreeHand" course available at www.brainstormer.org.
He has Web sites at www.nidus-corp.com and www.brainstormer.org.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.