Introduction: Quick and Easy Webcomic

By

This is a tutorial on how to slap together a webcomic using very little artistic talent. This technique relies entirely on using digital photos and a graphics editor. This particular comic was put together in about an hour. It actually took longer to write the instructions.

You'll need:
- some digital photos
- a graphics editor (I use GIMP)
- a Blogger account

Step 1: Source Material

Typically you'll have a background image and some characters. In this case, the background is a magnolia tree near my house and the characters are a plastic lobster ( for reasons that are unlikely to become clear at this point ). The lobster image was cleaned up and its background was erased.

Step 2: Compositing a Frame

The characters are added as layers on top of the background. The two characters are really just mirror images of the same shot.

The right-hand lobster is holding a remote. This was done by copying a piece of the claw as its own layer and inserting an image of a remote between it and the lobster.

To get the composite frame for the next step, select all (ctrl-a in GIMP) and copy all visible layers (ctrl-shift-v in GIMP).

Variants (the second image here shows some of these):
- since the characters and background are separate layers, you can move and rotate them separately
- characters can be split up into separate layers to allow you to articulate limbs or vary facial expressions
- you can add extra props, backgrounds and characters as separate layers and turn them on and off to vary the frame content
- to zoom in or out on a scene, select a portion of the image (instead of select all), copy visible and resize after pasting

Step 3: Page Setup

Create a large image (2000x2000 in this case) on which to paste the frames. Paste each one as a separate layer so that you can shift them around later. The main image is a plain white background so that the gaps between the frames become a white border.

In this case, all 4 frames are identical. They don't have to be but it's handy if you can get away from it.

Step 4: Speech Bubbles

Add a layer (filled in white) on top of everything. Set the opacity to about 60%. This will make it easier to see the text.

On top of this white layer, add your dialog text and arrange it over each frame.

Once you've got the text in the right place, add an empty layer between the white layer and the text layers. The speech bubble shapes are drawn onto this layer. Each bubble consists of a rectangle around the text and a triangle pointing to the character. They're filled in white.

Turn off the white layer and set the opacity of the bubble layer to about 60%. This should be enough to make the text readable without completely obscuring the background.

Crop the image to size and save. I'll usually save the image as an xcf (GIMP's native format) and then export to jpg for publishing.

Step 5: Publish

I used Blogger to publish this. Adding an image to Blogger is troublesome. It adds a lot of crap around the image tag and for some reason picks a small image size. It'll have something like src="http://yadayada/s400/blah.jpg". Change the 400 to 800 to get better resolution.

I like to add a title attribute to the image as a secondary punchline on mouse-over. You can also add the dialog as an alt attribute, which should make the text searchable by web search engines.

One thing that Blogger allows is post-dating a blog post. This means you can paste up a bunch of comics ahead of time and let them publish on a schedule.