Tutorials:
The Rules for Making Comics that Don't Look SuckyA quick overview of how not to make some of the worst visual mistakes in webcomics.
Using MS Paint Well
There are certain tasks which Paint can make easier and faster, such as flat coloring of clean inks. Here's how to make Paint work for you instead of against you.
The GIMP: Top Five Useful Features for Comic Artists
These are the things I wish someone had told me when I first started using the GIMP.
The Rules for Making Comics that Don't Look Sucky
1. Size
Scale your comic page (and entire web page) to be no more than 638 pixels wide at the most. People dislike scrolling sideways immensely. The only exception to this is if your entire webpage is less than 480 pixels tall.
More monitors still display at 640x480 than most people realize. You may think they are becoming obsolete, but don't chance it. There are some nice, very portable laptops being made today with resolutions of 640x480.
Most comic images scale well to a width of 500 to 600 pixels.
2. Text
Make your text readable. The easiest way to do this is to type it in digitally. Use a simple font. If you must letter in MS Paint, make sure you are working at four or five times your final size, and then scale down. (This is true for any element added in Paint.)
Only hand-letter if you are committed to drawing every letter as if it is part of your picture, because it is. Lettering should be a completely separate skill from handwriting.
3. Cleanness
Use a program with brightness/contrast tools, and eraser tools if necessary, to clean up your art. If you are working in pencil, this is especially important. Make sure your lines are dark enough, not just to show up, but to stand out. They should be black if possible. Increase contrast and decrease brightness. The Curves and Levels tools that many programs have can also be useful.
4. Presentation
Your comic should be one of the first things someone sees when they visit your comic website. You can have a banner, but keep it small. If you have a background image, it shouldn't be too distracting, especially if your comic is colored.
Using MS Paint Well
Microsoft Paint is a simple graphics program that is installed on most PCs. Most people who use it do so because they already have it, and don't know how to obtain or use a more versatile program. I use it because it does a few things well, quickly and easily, and those things are compatible with my style of art. I'd like more people to know how they can use Paint to make their work faster and easier, but still produce quality graphics.
These techniques work best with a newer computer. Because you will be working with large bitmaps, it may slow or even freeze an older computer. However, if you are coloring a multi-panel comic or something similar, you can separate the panels, apply the technique to each individually, scale them and put them back together.
Coloring and Scaling Clean Graphics
Step 1: Get Inks
This process is meant for clean, flat-color images. Ideally, you should start with a scan of a cleanly inked picture, at 300 DPI, or about 2000 to 3000 pixels wide for a large image such as a comic strip. Scanners and their software vary; you may be able to scan in black and white, or even adjust brightness and contrast before you scan. However, that shouldn't be necessary unless you have an older version of Paint.These techniques can also be used to quickly color a black-and-white image created in another program - again, for a full-sized comic, you should have an original image 2000 to 3000 pixels wide. If your original image is a 2-color GIF, you can skip the next step, although you will want to convert to BMP before coloring.
Step 2: Convert to Monochrome
Once you have your clean, black and white image, open it in Paint. Click File: Save As, and change the file type to Monochrome Bitmap. Once you've saved, check to see if the correct areas of the image are black and white. There will often be small black specks, which are easily corrected. If the image appears mostly black, you are using an old version of Paint. The brightness and contrast will have to be adjusted in another program until all white areas are pure white. Adjusting brightness and contrast before converting the file may also help clean up an image which contains too much gray. Most PCs come with a program that has the brightness and contrast tools, such as Microsoft Picture Manager (although you may want to download a free program, such as Paint.NET or the GIMP, as these have more versatility - more on that later).Step 3: Color
Now you have a cleaner, blacker-and-whiter image. Go to Save As again, and this time choose 24-bit bitmap. You now have what is essentially a point-and click coloring book.What's that you say? Not all of your white spaces are completely enclosed by ink? Ah, this is where MS Paint's genius is revealed, in its Color Eraser tool.
Choose the eraser tool. Choose the color you want to work with first (double-click on a color in the palette to modify it), then right-click the square with your chosen color.
What you have in your hand, or on the end of your cursor, is a tool that, wherever you right-click, will replace white (and only white) pixels with pixels of your chosen color. Use this tool to close gaps around areas that will be this color. Then switch to the bucket fill tool. Don't select your color again from the palette. You can use the right mouse button to fill areas with the color you're using.
If there are white pixels in the corners of the area, or small white areas you'd like to fill, you can switch back to the eraser to color them, without having to hit them precisely with the paint bucket.
Step 4: Scale
Yay, isn't it pretty, all colored? But now it has to be scaled down, to fit on a webpage, and to make the lines look cleaner. You can do this with Image: Resize/Skew.This tool only works with percentages. If your image is 2550 pixels wide (a letter page scanned at 300 DPI), resizing it to 20% will result in an image 510 pixels wide; resizing to 25% will make it 638 pixels wide. This is a fairly good range for comic strip-type images online. You can calculate what your resulting dimensions will be, or just experiment. Check under Image: Attributes to see what your dimensions are before and after scaling.
When you're happy with your image, you'll probably want to Save As, again, this time as a JPG. BMPs are precise, but take forever to load on a webpage. GIFs are also nice, but Paint doesn't have enough options for saving them well.
Notes on this technique
Steps two and three are the ones that really save time. I wanted to include other data for people who, for one reason or another, want to do as much as possible in Paint. More is possible than most people realize.It is possible to crop your image using Paint, even though there is no Crop tool. First click Edit: Select All. This should automatically turn your cursor into a move tool. Move the image until the top and left edges are cropped as desired. Click outside the selection to anchor it in place, then move your cursor to the spot on the image where you would like the bottom right corner to be. Now look at the second section on the bottom of your window. It should tell you where your cursor is (for example: 300,650). Open Image: Attributes and put these two numbers in as width and height. All cropped!
If you are going to be using the GIMP, or another graphics program, things like cropping can be easier with tools designed specifically for those tasks.
I use the options on my scanner to scan a clean black and white image, or "black and white document." Then I convert it to monochrome as above. If you have the GIMP, you can use Tools: Color Tools: Threshold to separate your black and white with more control. If you do this, save as a BMP. I recommend bitmap, because some older versions of Paint cannot open GIFs, and even the newest doesn't work well with them.
If you are going to be using the GIMP, or another graphics program, things like cropping can be easier with tools designed specifically for those tasks.
I use the options on my scanner to scan a clean black and white image, or "black and white document." Then I convert it to monochrome as above. If you have the GIMP, you can use Tools: Color Tools: Threshold to separate your black and white with more control. If you do this, save as a BMP. I recommend bitmap, because some older versions of Paint cannot open GIFs, and even the newest doesn't work well with them.
I scale my colored images in the GIMP (Image: Scale Image) for two reasons: because you can put in your image's final dimensions in pixels, and because it gives you the option of cubic interpolation. These are also true of Paint.NET. Cubic looks only slightly nicer than linear, which I believe is what MS Paint uses by default.
The GIMP: Top Five Useful Features for Comic Artists
The GIMP (General Image Manipulation Program) is a versatile graphics program that is free to download. It is often compared to Adobe Photoshop, since many of the tools and methods involved are similar. Both of these programs, however, are difficult to learn without some kind of formal instruction.
I taught myself the GIMP with the help of the book Beginning GIMP: From Novice To Professional, by Akkana Peck. I would recommend the book for anyone who wants to learn more in-depth about all the tools available in the GIMP, but in this knol I hope to provide a good overview of the tools and methods used most often by comic artists.
1. Contrast Tools
This section covers several tools under Tools: Color Tools. They are mainly used by comic artists for adjusting scanned line work. For ink work scanned at 300 DPI and meant to be reduced, the Threshold tool is the simplest way of cleaning up your lines. It divides your image into black and white pixels. You can adjust which grays or other midtones go to black and which go to white. For a more subtle, soft image you can use either Levels or Curves to leave some shades of gray between the black and white areas. These tools can also be used for cleaning and adjusting a pencil drawing.
With Levels, look at the top row of sliders, called Input Levels. Moving the left triangle towards the center makes the dark colors darker. Moving the right triangle towards the center makes the light colors lighter. Moving the middle triangle changes the distribution of grays. Don't worry about the bottom row of sliders. They aren't useful right now.
Curves does basically the same thing, but it has a graph with the Y axis representing the existing array of lights and darks, and the X axis representing the desired array. Or something. Whatever that means. Just play with it. Pull the corners of the graph in line with the top and bottom edges to clean the image the way we did with Levels. Change the shape of the graph in the middle to adjust the grays.
Tools: Color Tools also contains the normal Brightness/Contrast controls, which you can use if you're comfortable with them, but they aren't as effective for cleaning up drawings.
2. Layers and Layer Modes
Once you have your clean linework, you're ready to start coloring. At this point I usually go over to MS Paint and add color there, but if you are working from a pencil sketch, however clean, you'll probably want to keep some of your midtones. This is where layers and layer modes come in.
If you don't see a little window called Layers, you can find it under Dialogs, or press Ctrl+L.
Your original layer will automatically be called Background. I like to rename it Lines. Click on the name, type in the new name and make sure to press enter or the new name won't stick. The next thing you'll want to do to your Lines layer is right-click it and select Add Alpha Channel. That means it won't be stuck on the bottom of the pile of layers.
The button in the bottom left corner creates a new layer. I usually make this layer white and name it Background or Sky, depending on the picture. It will cover up Lines, so click the third button from the left, the arrow pointing down, which is Lower layer. Your new background is now behind your drawing.
Next, you'll want to select the layer called Lines again. Where it says Mode: Normal, click the little down arrow and change the mode to Multiply.
Switch back to the Background layer. If you draw on this layer, you'll see that it looks as if you're coloring over your lines with marker, but you're actually coloring under them.
One advantage of this is if you do things like smudge the color layer, it won't smudge your inks. Some artists have separate layers (created as transparent) for every color in the picture, so they can adjust and change each color separately. At the very least, there is usually a separate transparent layer for the colors on the characters, above the background layer. If you do the characters before the background, remember to color the whites of their eyes!
Another thing you can do is put a transparent layer over a pencil sketch and ink it digitally, but this works much better with a tablet.
Remember, once you start having layers, you need to save your file with the extension .xcf to keep them available for editing.
3. Text
The Text tool is extremely invaluable in comics, for obvious reasons. Because I hand-letter, I use it mostly for graphics on my website, but using it in comics seems pretty straightforward. Click somewhere in the general area of the top left of your proposed speech bubble. Write your text in the little window that pops up. In the tool options area, pick your font and adjust the size. When that's done, you can switch to the Move tool and put your text more precisely into place.
Each time you use the text tool, the area automatically becomes a new layer, named for the text inside. Once you switch to another tool or start another layer of text, the first unit of text becomes a normal layer for most practical purposes. However, if you want to change the text in that layer, if nothing else has been done to it, you can. While the text tool is the active tool, double-click that layer to edit its text properties.
4. Selection Tools
I don't create my bubbles digitally, but if I did I would do it something like this: Create a new layer underneath your first block of text. Use the elliptical select tool to enclose your text. Fill your selection with white (or a similar color). Select: None, then paint a tail with the same color. Or you can use the Paths tool to shape the tail, Select: From Path, and fill this with white also.
Select the whole white shape with the magic wand thing. Now choose Select: Border. If you are working at your final size, the border width should be around two. If you still plan to scale down, make it thicker. Fill this new selection with black (or similar).
There are infinite options for creating the white shape of the bubble. You could even draw it in by hand. You have to admit, though, the ellipse is classic.
5. Layer Opacity
This is a trick that many comic artists use, but I wouldn't have thought of it on my own. Create a layer on top of your colors and lines, and reduce it to between 25% and 50% opacity. Now draw in the shadows with pure black, and they will all look exactly that much darker than the original colors - just like cel shading in animation.
In this piece I used two shading layers, each at about 10-15% opacity. I started with solid black. I erased only one layer for the highlights on Gemini's skin and clothes, but erased both layers for the candle flame and book. This way I could be sure of a consistent medium level of shading.
More general information on the tools available in the GIMP can be found here.
Anonymous
Invite as author
More relevant sites on this topic...
William F. Hogg MD
Invite as author
crop?
My MS PAINT program has a 'crop' tool. Click 'Image' and there it is. Works right after I paste something (still selected) into PAINT. Crude but effective for me.
Pedro Nunes
Invite as author
Superb article
Thanks for sharing and creating such a wonderful piece.