Introduction: Quick and Easy Webcomic

Picture of Quick and Easy Webcomic

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

Picture of 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

Picture of 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

Picture of 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

Picture of 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

Picture of 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.

Comments

PKM (author)2009-01-09

Hm... I don't think the world needs more terrible webcomics using the same image for all four frames (it's only funny when Jeph does it because it's more ironic than rain at Alanis Morissette's wedding), but the 60% opaque speech bubbles and post-dating blogspot stuff are both techniques I hadn't come across before. Hopefully people can use your ideas in creating work of some creative merit...

degroof (author)PKM2009-01-11

Well, using identical frames would be the bare minimum. It's easy to expand on that using the same technique. For example, turning on and off layers and throwing in some scaling will allow you to vary the frames relatively easily. I did this for this one and this one.

Besides, some of the best comics are stylistically primitive. Two of my favorites are xkcd which uses stick figures and dinosaur comics which uses the same drawings over and over. On the other end of the spectrum is something like For Better or For Worse, which is well-drawn but is depressingly poorly-written. Of course, the best of both worlds would be Calvin and Hobbes but most of us don't have anything near that kind of talent.

And I'm definitely aware that the Tree Lobsters comic is not even in the same league as any of the comics I mentioned. I created it as a joke and it turned out to be popular enough within a small group of readers that I'm keeping it alive for now.

I do agree, though, that this technique would make it easy to make a large number of terrible webcomics. They don't have to be terrible but there's certainly nothing to prevent it. :-)

Chicken2209 (author)2009-01-09

I dont get it... but the comic is a nice start

About This Instructable

1,516views

4favorites

License:

More by degroof:Thunder GlobeRick Astley Clock - Mk IIRick Astley Clock
Add instructable to: