February 2, 2011

Holy Water Buffalo Lettering Process

Hand-Lettered Holy Water Buffalo T

Holy Water Buffalo hails from Heber, UT, and is deeply rooted in the heavy, blues-soaked riffs reminiscent of bands like Jeff Beck Group, Black Sabbath, & Blue Cheer. I first caught a glimpse of them performing at the Corner Store in Park City, and have had my eyes and ears on them ever since. So I thought I’d put some letters to good use, and draw up a t-shirt for the band.

Step 1: I knew I wanted to reference Holy Water Buffalo’s psychedelic tendencies as well as create something that looked hard and heavy; maybe explore some black-letter elements, but a bit more free-formed. I broke open a crisp new Field Notes and got to sketching. Once I was satisfied with my pencil sketch (Figure 1), I went ahead and outlined it in ink, erased all the stray pencil marks, and scanned it in at 300dpi.

(Figure 2).

Holy Water Buffalo Sketch

Step 2: Now that I have the scanned file on my computer, I open it up in photoshop and adjust levels, brightness, and contrast, to where I only have solid blacks and whites. I then knock out all the white leaving me with the just the darkened outline, and apply a light blue color overlay (Figure 3). This allows me to print it and touch up areas by hand that still need some work.

Holy Water Buffalo Ink

Step 3: After inking up my printout (Figure 4), I rescan and open up again in photoshop repeating Step 2 until I am satisfied. The latest version then gets opened with illustrator and I either trace by hand, or use live trace to create a vector of the image. Occasionally I can get good results by tweaking the Live Trace Options, but more often than not I end up tracing manually.

Tools Used: Field Notes, .05 Mechanical Pencil, Staedtler Fineliner Pens, Rubber Eraser, Scanner/Printer, Macbook Pro, Photoshop, Illustrator, & Brain


January 5, 2011

Creating Current Menu States in WordPress

Rule #1 for creating a good user experience is to make your product as easy to use as possible. Whether it’s a web site, or a vacuum cleaner, if it’s difficult to use it’s a shitty product. In the web world, user experience often get’s overlooked for fancy graphics and unnecessary animation (the old myspace comes to mind). The good news is as more browsers start to adopt web standards it’s becoming easier for designers to make sites that are both good looking and usable.

Good design equals better functioning — that if the true path of good design is followed scrupulously, then not only does the thing look very cool, but it is also a better object all around.

David Byrne from The Bicycle Diaries

One of the most surefire ways designers can enhance a user’s experience on the web is to provide clear navigation for the reader; the user should always know where they are on the site. One of the more subtle yet effective ways of achieving this is to give the current page menu item a different state from the rest of the menu items.

Easy enough in theory, however implementing requires a bit more trickery than normal CSS styling. I have used WordPress to build my site so this tutorial will cover how to implement current menu states using CSS & a little PHP with WordPress, however there are also other methods that utilize JavaScript and straight CSS that you can read about here and here if you like.

So getting started, your basic navigation probably looks something like this:

<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>

You should be able to find where your menu is being called from in the header.php file. Now with a little PHP magic we can determine what page the user is on and place “current” in the right spot. Here’s how the first <li> element from above should look after replacing the code:

<li<?php  if (is_home()) {  echo " id=\"current\""; } ?>><a href="#">Home</a></li>

Assuming everything goes as planned, WordPress should generate some HTML that looks like this for the current page item:

<li id="current"><a href="#">Home</a></li>

You’ll now need to go through for each menu item and edit the code appropriately. Our navigation structure should now look something like this:

<ul id="menu">

<!-- To show "current" on the home page --> <li<?php if (is_home()) { echo " id=\"current\""; } ?>><a href="#">Home</a></li>

<!-- To show "current" on the About Page --> <li<?php if (is_page('About')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">About</a> </li>

<!-- To show "current" on the Blog Page --> <li<?php if (is_page('Blog')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">Blog</a> </li>

<!-- To show "current" on the Contact Page --> <li<?php if (is_page('Contact')) { echo " id=\"current\""; }?>> <a href="<?php bloginfo('url') ?>/about">Contact</a> </li> </ul>

Now throw a little CSS in your stylesheet and you’re in business:

#current { background-color: red; }

For more information on defining current menu states visit the WordPress Codex.


January 3, 2011

Life in Perpetual Beta

Perhaps one of the most notable differences between print and interactive design is the absence of a clearly-defined stopping point. In print, the work is finished when it goes to press or is in circulation. However, with the organic nature of the web we are forever revisiting and testing better solutions.

To show the world a product that may not be perfect in our eyes can be a very intimidating proposition. Many web designers don’t have websites because they are in a constant state of re-design.

With that being said, I am releasing Alex Deckard 3.0 to the world. While unfinished, I feel that Phase 1 is fit for public consumption. So don’t be surprised if you encounter an occasional bug or something doesn’t look quite right in the old Internet Explorer. Phase 2 is just around the corner.


December 27, 2010

Rework

Rework should be on every creative professionals reading list. Written by Jason Fried & David Heinemeier, the brains behind 37 Signals, Rework offers a unique perspective on re-structuring the modern work day and office. Rework is a quick and entertaining read as well as an excellent way to start thinking about getting the most out of your 2011. Purchase your copy here.