Joseph Hallenbeck


March 31, 2011

Don Character Sheet

Filed under: Sketch Journal — Joseph @ 5:56 pm

Flattr this!

Don Character Sheet

The process of working on the comic continues and today I present my draft sheet for the character of Don.

I tried on this sheet to experiment a little with his design. For one, out of all the character’s Don was the most complete out-of-the-box. He is based on a statue of Don Quixote that my drawing professor at Augustana had us draw. Indeed, many of these characters are based on weird statues he had us draw. Thus, when it came time to draw his character sheet, I decided to experiment. I colored in his mustache, removed the bandeliers and tried for a more realistic shape to his breastplate. In the end, I think I liked him just the way he was.

A second bit of experimentation comes in the inking. Previously, I inked with brushes, but I decided that I ought to be more discerning with them. For example, Tamar Curry’s Lumia’s Kingdom (whose artwork I admire) tutorials show him inking with dip pens. I love dip pens for my scenery look, but kept to brushes for characters and organics even though I find brushes much more difficult to use. On this sheet, I went with dip pens throughout, and the result? The lines look less confident on the larger images and far too uniform. Yet, in Ivan’s character sheet (coming up next!) I discovered that the brushes really do work — I just need to double or triple the size of my character drawings. Pens work well for the fine details of the backgrounds and smaller depictions of the characters (less than 1″ tall heads), but once I get into having 2″ – 3″ tall heads, the brushes look much more graceful and overall 9″ tall characters seem to be easier overall to draw.


March 28, 2011

Automatic Lightbox on WordPress via JavaScript

Filed under: Software Development — Tags: , — Joseph @ 2:37 am

Flattr this!

I dabbling more and more with JavaScript lately. In the past my solutions to most site-related problems has been to write server-side PHP modules to add whatever functionality I needed. Since I started using WordPress to manage my site content, I started finding myself using JavaScript to ease-up on the amount of html that I need to type into my post boxes. Take Lightbox for an example. Lightbox is a pretty amazing piece of JavaScript that easily creates animated slideshows out of a series of image links. I use it on my art and photography pages. The problem with Lightbox? Telling Lightbox to animate a link rather than just link straight to the pictures is very verbose. For example to create this animation:

Ivan Sketch “This ink wash panel from my webcomic ‘Ivan @ the End of the World,’ shows my growing interest in the use of water-based ink washes to depict gradient shading in my works.”

I need to type the following into WordPress:

<a title="This ink wash panel from my webcomic Ivan @ the End of the World, 
          shows my growing interest in the use of water-based ink washes to 
          depict gradient shading in my works."
   rel="lightbox[sketch]" 
   href="http://joehallenbeck.com/images/art/sketch_ivan.jpg" >
    <img class="aligncenter" 
         src="http://joehallenbeck.com/images/art/sketch_ivan.jpg" 
         alt="Ivan Panel" width="60%" />
</a>

Why so much text? First, Lightbox uses the anchor’s title attribute to generate a caption rather than the image’s alt text. The result is the repetition of the string value for the alt and title attributes. Second, lightbox uses the anchor tag’s href value to direct the browser to load the full resolution image. This allows the image tag to point to a smaller thumbnail picture. Yet in most cases of blogging, the thumbnail is just the original picture reduced to fit into the blog’s div. If this is the case than the href attribute on the anchor is merely replicating the src attribute on the image tag. What we really want, is to shorten the monstrosity above into this:

<a>
    <img class="aligncenter" 
         src="http://joehallenbeck.com/images/art/sketch_ivan.jpg" 
         alt="This ink wash panel from my webcomic 'Ivan @ the End of the World,' 
              shows my growing interest in the use of water-based ink washes to 
              depict gradient shading in my works." width="60%">
</a>

So much shorter! But how? The solution is in a very simple JavaScript function that I wrote which adds the Lightbox script to all images surrounded by empty anchor tags:

*  lightboxThis is a convenient method for transforming all anchored
*  images in a specified div into lightbox images. To use
*  lightboxThis call it during the onload event in the  tag
*  and pass it the divId for images that should be lightboxed.
*  @param string divId The unique id, all images wrapped in empty anchor
*   tags (&lt;a>&lt;/a>) in the specified div will be transformed into
*   lighbox images. Note: this method uses the img alt attribute
*   to determine the caption and will only work if an alt tag is
*   included in each image, if no caption is desired set the alt
*   attribute to alt=" ".
*  @param optional bool group If this parameter is set to true than
*   lighboxThis will group all images in the specified div into
*   a lighbox group with the name of the unique div id as the
*   group name (e.g. rel="lighbox[divId]")
*/
function lightboxThis(divId, group) {
    var anchors = document.getElementById(divId).getElementsByTagName("a");
    for (i = 0; i &lt; anchors.length; i++) {
        var innerChild = 0;
    innerChild = anchors[i].getElementsByTagName("img");
    if (innerChild[0] && !anchors[i].href) {
        anchors[i].href = innerChild[0].src;
        anchors[i].title = innerChild[0].alt;
        if(!group) { anchors[i].rel = "lightbox"; }
            else { anchors[i].rel = "lightbox["+divId+"]"; }
    }
    }
}

If you’re interested in implementing this on your own blog simply copy the function into your WordPress theme’s header and surround it with tags. Then you need to add the following to your theme’s <body> tag:

body onload="lightboxThis('blog_area')">

Where ‘blog_area’ is the name for the div id where your blog’s posts reside.


March 25, 2011

Sketch Journal #1 – The Mushrooms! The Mushrooms!

Filed under: Sketch Journal — Tags: — Joseph @ 12:15 am

Flattr this!

Mushrooms Sketch

A friend of mine (Alex Stommes) started keeping a sketch journal last summer. His plan was to post a sketch every day to the journal. The idea of this process was that it would encourage an active involvement in the art and a deadline to produce something each day. I found the idea intriguing and the results quite superb. By the end of the summer he improved immensely, and he continues to post new material regularly.

I wanted to start my own journal, but with my all my ongoing projects keeping a daily journal would require far more commitment than I could muster. Nonetheless, I still want to try, so I’m starting a weekly sketch journal. Every Friday, I will post something that I’m working on and hopefully this will encourage me to draw something each week (even if it’s just furiously scribbling at 11:30 PM on Friday night).


March 19, 2011

The Wind-Up Culture Blog Launches (or Field Report #2)

Filed under: Journal — Joseph @ 2:09 am

Flattr this!

First and foremost, I would like to announce the launch of the Wind-Up Culture Blog, my newest blog with a focus on my eclectic taste in film, literature and games. I hope that this (broader) topic will draw a larger audience of readers than my last failed attempt at creating a blog. Anyways, check over there as I hope to keep it regularly updated with reviews, critiques, and commentary about popular art in general.

You may notice some minor changes to this site. First, I’ve moved all of my sites from JustHost over to a shiny new space at HostNexus and as promised, the portfolio is now completely dynamic. The old-design used static web-pages so that I could distribute the portfolio on CDs without needing to include something like Server2Go. Since then, I’ve yet to find a studio that wants a disc version of the portfolio, most demand an online website. The new site also has some refinements to the text-size (it’s now relative for better accessibility), cleaned up CSS, and better handling of white-space to be more appealing. I debated the use of serif fonts, but decided to keep them despite the superior online display of sans-serif text.

I also refocused the purpose of the site. Since right now, I’m searching for full-time employment, I feel that I ought to move away from giving the impression that I’m looking for contract work and to instead focus the portfolio predominately as a place to represent my completed projects, ongoing skill development, and ongoing creative projects. If I decide to make a serious attempt at contracting, I will compose a studio site and formally charter a business.




Copyright 2011 - 2017 Joseph Hallenbeck Powered by WordPress