Facebook page Facebook page RSS feed RSS feed

gatillos « blog archive

Well, nothing much to say. Yet another blog being created. Hopefully this will someday in the future show my evolution as an amateur webcomic author. Most likely it will serve as proof that I tried, and failed miserably.

I'm trying to figure out what would be the best way to approach this... most blogs I see are from people that already now a lot about drawing...

I can't draw directly on the screen. I can't draw directly on paper.

Maybe I can't draw at all, maybe I should accept and embrace that.

Never!

The thing with Adobe Illustrator is that it's a great tool. It loves Mac OS X and plays nicely in that environment.

This is drawn directly on screen, so maybe I can actually draw on screen if I try enough...

Playing with Adobe Illustrator

Well I think I'm going to go with Inkscape. I don't have enough cash to afford paying for Adobe Illustrator right now, and I also love that it works both on Linux and Mac. I keep changing between the two, so it's nice to know I'll always be able to edit my images even if one of them died.

So learning Inkscape is quite a steep learning curve compared to Illustrator. This is from a complete novice, I only know the very basics of Illustrator but it took me no time to create some random drawings. With Inkscape it takes a bit longer. It was nice to see it recognizing my wacom with just minor tweaking (well, not even tweaking, just activating it).

Anyway, here are some silly pictures drawn user Inkscape.

As you can see, there's great potential here. As long as characters don't require a body, I'll be fine.
Ok, I don't even know what this is supposed to be.

Oh, did I mention that Inkscape is free?

Or... I can just doodle something on a piece of paper, scan it, then apply some ink on top of it, and see if that looks as a draft. Then, over that draft, I should create the final ink and add layers for shading.

Some pencil drawing, then drafting a general layout with wacom and Inkscape.
Just testing possible layouts.

Well, of course, drawing a comic without a story does not make that much sense. But, you see, I do have story. I won't post it yet because a) it's bound to change and b) it's not that good of a story.

So today's panel is part of the story. Problem is, my English will need some proofreading. I very much prefer not to type in any actual words unless it's within Inkscape, so that I can change them quickly and easily. Somehow, in this case I did write something on the panels, as a guide. Maybe I should just remove it before posting. But it's part of the fun, seeing where this will evolve, mutate.

First page of one of the stories. Last panel should dispay the driver more to the left, I'll change that when inking.

Well typography is its own beast.

You may have noticed the fonts I used on one of my previous uploads. Somehow, those fonts seem too simple.

Of course, having yet to decide colors and overall the general look that the comic will have, it's probably too early to worry about fonts. But it's fun to play with them.

I tried a few (recommended to me by a real designer). From top to bottom, the fonts are: AlexsHand 36 points; Flood Std 36 points; Freestyle Script 48 points; YoungsHand 36 points. All 100% spacing.

Playing with fonts and a bit of ink applied to the previous scan.

At this stage I seem to prefer the first one, although I'll try all of them again when drawing the final page. By the way, it takes ages to ink...

Well I seem to have a clear idea of what I want to draw, and most importantly of what I want the story to tell and how it should look like. Problem is getting there is not as easy as one would want!

One thing I don't really like is, well, color. That's a pretty bold statement, I know.

The thing is I like some color, but just very basic lines, traces of it. That may or may not be linked to the fact that applying color is a real pain too, and that I lack any kind of talent to handle color.

So let's take my previous canvas, now with a bit more of inking and some test shades. I also added some color to the background. Something simple as this would work for me, I'm not a fan of details... I'd like to focus on the story (yeah, maybe I should be writing a book!). Anyway, I'll gather opinions.

A bit of shading and some color. Trying to find 'the style'

By the way, I followed the best advice you can get when working with Inkscape: save often, save with different names, activate autosaving. It's fairly stable, but it still has a tendency to crash with certain operations and, worst, leave your file in a corrupt state.

Well it takes a while to draw, but I think I'm starting to learn. I kind of finished the two bikes, handlebar pending, and I'm now playing with drawing what should pass for a wheel and something that should resemble a windshield effect. Let's see how that will go.

I'm posting my progress just for the fun of checking how it evolved later.

It would be lovely to be able to represent somekind of focus on this. Not sure how at this stage...

Well this page was intended to have just two panels, with a bit of dialogue. So, it seems I managed to finish panel one. I'm hesitating a lot about the amount of detail I want to put into it. For once, hands of the bikers fly but I wonder if it's actually worth doing the rest of the bike. The idea is that the reader should just read the balloons and essentially go quickly through the whole page. It looks maybe too schematic but I kind of like it... You can tell that this is my first panel with Inkscape. Will think and gather some input.

I came to the realization that I need to draw more accurate drafts by hand, because it's quite difficult to define shapes on-the-fly, I like the old man approach of 'inking' over an scan.

First panel that is actually close to final - I played with jitter effects for the balloons (added nodes 5px to a circle, jitter with 4/8 spacing), and the wheel is actually a simplified gear (200). Click on it for a zoom.

Oh, by popular request, girl-on-a-bike received a new hairdo and some more detail.

Fonts on balloons were changed too, but I kept the font for the narrator.

Today I went out of my way with the shading. Maybe I ended up being too artsy. I really like drawings that have that sketchy or somewhat careless shading, but I assume that too requires some practice...

Anyway, lo and behold, the new version, with panel 2 included and what could pass for dialog.

First page, script I feel more or less comfortable with (English proofreading pending), and some shading...

I also got tired of the previous Blog theme ("Bold Life"), so I'm back to this plain one that allows for more space to be used for content (update: changed my mind!)

So here's a page two and a title I like. "LIFE/interior". It's a pity the domain is already taken, because I think I'm going to go with it.

A draft for page two.

Will probably design some title or play with different fonts. I'm feeling again this need to just add some very basic shades to this draft and call it a page. Strange that my artistic feelings tend to align with whatever is easier.

Well, I've been analyzing the 'webcomic' concept in itself. As I see it, it puts the following constraints:

  • You need to create pages within a reasonable time
  • Once a page is up you can update it, but most people will miss those updates
  • Most importantly: you can't rearrange the order of pages
  • The layout of the site should focus on the webcomic, one page at a time

I like the second point, being somewhat forced to update on a regular basis is definitely something I want --I'm lazy. But the third one is the actual key point, as this is intended to be a live and ongoing process, something that ideally would be followed via regular visits (perhaps through an RSS reader), you don't have the liberty to rethink what you did.

I think I'm ok with this, I think as long as you understand it, the end result can be great. One approach would be to define the story completely before drawing anything else. The other would be letting it evolve and 'define itself'. I think the story will definitely benefit if the major plot points are well define beforehand, but I also like to have the ability to tweak it along the way...

On the subject of the site itself, I'll be updating it shortly to display the comic in a more 'webcomic-like' layout. I think I'll keep the blog as it is and create a new page for the webcomic itself, with a separate RSS feed. I like also the idea of creating an iPhone-specific version as was suggested to me by a friend.

Anyway, I've been drawing some faces to train myself and also looking for the face of the main character. The more realistic ones were drawn based on photographs, and as such are probably not really suitable for main characters.

Some faces. Everything was drawn using Inkscape and a couple of layers. I left the guiding marks so you can see the references I took. The last face would be me, btw :).

This is a slightly more polished version of the previous draft. I realigned the balloons to make it easier to follow and added panel lines.

LIFE/interior, introductory page. Click to zoom.

Scenes from the past

So I'm continuing with what could be thought of as the introduction. The narrator continues to present a bit of himself as a prelude to the story.

First panel is actually a rendition from a photograph from my friend Haripako (check it at his flickr page and take a look at the wonderful photographs he takes as part of his ongoing 365-day photo project, used here under permission :)). The rest are based on old photos I had around and some googling for inspiration.

Need to finish the remaining panels and apply some shades. The overall tone should be dictated by the first panel's color.

Update: defined faces a bit more.

Drawing a bulldog in 10 seconds.

Well since I have some difficulties finding the right spot to draw, I'll update the site putting it closer to the webcomic layout. I'm using a wordpress plugin called webcomic and the inkblot theme, no customizations yet.

I've been doing quite a lot of traveling lately (Dublin, London, Barcelona) and that's seriously getting in the way, but I shall prevail!

Have defined the story and will start posting pages in an orderly manner, while also continuing with the blog. It's part of the magic of the webcomic plugin.

In this post, a bonus bulldog drawing :9. Inkscape instructions: create a circle, draw some straight lines, select, convert nodes to curves, then tweak a little the nodes. tada!

Well my friend Sergi was kind enough to draft a design for this site. His approach is usually quite different to mine so that's always welcome.

Here's what it looks like:

First draft for the site's design - click to zoom

By the way, I enjoyed the UK Webcomix Thing 2010 today. Lots of talent there, I talked with quite a lot of people which were quite nice and I hope someday I myself will have something to show there too :). Lots of different styles, but I seem to prefer the somewhat cute ones, like Timothy Winchester, if only because of the business cards he was giving:

Now that's a business card...

Well the next pages that hopefully will be coming during the following weeks are actually scripted, yes, like in a real comic! They describe our narrator's recollections from his childhood. I wanted to use a slightly different style for the 'childhood' era. I included the actual drawing process this time. Since I don't have my scanner here I didn't use the pencil draft, although I did create one. So process goes: I outlined the figure with straight lines, then smoothed them using Inkscape, then tweaked them, then continued tweaking and defining detail (while trying not to put too much detail in).

So yep, this is what I do on a weekend:

Childhood is never easy

Actual main character is supposed to be the last white haired one, the black haired one is just me playing to see how tweaking distances in the figure can completely change the look of a character. My initial thought was that the child version of the main character should have a different hairstyle, because usually when you are a child it's your mom that decides how you look, but I think using the same hairstyle makes him easier to identify. I did want it to have distinct, more comic-like, eyes.

Tricky bit is now doing the same character in various positions...

This is what I did yesterday. I tried doodling directly with the tablet, bypassing the usual pencil drawing and then scanning, because I don't have a scanner here. I did some basic hand drawing for inspiration, but changed it a bit when drawing on screen. The conclusion: I do need the scanner or drawing with a bigger zoom or something, because the results are quite disappointing:

Lame.

The thing is that unless you are a the correct zoom level, most of the traces you draw with the table are not actually represented in the drawing, so when I quickly did the traces for the head of a mouse (that's what the child is supposed to be holding), all the detail disappeared. I'm posting it nonetheless, so that the world can see how that evolves to something :).

And I did draw the small child looking to the left, had to play a bit with guides in Inkscape to make it proportional, but it looks fine enough. Not sure about the hands, maybe I can make the character wear prosthetic hands because that is what they look like...

I can walk.

I like the expression it has. It's missing some shadows (one under the eye), but it's still a bit of a draft.

So I had a hard time choosing the right proportions for the character when he's older. The child is supposed to be funnier and intentionally disproportionated but the adult, even if it should also look like a cartoon character, should be a bit more proportional. So I started googling and found various techniques, the one applied here is based on the size of the head, essentially using it as a ruler. See the progress from sketch to draft below. Essentially, the body is 7 'heads' long. Trick is that whenever there's a joint, these 'heads' may overlap as in the knees below. Well, that's what I think...

Playing with proportions.

Not so bad. I kind of like the style, pending adding detail, probably changing the pencil width, etc.

I've tried a few things that can replace a scanner. Let's share.

Since I only use the scanner for sketches and basic character traits, I don't really need that much precision but I do need it to be focused and not distorted.

1) iPhone photos. Crap. iPhone lacks a flash and is completely incapable of applying the right focus.

2) iSight camera from my rusty macbook. So-so, it has a pretend-flash and seems to be better at focusing, but it forces me to hold the paper at just the right distance.

3) Cheap Nikon Coolpix digital camera. Clear winner. Using the 'close-up' mode it seems to be able to focus perfectly on the drawings.

So 3 it is. All this effort is because it seems to be easier for me to outline a sketch using the ancient method of pencil and paper. See this example below, which had a threshold applied to make it black and white.

OMG this image contains spoilers

And I even used a movement line (the curved line that goes from top to bottom) to define the shape of the cat. I'm going pro.

So I have this problem. Let's come clean. I can't draw women. I like to draw women in an androgynous way, I'm not too keen on drawing big voluptuous figures. Problem is, well, they are so androgynous that they are essentially indistinguishable from men.

Femme.

So the solution is clear: add long hair, a ponytail or some earrings in order to provide clues, or combine it with a nice skirt. Women's Rights defenders will campaign against me soon. All that is good but limits my spectrum and sort of makes my drawings too stereotypical. Take this sketch as an example, that could easily come from a fairy tale. And I'm not sure why I used the manga eyes on it, btw. Ok, I was in a plane so the pressure changes may have affected my brain.

I have no trouble drawing really muscular guys, with impressive chests which easily border the homoerotic. I figure that's ok as long as I don't salivate while drawing them. Must be because I remember reading Savage Sword of Conan when I was growing. The fact that I seemed to focus on the muscular types and not the gorgeous women Conan was constantly saving may be worth a visit to the therapist.

In any case, what constitutes a girl's figure is very interesting, I have a few books on the subject, but I still need to practice quite a lot before I can introduce a female character. It's still going to be all boys for a few weeks. One of the books actually describes in detail how to draw women's breasts, with a whole chapter dedicated to 'women holding their breasts together by pressing them with their arms'. Let's hope it doesn't come to that.

I knew from the very beginning that creating a webcomic imposes some restrictions. One is the immutability of content. Once it's published, it shall not be changed. Thus spoke the Lord.

Now, add in the fact that you need to release periodically. Even more, you must. That's actually the key point, if I ever learn to draw it will be thanks to being forced to do it :):

Thing is, I didn't have enough time to review and check the last page I published. Then the next day, it felt completely out of tone with the idea of the comic. So I committed a sin and changed it and it's very interesting to see that some people noticed, but of course most didn't until I pointed them to the change (Facebook power).

The actual changes I made are not so evident so the new version seemed better than the previous one although it was unclear why. Let me illustrate you with a Before and After comparison:

7 differences (click to zoom)

The most important bit is the text, previously it was too verbose, I must learn to leave some things for the reader to infer.

On a side note, Google Reader doesn't care about updated items --other feed readers will tell you there was an update, but someone at Google decided they didn't care, although updates are displayed correctly they are not marked as new content so it's easy to miss them.

BTW: I should change the stroke size for the characters at the bottom of the page, they look so horrible. Should I? Shouldn't? Where do I stop? HELP ME!

I'm starting to think my story is a bit too ambitious given my current abilities :), but foolishness can get you quite far. Thing is, the story I'm trying to tell is supposed to go back and forth between three different ages of the main character. That means I need to be able to draw the character in three different stages of his life (as if it was not difficult enough to draw one character in more than one position!).

So currently I've drawn mostly the childhood years and some snapshots from the young years (although I should revisit them and slightly change the look of the character a bit). Now I need to draw the character quite a few years later. It turns out it's quite difficult to actually age characters (but fun too!). I'm starting to understand why most comic characters don't age at all. Take a look at this amazing guide at Cedarseed's site or if you prefer, at Deviantart. Of course, as my style of drawing is quite different, not all of that applies to my particular case but it serves as a very nice starting point.

This is what a first approach to The Three Ages looks like in my world (not exactly like these other Three Ages):

The three ages

It was a very interesting effort. I chose the gray eye lids and the white hair as a guidelines for the three figures. The old age I'm trying to draw is not supposed to be really very old but it's more a case of premature old age (more on that as the comic advances).

Another fundamental point about 'old age' is that whenever I try to draw the character as a premature-old person I start drawing him with very unlikely clothes. I mean, old people in my mind always wear a slightly ragged, dark colored suit, maybe some kind of hat and of course a walking stick. Question is, how will old people look like 20 years from now? Will we see them in their 'vintage' G-STAR RAW jackets and think they need to renew the wardrobe? Oh the difficulties of life.

Hiya. Well time continues to fly but my little webcomic hasn't received an update for about two weeks. Thing is, I'm still working on it, it just takes time and it's hard to concentrate when there is this bright sun everywhere trying to drag you out to the streets.

I'll try to keep this a bit more interesting by posting again some drafts and then compare those to whatever they come out to be. Usually I redraw things so much they barely resemble the original sketch, so this makes for an interesting test.

Sketching of various panels

As you can see my drawing of females isn't improving that much, but I keep trying.

Today I decided to try and put a little more effort into coloring and shadows. Up to this point shadows are most of the time drawn on a separate layer on top of everything, with a filter of type 'darken'. That works great for some shadows, but it doesn't play well with other objects, as it needs to be on top of everything. It's essentially like drawing with a brush over the finished drawings.

I decided to combine that with a different approach: create shadows as just basic shapes with color and put them in the same layer as the rest of the picture, as regular 'citizens' in the drawing. That means I can draw the shadow of a table and then put a table on top of it, without having to spend too much time trying not to accidentally draw over the table while shading.

Mmmm. Maybe that doesn't really make sense, particularly if you've never tried to draw with a vector program like Inkscape.

Anyhow, you can find the result below. First is the draft by hand, then I outline it, then adjust it and make it more round, and finally I play with color and layers:

Maybe a little more detail on the background...

I created the color palette displayed below the pictures using http://kuler.adobe.com --I don't know much about color, but those just seem right. I've been using the same palette since the beginning, although I sometimes play with transparency and grays.

Creating a composition for a panel is a very nice exercise and lots of fun. I usually do some doodling then try it a few more times, then do something a bit more serious, then when it looks about ok I start all the rest.

There is another approach, which is basically ripping off from a friend that has a great sense of composition but works in another area, like, let's say, photography :). Today I decided to steal another photo from a friend, in this case the photo is not that great from a technical point of view, after all it was one of the very first ones he took as a learning exercise, but the composition was there and fits very nicely with the one I had in mind. What I did is very simple and not that difficult: 1) find a nice photo, 2) either sketch it maintaining the composition or as I did with this one, actually copy the main proportions, 3) forget about the photo, concentrate on the drawing itself.

I think it works. I like the lack of perfection on proportions and the slightly skewed perspective, although I might fix some of that too. This new thing I'm doing with colors and shadows is also quite entertaining. The drawing should still get some more shades somewhere but I'll do those later.

Here is the process, in all it's glory:

Which is better?

The original photo is from Haripako (shusssh don't tell him). This is the second time I rip one of his photos, more to go ;).

Well the title is intentionally a reference to Scott McCloud's "Understanding Comics", which I'm reading these days. The book is an essay (in comic form) about comics, but from a very uncommon point of view. He talks about sequence, about the cognitive process involved when reading a comic, the difference between painting, literature and comics and much more I haven't read yet. Everything there is wonderfully illustrated with examples as he explores the different approaches authors take and all the great opportunities that this kind of media has.

But today I discovered what a webcomic is really good for: feedback!

Let me explain. I have the rare opportunity of actually talking to real 'readers' and ask them about the comic and I was interested about the last two pages, because a very important characteristic of the older Mr Mann is supposedly revealed there, and some key elements are introduced. But.. a suprisingly high percentage did not get the message I was trying to convey on those two pages. At all. It's not only the message, which can arguably be missed as it's only a couple of pages, but the actual sequence of events was unclear for almost everybody. That is, they didn't understand what happened.

The comics are here and here.

My original intent was to stop that sequence there and go to a flashback introducing the character 'Ana', but I'll add another page to the therapy sequence, trying to further explain it because it's kind of important.

I believe there's two main issues there: the main character is at times difficult to recognize as I still need to improve drawing, and more importantly, when I tried to display the contradiction between what Mr Mann is telling the psychiatrist and what he was actually doing (and what he is remembering), well, essentially I failed.

I think I should have added something more obvious, like some kind of cloud separating thoughts or memories and inserting more shots of Mr Mann's face while explaining it. For your knowledge: the idea here is that Mr Mann lies to the psychiatrist, pretends the whole event was a very simple thing, and hides the fact that after that 'flip out' at the office he went and beat the crap out of that new character that appears (the junkie) in something which has to do with another character yet to appear (Ana).

So FAIL for me ;). I'll try to learn something from this. It's good to have this kind of feedback so early in this process, because I can react quickly.

And if by any chance you did understand it, do post. Maybe my user sample was biased :)

Just some words, not even a drawing.

This LIFE/interior thing is far from dead, I know lack of updates seems to point strongly to a looming future --but that's not it! It's only the usual spiral of unwanted events that keep conspiring against it, diseases mix with happy moments and stress mixes with relief, and between all of that there seems to be no space for little things like a continuing story.

All is not lost! Many drafts took life from otherwise dead trees and graphite and script and new moments are already in the land of future. Their migration to the digital world is taking longer than I'd like, and sometimes I think that this lonely tear of sweat on the side of my face doesn't only come from the hot summer but also from the guilty feeling of lousy comic parenting. Also, the unborn pages keep asking me to get my **** together and do some drawing, now (unborn pages talk like that, they are a bit foul-mouthed).

There's weekend hopes! Some nasty pieces of life will have taken care of themselves by then, and drawing will resume.

Promise.

It's on the Internet. It must be true.

Well the dreaded moment where I need to actually draw a recurring female character is finally here. Let's see if I'm learning anything. From the male protagonist I've learned that I need to have some very clear traits that I can easily reproduce otherwise drawing it in different angles becomes really cumbersome. Also, I like much more this style, a bit more like a cartoon.

So... how's this for a face? She should be kind of cute and very simply outlined...

Mini Ana

Well I have what could be considered a full page but since I'm trying to make the comic easier to follow and read, I think I'm going to finish the minisequence before publishing it.

In the meanwhile, how's that for little girl Ana:

Little Ana

It feels much better to draw happy things :).

Just a quick note to record how upgrading from Wordpress 2.x and Webcomic 2.x went for me. I waited quite a while until most people stopped complaining about upgrade problems before trying it.

First, I saved posts with the export tool (which doesn't give that much peace of mind because it doesn't include images). Then I did a full backup of the whole site and a dump of the mysql database. I do that regularly with a small script so that was easy.

After backing up everything I upgraded Wordpress. It had been asking for it for quite a while now, with a huge 'Upgrade to wordpress 3' button always visible in the Admin console. Instead of clicking that, I decided to go through Dreamhost's panel because there are some things that need to be setup at Apache level that I know people at Dreamhost had taken care of, so it seemed the safe bet. I also figured I could get some support if I went that way (which I didn't need btw).

The upgrade to Wordpress 3 went flawlessly. Well, flawlessly meaning in this case breaking most everything and rendering the site apparently ok but horribly broken inside. First, all comics had disappeared, which is a bit scary when your site is supposed to be mostly about that. But that was expected because neither Webcomic nor Inkblot (the theme) were upgraded yet. I upgraded Webcomic directly from the plugin directory and downloaded the latest Inkblot theme from their site. I extracted the inkblot theme into the themes directory and copied inkblot-child outside of it so that it sits directly under 'themes', I then made sure inkblot-child was selected as the current theme.

Then, I went to Webcomic/Tools and upgraded the posts. This essentially recovers all the comic posts by migrating them to the new format. It was a relief to see them reappear, as every comic post had been lost until this step. The process is easy and consists on a small wizard-like dialog with a few steps, and one of them implies you manually moving your comic files to another directory. After that, a few of the posts weren't correctly bound to their comic images so I just bound them again.

All the tweaking on my inkblot-child theme was lost, which was not a real problem as I prefer the new structure. I just uploaded a banner for the header, tweaked font size and type and played a bit with the list format.

I tested the design that I commented sometime ago, with a blueish/magenta background, but it seems to clash with white images. I'll try it again at some point.

So, in summary:

  • Upgrading wordpress to 3.0 is easy
  • Webcomic doesn't upgrade too easily (I moved from the latest 2.x to 3.04). I really think most people will end up with a broken site. Good news is that there's lots of support from the Webcomic guys, and a nice video illustrating the process.
  • Inkblot may upgrade nicely but I really didn't even try, just started from scratch with the new version.

When adding text that is narrated, I usually add a rectangular box and put it hanging around. It's not like a balloon but maybe I should do like everybody else and put the box on top of the panel when it's supposed to be read before whatever is happening in the panel.

Like in this example from the upcoming page:

Text as part of the panels.

Also, I might reduce the size of the drawings, I tend to do them too big. I'm hesitant though, because if you've got a nice big monitor they look much better. Maybe I should play with different resolutions.

I want to create two comics, one is LIFE/interior and the other is so far called '3-panel comic'. The first one should receive weekly updates, while the second will be more random.

In order to have two comics I thought the site needed some changes, or else I would have to have two sites. I've never liked the navigation, but what I came up with is not that much better.

I uploaded the first set of changes, let's see how that works. The visible changes are:

  • The homepage now shows two small thumbnail viewers, one per comic
  • Comics are loaded on demand, which should speed up initial page loading
  • Homepage no longer displays the latest comic, you have to click to see it

I still need to work on a better design. Well, at least I really need to change the arrows for left/right on the thumbnail viewers...

Anyway, feedback welcome as usual. I expect to be adding and testing stuff now that I have a nice setup for testing it.

Well it's really taking me a while to draw the next page. All the drafts and dialogue are finished, it's just a matter of... well... drawing :).

Here's a sneak peek of what's to come. Oh the mystery.

Oh my oh my

I see lots of people praising the calligraphy tool in Inkscape, like these guys. That tool is essentially the one that lets you draw as if you were holding some kind of pen or a brush. It's pressure-sensitive so it generates more or less realistic and 'alive' strokes.

On the other hand, the pencil tool generates just plain bezier lines that you can bend and modify afterwards. It follows your trace and kind of approximates what you are trying to do. After drawing a stroke, you can modify it quite easily, whilst the calligraphy tool generates strokes that contain so many nodes that it's not worth trying to rearrange it, it's just better to redraw that particular stroke.

Right now most things you see in my comics are drawn using the pencil tool. That's why they have a clear-line look. I like how it looks, although it's quite a lot of work. I sometimes scan hand-drawn drafts but now I've started doing those drafts on screen using the calligraphy tool and then creating the final version with the pencil tool. I should be brave and start using the calligraphy tool for the final result, but I somehow feel more comfortable with the pencil approach, right now. Incidentally, the calligraphy tool is very sensitive to zoom so if I zoom in the strokes become thinner. It's a bit weird there might be some way to avoid it but right now I can't seem to find it.

Here's a sample draft with the calligraphy tool. It just takes a minute to draw something like this:

I like the simple appearance. On the other hand, here's an image first drafted with calligraphy and then redrawn using the pencil tool:

The second drawing took a little longer to draw, but it's still only a few minutes. The difference lies in doing further modifications: I can now tweak, shade and otherwise work with this image in a way that is simply not possible with the calligraphy approach.

I think I'll continue using the pencil for a while but I'm going to experiment on separate comics with the calligraphy tool.

I upgraded to Inkscape 0.48 and so far it's not going too well, it crashes a lot but this time it usually saves your work correctly before dying. There are a few good things, though. One of them is the Spray Tool.

As I'm trying different drawing styles, one thing that is very nice and quite easy to do by hand (albeit a bit tedious) is 'crosshatching' to display shades. That is, using lots and lots of lines to represent shades, forming a pattern. My first surprise was that there is no standard crosshatch pattern for filling, which seems odd (it has stripes, sand and other strange ones). There must be a reason but in any case that type of crosshatching is always perfect and that is not what I wanted.

First I created a few lines, with the calligraphy tool set to Dip pen, width 1, Stroke size 0.1, in a 300% zoom. These numbers will vary wildly depending of what you do. I created a pattern like this:

a mini crosshatch

Then I selected it, pressed the Spray Tool (new to Inkscape 0.48) and just sprayed with it to do the shading:

shading here took literally 2 seconds

You can also enable pressure use for the spray tool, play with the width and in seconds do shading. I didn't put any effort on the actual drawing here, it's just an example :).

try doing this line by line

If you put a little more effort on the actual pattern to be used by the Spray Tool and apply it more carefully than I did I'm pretty sure the results will be quite good. I'll be trying it out soon!

Let's sample some of the results of my experimentation...

Here are some scans:

rain rain, click for detail
Sleeping mother - click for detail

This is hand-drawn, first drafted with a regular pencil, then more-or-less-inked using pens. As you can see I don't really know what to do with the brush-like pen I bought so I tried using it to make some lines stronger but it didn't work too well.

click to see even more detail

I didn't erase the pencil, so you can actually see what I changed.

Then, I scanned this and put it on a layer in Inkscape (actually although the above is a scan, I used a photo because I didn't have the scanner at hand). After that I used mostly the pen tool to draw the lines, and the calligraphy tool for most of the shading, all inside Inkscape.

oh the beauty of straight lines

In fact, the above is one of my favorite panels so far.

Then, the following was drawn directly using Calligraphy tool, as a sketch:

Calligraphy tool set to Dip pen

Finally, I took that same drawing directly and just added some shading and a bit of color here and there, and fixed some things (mostly when lines crossed each other).

"You're so cuuuuute!"

I particularly prefer the second option, but just because the rest of the comic looks like that. I think I could do some story using just those pseudo-drafts, with minor tweaking for shading. This last one is also nice and has the advantage of being the fastest of all, as you work digitally during all the process.

Yesterday I was playing with the scan of a drawing I had previously inked by hand. I added some shadows using Inkscape and have yet to decide whether to use it or to redraw it using vector graphics. Maybe I'll just fix a bit the shapes inside the room and call it a panel :). I love drawings with this rough feeling, I only worry that maybe it's hard to recognize the actual contents of the panel.

What do you think? Can you tell what is going on without too much effort?

This should be the beginning of the next page

I thought I would nicely document what I'm doing right now in terms of transforming a regular scan of an inked comic into a transparent image that can be added to Inkscape (or Gimp) for coloring and shading.

Step one, scan an image: I'm doing it using Image Capture in Mac OS X just because it's dead simple. I stay far far away from software provided by Canon, it's simply not worth it for my needs. Here's a capture of the process:

Image Capture in Mac OS X. The scanner is a cheap Canon LIDE 100.

Step two, open image in GIMP and Color-Threshold it: It's a bit of an unfortunate name for such great software, "Gimp", ahem, but let's put that aside for a minute. In my case I did first an Image --> Transform --> Rotate until I had it looking the right orientation. Then from the Colors menu I selected Threshold.

The Color Threshold tool

From the manual:

The Threshold tool transforms the current layer or the selection into a black and white image, where white pixels represent the pixels of the image whose Value is in the threshold range, and black pixels represent pixels with Value out of the threshold range.
So, the background is mostly slight variations around a shade of white, and ink is slight variations around shades of black. What we want is to end up with an almost pure white background.

Option 1: Use the 'Auto' setting. This seems to work most of the time. In my case it gives 178 - 255 as values. Option 2: Adjust manually, this can also be used to make it more restrictive and then apply filters to the resulting image to enhance the result.

The max threshold will most likely always be 255 (all white). I went for the Auto this time. Here is the resulting image, if you look at it in zoom you'll see some detail was lost, but not too much.

Image after color threshold (click to zoom)

Step Three make background transparent: This is very straightforward when you know where everything is, but a bit daunting at the beginning.

  • Add a transparency layer, by selecting Layer --> Transparency --> Add Alpha Channel.
  • Now choose the Select by Color tool from the palette
The Select By Color tool

Once selected, just click somewhere in the background and it will select all the colors around the click pixel, within a range to accommodate slight differences (e.g. all shades of white). Since this is already a pure white background it's not going to do much, but you would need it for regular images as in those the background will never be completely made of pure white. The range is defined by a Threshold in the Toolbox.

After clicking, the whole background is selected. The selection is indicated by a set of moving lines lines that look like this (you won't see much in the thumbnail, click to see the selection):

White background selected. (click to see the detail)

Now you just press the Delete key or select Edit/Clear and the white background will be removed.

Background cleared, selection still active. (click to zoom)

The above is the image as displayed in Gimp with a transparent background (Gimp uses a checkered gray background to indicate transparency). Now the final image looks like this:

Final, transparent image

Finally all you have to do now is take this image and insert it into a separate layer either in Photoshop/GIMP or Illustrator/Inkscape and add the rest of the elements and shading.

So, why all this trouble? what was the point? Well, color is much easily applied in a layer below the ink layer. If you try to apply color over an unmodified scan, well, it's not going to be easy. In order to do that, you need a transparent ink layer.

But we will leave that for a future post.

Update: You can see the final image in the this comic post.

I've been reorganizing the 'LIFE/interior' comic. I'm trying to bring more consistency to the story, essentially updating dialogues and adding a bit more context here and there. Most noticeable, I changed the font used for balloons. The font is now Blambot's Artists Alley, essentially because I can't --for the life of me-- find a license for Yankshand, the font I was using before. Apparently the company that owns the rights went bankrupt so the font lies there in limbo, although many sites wrongly offer it and label it as free. I'm using all capital letters for text now, and rearranging/updating some texts.

Some of the pages were too big and that poses quite a few logistics problems, so I'm reducing all pages, trying to make them smaller than 2048 pixels height and 768 width, but without removing content or reducing text size. For some of the pages, the only option is to split them into two or three. When I do that, the RSS feed gets updated and some feed readers like Google Reader get a bit confused and show new pages although they have an old date and should not be displayed. Just check them out if you want, but you can ignore them.

At some point the archive will be completely updated and I'll post about it.

Everybody approaches these holidays in a different way. I decided that, in order to avoid offending those with different religious sensitivities, I should choose a topic that everybody liked, no matter your origin and beliefs.

Dinosaurs! Kittens!

Hope you appreciate it. Next year will see the Spanish translation of my main webcomic, too, hence the bilingual message :).

I like to now and then, draw one of those three panel comics. It's really interesting how much you can say with only a few words. It's also fascinating how difficult it is to make it right.

Most of the time, the humor is so narrow that only a few people actually understand what's going on --and that doesn't mean they will all find it funny, which narrows the audience even a bit more.

Most of the 3-panel comics I follow have very well established characters, usually just two or three. What I wanted to write about is something that puzzles me: invariably, in the comics I like, you can identify the main characters easily and get to know their persona without needing to have them introduced first. It's as if they had always been there, always. Take Robby + Bobby as an example, he's managed to create two great characters. You can just read a strip and immediately understand it, even if there is absolutely no context.

My latest attempt, Paul the innovator, is probably only going to be funny for me and a few coworkers, as usual.

Paul is a so-called innovator in a corporate world. Still, I'd like it to be easily identifiable and funny for other people too, but the only way I can think of doing that is by writing a few strips to fully define the character. Which means, I'm not doing it right :).

I have an outline for the next page but somehow got distracted drawing with this graphite pencil. It's a lot of fun. Pencil doesn't really translate very well to the screen, so I did the trick with the auto levels of Mac OS X's preview and it looks better.

Arty Ana portrait

The pen is a Cretacolor Monolith, which is particularly interesting because it's essentially all graphite, no wood, but still feels like a normal pencil.

I've been doing some other sketches but maybe it's a bit too early to upload them, I'm thinking of a new character for the 3-panel strips (or similar) format.

Well it's been a few weeks without updates. I actually have a few pages almost finished, this time I just wanted to try to make sure they are a bit more coherent. Not sure if it will work, of course...

I'm having a bit of a conundrum here, well I would if I knew what the word conundrum actually means. Thing is, I've tried color with some very nice results but most of the time it doesn't feel right. I feel I really need to set on a small palette, maybe grays or shades of blue or something. For the time being I decided I'm going a bit back and using shades applied in Inkscape and pencil shading.

I'll continue practicing with watercolors to see where I can apply them safely.

Take a look at this:

Above pencil, below after applying ink (manually) and converting to gray, click to zoom

Here, I had a lot of fun drawing it with the graphite pencil. Then I applied some ink as usual. After that I would normally just remove all pencil, either erasing or on the computer, but I figured I could try to take advantage of it and keep some shades of gray which give it a very nice look. Considering it's supposed to be part of a kind-of-gloomy scene, it feels right.

Processing an image. Click to zoom.

Above you can see the original pencil&ink work, quite draft. I scanned it and then removed pencil via Levels (2nd image), then added a kind of sepia background and some shading for the final image. It still needs a bit more work, a bit more shading but you get the idea.

Ink and pencil plus some basic coloring. Click to zoom.

Finally, above you can see yet another twist on the style. It's a pencil image, which as I've mentioned I enjoy drawing, to which I added a bit of ink (just a bit), and then scanned. On top of it I layered the basic sepia/brown colors you can see. It's simple and very fast, which is a bonus to lazy people like me.

Anyway, I'm going to update the last comic page I posted in LIFE/interior because I didn't like the color. I'll just remove some color. It might show up in your Feed reader, sorry about that. The next page is coming shortly after that.

Oh, the meaningful conclusion is this: I want to do what I enjoy the most, and that seems to be more about pencil and real paper than computers and watercolor, so far. Both using the computer and watercolor have a big drawback: they need a 'setup', kind of a chair space, sitting in a specific place, etc., while drawing panels with a pencil can be done almost anywhere.

In the eternal search for the Best Way To Do Things, I'm trying to do the unthinkable: write a whole, complete script before actually starting to draw the comic.

I'm not so sure this is actually a good idea, given that the process of creation for a comic seems to be intrinsically linked to drawing. It would seem more appropriate to do sketches and scripting at the same time, which is more or less what I've been doing so far. I do have an idea and some draft scripting, but it's usually not that much and when I'm actually drawing things change a lot.

So this is what's happening... I'm writing a script, a short one. I've explored a couple of ideas so far but none seem to what I'd like to do next.

On the journey to scripting aside from, well, a notepad, what seems to be working very nicely for me is Celtx. It's very fast and simple. It's supposed to be able to work with sketches and things like that, but I'm using it as a task-oriented word processor. Typing is fast, you just press tab to iterate between the typical structures in the script of a comic, and that's about it. It does generate nice looking PDFs too, which makes you look more professional.

 

PS: I try character drawing from time to time, but they all look more or less the same --I'm going to take that as meaning I've found 'my style'.

and another PS: Oh, I started also translating LIFE/interior to Spanish, just because.

Well I finally decided to get rid of wordpress and regain control of the site. Expect a few more changes in the future.

Please let me know anything that is odd or any links that are not working. Hate mail is welcome too.

There are a few known issues:

  1. The feed in Google Reader will reset and display all posts and comics as new entries... sorry about that, you'll have to 'mark all as read'. To be honest, I'm not sure it works at all...
  2. Comment counts on index page always display 0. Working on it!
  3. I need to add links to
    1. LIFE/interior archive
    2. Paul the innovator archive
    3. Other stuff archive

The design is an evolution of a design that my friend Sergi made about two years ago as a draft thing I could start with. I'd say that taking two years to implement a design doesn't qualify me as the greatest web developer in the world... but I get there, don't I?

The site uses a nice thing called Jekyll and the code is in github for you all to peruse. I'll probably post some other entries with small details about that, to help people that might be trying to do the same thing. The comments have been migrated to Disqus, but you shouldn't see much difference.

Some changes to the site: links to the archives (yes up there near that little monkey) and horrid Facebook and Twitter Like buttons. Upgraded the comment system and now every post shows as '0 comments' even if there are comments, but too tired to worry about that now... Fixed now.

But the most interesting bit is that I added hi-res comics in the Paul series and the header logos. This means that if you have a retina display (iPad or iPhone 4), you will see much crisper and detailed comics. All of that thanks to me using Inkscape from the start, which uses vector graphics.

Being a bit geeky as I am I created a small script to do this for all comics at once, using Inkscape and Gimp. If you are interested the code is in this github gist.

So you are asking, what's the difference, well here's an example. I captured screenshots before and after enabling this, on an iPhone 4. The pixelation that the iPhone had done on the first one is obvious.

So what's next... well I have a huge pending thing in the form of translation. To Spanish, mostly. I've promised to translate these comics a few times, and have some actually translated already so I guess at some point I'll have to put them online. Another biggie is making the website react to the device you are using, so to make it easier to navigate from a mobile.

Oh, and you know, maybe write some comics :).

Yes, I could do that.

Final note: I discovered there's a limitation in the actual size an image can have on an iPad's browser. That doesn't bode well for the super long images I used in LIFE/interior. For the time being I sliced the large pages into smaller ones but haven't yet added hi-res versions as they are still too big. More info in the official documentation, found here.

A short post for the benefit of those struggling with this as I was: the little parser that Facebook uses when you share a link is insane, don't trust it.

That parser is what creates thumbnails for links shared in Facebook. It reads the contents of a page and allows you to choose an image. The problem is that more often than not, it can't find the images. It's got a lot of limitations: image size, image position in the document and it also has a tendency to just randomly stop working.

It's particularly bad when you start adding images as CSS backgrounds since those are completely ignored, even if you have fallbacks for crawlers like google etc. So today I once again found myself with this problem, Facebook refusing to use my images anymore. So any link to a comic would not show the actual thumbnail of the comic, which I find extremely annoying.

That meant I finally needed to cave in and use their extensions: I created a thumbnail for each post and added a few tags at the top of the page so that Facebook can find the right image.

To fix it, Create a thumbnail for your images and add the following to your HTML document (head section):

<meta property="og:image" content="http://address.of/your.image_thumb.png">
<meta property="og:title" content="Optional text">

That's it. Want to check if it works? Use the Facebook URL debug page. It will tell you whether the tags were interpreted or not.

Note: for creating a thumbnail you can use Imagemagick, for instance using "convert -crop 300x300+0+0 image.png image_thumb.png".

Well, well, well... I finally used the multilanguage support I added long ago. In essence it detects the language you are using and displays images or text based on that. Today I translated the latest Paul the innovator comic to test this feature.

The trick is doing this all in one site without changing URLs so that the facebooks and googles of the world can see just one site. Hope it didn't break anything, let me know if it did.

Bueno, bueno, bueno... Por fin he empezado a usar el soporte multilenguage que añadí al sitio hace un tiempo. Básicamente detecta el lenguage que utilizas y cambio el texto y las imágenes. Hoy he traducido el último Paul the innovator para probarlo (por cierto, no tengo pensado traducir el título del cómic, creo que queda más cool en inglés, pero se aceptan quejas).

La gracia es hacerlo todo de manera que feisbuk, google y compañía vean sólo una página para no tener que liarla demasiado. Espero no haber roto nada, si no, decidmelo.

Comic: Paul the innovator 38

I'm making a little game using Unity, a very simple word game that hopefully I'll soon publish for Android, iPhone and iPad.

Here's the thing, I'm not that good a designer but I don't have enough going on to justify hiring a proper one. Good news is, if you're in a similar situation there's hope for you.

Hey I don't have time to read this thing!

If you scroll below, that will seem like a lot of work.

But think about it this way:

  1. This is reusable. You'll only have to do it once.
  2. You can modify effects, colors, font types and see the results immediately thanks to clones
  3. Crucially, you can change the text and have a new image in seconds

Not convinced? download this Inkscape SVG file and start playing with it right away. Change the font, the text, export, enjoy!

Illustrating the problem

Unity 3D does not support bitmap fonts (not easily at least), so you will be using normal TrueType fonts.

String text = "Shuffle\nFor Points!";
Rect textRect = GuiHelper.calculateLabelRect(new Vector2(Screen.width / 2, 1 * Screen.height / 3), text);
GUI.Label (textRect, text);

In this example I'm using kenvector_future.ttf, part of this bundle and made by Kenney (and on the public domain). It's a nice font, but on a game, using only one colour it feels quite dull.

Take a look:

Text displayed using Unity's GUI.Label and plain-color font

Ugly, isn't it?

Creating a bitmap font label with Inkscape

What we will do is replace the text with a nice image with colors and effects. We will be doing it the clever way too, using clones so that everything is derived from a single original object that can be modified afterwards.

On Inkscape, create a text box at the top level part of the screen. Set a nice font for it, in my experience bold fonts look better (like Stencil Std and Bauhaus).

Use the Text tool to create a box

Now, open the Fill and Stroke settings dialog and mark both "Fill" and "Stroke paint" as unset (select the option marked as '?').

Unset the Fill and Stroke Paint colors

Now, create a background box with a color similar to what they will have as background in your game. Then create three clones of the original text.

Create three clones of the original text
Create three clones of the original text

Now, for the fun part. We are going to modify these clones with different effects, then stack them one over the other.

  1. Clone 1: Choose a color and set it to both fill and stroke. Set a big width, for instance 6. We will use this image as a background, it doesn't have to be readable.

    Clone one is a thick outline of the text

  2. Clone 2: Choose a related color and set it to both fill and stroke. Same width as Clone 1. Set transparency (also known as Opacity) to 60% and blur to 4.0. You can play with these values later.

    Clone two is a blur effect

  3. Clone 3: This will be the one actually going on top of the others so it should be readable. Just choose an appropriate color.

    Clone three is the actual text

Now, bear with me, clone all the clones!. This will make it easier to change colors later.

Select the clones and clone them. Make sure they show as a 'Clone of Clone'.

Select the three "clones of clones" and align them horizontally and verticall against the box, so that they are all in the same position, stacked over each other.

Stack each clone on top of the other.

This is already more acceptable than the original text and looks more "game-like".

Adding some effects

To make it a little prettier, we will add a couple of simple tricks to create a glow effect.

First, create an ellipse of the same size as the box. Then select the three stacked clones and duplicate them. Join the duplicated result in a group (this whole process can be done by just pressing Control + D then Control + G). Finally, select the group, then while pressing shift select the ellipse and select Object/Clip/Set.

Duplicate clones and clip them with an ellipse.

Clipped result.

Now you can play with this clipped result, applying effects to it, changing its color to white and so on.

Adding a bit of coloring and the Metallized Paint effect.

Exporting

Obviously you'll want to export your labels as images. The best way to do this is to temporarily remove or hide the background box (otherwise it would show on the image). In my case I put that box in a separate layer just to be able to do that quickly. After that, select the text and click on File / Export Bitmap.

  • Choose the right size in pixels for your game
  • You may want to export multiple versions with different sizes, for instance a 2x version for retina displays

Final result

Here's an example. The code would look like

int screenCenterX = Screen.width / 2;
int topThird = Screen.height / 3;
Rect titleRect = new Rect(screenCenterX - (shuffleTexture.width / 2), topThird - (shuffleTexture.height / 2), shuffleTexture.width, shuffleTexture.height);
GUI.DrawTexture (titleRect, shuffleTexture);

Adding a bit of coloring and the Metallized Paint effect.

In this case, shuffleTexture is a public Texture2D property of the script and can be set via Unity.

It seems that the impossible is happening and free SSL certificates are becoming commonplace. About time! If you've hosted sites before you will know how expensive an SSL certificate is, particularly for small sites like this one where there is no revenue.

Thankfully some big companies have joined in an initiative called Let's Encrypt, which does just that: provide you with a free, automatically generated security certificate that is acccepted by all major browsers.

It's worth mentioning that Amazon is doing exactly the same thing if you host sites there, although you'll need to be using either an Elastic Load Balancer or Cloudfront CDN, both of which incur costs (see more at Amazon's Certificate Manager).

Even with all these, the process of setting it up is a bit cumbersome, so I was very happy to find that Dreamhost, the hosting server I use for this site, just enabled one click setup. It's literally one click:

Enabling SSL with just one click

That's all there is to it. Just a note: you'll have to wait a few minutes for it to take effect. If you try it immediately, it shows as using a self-signed certificate which obviously is no good. Be patient.

I did have to fix some references to non-ssl links that I had in the site (for instance, including images with an http:// prefix). For most use cases you can replace references to http:// with just // and it will work both in http and https modes. Or just use https everywhere.