First one of the new year! And I did it before the end of January! Go me!

Related posts:

1. Sketchbook Sunday: A Year In Review
2. Sketchbook Sunday — Boots and Suitcases
3. Sketchbook Sunday: Japan

Happy New Year (that’s if the Gregorian calendar is your thing, otherwise Happy Sunday)!

It’s been an exciting year here at Line In HQ (current location: Chiang Mai, Thailand). As well as travelling to some really neat places and meeting some thoroughly excellent people, I’ve been involved in a number of exciting projects, both personal and as a Professional Inter Web Page Maker.

One of these personal projects was an attempt, started at my busiest time (naturally), to draw 3 new illustrations a week for an entire year.

I don’t know why I’m speaking of it in the past tense, as it only began in September. Perhaps it’s because, of late, I’ve been involved in an even bigger and more exciting project (more details coming soon) so I haven’t been able to dedicate as much time to this as I’d like

However, I definitely don’t want to be Announces Internet Project Then Never Completes It Guy, so I do intend to get back on the drunk, three-legged horse and force the hoary ol’ mare over the finish line by the 1st September 2012.

But in order to do that, I’m going to need to get better, faster.

Which brings us, in a most roundabout fashion, to the point of this post. In pursuit of this noble ambition, my sketchery output has increased dramatically since I began. Recently I revisited some of these sketches and there were some very obvious lessons to be taken from what was (and wasn’t) there on the page.

Being in a particularly reflective mood, I decided it would be a good idea to note down some of these lessons lest I make the same mistakes for a whole another year.

Then I went one further and thought it would be nice if I drew out the lessons.

Here’s what I learned.

1) Choose A Path

The Page that Started It All.

I found that it was important not to get hung up on the first draft. Choose a path and commit to it 100%. Sketch to the page, loose and quick, then work at it to make it better.

2) Tell A Story

Vision: Have a Story To Tell

The greatest technical chops in the world are useless if you’ve got nothing to say. These two bland and unexciting chaps exist in the ether, with no point or purpose to their existence. As such, they lack the punch of some of my more successful illustrative attempts.

It’s important for me to know what I want to say first. Then I can worry about how to say it.

3) Put My Everything into Everything

Make Beautiful Thumbnails

Thumbnails can be loose, sketchy and quick or they can be carefully crafted. They can be vague approximations or precise considerations.

But whatever they are, they deserve my attention. I’ve been guilty of doing thumbnails distracted when they require as much focus as any other part of a project.

Every time I draw a line on a page, I want to be fully committed to that experience. Not rushed or distracted, simply aware of the pleasure of pencil on paper (or stylus on graphics tablet).

4) Finish It Up

Finish It Up (however bad it seems)

I originally abandoned my Robots vs Tentacles sketch because the very early version was a horrible mess and I got frustrated.

It’s only when I was flicking back through the book a few weeks later that I saw how close it was to being something useable. I worked at just a little bit more (it really was only like 5 minutes) and it turned into one of my favourite pieces of the year.

What struck me was how close I was when I gave up: Darkest before dawn and all that, I guess.

5) Plan My Sketches

Plan My Sketches (and fill the space)

This is one mistake I would definitely like to stop in 2012. I’m forever just opening up a new page and starting bang in the middle.

It’s always worth taking a few moments to think about what it is I’m drawing and plan accordingly. A few super-light lines to block stuff out is also a good idea.

2012

Turns out that Learning From Your Mistakes is a super useful exercise!

I’m hoping that taking this time to recognise the mistakes that I’m repeatedly making will hopefully go a long way to stopping them from happening again.

I wouldn’t, like, bet on it or anything.

But I’m hopeful.

Related posts:

1. Sketchbook Sunday: Bears
2. Sketchbook Sunday — Boots and Suitcases
3. Sketchbook Sunday—Airport Faces

One of the biggest challenges in maintaining a solid vertical rhythm is form elements. I have tried too many different ways to get them to fit into the flow of text–including countless combinations of padding, margins, borders, line-heights and font-sizes–but unfortunately they simply do not behave themselves consistently cross-browser.

Which is why I had a bit of a double facepalm moment when I realised exactly how easy it could be. Simply wrap them in a containing element and give that element a minimum height:

<div class="form-container">
	<label for="input-element">My Label</label>
	<input type="text" id='input-element'>
</div>

Usually I just go for double the line height:

.form-container {
	min-height: 3em; /* Assuming line-height of 1.5 */
}

/* If you're using LESS/SASS, it's even easier */
.form-container {
	min-height: @lineHeight * 2;
}

Obviously, if you change the font-size of the containing element, this will break your vertical rhythm (you’ll have to re-calculate the min-height based on the new line-height, itself based on the new font-size).

But if you’re using the same font-size, then this is all you need to make sure that everything sits vertically where it should.

If you want more space underneath or above your form container, you could simply use another line-height unit:

.form-container {
	min-height: @lineHeight * 2;
	margin: 0.75em 0;  /* Assume 1.5 line height, divided by 2 */
}

Everything that comes after it will sit on the same line as everything that comes before it.

Related posts:

1. IE Image Fixer Upper
2. Getting More Control from the WordPress Settings API
3. Create a Quick Grassy Hill in Illustrator with the Crystallize Tool

This was a piece I did for a client.

And, yes, the misspelling of the plural of Moose is deliberate.

Last 5 Illustrations

• Illustration 18: Cow Icon
• Illustration 17: Robots vs Tentacles 2
• Illustration 16: More Jesters
• Illustration 15: Life Is But A Joke
• Illustration 14: Steam-Powered Servers

Related posts:

1. Illustration 17: Robots vs Tentacles 2
2. Illustration 15: Life Is But A Joke
3. Illustration 9: Plural of Anecdote

First attempt at creating an icon. It’s a cow.

After my extensive research (all of 10 seconds on IconFinder), I concluded that there was a shortage of cow icons in the world. This is my attempt to help fill that void.

It comes in 16, 24, 32, 48, 64 and 128px sizes, both matt and glossy, and I’ve included the original vector .AI file as well.

You can download this veritable bovine bonanza here.

Last 5 Illustrations

• Illustration 18: Cow Icon
• Illustration 17: Robots vs Tentacles 2
• Illustration 16: More Jesters
• Illustration 15: Life Is But A Joke
• Illustration 14: Steam-Powered Servers

Related posts:

1. Illustration 8: Melt
2. Illustration 9: Plural of Anecdote
3. Illustration 13: Technical Difficulties

No Sketchbook Sunday this week as I’ve been busy coding some new tools to help speed up my WordPress development.

I’ve been developing a class-based Base Plugin environment that allows me to quickly create new settings pages (on both themes and plugins) and focus on form creating, validation and program logic (I can’t wait until PHP5.3 is more widespread. So many times I could have used Late Static Bindings and proper Namespacing…)

I’ve been using the Settings API but I also wanted to be able to switch between Tabs, Meta boxes and vanilla HTML simply by changing one class variable.

In order for this to work, I needed more control over how the Settings are displayed. The default WordPress function is the do_settings_sections(); but this simply dumps out all of the sections in one go—no good if you’re trying to separate out individual sections on one page in order to use JavaScript-based tabs or individual Meta Boxes.

Digging through the core, I had a look over the Settings API functions. The do_settings_sections(); is actually pretty straightforward. It basically just loops through a huge array of all of the pre-defined section areas. So I adapted it and came up with this single version:

if ( !function_exists('line_in_do_settings_section') ) {
	function line_in_do_settings_section($page, $section) {
		global $wp_settings_sections, $wp_settings_fields;

		if ( !isset($wp_settings_sections) || !isset($wp_settings_sections[$page]) )
			return;

		echo "<h3>{$wp_settings_sections[$page][$section]['title']}</h3>\n";
		call_user_func($wp_settings_sections[$page][$section]['callback'], $wp_settings_sections[$page][$section]);
		if ( !isset($wp_settings_fields) ||
			!isset($wp_settings_fields[$page]) ||
			!isset($wp_settings_fields[$page][$wp_settings_sections[$page][$section]['id']]) )
		return;
		echo '<table class="form-table">';
		do_settings_fields($page, $wp_settings_sections[$page][$section]['id']);
		echo '</table>';
	}
}

Now all I need to do is pass the $page and $section that I want to display, and it’ll only display that section. With this level of control, it’s trivial to set up a looping system (for example with tabs):

<?php
// A bunch of pre-defined setting section ids
$tabs = array(
	'default-settings',
	'advanced-settings'
);

<div class='wrap line-in-plugin'>
	<?php screen_icon( 'plugin' ); ?>
	<h2 class='lif-title'>
		<span><?php _e( 'My Example Plugin', $this->lang ); ?></span>
		<?php
		$i = 1;
		foreach ( $tabs as $tab ) { ?>
			<a class="nav-tab hidden" href='#tab-<?php echo $i; ?>'><?php _e( 'Tab ' . $i, $this->lang ); ?></a>
		<?php
		$i++;
		} ?>
	</h2>
	<form action="options.php" method="post">
	<?php $this->settings->get_settings_fields('my-settings-page'); ?>

		<?php
		$i = 1;
		foreach ( $tabs as $tab ) { ?>
			<div id='tab-<?php echo $i; ?>' class='lif-tab'>
				<?php line_in_do_settings_section('my-settings-page', $tab); ?>
			</div>
		<?php
		$i++;
		} ?>	

	 <p class='submit'>
	 	<?php submit_button(); ?>
	 </p>

	</form>
</div>

Instant tabbed settings pages!

Related posts:

1. How To Upgrade To WordPress 3 Safely
2. Optimize Your WordPress Database
3. Why WordPress Sites?

I finally got around to finishing up the sketch I posted a few weeks back.

The logo is a previously completed piece, but the rest of it is new.

This one actually marks the third in a series of experiments with lines. Number 1 has big thick black lines, number 2 has more subtle lines and this one has no lines at all.

Last 5 Illustrations

• Illustration 18: Cow Icon
• Illustration 17: Robots vs Tentacles 2
• Illustration 16: More Jesters
• Illustration 15: Life Is But A Joke
• Illustration 14: Steam-Powered Servers

Related posts:

1. Sketchbook Sunday: Robots vs Tentacles
2. Illustration 12: Robots vs Tentacles Logo
3. Illustration 16: More Jesters

This was a sketch I did for a thread on the DrawSpace forums a while back.

Related posts:

1. Sketchbook Sunday: Tsumago
2. Sketchbook Sunday: Rustic Houses
3. Sketchbook Sunday: Robots vs Tentacles

I’m not quite done with Jesters, mysterious creatures that they are.

I wanted to explore different ways of creating line work. The colours are the same on this one as the last one except this time I’m not using pure black lines. I think I prefer this method.

Last 5 Illustrations

• Illustration 18: Cow Icon
• Illustration 17: Robots vs Tentacles 2
• Illustration 16: More Jesters
• Illustration 15: Life Is But A Joke
• Illustration 14: Steam-Powered Servers

Related posts:

1. Illustration 17: Robots vs Tentacles 2
2. Illustration 19: I Heart Mooses
3. Illustration 15: Life Is But A Joke

Listening to Hendrix and suddenly felt like drawing a Jester.

Last 5 Illustrations

• Illustration 18: Cow Icon
• Illustration 17: Robots vs Tentacles 2
• Illustration 16: More Jesters
• Illustration 15: Life Is But A Joke
• Illustration 14: Steam-Powered Servers

Related posts:

1. Illustration 6: A Haunted Look
2. Illustration 10: Under A Deadline
3. Illustration 11: Sometimes Done Is Good Enough