I consider geometry to be a fairly important aspect of design, so when I came across the classic 8×8 13×5 “optical illusion” (it’s actually more of geometry problem) over the weekend, I decided to put together a little video illustrating the hole in the 8×8 rearranged into 13×5 problem.

The idea is that an 8×8 square can be divided into four shapes (2 quadrilaterals, 2 right-triangles) which can then be re-positioned to form a 13×5 rectangle (never mind for a moment that this would defy the laws of physics). Each quadrilateral is combined with one of the right triangles, and then end result is what appears to be two right triangles with a base of 13 and a height of 5. The thought is that these two triangles can then be combined into a 13 x 5 rectangle.

The problem with this line of thinking is that the two “triangles” (created by combining one of the quadrilaterals with one of the triangles) are not actually triangles at all, rather they a quadrilaterals with interior angles of 20.55°, 90°, 68.20°, and 181.25°. The 181.25° is close enough to 180° that at casual glance the composite shape appears to only have three sides, when, in fact, it has four.

When the two composite supposed “triangles” are joined together in an attempt to form a rectangle, a hole in the shape of another quadrilateral (a parallelogram) is formed. This hole has an area of 1, which accounts for the missing difference between 8×8 (or 64) and 13×5 (or 65).

Sadly, you can’t create an extra square-unit of area, by simply rearranging an 8×8 square into a 13×5. If you could, I’d buy myself an 8×8 sheet of gold and retire soon after.

You can also check out a fully-scalable Flash version of the 8×8 13×5 video (or download the .swf file by right-clicking or ctrl-clicking the link and doing a Save Target).

Main Street Insurance Agency is an Independent Insurance Agent located in Christiansburg, VA.

GTP Designs recently launched a new website for Main Street Insurance Agency. Main Street Insurance Agency is an Independent Insurance Agent locally-owned and operated in Christiansburg, VA.

The custom-designed site includes an animated Flash intro, use of Google Maps API, and a PHP-driven quote request form. You can visit the live site at christiansburginsurance.com.

The Unexplained Phenomenon that is the Google Doodle

Google seems to be having some fun with their “Google Doodle” today. Generally, the Google Doodle marks an anniversary of an event related to the image (a recent example would be Michael Jackson’s feet appearing in the Google logo on MJ’s birthday). However, the current doodle, which features a UFO beaming up the second letter “o” from the Google log, does not link to information about any particular individual or event. Instead, it simply gives you the search results for “unexplained phenomenon.”

Translated: All your o are belong to us

In addition to the Google Doodle, the code (A=1….Z=26) above appears on Google’s Twitter page. Using your Little Orphan Annie Decoder Ring (don’t worry it doesn’t say "Drink more Ovaltine."), you can translate it to read, "All your o are belong to us". This is apparently a reference to poor translation that dates back to the 1991 video game Zero Wing, which later caused an internet phenomenon/meme, according to Wikipedia.

So, is Google just going out of their way to create their own internet phenomenon with their cryptic Google Doodle and Twitter meme? I’d be willing to bet that by the end of the day, if not already, “Unexplained Phenomenon” will be the most highly searched term on the web, which just goes to show how much influence Google has on the online world.

I recently removed Adobe CS2 from my laptop to clear up some hard drive space (Note: you can legally continue to run older versions of Adobe CS even after you’ve upgraded, and it’s probably a good idea to keep your older versions unless you need the disk space). Well, today, I went to open a document that I had created prior to removing CS2, when lo and behold, Illustrator CS4 informed me that Century Old Style Std was missing. Now, I had created this document in Illustrator CS4, so it didn’t dawn on me right away that the removal of CS2 could be the source of the problem, so I wasted quite a bit of time trying to figure out how this font could have been deleted from my Windows>Fonts folder. As it turns out, it wasn’t deleted from there at all, because it was never there in the first place.

When installing Adobe CS2 on a Windows machine,  Open Type Fonts are stored in Program Files>Common Files>Adobe>Fonts (on a Mac they are stored in [Macintosh HD] /Library/Application Support/Adobe/Fonts/). As long as you leave the fonts there, you can upgrade to newer versions of Adobe CS products and the fonts will still be accessible. For example, upgrading to CS4 will not wipe out your CS2 fonts from this folder. HOWEVER, if at some point you decide to remove your older CS or CS2 versions, the uninstaller will remove the fonts associated with the Creative Suite version you are removing (I think this only applicable to CS and CS2 removal, but I’m not positive).

The easiest way to prevent this from happening is, of course, not to remove your older versions of Adobe CS. If you’re like me and you’ve already made that mistake, hopefully, you still have your CS or CS2 installation disks laying around (or better yet, you still have the older versions on another machine). To fix the situation, either completely reinstall your old CS version(s) or copy the missing fonts you need off another machine that you are LEGALLY running the older versions on (the Adobe Creative Suite license typically allows activation on 2 machines) and paste them into the folder mentioned in the paragraph above. Restart your Adobe application, and you should be all set.

Orange Peel Effect created in Adobe Illustrator

The following Adobe Illustrator tools/features will be used in this tutorial:

• Selection Tool
• Ellipse Tool
• Pen Tool
• Add Anchor Point Tool
• Delete Anchor Point Tool
• 3D Revolve
• Layers Palette

For this example, open a new 640px x 480px CMYK document in Adobe Illustrator.

Step One: Create Map Art

The first step toward achieving this effect, is to create and image map that we will later apply our revolved object, which will result in a spherical shape. In the Layers Palette, double-click on Layer 1 and name it “Map Art.”

We’ll start by creating a set of guides to help us draw our map art. Make sure you have your rulers visible (View>Show Rulers or Ctrl/Cmd-R) and that your guides are not set to locked (View>Guides>Lock Guides should be unchecked), and drag out 7 horizontal guides and two vertical guides and arrange somewhat like the guides in the image below. Select the guides using the Selection Tool and then use the Vertical Distribute Space option in the Align Palette to evenly distribute the vertical spacing between the 7 horizontal guides.

Select the guides and use the Align Palette to vertically distribute the horizontal guides evenly.

Once you have vertically distributed the guides, your guides should look similar to the image below. If you need to adjust the two vertical guides so that they look close to the image below, do so now. The placement of the vertical guides does not need to be exact, but it should look similar to the example image.

Your guide placement should look similar to these guides.

Once you have your guides in place, you can lock them (View>Guides>Lock Guides). Next, we’re going to activate the Pen Tool and create a series of diagonal lines. In this example, I’m using a orange stroke color (C=0 M=50 Y=100 K=0). For the first line, we’ll place our starting point at the upper-left intersection between the top horizontal guide and the left vertical. The end point will be the intersection of the second-most upper horizontal guide and the right vertical guide (see image below).

Use the Pen Tool and the guides to create a diagonal line

Now, using the intersections of our guides at starting and ending points for our lines, we’re going to create 5 more lines parallel to our first line and evenly distributed, as seen in the image below.

Using the guides create 5 more evenly distribute parallel lines.

Once you have all 6 lines drawn using the method above, simultaneously select all 6 lines and group them together (Object>Group or Ctrl/Cmd-G). With the lines grouped, set the stroke weight of the lines to 20pt.

With the grouped lines selected, set Stroke Weight = 20pt

Next, we want to expand our strokes into shapes. With the grouped lines still selected, go to Object>Expand and click “OK.” You now should have a group of six filled shapes.

Expand the strokes to shapes

If you look closely at our resultant shapes, you’ll see that the bottom-left corners extend past the left vertical guide and that the upper-right corners extend past the right vertical guide. We want the edges of our shapes to be flush with our vertical guides. To achieve this, we’ll start by using the Selection Tool to horizontally expand our group of shapes, so that the upper-left corners are aligned to the left vertical guide and the bottom-right corners are aligned to the right vertical guide. With the group of shapes selected zoom in to area indicated in the image below (using either the Navigator or the Magnifying Glass Tool).

Zoom in on the circled area.

Use the Selection Tool to drag the control point of the selection marquee until the upper-left corner is aligned with the left vertical guide.

Align the upper-left corner with the vertical guide.

Following the same method, zoom in on the right side of our grouped object.

Zoom in on the circled area.

Now, use the Selection Tool to drag to control point of the selection marquee until the lower-right corner is aligned with the right vertical guide.

Align bottom-right corners with vertical guide.

Now, we have our upper-left corners aligned to the left vertical guide, and our lower-right corners aligned to the right vertical guide, but what about the upper-right and lower-left corners that extend beyond the vertical guides? We’re going to take care of those, next. Activate the Add Anchor Point Tool (it is grouped with the Pen Tool; Keyboard Shortcut is +), and add anchor points at the intersections of the right vertical guide and the top of edges of each of our shapes.

Add anchor points at the intersection of the top edge of each shape and the right vertical guide.

On the left side of our shapes, we’re going to add anchor points at the intersection of the bottom edge of our shapes and the left vertical guide.

Add points at the intersection of the bottom edge and the left vertical guide.

Now, we’re going to activate that Delete Anchor Point Tool (Keyboard Shortcut -) and delete the far lower-left corner points on each of our shapes (these are the points that extend past the left vertical guide).

Delete the lower-left corner points from each shape.

Using the Delete Anchor Point Tool, move over to the right side of our grouped object and delete the upper-right corner points.

Delete the upper right corner points for each shape.

Once you’ve deleted the point extending beyond the vertical guides, the side edges of your shapes should be aligned with the vertical guides on each side.

Edges should now be aligned with the vertical guides.

Your resultant object should now look like this.

Edges on both sides should be aligned with the vertical guides.

Using the Add Anchor Point Tool, add a point to the top edge of the bottom shape just a little to the right of the midpoint between the left and right guides (see image).

Add an anchor point to the top edge of the bottom shape just to the right of the center.

Use the Delete Anchor Point to delete the two corner points on the right side of the bottom shape to get the resultant shape below.

Resultant shape after deleting the two corner points on the right side of the bottom shape.

Next, we’ll use the same method on the top-shape, only with the sides reversed. Add the new anchor point to the bottom edge of the top shape just to the left of the midpoint between the vertical guides, then delete the two left corner points.  This will create the appearance of a notch at the top and the base of your peel where the stem/core would have been.  You should now have a resultant object similar to the image below.

This is the resultant shape for our map art.

This is the final shape for our image map. Our next step is to drag our map art to the Symbols Palette to create a new symbol based on this object. (If the Symbols Palette is not visible go to Window>Symbols Palette.)

Drag the grouped object over into the Symbols Palette to convert it to a symbol.

When you drag the object into the Symbols Palette, the Symbol Options dialog box will appear. Give this symbol a name, such as Orange_Peel, and click “OK” (you don’t need to modify any of the other options for this example).

Name the symbol and click OK.

Since we are finished with our map_art, go ahead an lock the map_art layer and turn the visibility for it off.

Step Two: Using the 3D Revolve Effect

With our map art completed and converted to a symbol, we’re ready to create our shape that we will be applying the map art to. Create a new layer in the Layers Palette, double-click it, and name Orange_Peel. Activate the Ellipse Tool, and create a circular shape in the middle of the artboard (in this example, I created a circle with 125px radius).

Create a circular shape with the Ellipse Tool.

Activate the Direct Selection Tool and select the right control point on our ellipse/circle and then hit the Delete key (follow this method, and do not try to use the Delete Anchor Point Tool for this step).

Use the Direct Selection Tool to select the left point and then hit the Delete key.

You should now be left with a semi-circle path like the image below.

Resultant semi-circle path.

With this path selected, go to Effects>3D>Revolve. This will bring up the 3D Revolve Options dialog box.

3D Revolve Options

Click on the Map Art button to bring up the Map Art dialog box. At the upper-right of the Map Art Options box, there is a drop-down menu labeled Symbol, click on the drop-down box and select the Orange_Peel symbol that we just created. The symbol should appear below on the image map. Click on the Scale to Fit button in the lower-left to expand the symbol to fit the image map. Then check the checkboxes next to Shade Artwork and Invisible Geometry. The Shade Artwork option will create more of a sense of depth through shading, while the Invisible Geometry will make our shape invisible allowing only the map art to be seen.

Map Art Options: click on Scale to Fit, and check Shade Artwork and Invisible Geometry.

Click OK to return to the main 3D Revolve Options dialog box. You’ll notice that there are setting for rotation angles in the X, Y, and Z planes. These values will determine the perspective of your 3D object. You can either enter numeric values in the text boxes, or simply click and drag on the cube to modify its position. If you click on the More Options button on the 3D Revolve Options dialog box you can modify the lighting settings, modify the position and number of light sources, and modify the shading used. For simplicity’s sake, I’m going to leave these values at the default settings for this example. Feel free to experiment with these settings. Clicking on the Preview checkbox will give you a preview of what your resultant 3D shape will look like based on the current settings, but it can slow down performance when you start creating more complex shapes. When you are satisfied with your settings, click OK, and you should end up with a nice “orange peel” effect like the images below.

Orange Peel View 01

Orange Peel View 2 (modified angle)

Orange Peel View 3 (modified angle)

This should be a good example to get you started with using Map Art with the 3D Revolve Effect. Feel free to try out other art on the spherical shape. You can create new objects, like a beach ball, for instance, just by changing the selected symbol in the Map Art options.

Beach Ball created by simply changing the map art on the orange peel sphere.

Realistic clouds created in Adobe Illustrator

The following Adobe Illustrator tools will be used in this tutorial:

• Rectangle Tool
• Layers Palette
• Ellipse Tool
• Symbol Sprayer Tool
• Symbol Screener Tool
• Gradient Tool/Palette
• Symbol Palette

Let’s get started by opening a new document in Illustrator. For this tutorial, I’ll be using a 600px X 600px CMYK document. (This technique will work just fine with RGB on any size document.)

Step 1. Create the sky background

On your first layer, draw a square or rectangle that spanning the artboard, and fill it with your desired sky color. For this example, I used a linear gradient fill using Pantone 2727 U (converted to CMYK process color) as the starting color and Pantone 281 U (converted to CMYK process color) as the end color. If you’re using the same color scheme that I’m using, you should end up with a result similar to the image below. Again, the color and style of your sky background is entirely up to you.

Gradient fill used to create sky background

After you have your sky background created, use the Layers Palette (Windows>Layers or F7) to give the active layer a name, such as “Sky Background” and then lock the layer.

Step 2: Create Cloud Symbol

Our next step is going to be to create the key component of our clouds. We will be creating a symbol that we’ll add to the Symbols Palette. Our symbol will be comprised of 3 ellipses with radial gradient fills. Create a new layer in the Layers Palette and name it “Cloud Symbol Elements.”

Next, activate the Ellipse Tool, and we’ll get started with our first ellipse. Create a circle with the ellipse tool by holding Shift while dragging, or click and release the mouse to manually enter dimensions for the ellipse/circle. My first ellipse, in this example is about 130px X 130px. (The exact dimensions and placement of this and subsequent ellipses are up to you, but I’ll give you the dimensions and placement that I used for this example.) Once your first ellipse/circle is drawn, we’re going to use the Gradient Palette (Windows>Gradient or Ctrl/Cmd-F9) to create a radial gradient fill (set type = “radial”) with both the beginning and ending color stops being pure white. If you’re wondering why we would bother using a gradient when only one color is involved, you’ll see after the next step. On the gradient palette, select the color stop on the right and set its opacity to 0% (see image below).

Set the opacity of the color stop on the right to 0%.

With our radial gradient fill applied, our ellipse should now fade from white to transparent. On the same layer, duplicate the existing ellipse either in the layers palette or by copying (ctrl/cmd-C) and pasting in front (ctrl/cmd-F). With the Selection tool, move the newly created duplicate ellipse over to offset it from our original ellipse. In our example, I shifted the new ellipse over to the right about 50px and down about 20px. How you offset the second ellipse is, again, arbitrary, but you don’t want it set too far off from the original that there is no overlap of the gradients. (In this example, the “centers” of the ellipses/circles should not be offset further than 50px either up/down or left/right.)

Duplicate the original ellipse and offset the duplicate from the original.

Since we will be using these shapes as the basis for our clouds, we don’t want our symbol to be completely symmetric, so let’s modify our duplicate ellipse a bit. I have reduced the height of my duplicate ellipse to about 80px and rotated it -23°, using the Selection Tool.

Ellipse with height reduced to 80px and rotated -23°

Next, we are going to repeat the process that we just went through with another duplicate ellipse. Copy and paste to front another duplicate of our original ellipse. This time I offset the ellipse 40px to the right and 7px down from our original ellipse. I then reduced the height to 110px, increased the width to 170px, and then rotated the ellipse 67°.

The third ellipse is modified and offset to create an even more asymmetric shape.

The last thing I want to do before we create our cloud symbol, is to slightly modify our original ellipse, so that I don’t have a completely “circular” edge. With the original ellipse/circle selected, I want to decrease the height slightly down to about 110px.

Decrease the height of the original ellipse to 110px.

Now, we are ready to create our cloud symbol. (As has been the case throughout this tutorial, the dimensions and angles of my ellipses are somewhat arbitrary, so feel free to try your own combinations and of ellipses.)

With the Symbols Palette open (Widows>Symbols Palette or Ctrl/Cmd-Shift-F11), use the Selection Tool to select all three ellipses simultaneously and drag them over to the Symbols Palette.

Select all three ellipses and drag them to the Symbols Palette.

After you drag the ellipses over the Symbols Palette and release the mouse button, the Symbol Options dialog box will come up. Give your symbol a name (like “Cloud Symbol”) and set the Type: to “Graphic.” You can set the registration point of the symbol to where ever you prefer, in this case I have selected the center point, but it really won’t make a huge difference in this particular application of how we will be using the symbol.

Name the symbol and set its type to "Graphic." You can also specify the registration point for the symbol.

After you have entered the name, set the symbol type, and selected a registration point, click “OK,” and your new symbol should now be visible in the Symbol Palette. Since our symbol is comprised of white and transparent fills, the thumbnail for our symbol will appear “blank” in the Symbols Palette, since the default thumbnail background is white. Fear not, though, our symbol is there safe and sound.

The thumbnail for our cloud symbol might appear to be blank, but it is still there.

Step 3: Build Cloud Foundation

Now that our symbol has been created, we can lock and hide the “Cloud Symbol” layer using the Layers Palette.

Next, we are ready to start building our clouds, using the Symbol Sprayer Tool (keyboard shortcut Shift-S). First, let’s access the Symbolism Tool Options by double-clicking the Symbol Sprayer Tool icon in the main toolbar. For this example, we’re going to set Diameter to 110px. The Diameter will determine the size of each instance of our symbol. We want to set the Intensity (which is the number of instances of the symbol that is added per click) to 1 (leave the control method as “Fixed”). Since we will be building each of our clouds from a number of instances of our “Cloud Symbol,” we’ll set the Symbol Set Density to the highest value of 10 to limit the spacing in between each instance of the symbol. The rest of the settings can remain at their default values for this example.

Set Diameter to 110px, Intensity to 1, and Symbol Set Density to 10 in the Symbolism Tool Options.

Once you have adjusted the Symbolism Tool Options, click “OK.” We want to add a new layer to draw our first cloud on, so create a new layer in the Layers Palette and name it something like “Cloud 01.” We can now start using the Symbol Sprayer to build our first cloud. Using mouse-clicks (or a tablet/stylus), begin adding instances of the symbol to create the foundation for your first cloud (see below).

Use the Symbol Sprayer Tool to add an instance of the "Cloud Symbol."

Add more instances to build the foundation of your cloud.

Continuing adding symbol instances until you achieve your desired cloud shape.

Next, we are going to use the Symbol Screener Tool to adjust the opacity of some of the instances of our cloud symbol. We can access this tool by clicking and holding the mouse button over on the Symbol Sprayer Tool icon in the main toolbar to bring up the Symbol Tools.

The Symbol Screener Tool

With the Symbol Screen Tool activated, click and release on instances of the Cloud Symbol whose opacity you wish to decrease (holding down the Alt key while using the Symbol Screener Tool will increase the opacity of a symbol instance).

Adjust the opacity of symbol instances by clicking on them with the Symbol Screener Tool.

Feel free to experiment with this tool to achieve your desired results. I like to decrease the opacity on the symbols toward the outside of the main cloud shape. Then, I’ll pick a few spots elsewhere to decrease the opacity. I mainly use a trial-and-error approach. Remember, you can add opacity back to an instance, by holding the Alt key.

Step 4: Creating a Shadow Symbol

We’ve got a decent foundation for a cloud, but clouds much like anything we see are affected by light and shadows, so to give our clouds the illusion of depth, we want to create some shadowing effects. There are several ways to go about doing this (I hope to do a tutorial on another technique using transparency/opacity masks in conjunction with the cloud symbol, in the near future), but in this example we are going to create an alternate cloud symbol for shading purposes. To do this, we’ll start by creating a duplicate of our cloud symbol in the Symbols Palette by dragging our original Cloud Symbol icon to the New Symbol icon at the bottom of the Symbols Palette (see below).

Drag the Cloud Symbol to the New Symbol icon to duplicate it.

This will create a duplicate symbol named “Cloud_Symbol 1.” We want to rename this symbol to “Cloud_Shadow_Symbol.” To do this we click on the menu button on the Symbols Palette and select Symbol Options.

Click the menu button and select Symbol Options.

Rename the duplicate symbol to Cloud_Shadow_Symbol.

Now, that we have our duplicate symbol renamed, we want to edit it, so that we can create some shadow effects with it. To edit a symbol, simply double-click on the symbol in the Symbols Palette. The symbol will open up on its own isolated artboard where we can edit it. In the case of our cloud symbol, since it is white and isolated on a white background, we won’t be able to see any of the objects that comprise the symbol until we select them with the Selection Tool. Create a selection marquee over the symbol artboard, by clicking and dragging with the Selection Tool to select our three ellipses.

Use the Selection Tool to select and highlight the "invisible" ellipses.

Now, that we have all three ellipses that comprise our symbol selected, we are going to use the Gradient Palette to change our gradient from white to a 30% gray (C=0, M=0, Y=0, K=30). To do this click on each color stop, and set the color value to C=0, M=0, Y=0, K=30 (if you have a swatch for this particular color you can also drag it from the Swatch Palette to the color stop on the Gradient Palette).

Set each color stop to 30% gray (C=0, M=0, Y=0, K=0)

Once you have set the gradient color stops to the new color value, you can exit out of the Edit Symbol mode, by double clicking outside the artboard with the Selection Tool. You should now be able to see a gray colored icon for the Cloud_Shadow_Symbol in the Symbols Palette.  Important: make sure that you set BOTH color stops to the same color for this step.

The Cloud_Shadow_Symbol should now have a visibly gray icon in the Symbols Palette.

Using the Layers Palette, within your Cloud 01 layer, double-click the Symbol Set and rename it “Cloud 01 Foundation” and the lock it (not the entire layer, just the Cloud 01 Foundation). This will prevent any unwanted editing of our finished cloud foundation, for now.

Rename the symbol set to "Cloud 01 Foundation" and lock it.

Now, we can start adding shadows to our foundation with our newly created Cloud Shadow Symbol. We can add the shadows on the Cloud 01 layer, with no worries, since we locked our cloud foundation for the time being. Let’s start by selecting the Symbol Sprayer tool, and double-clicking it on the main toolbar to bring up the Symbolism Tool Options. We want to decrease out diameter a bit for our shadow symbol. In this example, I’m going to decrease the diameter down to 80px.

Decrease Diameter to 80px in the Symbolism Tools Options.

Now, we will start adding some instances of our “shadow” symbol on top of the cloud foundation. Generally, with clouds, we add shadowing around the bottom portions of the clouds, and the bottoms of any “protusions” in the cloud body. Where you add shadowing is up to your artistic discretion.

Add instances of the Cloud Shadow Symbol to your cloud foundation.

As we did with the cloud foundation, we can use the Symbol Screener to adjust the opacity/transparency of each symbol instance to increase the realism of the cloud appearance.

Use the Symbol Screener Tool to adjust the shadow opacity/transparency.

Once you’ve achieved your desired shadowing, go ahead and double-click the Symbol Set in the Layers Palette and name it “Cloud 01 Shadows.” At this point you can unlock “Cloud 01 Foundation” and select and group it with “Cloud 01 Shadows” (Object>Group or Ctrl/Cmd-G).

Group the the cloud shadows and cloud foundation together.

With both symbol sets grouped, you can move your shadowed cloud around and place it wherever you wish on your artboard, resize it, rotate it, etc. Simply follow this same technique to create more clouds on their own layers to create an image like this.

Realistic clouds created entirely in Adobe Illustrator

Once you’re comfortable using this technique, try using some of the other Symbol Tools (such as the Symbol Sizer Tool and the Symbol Spinner Tool) to modify your symbol instances for even more realistic results.

Tools/Functions Used:

• Rectangle Tool
• Gradient Palette
• Expand Function
• Transform Palette
• Brushes Palette
• Brush Tool and/or Pen Tool

When asking “How do I apply a gradient as a stroke?” you’ll often be told that the solution is as simple as expanding your stroke into a shape (select your path, and use either Object>Expand or Path>Outline Stroke) and then applying your gradient. This is all fine and dandy, unless you expect that your gradient is going to following the curvature of your original stroked path.

Outlined stroke filled with a gradient vs. stroke with gradient brush applied

Our first step is to use the rectangle tool to create a square (hold Shift when using the rectangle tool to constrain the proportions to a square). This square is going to be the “template” for our brush, so the final size of the square is important. In this example, the final size of my square is going to be 10px X 10px. I’ll explain why the size of the square is important in a little bit. For now, I will use a larger square, so that you can see what’s going on.

Use the rectangle tool to draw a square

With our rectangle drawn, we will now select a gradient that we want to create a gradient brush with. For this example, I will be using the Spectrum gradient from the Spectrums Swatch Library (in Illustrator CS4, from the Swatch Palette, Open Swatch Library>Gradients>Spectrum).

Spectrum gradient

You can use this method for any gradient you wish, the steps are the same regardless of your gradient. Once you have chosen a gradient to use, select your square, and:

1. Set the Fill on the square to your desired gradient
2. Set the Stroke on the square to Transparent (No Stroke)

Gradient fill with no stroke

At this point, we want to have our Brushes Palette open, if it is not already open go to View>Brushes (F5 keyboard short cut).

Brush Palette

To create our gradient brush, we are going to select our square and drag it over into the brush palette and specify it as a new Art Brush. However, there are a few steps we have to take before we can do this. If we were to attempt to drag the square into the palette at this point, Illustrator would give us the option to specify our brush as a new Art Brush, but we would then receive the following message.

Gradients cannot be used in an Art Brush!

We cannot convert our square to an Art Brush because it contains a gradient. Fortunately, we can get around this problem and still maintain the appearance of our gradient, by expanding our gradient into individual shapes. To do this, select your square, and from the main menu select Object>Expand to bring up the Expand dialog box. In the Expand dialog box, you need to make sure that “Expand Gradient To” option is set to “Specify: 255 Objects.” The default for the number of objects to expand your gradient to should be 255. What this number specifies is the number of objects/shapes used to create the appearance of our gradient after it has been expanded into a series of objects. The higher you set this number the closer your expanded gradient will appear to its original gradient appearance. However, setting this number too high can cause some serious performance issues, so if you’re going to experiment with altering this value, try to use the lowest number of objects necessary to achieve your desired gradient appearance. (Note, if you select “Expand Gradient To Gradient Mesh” you will get the error message above when trying to create a new Art Brush.)

Expand Dialog Box - Set Expand Gradient To Specify 255 Objects

Now that our gradient has been expanded, we need to make sure that we don’t have any other elements that would prevent our gradient square from being converted to an Art Brush. When we expanded our gradient, Illustrator created a Clipping Mask around our object. We need to remove this before we can create our Art Brush. With our gradient square still selected, from the main menu select Object>Clipping Mask>Release (Ctrl-Alt-7 keyboard short cut).

Release the clipping mask

Once the clipping mask is released, it might appear as if your square has changed to a solid fill color, as seen in the image below.

Square after clipping mask is released

Fear not, what you’re seeing the selection highlights of all of the shapes that our expanded gradient are made up of. There are so many of them that when the square is selected, the highlight color for the layer that our square is on, appears as a solid color. If you deselect the object, you will see that all of our gradient elements are still there just as they were before we released the clipping mask.

Earlier, I said the size of our square was going to come into play. The reason that the size of the square is important is that the size of the square when we drag it into the brush palette will determine the size of our brush when set at 1pt. When we set up are Art Brush, we can specify the width as a percentage of our original square, but to save us from calculating a percentage width (in the event that you have some arbitrary values for height and width), we will go ahead and set our square to the width that we want our brush to be at 1pt. To do this, we select our square and set the height and width to 10px using the Transform Palette, Widow>Transform (Shift-F8 keyboard short cut).

Set the Width and Height to 10px with the Transform Palette

Now, we’re finally ready to drag our square to the Brushes Palette. Click on the square and hold the mouse-button down and drag it over to your Brushes Palette. When you see a “+” symbol next to your mouse pointer you can release the mouse button (see below).

Drag the "gradient square" to the Brushes Palette

When you release the mouse button, the New Brush dialog box will appear. Select “New Art Brush” from the options and click “OK.”

New Brush dialog box

The Art Brush Options dialog box will automatically pop-up after you click “OK” on the New Brush dialog box. We can name our brush here. I’ve chosen to name my brush “Spectrum Brush” for this example. You’ll notice an option for “Width,” as well. We can leave this at 100%, since we already set our brush width to 10px when we used the Transform Palette. Leave the “Proportional” option unchecked. What it does is essentially sets the width of your brush stroke equal to the length of your stroke, and this isn’t really what we’re after with this particular brush. For the “Direction” option, select the icon that looks like an “up arrow.” This is the “Stroke from bottom to top” option (see image below for examples of each Direction option). We will leave the flip and colorization options at the default settings (none) for this brush.

Art Brush Options dialog box

Art Brush Direction examples

Once you’ve got your options selected in the Art Brush Options dialog box, click “OK,” and your new “gradient brush” will appear in the Brushes Palette! You can delete the gradient square that we used to create our brush at this point. The put your new brush into action, click on it in the Brushes Palette if it is not already selected and then select the Brush Tool or Pen Tool to try it out! You can also apply this brush to shapes created with the Shape Tools by selecting a shape and then click on the brush in the Brushes Palette. It probably won’t take you long to notice some oddities in these kinds of brushes. Sharp corners and tight curves tend not to work so well with a “gradient brush.”

When and when not to use this kind of brush

Keep in mind, since these brushes are comprised of expanded gradients, excessive use of them in a document will likely bog down Illustrator. Remember, we used 255 objects to create the appearance of the spectrum gradient, so there is “a lot going on” when we use this brush, as compared to more simple brushes. Have fun with them, but don’t overuse them to the point that Illustrator decides to takes a long nap on you, when you’re in the middle of a project that you haven’t saved for a while.

Tools focused on:

• Pen Tool

Paths are created in Adobe Illustrator using Bezier curves, which are comprised of control/anchor points. The Pen Tool is used to define control points and Bezier handles (or “curve handles”). which define the curvature of a path between each control point.

An example of an open path in Adobe Illustrator

Control points are created by clicking the mouse button and setting a point. If the mouse button is simply clicked and released, no handles will accompany the control point, so there will be no curvature as a result of that particular control point. However, if you hold the mouse button down when you click to create a control point and drag the mouse, you will create Bezier handles (or curve handles), which will define a curvature in the path between the control point and the points directly adjoined to that control point. To illustrate this method, take a look at the image below, which follows the steps to create an open path similar to the one in example above.

Steps to drawing an open curved path with the Pen Tool

1. Move the cursor to the position where you wish to start your path.
2. Click the mouse button and drag in the direction you wish to create Bezier handles (in this example we drag directly downward), then release the mouse button when you’re handles are in their desired location.
3. Move the cursor to the position where you wish your next point to be.
4. Click the mouse button and drag in the direction you wish to create your handles (in this example we drag directly upward).
5. Move the cursor into position to create your final point.
6. Click and drag (downward in this example) to create your handles.

You’ll notice that the anchor points act like tangent points along the curves based on the handles. If you’re a beginner to the Pen Tool, practice using different angles and lengths with your Bezier/curve handles to see how they affect your path. The length and angle of each handle (typically, two for each point) can actually be modified independently using the Convert Anchor Point Tool, but we’ll save that for another day. (You can also independently modify the length of one handle, while maintaining the 180° angle between its opposing handle using the Direct Selection Tool.)

Stay tuned for more information about the Pen Tool along with some examples and tutorials in up-coming posts.

Logic (which I was foolish to try to apply to anything involving the use of image data in Microsoft Word) told me that my best option would be to export the letterhead from InDesign as a .wmf file, since it’s A) vector-based and B) a Microsoft file format. Then, I should (“should” being the keyword) just be able to Insert>Picture>From File in MS Word with no problems. Unfortunately, the quality of the original vector artwork seems to be affected by this method, and by “affected” I mean “rasterized.” I have since learned that .wmf does not support Bezier curves, which is another reason to avoid exporting from InDesign to a .wmf.

Original vector artwork exported from InDesign to PDF (at 300%)

.wmf artwork inserted into Word and exported to PDF (at 300%)

So, it would seem that using a .wmf file is out, if we want to maintain our vector image. Next, I tried exporting an .emf followed by Insert Picture>From File into word and converted it to PDF. This version did, at least, yield a vector-based result. However, the paths seemed to be degraded somewhere in the conversion and smooth curves seemed to be converted into jagged segments. (Update: This is due to the fact that .emf also does not support Bezier curves and hence “converts” curves to a series of line segments.)

EMF converted from Word to PDF (300%)

Original vector artwork comparison with EMF exported from Word (800%)

At this point, you’re probably wondering, “Why didn’t you export your InDesign file to an .EPS?” Well, actually, that was the first option that I tried, but when I imported it into Word, the results looked like this…

EPS letterhead as it appears in MS Word

The moral of this story is that you can’t trust appearances in Word. When the same file that the image above was taken from is exported to a PDF, you end up with the following result.

EPS converted from Word to PDF (100%)

Same EPS converted from Word to PDF (300%)

When importing the EPS into Word and exporting to a PDF, we end up with our vector image information intact and unharmed, just as it was before we imported it into Word.

To make a long story short, if you want to import letterhead from InDesign into MS Word. Follow these steps to set up your Word Document

1. Export your InDesign file to EPS format.
2. Open a new Word document.
3. View>Header and Footer.
4. Insert>Picture>From File and select your EPS file.
5. Format>Picture
   1. Layout>Behind Text
   2. Size>Make sure Height and Width are at 100%
6. View>Header and Footer (to exit the edit Header/Footer)

Depending on the size of your letterhead, you will probably need to adjust your margins, so that your main text does not overlap your header image. After you’ve entered your text in Word, just export to a PDF, and you should have a clean vector-based letterhead.