I should note that in doing my preparation for this infographic, I decided to extend far beyond the start of the “open era” (1968) entirely for the amount of data. A post-1968 graph would give me much less to work with.

Otherwise I feel I should pay respect to the accomplishments of Rod Laver and Bjorn Borg: both of these men had utterly remarkable runs (both earning 11 titles in less than a decade), but neither becoming the true front-runner within the constraints of this graph.

I hope you enjoy! If you find this interesting, also be sure to check out this comparison of Federer and Sampras in their race to 14 titles. Meanwhile, here’s to Federer’s hard work… let’s see how far he can take it.

The final product is available as follows.  For additional notes about the techniques used to create these graphs, keep on reading.

Here are some tips & techniques I employed to put this together.

Have Your Data Ready

Before diving into Illustrator (or whatever your tool of choice may be), spend the necessary time finding all of the data you will need for your graph.  Go the extra mile to arrange and label everything properly — you may return to the data at a much later time and will be glad you did yourself the favor.  Aside from reaping the benefits of good organization, this step is additionally helpful in keeping the grunt work of data-fetching separate from the creative requirements of the task.

Start with the Simplest Graph Possible

An elegant, attractive graph is seldom created from scratch.  There are usually a number of tried & tested variations that must be wrestled with before arriving at the final product.  With this in mind, a good first step is creating some bare-bones, stripped down graphs to get bird’s eye view of the data.  This phase is all about finding the approach that will best server your original vision.  Sketches work great in this stage.

What is the story you want to tell with your data?  This is an important question to keep in mind, as different visualization approaches will yield different results.  Play around with things.  See what looks good as well as which data comparisons are intuitive and interesting.  Seek feedback from friends or colleagues who might offer a valuable opinion.

Using the Grid

Before long, it will be time to create your final, finished product.  At this stage, the very most important thing you can do to keep things looking straight and orderly is use Illustrator’s grid feature.  You’ll want to make grids visible (CTRL/CMD + “), as well as enable “Snap to Grid” (CTRL/CMD + SHIFT + “).  Additionally, you may want to go into Illustrator’s preferences to customize the grid spacing and subdivision width (which you can modify at any point).

Another useful tip to keep in mind when using grids extensively is enabling Overprint Preview (CTRL/CMD + ALT + SHIFT + Y).  This will have the gridlines appear on top of all objects & paths, allowing you to eliminate any guessing that might otherwise be required in keeping things properly arranged.

Using Layers Wisely

Keeping your objects arranged in layers is a huge time-saver when dealing with moderately complex projects in Illustrator.  This was especially true in my case of creating four separate graphs, each of which contained separate groups of objects.  For example: if I wanted to modify the color of the Roger Federer graph plots, I’d only need to target the layer “Federer” and all plots (on each graph) would become active.

Layers can also be locked, combined, or temporarily hidden to make document management easier.

Go Forth and Visualize

And that’s it!  Combined with a simple bit of color and typography, you can transform any crude visualization into an attractive graph.  Keep in mind that data in itself can be rather inert; though when arranged in a conscientious manner it can tell an interesting story.  Hopefully the techniques above can be of use in recreating your own graphs of a similar nature.

By the end of the plane ride, things worked out great:

Throughout the remainder of the post, I’d like to share an overview of the approach I took and the Illustrator techniques used to make this happen.  The result is not merely a tutorial, but rather a broad look at some Illustrator skills any user might find helpful in such a situation.

Start With What You’ve Got

First step when resources are short?  Make the most of what you’ve already got.  While in a perfect world I’d have access to the font on which the Capitals logo is based, in this case I’d have to make due with the letters (or rather, shapes) that make up the source logo I was starting with.

Fortunately, “Capitals” and “@davidpots” have quite a few letters in common.  My first move was to ungroup the shapes in the “Capitals” logo and move all letters that matched into their proper placement in their “@davidpots” counterpart.

After this first step alone, about half of the letters are already in place.  What’s left?  Creating the “@”, “d”, “v”, and “o”.  Onward we go.

This Shape + That Shape

To create the remaining letters, I would have to create custom shapes based on the contours of existing elements. This would ensure the overall look & feel of the logo remained consistent.

Starting with the “d”, I saw that the base contours I’d need already existed in the “c” and the “l”.  Through combining these two objects, the resulting “d” would retain the general shape of these other letters.

So far so good.  While the remaining letters wouldn’t necesarily be as simple to create, the basic premise & approach would be the same.

Take This, Tweak That, and Drop the Rest

Next up is the letter “v”.  After a moment’s investigation, it seemed the best way to recreate the bottom point of the “v” (with existing elements of “Capitals”) is through the upper-right corner of the letter “p”.

Unlike the creation of the “d”, this would require a bit more work.  Instead of simply combining two separate letters to create a third, I would instead be transforming & tweaking part of a letter and then getting rid of the rest.  I did it like this:

First, rotate the “p” 180 degrees…

Second, use the direct select tool to increase the height of the left “arm”

Third, use the Pathfinder’s divide function to get rid of excess shape at the top

And that’s it! The “v” is ready to be inserted into its namesake.

The exact same approach was used to create the “o”.  Starting with the already-existant “p”, (1) the shape is divided, as to get rid of the unnecessary bottom stem.  (2) Next, the remaining “corner” is duplicated & rotated 180 degrees.  (3) Finally, the two remaining pieces are moved into place to form the “o”.  Voila!

Round the Corner(s) & Tie Up Loose Ends

The final and most challenging letter to create was the “@”, which would require the most alchemy of the bunch.  In summary, my plan would be to first (1) create the interior shape of the symbol, and second (2) use an external stroke to create the “wrap around” shape of the symbol — this would ensure the curves were 100% right-on. Here’s how I made it happen:

Creating the inner shape
The first step was creating the inner shape of the “@”.  Locating all I would need in the base of the “d” contour, I simply created a dividing line and used the Pathfinder’s divide tool to make a clean cut:

Rounding the Corners, Part 1
So far so good — but I realized that I would need to round out the corners on the right-hand side of the shape I created (lest the sharp/jagged run wild and free).  To make this happen, I first (1) spotted an existing corner “curve” in the “p”, (2) used the Pathfinder’s divide tool to isolate this corner, (3) and finally shifted this over into the contour of my original shape.

Rounding the Corners, Part 2
The previous “round the corner” approach was used one more time for the upper-right corner of the shape.  This time I used an existing corner from the “a” to make it happen.  Same basic steps:

Creating the Outer Wrapper
In order to create an outter wrapper for the “@”, I decided to use the object’s stroke.  This would ensure the curves remained consistent in both contour and width.  To make this happen, I first (1) gave an exterior stroke to my original object. Next, (2) an additional stroke of then wrapped around the shape again.  Finally, (3) after expanding the strokes into proper shapes (Object > Expand), I used the Pathfinder’s divide tool to get rid of the undesired middle “red” section.

Finishing Touches
The very last step involves tweaking the lower-right section of the shape to complete the “@” transition.  This involved (1) using the Pathfinder’s divide tool to once again get rid of the undesired portion of the outer wrapper.  (2) Next, I created a small curved shape to join the two shapes, which was (3) moved into place and combined with both shapes to complete the task.

And We’re All Done!

And there you have it!  All shapes have now been created.  I needed only to align the items as desired and save my final product (which I now proudly wear as my Twitter profile pic in support of the team).

Could this have been arrived at quicker if I had the original “Capitals” font to work with?  Of course!  But that is removed from the point: this was instead about the challenge of a self-imposed quickfire task which forced me to think quickly & make the most of the resources at hand.

In closing, I must of course bestow the Caps with all the good luck I can muster for game 7 against Pittsburgh.  It has been a truly epic series so far, and I trust Washington is going to bring it home to DC with their best performance of the series.  Let’s go Caps!

It did not take much searching before I stumbled upon Chris Creamer’s SportsLogos.net, a “virtual museum” dedicated to sports logos & uniforms. This site has been invaluable for my research needs, as it provides quite the in-dept historical record for all teams in every sporting league you can imagine. In this post I would like to share some of my findings.

Stay with the Herd

This first batch of logos represents the more-or-less general trend of evolution over the past few decades. These changes can be summed up fairly easily: bold colors (instead of bright), simpler shapes & figures (instead of logos with hand-drawn detail), and often a slant to the logo (as if an italic font).

The group above is, for the most part, a middle-of-the-road selection. Some logos have changed much more radically over time, while others have not been altered in decades.

While I am no expert, I would not hesitate to say that the impetus behind much of the change in the past 10-15 years is the advent of computer graphics. Computers undoubtedly open up a huge window of graphical opportunity, something that turns out to be both good and bad. As we shall see, it depends on how the tool is used.

Keep it Subtle, Stupid

Given any new technology, there will always be the temptation to maximize the new capabilities it brings to the table. Even though this is the case with the redesign of many different logos, there are many designs that have kept their changes small & subtle.

These changes are by no means the most glamorous or sexy, but they do the job of quelling the desire for a radical overhaul that may not actually be needed. A slight shift in color or stroke easily maintains the existing spirit of a design while quietly keeping it in line with the stylistic trends of the day.

Incrementally Wise

The New England Patriots’ logo epitomizes the incremental evolution in logo design, doing so very well. In each of the two transitions below, only one aspect of the logo is changed: first there is a shift away from the dated hand-drawn symbol (while keeping a nearly identical pallete), followed a few years later by the subtle update to more bold colors.

The end result makes an impact with a simple yet powerfully modern design. Although the two changes were less than a decade apart, the shifts were far from drastic. The current logo seems firmly rooted in place, unlikely to find itself left behind by the trends on the horizon.

Runaway Train

On the flip-side of the Patriots’ logo is that of the Toronto Blue Jays, which has changed significantly three times in about ten years:

In this case, the changes have been both frequent and relatively drastic. The first change was off to a great start with the revamped blue jay graphic, but the maple leaf in the background created a bit too much interference. Instead of toning this down, they throw it out and move on to a new design altogether, cleanly pulling all semblance of rooted tradition out of the ground.

After one more change even still, the current logo may look pretty but seems to offer little room to grow: what does it have to offer as the decades roll on? I would be suprised if we don’t see another change in the near future. My advice: ditch the inclusion of the “Jays” text and stick to the power of memorable, simple symbols that make an impact. A simple shift to the Blue Jay head in the first iteration (without the maple leaf clash!) would have solved this problem from the outset, I am sure.

Simmer Down, Now!

This modern age we live in: expansion teams left and right, new logo opportunities abound. Many of these teams, in my opinion, have embraced logos that represent the worst of what computer graphics has made possible: unnecessary detail and flair. As a result, no core symbol stands out. There is no instant recognition.

But there is hope! In my searching I was pleased to find that various expansion teams have changed their logos since inception, the changes representing a turning-away from detail and a slight embrace of simplicity:

While I do not necessarily think that these updated designs will stick around for decades, I *do* think that their accomplishment is important: they lay groundwork in which symbollic tradition might take root. A good design doesn’t simply look good in the moment, it must also leave a lifeline that breathes life into the future. The head of both grizzly and coyote (without distraction) offer potential for this, I daresay.

There and Back Again

Expansion team logos were not the only designs seduced by the allure of overtly computer-fueled graphics. Several older teams with logos rooted in tradition explored this path as well, often leaving their rich inheritance behind. Fortunatley, several designs found their way back to their traditional roots:

In each of these cases we have a return to the simple power of the original logo, albiet each is slightly tweaked for the modern age. Quite the promising example to end on, I think!

In all, this research was quite eye-opening. Branding is what it is, whether for a sports team or a typical business. In either case, the logo is tied to both the past and the future. It would be foolish to dismiss a brand’s past inheritance and notoriety, just as it would be folly to make decisions without thought of the future. Plan accordingly!

And please, do not forget the little kid sketching his favorite logos while day-dreaming in class. If he cannot draw the logo from memory, the design could probably be better. In the meantime, head over to Chris Creamer’s SportsLogos.net and take a look for yourself.