Design 101 – Creating FreeHand’s Software Identity – A DreamLight Insight Archive 1995

Design 101 – Creating FreeHand’s Software Identity – A DreamLight Insight Archive 1995

A 1995 Article from the DreamLight Insight Archives for Throwback Thursday.

The following is an article I wrote for Desktop Publishers’ Design 101 feature. It’s a behind the scenes, how-to article about creating FreeHand’s software identity when Macromedia acquired it and rolled it into its software family.


Behind the Scenes Article – Creating FreeHand’s Software Identity

Desktop Publishers Journal - Scaramozzino - FreeHand's New Identity

dir4When Macromedia acquired Altsys Corporation and the rights to FreeHand, they wanted a redesigned software identity for the high profile introduction of the new FreeHand 5.0. [They turned to DreamLight based on an earlier illustration I had done – Lucid Beginnings.] The project required that the FreeHand software be integrated into Macromedia’s existing product line while retaining FreeHand’s own identity.

Macromedia’s existing package design consisted of a few key elements:

  • The product name in a red box at the bottom of the cover.
  • A positioning statement running down the left side of the cover.
  • A bold graphic figure that would command the viewer’s attention.

fh4FreeHand’s previous packaging was based on a blue & purple leaping man image drawn in a loose creative style.

Not only did we have to combine the best elements from the previous packages but we also needed to show off FreeHand’s powerful illustration capabilities with a graphic illustration that would be a good example of what the FreeHand software was capable of producing.

To address these issues I proposed creating a new figure that would retain some of the original elements of the leaping man but also show the high end illustration capabilities of FreeHand. Since the position statement emphasizes that FreeHand is “The Most Powerful Tool,” I thought the image should show a dynamic figure wielding a powerful illustration tool. The elements that I retained from the original FreeHand figure were the same basic pose with an added twist for power, some elements of the free flowing creative drawing style and bold coloring.

After analyzing the old FreeHand and Director boxes, as well as Illustrator, FreeHand’s primary competition, I felt that they were flat and very two dimensional. I wanted to introduce a strong three dimensional presence. I wanted the figure to be ripping out of the package toward the viewer. I decided to use depth as the transitional element from the loose creative drawing style to a more photo-realistic three dimensional illustration style. The image would appear to be a loose drawing on the surface of the box that was transforming and coming to life before your eyes. As it lifted off the box it would become more solid and by the time I reached the tip of the pen I would have a photo-realistic illustration. The toughest part was to create a smooth transition from the loose style to the tight style to avoid the image breaking apart or looking like two separate illustrations that were simply pasted together.

Macromedia FreeHand Cover Design Mockup - Software Identity Design

I designed and illustrated the package entirely in FreeHand 5.0. I used the DreamLight logo as a place holder for the placement of the awards that FreeHand had won. The awards would be run across the top left of the box where the figure was pointing.

I started by designing the page based on the existing Director box to fit in with the existing Macromedia software identity design. I put the program name, FreeHand, in the red rectangle at the bottom. I chose Garamond Book Condensed for the dominant typeface based on its style, grace and power. I added a new element, a star burst unioned with a square, for the version number to help balance the bottom of the box. Next I ran the position statement down the left side of the box in the same typeface.

I then proceeded to divide the visual space with guide lines radiating out of the corners starting with the top left and crossing where the figure would be located. After intersecting, the guides then proceed down to the lower left, pointing to the title box. I laid out additional circular guides to help with the proportions of the figure based on the famous DaVinci drawing, “Proportions of man according to Vitruvius.” Very early on I liked the view of the guide lines and proposed that we actually keep them in the final illustration. The guides allude to the page design aspects of FreeHand and they help frame in the overall design.

As source material for the illustration, I shot a video scan of a male model in the approximate pose I wanted and then used various photographs of female body builders as guides to the muscle structures. This use of varied source images enabled me to create a powerful figure without it looking too masculine or muscle bound.

Javelin Thrower Hand Screen GrabI used the figure’s pointing hand as the only point of contact with the surface of the package. This point of contact was where the figure drawing started. I created it with the most free flowing style of the entire illustration. This was the point where the figure got its first creative spark of life on it’s way up and out of the box. I drew the hand in the pose of Michelangelo’s God from the “Creation of Adam.” It also echoed the Director pointing figure. The right hand and left foot were the parts closest to the level of the box surface so I drew them in the loosest style. I used a pressure sensitive stylus and the freehand tool to paint in these areas in broad loose flat strokes.

Javelin Thrower Leg Screen GrabAs I proceeded up the arm and leg to the torso, I gradually introduced broader shapes with graduated fills to help create a more solid feeling. These shapes I drew with the pen tool as outlines that I then filled. The right leg is at the same level as the torso so both are drawn in the same semi-solid manner with broad shaded shapes. I added additional free flowing brush strokes to the torso and leg areas to help tie the entire figure together.

Javelin Thrower Pectoral Blends Screen Grab

As the figure twists, its left shoulder rises up off the surface as a transition to the left arm and pen. The left pectoral is where I add the first two way blend for three dimensional modeling. A two way blend consists of two elements filled with gradations that are then blended together. This allows the color to change in two different directions creating a highly three dimensional effect. I typically create these two way blends in multiple sections as well. In the pectoral you can see that there are four main shapes, each pair is blended together creating three blends that flow together. This allows flowing through many intermediate colors rather than simply blending between only two flat colors. I added highlights to the left shoulder to help make the transition to the chrome of the left hand and the high tech illustration pen.

Javelin Thrower Left Arm Blends Screen Grabs

The toughest part of the illustration was the chrome arm. I created this section using the same technique of blended graduated fills, but this time needed to orchestrate many more blends to simulate the reflections in the chrome surface. First I worked on the shape of the arm itself. Once I was satisfied with the overall shape, I added new blends to simulate the spaces between the fingers and the multicolored highlights. This is where FreeHand really shines. When modeling a blended shape in FreeHand you can option click on one of the two ends of the blend, modify the shape and the group will automatically reblend itself on the fly. When editing these shapes I’ll typically lower the blend steps to 2 or 3 for faster redraw, then when I’m done, I’ll crank them up to 20 or 30 steps per blend.

Javelin Thrower Pen Tip Screen grab

The illustration of the pen itself was more time consuming, but not as tough as the chrome arm because all the shapes are geometric that makes them easier to work with. I used many of the same techniques of blended gradations to create the photo-realistic image. I wanted the tip of the pen to look as realistic as possible so I used many more subtle blends to help give it a sense of depth and realism. Notice the reflections of the chrome cylinders of the tip in the black disks. These small, subtle touches take time but add dramatically to the overall effect. Notice that in the keyline view all you see are the basic shapes. Most of the shapes have details pasted inside them. This is another area where FreeHand really excels. In Illustrator the keyline would look like a dense mess, you would be unable to distinguish anything because there would be far too many lines. FreeHand hides the contents of each shape to reduce screen clutter that helps dramatically in high end illustrations.

Javelin Thrower Shadow Screen GrabJavelin Thrower Body Shadow Screen GrabTo create the shadow, I auto traced the figure first. I skewed and scaled portions of the resulting shape keeping the tip of the finger and the tip of the toe close to their starting points. The portions of the figure that were further above the plane were moved further. Then I auto traced the pen and skewed and scaled it as well. I finally used the union tool to tie the two shadows together.

The final step of the illustration was to create the shadow of the pen that falls across the body. I first drew one large shape where the shadow would fall. Then I cloned all the shapes of the body that are under the shadow and darkened each of them. These new darker shapes I then paste inside the shadow shape and set the shadow shape to have no stroke or fill. This results in a single shadow with edges that I can interactively edit, effectively changing the area of the body that is in shadow. This effect can be quite convincing to simulate shadows.

Macromedia FreeHand Splash Screen DesignThe next part of the project was to create a splash screen for the software. I designed the splash screen directly in FreeHand which gave me the greatest freedom of design using layers and object oriented elements. Since the splash is displayed on screen rather than printed, I had to rasterize the PostScript drawing into a pixel map. To do this I saved individual components as Illustrator 3 files from within FreeHand. I separated the image into parts such as the figure, the figure shadow, the title block, the guidelines, etc. Next I opened each new file in Illustrator and saved each as Illustrator 3 EPS files. These resulting files I then opened in Photoshop that rasterizes them. I positioned each component on separate layers within Photoshop 3 that allowed me to create soft shadows and layer the items the way I liked. I then flattened the final Photoshop image and saved it as a 24 bit PICT file. I then opened the PICT in ResEdit and placed it into the proper dialog box for direct use by the software engineers.

Macromedia FreeHand App Icon DesignMacromedia FreeHand Doc Icon DesignThe final portion of the software identity project was to design the icon sets for FreeHand. I first chose a few key elements to help define the entire family. I decided to use the elements of the pen tip from the cover illustration in conjunction with a multicolored pen stroke. The pen tip alludes to the technical illustration capabilities as well as being an action oriented tool. The pen stroke alludes to the creative aspects of FreeHand as well as being an element from a file or drawing.

Once I settled on these elements, I split the family into two distinct groups. One group was for the program itself and components of the software. I decided to base this group around the action diamond that Apple uses to denote a generic application. This group consists of the FreeHand Application file, Xtra files, Help file, and Color Palette files.

The second group I based around a generic page icon since these denote actual drawing files. This group consists of the FreeHand Drawing file, Template file, EPS file, and Edition file.

DreamLight PixelPaletteWhen I design icons I use DreamLight PixelPalettes™ with Macromedia Director. While there are specific icon design tools available, I feel they limit my freedom. I prefer to work in the Macromedia Director paint window where I can spread out on a page and create many variations as I explore the icon design. The DreamLight PixelPalettes (shareware available on-line) give me easy access to icon colors directly on the page. The “legal” colors are the colors that will be dimmed by the finder when the icon is selected as well as the colors that will be tinted by the label menu in the Finder. I often break the rules and use a few “non-legal” colors in the design. This has the effect of making part of the icon glow when selected. In the case of the FreeHand Icons I used this technique to make the guidelines and the pen stroke glow when the icons are selected.

DreamLightLogoIconsHere is an example of how our logo glows when our folder icons are selected.

The work was done with a Power Macintosh 8100/80AV with 104Mb RAM, 500Mb internal hard disk, 2Gb external hard disk, Radius IntelliColor Display/20e, LeMans GT Graphics Accelerator, NEC MultiSync 5FGe display, a camcorder for video input to the AV card, Kurta XGT/ADB Pressure Tablet, 230Mb MO drive.

Michael Scaramozzino is president and creative director of DreamLight Incorporated. DreamLight is a digital design, illustration, animation and interactive multimedia studio based in Wilmington, Mass. DreamLight can be reached online at www.DreamLight.com


For more information about this project and other software identity icon design projects we did for Macromedia, including Macromedia Director and Macromedia Extreme 3D, please see our Macromedia Software Identity Design portfolio page. Our Javelin Thrower illustration is also available on merchandise including posters, T-shirts and mugs.

DreamLight wrote the book: Creating a 3D Animated CGI Short. See what we can do for you.

Leave a Reply