24 Jun 2012

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".


17 Jun 2012

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.


29 Jan 2012

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.


25 Sep 2011

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.


09 Aug 2011

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.


30 May 2011

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.


23 Jan 2011

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 :).


23 Dec 2010

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 :).


15 Nov 2010

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.


31 Oct 2010

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.