A few months back I was commissioned by Prince of Peace Lutheran Church in Virginia to do some graphics work for them. The majority of this work consisted of cleaning up the logos and branding of their various youth ministries. Most of the ministries’ logo files were low-resolution JPG‘s or GIF‘s, and they simply needed to be remade as resolution-independent vector-based images.

However, we decided that the logo for the ministry entitled “Waves” — a middle school youth group ministry — was just not up to par to begin with and needed to be completely redesigned.

The original "Waves" ministry logo

So I set about redrawing the logo from scratch. We wanted the concept to remain the same — that is, the design would still be dominated by a single crashing wave. After collecting some reference photos of various crashing waves, I started sketching out the new logo in my sketchbook.

Some of my sketches for the new logo

Most of the initial sketching was done with a non-photo blue colored pencil.  I used non-photo blue quite extensively several years ago when I did a lot of hand-drawn animation; basically it’s a specific shade of blue that the old optical cameras wouldn’t detect — this allows you to roughly sketch out whatever you’re drawing, then when you’re happy with it, you trace it in cleanly out in pen.  Then when shot on the camera, only the cleanly traced ink lines would show up.  As you can see in the picture above, modern digital scanners and cameras obviously have no problem picking up the blue pencil, but the blue is still easily knocked out in Photoshop —much easier than cleaning up extensive graphite sketching would be.

After the image was scanned and the blue sketching knocked out, I then traced the image in Adobe Illustrator, and added colors shadows, shading and text.

The finished image

The shading and rendering of the final graphic ended up requiring several layers in Illustrator, with both the water portion and the foam portion each taking up about four layers apiece. Layer one is the original scanned drawing.

The Illustrator layers palette

In addition to the nice full-color graphic, Prince of Peace Lutheran Church also needed a black-and-white version of the logo.  This presented a bit of a challenge, as a lot of the visual detail present in the full-color graphic was lost when I converted it to black-and-white. For instance, the part of the text that overlaps the water completely disappeared, and the top of the foam started to disappear against the sky.  I ended up applying a thick white stroke around the text to outline it against the water, and added a thick black stroke outlining the water and the foam against the sky.  I also applied a thick white stroke to the outside of the logo border to keep it visually separated as well.  This regained the visual legibility that had been lost when first converted to black and white.

The finished black-and-white version of the logo

And that’s it.  I hope you enjoyed seeing a little bit of the process that goes into designing a graphic like this!

Free e-Book: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

A close-up of an Illustrator mockup for the OFLC Construction website

I always use Illustrator to draw out website layouts.  I know a lot of people like Photoshop for layout comps, but I stick with Illustrator because it’s drawing tools are so much better.  Photoshop is certainly one of the greatest pieces of software in the world today, but when it comes to drawing up button/layout/icon graphics, Illustrator’s vector drawing tools save the day. But one nagging problem that kept coming up was an apparent lack of pixel-perfect drawing options, especially when it came to stroked vector shapes.  The left side of the picture above shows the problem. Even when a particular shape is set to a 1-pixel stroke, it oftentimes straddles the pixel border, resulting in a stroke that’s twice as thick and half as intense.

This problem was driving me crazy until I found a blog posting on Vibr8bros.com that addressed this exact issue.  The solution’s too simple: make sure the stroke is set to center alignment (it usually is by default anyways), then set the line’s position at half values. For instance, if you have a vertical line with an X-position of 1124.293, just change the position to 1124.5.  Problem solved!

You can read the full tutorial on Vibr8bros.com here.

Free e-Book: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

Well, after a lot of work, my portfolio site’s redesign is finally complete.  Some history: my graphic design portfolio has been running on www.cstrom.com since early 2005.  From 2005 through the first half of 2008, it was running as a pure Flash site.

This had several drawbacks: the first, of course, being SEO.  Being a series of old-school Flash files, my site was literally invisible to the search engines.  (I keep hearing about Flash being more accessible to search engines nowadays, but I still feel like I never see many Flash sites show up prominently in organic search results.)  Another drawback, for me, was that it was cumbersome to update compared to XHTML.  And finally, with increasing monitor sizes nowadays, it was becoming increasingly necessary to change my layout to a 1024x768-optimized layout, rather than the 800x600-optimized layout I was currently using.

My 2005–2008 portfolio site — showing its age

With these things in mind, I decided a few months back to overhaul my site, giving it a redesign and moving it over to an XHTML format.  My plan was to first run the site in a “transition mode:” build a few XHTML pages with my résumé and a few of my most recent work pieces, but still link to my old Flash site to display the majority of my work.

The transitional portfolio site

Finally, when some time opened up between contracts, I started building out the “finished product” — the fully redesigned site.  I kept the same basic layout as the transitional site, but gutted it all under the hood: the transitional site ran completely on absolutely positioned <div> elements, so I rebuilt it using a more flexible and standardized flow-based layout. I built out a full footer section, using the wonderful footer technique from A List Apart.  I filled out the content to display a much larger selection of my portfolio, divided up by category.  I added this blog that you’re reading now.  And finally, I gave a bit of a facelift to the design, cleaning up the typography and some of the visual elements.

A comparison of the transitional site and the final site

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now