graphics and art

Copyright law and online content

Rob's picture

(This is not a comprehensive discussion of copyright law, but a summary of the facets that are of most interest to webcomicers and other online content providers. All of the proceeding is from research at http://www.copyright.gov, and applies to the United States. You should also read my trademark article, as that goes into much of what people confuse with copyright. I am not a lawyer, and--as usual--accept no liability if this information pees in your Cheerios, drinks all your beer, and eats your babies. You may also want to see my essay on the Orphaned Works bill.)

There is quite a bit of misinformation floating around the webcomic community about copyright, big chunks of which have changed over time. Here's how current (as of this writing) copyright law affects you, the webcomic creator or other online content provider. read more »

The Orphan Works Bill

Note: At least two versions of this bill have come up, and future ones doubtlessly will, as well. All so far have been similar. I'll update this if something new is included in the next one.

There's been a lot of noise among webcomicers and others who post art and other content online about an "Orphaned Works" bill that supposedly "takes away copyright" from unregistered works. This is just noise. Those protesting most strenuously against the bill don't seem to have actually read it in its entirety. read more »

Creating and using your Photoshop (or Gimp, etc.) comic template

Rob's picture

Your template will keep you from having to perform quite so many tedious tasks every time you create a new comic. I use Photoshop, but the basic steps should remain the same for most raster graphics programs (like Gimp).

Organization

Create a directory someplace on your hard drive with the name of your comic. Inside this directory, make a subdirectory called "raw," and another one called, "strips."

Making your webcomic template

If you're using Photoshop you can follow the exact same process we do. Otherwise, most graphics programs will have some similar features, so you should be able to adjust these instructions to suit your needs. Remember to save early, and save often.

Decide how many pixels wide and high your comic will be when you post it--You should have figured that out on the previous page. If the height may vary from day to day, make it about as high as you think the tallest comics are likely to be. Create a new 72 DPI grayscale document (even if you plan to do color) of that size. Now switch the resolution to 600 DPI (Since it is a blank document, nothing will get messed up when you go up in resolution. Of course, you never want to try upping the resolution on any document that already has art in it.)

Why all these size and resolution changes? In particular, why build our template at 72 DPI if we're switching it to 600 before we save? Because initially created the template at the proper size at 72 DPI and then switching it to 600 DPI means that when you reduce the resolution on your comic files to 72 DPI, they will automatically be the exact pixel width you wanted with no more fiddling

Save this file to your "raw" directory with a name like 000template.psd or something like that. This'll keep it near the top of your directory and make it easier to find.

Create layers in your template

First off, if your background layer isnt' already white, make it that way.

Create your balloon layer(Drunk

Create a new transparent layer. Double click to the right of the layer name in your layers menu. Then go down and click on "stroke." You will set the stroke color to black, the width to 6 to 12 pixels (or whatever you want, really), and set it to inside stroke. Name it something like "word balloons."

Creating your frame layer
(There is more than one way to build your frames layer. This is the quickest way for a Photoshop novice, but I'll cover what I think is a better way later. Either way is fine, of course, and if you decide to change methods, you can always go back and edit your template later.)

Duplicate your balloons layer and leave the original in place. Name this new layer something like "frame one." (This part will be most helpful if you plan on using many frames of the same basic shape in various comics. Instead of drawing little boxes every day, you can simply duplicate this layer as needed and resize the boxes already there.)

On your frame layer, draw a rectangle about the size you'll want your frames to be (don't worry about being exact at this point) with the marquis tool and fill it with white. Since you copied your balloons layer for this, Photoshop will automagically give you a black border around the white. Simple, eh? Under the layer menu, render the layer. Using the magic wand, click the middle of the box to select all the white, and hit delete. Now you have a clear layer with a black box. You can duplicate this layer as many times as you wish, move the copies around to add additional frames, and resize the frames as needed for each comic.

Finishing touches on your template

In the template you just saved, go to Edit and scroll down to canvas size. Not image size, but canvas size. Add about half an inch to the top of the document and about a quarter inch to the bottom. This will give you room to put the comic name, etc.

Note: The following are suggested placements. Put this stuff wherever you want.

Each of these should be on a separate text layer. Type in your comic name at the top right, and "by your name" at the top left. Put your copyright notice at the lower right, and the url (if you don't have hosting yet, just type in something like, "www.mycomicsite.com" as a placeholder) to the lower left.

Play around with various fonts to see which one you think best suits your title, etc. You may want to check out some of the free fonts at BlamBot. Once you have all this figured out, crop out the excess space and save again. Voila! You have your template. Look for a good dialogue font, too--one that fits the mood of your comic. (I use Zud Juicw from BlamBot quite a bit.)

Using your graphics template

Save a copy of your template into your "Raw" directory, and name it according to the year, month, and date that the comic is for. Use a yyy-mm-dd format to help keep things organized. Scan in your comic according to the instructions in the previous page and either paste or drag it into the copy of your template that you just made, and if necessary, resize the art to fit. Put your art layer in between your white background layer and your balloon layer.

Do any coloring or adjustments you need to your art layer now, and then...

Go to your frames layer and either resize the existing boxes or draw the ones you need.

Now you are ready for your dialogue. You can do these next two steps in either order, and each has its advantages.

Go to your balloons layer and draw in your word balloons, using whatever tool with which you are most comfortable. I generally use the elliptical marque tool for the balloons themselves and the polygonal lasso tool for the tails. Some people prefer Photoshop's vector tools, or creating their word balloons in a separate vector art program and them inserting them. If you create your word balloons as vector art, you won't be using your balloons layer for them.

Enter your dialogue into text layers and adjust as needed to fit your word balloons. You may have to adjust the balloons to fit everything in.

Overwrite the copy of your template named with the yyyy-mm-dd format with a fully layered copy at the 600 DPI resolution you scanned in. (Remember, if you scan your art at a lower resolution, you can't boost the resolution without making it look horrible.) Saving a layered copy as a high resolution file will not only give you a good print resolution file, but will also give you an easily edited file in case you want to make changes later.

Follow pretty much the same steps you went through on your test run. In case you don't remember them, I'll repeat them here.

Flatten the image, reduce it to 72 DPI, optimize it, and save the result into your strips folder. This is the file you will upload. (There is no point in uploading the 600 DPI version, since it will look no better on a monitor than the 72 DPI version.)

Congratulations. You've just created your first webcomic. Lather, rinse, and repeat as necessary.

Trademark law and online content

admin's picture

(I have researched this, but I am not a lawyer. My references come from the U.S. Patent and Trademark Office (http://www.uspto.gov), but any interpretation of them by me is just that--my interpretation. I encourage you to, after reading this, do your own research.)

First--In most cases, the average webcomicer or other online content provider does not need a trademark. There is nothing wrong with having one, but read on to determine whether you need one and/or whether you need to register an existing one (the short answer to the registration question being no).

What to trademark
For most practical purposes, the bulk of the things a webcomicer is concerned about protecting are actually covered in a roundabout way under copyright law (covered in a separate article). Still, you may have some catch-phrases or other things you would like to tradmark, and it’s good to know a little something about trademarks in general. This article should help dispel some of the myths about what they are and what they do.

Trademarks (Huh! Good Gawd, ya'll)--What are they good for? (Don't worry if you don't get the reference.)
According to the USPTO, a trademark is, "a word, phrase, symbol or design, or a combination of words, phrases, symbols or designs, that identifies and distinguishes the source of the goods of one party from those of others." (http://www.uspto.gov/web/offices/tac/doc/basic/trade_defin.htm)

Notice that phrase, "identifies and distinguishes the source of the goods..." Correlate that phrase with the information at http://www.uspto.gov/web/offices/tac/doc/basic/appcontent.htm#basis, and you see that a trademark is, essentially, a way of ensuring that goods or services are indeed coming from where they look as though they're coming.

Trademarking something doesn't mean that no one can use it at all, though--Just not in such a way that it might confuse a customer about the source of the goods or services.

Here's an example of trademarking--Marvel and DC filed a joint trademark on the word, "superhero," in all it's forms. It was established in court that most people, when they think of superheroes, think of Marvel and DC. Does that mean you can't call your characters superheroes? Not at all!

Despite the huge outcry about the trademarking of the word, most of it was due to a misunderstanding. You can still legally use the term superhero in all its variations as much and as often as you want in your comic. You can have characters call themselves, and be called, superheroes, and have the narrator (if any) refer to them as such.

What you may not do is make the word a part of your title or subtitle, or use it in any other way that might lead a consumer to think that he or she is buying a product of DC, Marvel, or a company owned by either of them, or that they endorse your product.

You cannot, for example, sell a shirt with a picture of your character and the caption, "Chicago's number one super hero!" Nor could you market a cereal as "Superhero Flakes." Both of those would imply at the very least a licensing deal with DC and/or Marvel, and could give the impression that one or both of them endorse your product.

Here's another example. Say you've developed a distinctive logo for your site--which is your product. You've been using it for a couple of years now, and you've put the little TM thingie on it. One day Joe comes along and starts using it on his own site. Well, this could obviously confuse people about whose site they're at, so that's violation of your trademark. On the other hand, if Joe just shows one of his characters wearing a T-shirt with your logo on it, he's probably within the law.

Yet another example, many, many sprite comics are in violation of trademark law for using trademarked names in their titles, etc. For instance, a webcomic called, "Sonic and the Mario Brothers," could be found to violate trademark law, as it could be interpreted to imply a connection between the producers of the game and the comic.

One final example—I’ve spoken to a few people who were worried about using brand names in their comics and other fiction. In most cases you have nothing to worry about. Remember that the issue here is giving the impression that your work is somehow affiliated with, manufactured by, or endorsed by the owner of the trademark, so yes, it’s okay for your character to order a Coke and drink from a can with the Coca Cola label.

That’s good news, too. Who among us has time to come up with an entire world’s worth of company names, product names, and logos? Certainly not me, and probably not you. So yeah—Go ahead and have your characters accidentally level the local Taco Bell during a super-powered battle, drive a Jeep Cherokee, or order Glenlivet neat.

Now, just staying within the bounds of trademark law doesn't mean you are off the hook about everything. One place you could still run into trouble here would be if you started publishing nasty things about a company--even if you're not technically in violation of trademark law, and even if your defense id, "but it's fiction." For instance, if you need an evil corporation to try to take over the world, don’t use the name Microsoft, however close to reality you feel that may be. Don’t have your psycho killer poisoning the Gatoraid supply for the American Northwest. A little common sense here goes a long way. Imagine yourself the head of a major corporation and think about what kinds of portrayal of your company would get your dander up, and just how much time, money, and expense that you, if you were that CEO, would be willing to expend to put an end to it.

In other words, do not meddle with the reputations of big corporations with huge legal teams, for you are small and crunchy, and taste good with ketchup.

Trademarks--Do they have to be registered? (U.Drunk
Despite all the misinformation out there, the answer is no, so you can save your three hundred bucks.

According to the United States Patent and Trademark Office, "You can establish rights in a mark based on legitimate use of the mark." (http://www.uspto.gov/web/offices/tac/doc/basic/register.htm)

The site lists several advantages to registering a trademark with the federal government, but is unclear on what rights one has with an unregistered trademark.

The page seems to imply that one can take advantage of most of the rights of a registered trademark holder even if unregistered, but that being registered establishes your right to the mark beyond question--as in if you have to go to court, the issue of whether you own the trademark is already established, and all that is up for consideration is if it is being violated. If it has not been registered, you would presumably be required to prove that you have established rights to it. (I will get confirmation or denial of this and update this tutorial at that time.)

Basically, though, feel free to use the TM (trademark) wherever appropriate—The Trademark and Patent office is very clear about this. You may not, however, use the R mark unless you have registered your trademark.

Webcomic art and graphics

Rob's picture

Tips and tutorials on webcomic art and graphics.

Preparing your art for webcomic form, part 1

Rob's picture
We'll cover suggested sizes, scanning resolutions, etc., here, with a little bit of advice for people who--however talented they may be--don't have experience with comic layout. Art size and format Before you can do your art, of course, you have to choose a size and format. Do you want to do a three or four-panel-across single-row comic? A two-column, two row? A full comic book page? Maybe even a single-panel comic like The Far Side? There is no right or wrong answer here, and when we get into templates and scanning we'll talk about factors that might influence your final decisions, but in general you'll want to keep your art at or a little under 13 inches wide. Any larger and you run the risk of losing all that detail you so painstakingly included. If you find you cannot fit all your envisioned panels in a space that wide, consider a multi-row layout. It may help in choosing a format (if you haven't already) to take a few of your scripts and rough them out with circles and blobs and notes to see what format you think will best serve your needs and to get a good feel for how much room you will need for dialogue. Standard newspaper comic size is 13 inches wide by 4 inches high (this obviously gets shrunk down later), but you're not limited to that, especially on the web. As I said, much larger than 13 inches in your original art is probably a bad idea, but the exact proportions are less important now than they used to be. More and more comics, both on and off the web, are breaking the old rules. You will want to work with proportions that will be conducive to layouts in standard book formats, though, if you ever intend to publish your work on dead trees. Pay attention to the order in which characters appear in the frame, and how their placement relates to your planned dialogue. You won't always be able to place the characters in order in which they'll speak, and you don't want to force it, but it is a handy thing to do whenever practiceable. Different people have different processes for actually drawing their art. Some do everything digitally, but most people still draw by hand. You'll develop your own workflow, but here's an example one. (YMMV.) We draw BCK at about 10.5 wide by 4 inches high. Once the pencils are done, we go over them carefully with a Sakura Pigma Micron 02 (.30mm) drawing pen. Then we take a plastic eraser--NOT a rubber one--that you can buy at pretty much any office supply store, and erase the pencil lines. After erasing the pencils, we go back over those pen lines to make certain we darken any lines that may have been "grayed out" by the eraser, and to vary the thickness of various lines to add dimension. The main reason for the plastic eraser is that rubber ones tend to smear more. Go ahead and get a couple of comics drawn, but don't do too many yet, as you'll want to do a couple of tests to see how everything works together. If for some reason you have to redo your art, the less you have done, the less frustrating it will be. You can do your frame lines either by hand or later on the computer. We often do them in light pencil as a guide and erase them before scanning. Go ahead and scan the comics you've drawn at 600 DPI. No, you're not going to post at 600 DPI, but it will be much easier to make any adjustments you need at high resolution, and you'll want high-res copies if you ever decide to go to print, since while 72 DPI looks fine on a computer monitor, it looks horrible in print. If you're scanning line art, use grayscale as opposed to black and white or color, even if you plan to add color on the computer later. Some lines. despite your best efforts, will get a little smudged or grayed out, and you still want to capture those. Once you have two or three comics scanned in, open them in Photoshop (or Gimp, or whatever you're using), and make any adjustments you need to. For instance, with line art--especially if you were paying attention and scanned in grayscale--Open your levels control (You can use contrast and brightness, but levels gives you more control), and adjust things until your art is crisp, clean, and smudge-free. If you're doing any computer coloring, now is the time. (If you scanned in line art, you'll convert to CMYK or RGB first.) If you don't have frame lines drawn, create a transparent layer on top and use the pencil tool (or whatever other method you prefer) to make them now. Don't worry about perfection yet--This is just a test run. Once you've got all that done, save a copy, reduce the resolution to 72 DPI, then reduce the image size to whatever size you plan to post at. Does it still look good? If so, optimize it (If you're using Photoshop select "Save for web") to get the file size down as much as possible without making it look horrible. Make a note of the width and height in pixels. You'll need that info later. If you're going to post black and white line art or block color, you'll want to save in GIF or PNG8 format. If you're using a lot of shading and blending of colors, you'll want to save in JPG or PNG24. If you're happy with the results so far, it's time to build a template file. The template file you are about to create will be a huge time-saver later on. Move on to the next page to see how.

More on word balloons in Photoshop/Imageready

Rob's picture

Note that while I’ve only used this exact method in Photoshop 7 through CS2, it should work in many older versions, and I believe it should work in Gimp, and in the Elements and LE distributions of Photoshop commonly included with many scanners, etc. This tutorial assumes you are already familiar with Photoshop.

  1. Create a new layer and name it “balloons.”
  2. Double-click on the new layer in your layers pallete and select stroke from layer effects. Set the stroke color to whatever color you want the outline of your word balloons to be (usually black), and the line width to, say, 12 pixels or something if you’re working at 600 dpi (which you should be, even though the uploaded version will be 72 dpi).
  3. Move the layer so that it is in between your art layer(Drunk and your dialogue layer(Drunk if it isn’t already there. Duplicate the layer if you want to have overlapping balloons.
  4. Select whatever marque shape you want (usually elliptical) and select the area you want your word balloon to be in. Reposition if necessary.
  5. Fill the shape with whatever color you want—usually white. We’ll worry about the tails in a bit. Repeat this step as necessary.
  6. Select one of the lasso tools (I use the Polygonal Lasso tool--Select it by clicking and holding on the Lasso tool until the variation pop up) and draw in your word balloon tail for the first word balloon and fill with white.
  7. Lather, rinse, and repeat as necessary.

For square word balloons with rounded corners, play around with the feathering setting with the square marque tool, or use ImageReady.

(Additional material from Jungmin Escobar) For an interesting effect, you can make your balloons larger than the current comic panel and crop the edges off of the rounded balloon so that it is conformed within the panel. Also you can change the opacity of the solid white background of the balloon and let it fade into the background a little for a cool effect. I like to draw the tails of my balloons with the pen tool and then turn the path into a selection and stroke it.

Photoshop shortcuts

Rob's picture

(From Jungmin Escobar with added material from Rob)
So, here's a list of super useful shortcuts in Photoshop that I've found. They should work in almost all versions. read more »

Art and graphics

Rob's picture

If it has to do with art and graphics (whether real media or digital), or graphics programs (Photoshop, Corel, Illustrator, Gimp, whatever), it goes here.

Syndicate content