An Experimental Life

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

Note: Notice the yyyy-mm-dd format I use in the "comic for" field below. That's how we're going to tell Drupal to sort the comics (in a later step). Yes, there are other ways to do that, but this way is nice and neat. Also, depending on your theme and the width of your comics, uploading your comics may temporarily "break" your theme. Don't worry about it. If this happens, just take all the blocks out of one of your sidebars for now. Once you have everything else in place you can try out other themes and/or just commit to having either one or no sidebars.

Go to create content >> comic page, fill in whatever you want to name that day's comic.

Hit the "browse" button and navigate to the image you want to upload.

Then hit upload, and you should see a thumbnail of your image, like this:

Type anything you want in the body, or nothing at all. I'm a big fan of transcriptions, personally.

Now scroll down to Scheduling options and click on that field to expand it. If you want the comic to publish immediately, you can skip this step, but this is where you can set a future publication date For example, say you're going on vacation but want regular updates to continue while you're away. This little widget will save the day for you. If you want, you can set a comic to show as though it was published on a past date--This can be handy if you're migrating from another webcomic solution with a backlog of comics. Note that the published on field requires a time as well as a date.

Now, assuming you've been paying attention and have a few more comics to upload, instead of hitting save, hit "Save and create another."

You'll be sent directly back to the create page. If you don't have any more comics to upload, grab some other images for now. You can delete them later, but if you don't have a few comic pages created before you start the next step, you'll have no way to see whether things work. No need to go overboard--I recommend about five to finish getting things set up. Lather, rinse, repeat as needed.

When you look at one of the comic pages you've created, it should look something like this:

Congratulations. You've just uploaded your first few comics, Don't get too comfortable, though. We've got just a couple more steps to go through to make this a webcomic site.

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

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.

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( and your dialogue layer( 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.

(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 »

There are quite a few of these, and of course I'm not going to list all of them--Just the ones that, in my experience, do the best job. read more »

Go to Administration >> Site building >> Custom pagers. None will be defined yet, so click the link that says, "Add a new custom pager."

Name your custom pager with whatever your comic name is, select whatever position you want for it--either above, below, or both (I like displaying it in both places)--and select "Comic Page," for the content type.

Scroll down and select the view you just created where it says, Use a view."

Scroll down some more and click "Reverse the list of nodes." This is so your most recent comic will show as the first thing people see on your comic page.

Hit "Save," and you'll be taken back to the Custom pagers list. Your custom pager is set up and will show in the list now, so you can move on to the next step.

Note: The version of the Custom Pagers module that I provided in the "What you'll need" section is already modified for traditional webcomic navigation. If you're using another version, you'll need to modify it.

There are, as of this writing, two oddities with the Custom Pagers module. One is that the .dev version works, but not the official release. The other oddity is that by default there are no first and last links. No idea why on either of these. I've attached the .dev version with the additional code, but just so you know what I've done so that you can do it too, once the official release becomes usable, see below.

Inside your sites/all/modules/custom_pagers directory, open the file named custom_pagers.module in a text editor and scroll down to find this code.

Replace this chunk of code with the following--Note that all I've done here is add the top line, for "first," and the bottom line for "last."

Good so far? Now from the same directory, open custom_pager.tpl.php and look for the following code:

Replace it with this code:

Again, note that all I've done is add code for the first and last links.

Lastly, in custom_pagers.css, style your pager. Here's the way mine is set up, but YMMV, and you may have to adjust it later:

You're almost done. Now it's time to make a few tweaks.

Things are still going to be a little wonky, so here are the finishing touches.

Go back to Views, find the view you just made in the list, and click edit. In the editing interface, click the display you created for that view earlier.

Under Basic settings where it says, "Row style:Fields," click on Fields, and in the form that appears below, change it from "fields" to "node," and hit update. Once you click the update button, you'll see some configuration options. Set to Full Node (as opposed to Teaser), and "Show comments." Again, hit the "Update default display" button.

Why didn't we set our display to nodes to begin with, you may ask? For some reason, custom views will only show up as an option in Custom pagers on a view with the row style set to fields, but once the pager is assigned, it will stay put even after changing the view row style to node. It took me quite a bit of time mucking about with things before I stumbled across this workaround, and I have no explanation why it works that way.

Now that you've updated your view, hit save. You're nearing the end now. Go to your menu administration page to your primary menu and activate the menu item you created earlier. The only other thing you really need to worry about is that ugly "submitted by" stuff at the top of each comic. If you want to get rid of that, change those settings for your theme in your admin >> themes >> configure page.

At this point, if you've done everything right, you'll see something like the image below when you click on the link for your comic.

(Of course, the "first" link won't show up on your first page, since you're already there, nor will the "last" link show on the most recent comic, for the same reason.)

Depending on your theme, you may need to play with the CSS some to get it to display exactly the way you want. If you're not seeing this, retrace your steps and see what you missed--Finding your mistakes and correcting them is a good way to learn what you're doing. If things are still wonky, post a comment here and I'll see how I can help.

You're all set up with the basics for now. In other tutorials we'll explore making admin easier, beefing up security, and tricking out your site in general. Congratulations, and happy webcomicing.

This shouldn't take you more than a minute or two.

Go to admin >> content management >> taxonomy >> Add vocabulary and create a vocabulary called Comics. Assign it to the content type you just created (Comic page). Make it required. Hit save.

After you save, you'll be sent back to a page where you'll see your vocabulary listed. Click "add term" to the right of your new vocabulary, and add your comic name. If you plan to run more than one comic from your site, create terms for those, too. Save, and you're done with this step.

(No illustration for setting up your taxonomy because if you've been following instructions you already know how to do this.)

Next, we're going to upload some comics.