Kayla is a good friend of ours and was showing us her blogger.com page. (Mojomammablog) She paid good money for the design, but it had some serious issues. Whoever coded her custom template had over written (and in some cases commented out) basic CSS styling in favor of hard coding fudges into the HTML. While I understand the desire to jump to a hard coded solution, especially when an unfamiliar framework constrains your options, I am never-the-less a fan of letting CSS do the work it is meant to do.
One of the fudges that this designer employed involved creating large navigation image maps, with small graphics, that covered vast real estate across the header. If you had a link within the first two lines of your blog post (it happens) the page navigation links above, covered the post links below, so when you clicked on the post link you were directed to a different blog page. (Yes, it was that strange.)
Starting fresh, Diane went into the Blogger.com CSS structure and created a new skin, with custom graphics that worked within the framework. The page loads faster, works better, and looks much better. To ice the cake we created a caricature of the Mojomama and included it in the revised graphics.
I created the caricature using Sketchbook Pro on my iPad, (while waiting for my wife to get her teeth cleaned!) I saved it off to Dropbox. When I returned to my studio, I opened it in Adobe Illustrator and set the drawing in a template layer. Using a custom pressure sensitive brush, I created and tightened “inked” lines in an ink layer, and then added color in a separate color layer. By adding color in a separate layer I can easily duplicate the layer and change the colors to grey scale or turn them off altogether for line art if needed. Also, because it is vector art, it is resolution independent which means I can use it anywhere small or big, print or web without worry of image degradation.
I love working on fun stuff!
