weblog

I’ve spent many years working in Photoshop and Illustrator. My first step when tackling a new project is to sit down at the computer and hammer away until I create something that I like. While there’s nothing wrong with this approach, I took my latest design opportunity to break away from my traditional workflow; I closed the lid on my laptop and picked up a pencil and paper to flex some creative inspiration. This article documents the steps I took to create my latest logo.

Deciding on a logo concept

Since I was the designer and the client in this project, I got to set up my own loose specifications for the logo. The final version should probably be:

• simple, single-color shape
• unique
• recognizable at any size (including they super-small favicon 16×16 size)
• stylable (for separate themes across my site) but consistent

I already had a few design assets that featured the letter g, including my Gmail logo (for my Gmail hosted e-mail) and my favicons (in color variations for my blog and portfolio):

I liked the g concept, so I used this as the inspirational seed for my new logo.

Back to the drawing board

I’m a mediocre artist when it comes to pencil and paper. I’m one of those people who likes to doodle, but immediately discards the evidence. Why? I guess I don’t want people to judge my artistic competence based on my drawings.

But at the start of this project, I vowed to do the concept part of the design on paper. I broke out my notebook and began sketching g characters that I found intriguing. By restricting myself to paper and pencil, I removed the distractions of computer-aided design: worrying about spacing and color, getting caught up in the details before the concept is fleshed out, and doing other activities instead of focusing (like answering e-mails and catching up on my unread news).

I focused on capturing something unique about each character: the negative space, the composition, the genre. There are distict portions of the g character: the ear (the antennae hanging off the top), the loop (the part of the lowercase g that hangs below the baseline, and the link (connecting the body of the g to the loop). So many typefaces use these portions of the g to tie it into the other characters of the typeface; I attempted to capture the unique treatments of these portions of the g.

From drawings to vectors

I used Illustrator to draft some variations of characters. I played with the spacing and sizing of the various parts of the g:

The first row of characters (uppercase G) was appealing when I drew it by hand. However, it’s was just a little to blocky. I think I was looking for a shape that was recognizable as a g.

The second row of characters (lowercase g) is an attempt to find the right balance between line thickness, circle roundness, and the spacing between the loop and the body of the character. By the time I had six of these variations drafted, I really started to like the shape of this lowercase g.

Finalizing the logo

Working with the last lowercase g, I adjusted some of the spacing and added the square ear. You can see the preview view (left), the outline view (middle), and the spacing/measurement view (right) in the image below:

Logo treatments

Now that the basic vector logo is complete, I can manipulate it in Illustrator and Photoshop (as a smart object) to create some different visual treatments.

This example uses layer styles to create a glossy blue appearance.

Here is a photorealistic version, where the outlines of the g components are stroked using an artist brush in Illustrator. Photoshop lens blur and guassian noise effects provide some photographic polish.

In December 2007 I installed Google Analytics on my weblog and portfolio. Before Analytics, I was using host-provided tools to analyze my web traffic. For the money (read: free) Google Analytics is everything I didn’t know I wanted in traffic-tracking software. There are a couple interesting things that I realized after installing GA on my sites:

Some of my links were not going anywhere

I use WordPress to publish my blog and portfolio. I created some content that was getting a fair number of visitors per day and, late last year, I updated the post and changed the permalink URL for the article. As a result, I was getting a number of 404s results from visitors accessing the outdated URL. The publishing solution was to install Redirection, a Wordpress plugin developed by John Godley, that handles 301s (permanently moved resource), and 404s (not found). I recommend it for anyone who needs a visual way to edit your .htaccess file.

My site got Flickr-ed

A referral link from Flickr helped me uncover this screengrab of my weblog.

It’s easy to tell what content is popular

Until the beginning of this year, my most popular post was pulling in 50-150 page views per day. Then I posted a jQuery cheat sheet. According to Google Analytics, my article hit del.icio.us on February 10th 2008; you can see what a popular post can do to your web traffic.

Popular articles change your page rank in Google search results

Until posting the above article, my very popular name positioned me as a fourth-page “loser” among every “Scott Olson” indexed by the search giant. Now I’m the first hit for “G Scott Olson” and I’ve snuck onto the first page of results for “Scott Olson”.

Other sites can (and will) use your Google Analytics account number

Take a look in Visitors > Network Properties > Hostnames. My first result is www.gscottolson.com (as expected), and there are a number of Google entries (for Google’s cached views of this page). One entry (www.artisopensource.net), was unexpected. After some careful investigation, I learned that the offending site scrapes content from the web and attempts to load it into the existing page. My blog got scraped and my Google Analytics JavaScript (and corresponding account number) ended up on someone else’s site. No harm since artisopensource.net has amassed a total of 4 page views (only slightly tainting my results). I’m hoping this comment sheds some light on any users baffled by this external site pulling in page views for his or her account.

The defensive line of the New York Giants dismantled the New England Patriot’s offense Sunday in Super Bowl XLII. So many people thought the Patriots would squash the Giants and cap off the end of a perfect season at 19-0. It didn’t happen and I’m finally convinced that I didn’t fall asleep and dream up the outcome. Best Super Bowl ever!

If that’s not bizarre enough, Shaq is now playing for the Phoenix Suns. If someone showed me this press photo before I heard the story on ESPN, I’d think this was the work of a skilled Photoshop artist. But alas…it’s true. What happens in the next few months will be interesting, but as a long time fan, I remember the trade that brought Charles Barkley to Phoenix. I also remember the loss to the Bulls in the Finals. Let’s hope Shaq still has some gas left in his diesel engine.

I finally got around to publishing my CSS Zen Garden design: Now Leaving Earth

The CSS Zen Garden, started in 2005 by Dave Shea, promotes the styling of web documents with cascading style sheets. The Garden holds an ongoing contest where graphic designers take a static HTML document and transform the layout using only CSS. There are no prizes awarded (aside from the acknowledgment of the CSS Zen Garden fan base), but the prestige of creating an entry is a point of pride for any designer/developer/nerd. The official designs posted at the CSS Zen Garden truly exemplify how far you can take a website with styles (and design skillz). It was these works of art that peaked my interest in CSS.

View my CSS Zen Garden design: Now Leaving Earth.

You can also see it at the Garden or check out the other official designs.

I’ve been looking for a solid cheat sheet ever since I started using jQuery. Download jQuery 1.2 Cheat Sheet v1.0 in PDF format

Recently, I needed to sum the numbered values in my JavaScript array. Unfortunately, sum is not a native method for the Array object. So if we want to add sum to all instances of our arrays, we can assign the sum() function to Array.prototype:

Array.prototype.sum = function() {
  return (! this.length) ? 0 : this.slice(1).sum() +
      ((typeof this[0] == ‘number’) ? this[0] : 0);
};

Since we’re operating over the length of the array, we can simply shift (or slice) the first element from the array and continue summing the remaining portion of the array (from element 1 - n). Once we’ve sliced the last element from the array, it will have a length of zero and will pass the logic check (! this.length).

((typeof this[0] == ‘number’) ? this[0] : 0) ensures that the value at position [0] is indeed a number. If it isn’t, we simply add 0 instead.

Examples:

[1,2,3,4,5].sum() //–> returns 15
[1,2,'',3,''].sum() //–> returns 6
[].sum() //–> returns 0

Optionally, the body of sum() can be written non-recursively:

var s = 0;
for (var i = 0; i < this.length; i++) {
  s += (typeof this[i] == 'number') ? this[i] : 0;
}
return s;

The above code creates two extra variables, s and i, during execution to store the summation and the loop index. The recursive version of sum() avoids these variable declarations.

John Resig posted an article about JavaScript Method Overloading, where he provides a slick way of creating multiple versions of a method based on the number of arguments in the method signature. His method uses the original function name as a pointer to a linked list of functions. The method is called, the linked list is traversed, and the appropriate function returns.

// addMethod - By John Resig (MIT Licensed)
function addMethod(object, name, fn){
    var old = object[ name ];
    object[ name ] = function(){
        if ( fn.length == arguments.length )
            return fn.apply( this, arguments );
        else if ( typeof old == ‘function’ )
            return old.apply( this, arguments );
    };
}

Alan and I spent to time dissecting Resig’s implementation. The drawback of using a linked list of functions is that performance degrades when a large number of unique methods exist.

There’s a more scalable way to create these overloaded methods. If we use a two-dimensional lookup table (the first dimension is the method name and the second dimension is the argument length), we can overload the method 100 times without much performance degradation. So I present my own version of addMethod():

// addMethod - By G Scott Olson (Unlicensed)
function addMethod(object, name, fn){
  object._methods = object._methods || {};
  object._methods[name] = object._methods[name] || {};
  object._methods[name][fn.length] = fn;
  object[name] = function(){
    if(this._methods[name][arguments.length])
      return this._methods[name][arguments.length].apply(this, arguments);
  };
}

An example:

function Users() {
  addMethod(Users.prototype, "find", function(){/*function body*/});
  addMethod(Users.prototype, "find", function(name){/*function body*/});
  addMethod(Users.prototype, "find", function(first, last){/*function body*/});
}

Once I acquired a Cinema Display, I threw my MacBook Pro on the desk and never looked back. I’ve run into some issues, however, with the sleep/wake mode on my laptop. Occasionally, I’ll attempt to wake my Mac via the touch switch on the Cinema Display, but my laptop won’t respond. Only opening the lid will wake it up, but then I’ve got both displays running (which is simply too much screen real estate for any one person).

After countless failed attemps to solve this issue via some hidden setting or series of tasks, I’ve discovered the secret:

1. Plug in your external monitor. I’m using a 23″ Cinema Display, but I’m guessing these instructions map to any monitor.
2. Open the lid for you MacBook/MacBook Pro. This should wake it up (and fire up both displays).
3. Switch to mirrored monitor mode. On the MB/MBP, this is default functionality of the F7 key. After pressing F7 a few times, you should end up with the same image on both your external monitor and built-in. You can also setup the Display settings in the System Preferences app.
4. Close your MB/MBP. This will put your system back to sleep (which is fine now that it’s in mirrored mode).
5. Plug in an external keyboard, thumb drive, or card reader. We’re banking on the MB/MBPs ability to wake up on USB activity (in this case, we’re mounting a new USB device).

The biggest gotcha in this process is having your displays in mirrored mode before putting them to sleep.

YMMV, but I’ve also disabled “Automatically reduce the brightness of the display before display sleep” in the Energy Savings panel of System Preferences. Some message board singled out this feature as causing issues with Mac waking from sleep.

I was sitting on the bus this morning wondering how long it’d be before I quit checking my Gmail account on my iPhone. After reading and archiving 25 messages during the workday, I’d open up my iPhone mail on my way home from work only to find the same 25 messages marked as new and waiting to be deleted. What a headache! Not anymore…

Gmail IMAP has solved this inconvenience by enabling IMAP for your Gmail account. You can keep your Inbox synced up, no matter what client you’re browsing your mail with. Suddenly, checking mail on the iPhone has become useful.

Read the official post and watch a video tutorial on setting up Gmail IMAP for your iPhone.

Bonus: Gmail IMAP also works for hosted Gmail addresses (through Google Apps).

After confirming Adobe CS3 compatibility with Leopard, I headed to the Michigan Avenue Apple Store to pick up a copy of Mac OS X Leopard. Here is a status timeline of the OS installation on my MacBook Pro (2.4 GHz Intel Core 2 Duo, 4GB RAM). Your mileage may vary…

0:00:00: Brow furrowed as I insert Leopard into my MacBook Pro’s DVD and click the restart button to being the installation

0:09:15: Installer is still determining if I’m the owner of a valid DVD

0:19:23: DVD is confirmed as valid and containing all the necessary files to upgrade my Mac OS X Tiger to Leopard

0:24:00: Install screen has changed from “Time Remaining: Calculating” to “Time Remaining: 2 hours and 58 minutes”. What?

0:36:30: Install screen recalculates installation time: “Time Remaining: About one hour”

0:40:13: My external firewire drive turns on. I guess Leopard found and mounted the disk

0:45:17: “Time Remaining: About 25 minutes”

0:51:28: Only 6 minutes later, “Time Remaining: About 10 minutes”. I guess Leopard installed Time Machine, jumped in, and traveled to the future?

1:00:54: “Time Remaining: About 4 minutes”

1:08:09: “Mac OS X was installed on your “Disk” volume.” Installer then decided to reboot my Mac by itself. Thanks, Installer.

1:11:13: Login screen visible. Touchdown!

1:17:43: After wading through the animated introduction screen, the .Mac account verification, and the Apple Registration, I’m asked to install some software updates (for Backup and Login/Keychain).

1:22:04: My MBP restarts in response to the update. Leopard is finally up and usable (without remaining nag screens and installation steps). Just under 1.5 hours for the entire process. Not too shabby.

Note about the installation: It’s incredibly boring. Not that I’d ever call a software upgrade an incredibly exciting event, but there is no information about Leopard’s new features displayed on the screen. At least when I upgraded my old PC to Windows XP, I got a poorly designed “presentation” of the new features I was about to enjoy (and later loathe). So if you’re planning on monitoring the upgrade, grab a book, flip on the TV, or write a post!

A whole slew of friends came together to help Jarrad Apperson put together this 80s glam-metal spoof of Skid Row’s Youth Gone Wild. The film was storyboarded, shot, and edited in only 5 short days.

I worked on a movie project at work that required a parody of the current Mac ad campaign: “Get a Mac” (a.k.a. “Mac Vs. PC” or “I’m a Mac, I’m a PC.”) I couldn’t find it on the interweb, so I cracked open Garage Band and tried my luck.

Music for Apple’s “Get a Mac” Ad Campaign

I believe the song is “Having Trouble Sneezing” by Mark Mothersbaugh. The instruments aren’t exactly correct (I had to create my own marimba and “dainty” piano), but the melody and the shaker are spot on.

In college, my sketch comedy group, the Farce Side Comedy Hour, spoofed the original white-background ad campaign for Mac: “Switch”. Although not authored in Garage Band, this one is pretty close the original:

Music for Apple’s “Switch” Ad Campaign

I’ll leave these up here until Apple Inc. sends me a “cease and desist” letter.

Update: The music from the most recent iPhone ad has been recreated at iPhone Alley

I’m now an official member of the “Orbitz Bike Pyschos”, a group of Orbitz employees who have banned together for the 2007 MS Bike Tour in the fight against multiple sclerosis, Parkinson’s, Crohn’s, Lupus, Arthritis, spinal cord injuries and other neurological and auto-immune diseases.

I’ve set a goal to raise $2000.00 by August. Please help me by donating: National Multiple Sclerosis Society. And yes… it’s tax-deductable.