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.

This is a very rudimentary step-by-step tutorial on how to annotate a JPG image in Adobe Illustrator. It was written for someone with no prior Illustrator experience.

Open Image File

Go to File>Open and select the jpg map image you wish to annotate.

Read the rest of this entry »

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.

If you are using any of the Adobe CS (Creative Suite) line and some of your fonts have mysteriously disappeared or you are all of the sudden getting dreaded missing fonts warning when you open a document that you created on your machine (with the fonts that you USED to have), your problem might be associated with having upgraded to a newer version of your CS product.

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.

The question of how to create this effect came up over in the Adobe forum for Illustrator. The “orange peel” example serves as a good introduction to using map art with the 3D Revolve Effect, so I decided I’d go ahead and do a step-by-step tutorial of how to create this effect. This tutorial is intended for intermediate Illustrator users and above.

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

Read the rest of this entry »

This tutorial will teach you a method to create realistic clouds using Adobe Illustrator CS4 (see image below). Since these clouds are created using vector graphics, they can be scaled to any size without a decrease in image quality. This tutorials is intended for intermediate to advanced Adobe Illustrator users. If you get lost on using some of the palettes or tools in this tutorial, you might want to try one of my Beginner tutorials. Also, due to the fact that the technique used in this tutorials takes advantage of variable opacity gradients, this method will only work in Illustrator CS4 (if you are using an older version, a work-around would be to use opacity masks).

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

Read the rest of this entry »

Have you ever found yourself wondering, “How do I apply a gradient to a stroke?” or, perhaps, “How do I make a gradient follow a curve?” Unfortunately, there isn’t a simple solution in Illustrator for these questions. However, there are some ways to achieve the appearance of having a gradient follow the curves of a path. In this example, we will be looking at how to apply a gradient to a path as a brush stroke, by creating an Art Brush based on a gradient. This is intended for intermediate Illustrator users and assumes the user has a basic working knowledge of Illustrator tools.

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

The Pen Tool is one of the most powerful tools in Adobe Illustrator. Yet, it also one of the most difficult tools for some users to learn. This is intended as a very rudimentary introduction to the Pen Tool. I plan to follow this post up with more Pen Tool demonstrations and exercises. This post is intended for Adobe Illustrator beginners.

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

Read the rest of this entry »

I recently had created some letterhead for a client in Adobe InDesign that was to be professionally printed. However, they also needed to be able to create electronic documents with the letterhead converted to PDF from Microsoft Word. It seemed like this should be easy enough to pull off, but it turned out to be an exercise in trial and error. Fortunately, I found a solid solution after many failed attempts.

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.
Read the rest of this entry »