Reclaimer - A Halo 3 Comic

Set up your scene in Halo 3, film it, and capture your screenshots in Theatre mode.  Then download your screenshots from your Bungie.net profile and save them in a convenient location.  Open your favorite image editor.  If you can get your hands on a copy, I recommend Photoshop.  If not, then check out GIMP.  It’s not quite as user-friendly as Photoshop, but it’s free and most of the same options and abilities as Photoshop.  It’s not quite as user-friendly, perhaps, but it can get the job done.  The remainder of this tutorial describes the Reclaimer-making process in Photoshop CS3.  The instructions may have to be adapted if you use a different version of Photoshop or a different graphics editing program.

To start I create a new image.  For Reclaimer I set my dimensions at 750×1000 pixels.  (Printed out, this ends up being just a bit smaller than an 8.5×11 piece of paper.)

From there I set my background fill color, in this case to match the site’s theme colors, and then Alt+Backspace to fill.

The next step is to open up all the screenshots you captured for that day’s comic.

Each individual screenshot then needs to be filtered to give it that pseudo-drawn look.  Go to Filter->Artistic and select the Poster Edges filter.  Set Edge Thickness and Edge Intensity to 2 and Posterization all the way up to 6.  Then click ‘Ok’.  Minimize that screenshot, then Ctrl-F for each subsequent screenshot to apply those same filter settings to each one.

Now comes the tricky part – cropping each screenshot so that it fits into the page.  Your page layout can be done a lot of different ways.  If you go back into the Reclaimer archives, particularly near the beginning of the series, you can my early experiments with layout.  It’s really up to artistic expression.  I’ve gone with a simple 3-row layout, evenly divided, with a 10-pixel gutter on all sides of an image.  You may choose to do something that’s a little more comic book style.  There’s really no right or wrong way to do it, so long as you pick something you like and that enhances the comic overall.

Select the crop tool from Tools window on the left.  Set the dimensions to be 320px tall.  Your width will vary based on how much of your screenshot you want to keep for use.  For now, try setting the width to 400px.  The beauty of settings your crop dimensions BEFORE you crop is that, once you make your selection and perform the cropping action, the resulting image will be resized automatically to those dimensions.  This will save you that image resize step later.

So, now that you have your dimensions set, click the point that will be your upper left corner and drag down to your lower right corner.  Release the mouse and hit ‘Enter’ for your cropped and resized screenshot.

Now, Ctrl-A to select your entire cropped image, Ctrl-C to copy, and switch to your comic.  Paste the cropped selection in.  Before you move it into place, let’s add a border around it to help it stand out a little better.  Right-click on the layer for the cropped image and select Blending Options.  Click on Stroke, set the size to 2 pixels, and make the color Black.  Click Ok.

Position that panel where you want it and repeat this process for the remaining screenshots.  You’ll probably have to experiment a bit to figure out the precise dimensions for each screenshot so that each one fits on the page properly.  Make sure that you try to keep all the gutters the same size so that the entire page looks uniform.  It’ll take some time and practice to figure out what works for the style you’re going for, and don’t worry about it too much if your first few attempts don’t look perfect.  It took me 40 or 50 pages of Reclaimer to figure out my gutters.

The final step is to add dialogue and word balloons.  Create two new layers on top of your image layers, and select the topmost of these two layers.  Select your Text Tool, pick the font and size you want, and if you’re making an elliptical dialogue balloon, make sure the text is centered.  Type in your text, and then select the blank layer beneath.  This is where we’re going to put our word balloon.

The trickiest part to make a word balloon is creating the flag that points to the character speaking.  Select your Pen tool and make sure that you have Paths and Add to Selection Area selected in your options at the top of the screen.  Click in three spots to make a long, narrow triangle that points at your character.  Click again on your first point to close the triangle.  This will create a triangular path with straight sides that will serve as the flag on your word balloon. 

You can also click-drag a point to make rounded flags, but if you do this, you’ll need to do a couple of additional things before you can move on to the next point in the triangle.  When you click-drag a point using the pen tool, two arms will stretch out from the point.  If you mouse-over the end of the arm that’s further away from where you want your flag to be.  Press Alt and click on the point to swing the arm back around so that it’s in line with the other arm.  This will give you a nice, sharp point and you can continue with making your flag.

Once you’ve closed the triangle for your flag, you’ll have a closed path.  We need to convert this to an actual selection area if we want to use it.  To do this select the Paths tab from your Layers window and click the Load path as a selection (dashed circle icon) at the bottom.  Now you’ll see the marching ants for your flag.

Select the Elliptical Marquee Tool and make sure that the Add to Selection option is selected from the top menu.  Drag an ellipse that will be slightly larger than your text and that overlaps your flag.  When you let off the mouse, the ellipse and the flag will connect to make a word balloon.  The final step is to fill it.

Hit ‘D’ on your keyboard to select the default colors of black and white.  Alt-Backspace to fill the whole thing in with black.  Then click on Select -> Modify -> Contract and shrink your selection down by 2 pixels and click Ok.  Ctrl-Backspace to fill in with white and Ctrl-D to deselect.  Voila!  Your word balloon is done.  You can use the Move Tool to move your balloons and text around and the arrow key to nudge them into place.  Just repeat this process for every word balloon you make and you’ll have a comic done in no time.

Bear in mind that described below is only ONE method of using Photoshop to make a comic page.  This is the method I use and it works for me, but it is in no way the ONLY way to do it.  I’m always tweaking my method to try to make it a little bit better.  So consider this a guide to get you started, and if you find a better way to do something, please let me know!

So, get to making those comics, and let me know when you have something done!  I’d love to see your projects!

Here it is at long last – the first official Reclaimer contest!

Here’s the deal – y’all are going to have to work for this one a little bit.  Start with this image:

Create three more comic pages (not panels) that build from the above image.  You can create more than three if you’d like, but you will only be judged on the first three.  Entries will be judged on visual layout and quality, storytelling quality, and creativity.  If you need a How-To, make sure to take a look at this tutorial for creating a Reclaimer comic.

This is your chance to get involved in the Reclaimer storyline.  If you haven’t already, make sure to read back through the Reclaimer archives and get familiar with Viper – then set off running and tell a story about the origins of Viper.

What’s up for grabs?  The winning comic will receive an autographed Forerunner image from PAX 2008 (courtesy of Louis Wu over at halo.bungie.org), a hooded Reclaimer sweatshirt signed by the author, 1600 Xbox Live points (contributed by Amer then00b), a signed print from the Reclaimer archives, and a feature spot on the Reclaimer site for your comic.

The contest will be open from today, Sept. 15 through midnight (EDT) Oct. 6.  Entries can be submitted either through the contact form here on the site or can be sent directly to reclaimercomic@gmail.com (put “Reclaimer Comic Contest” in the subject line and include your gamertag and/or the name you use to comment in the body of the email).

Anything I missed?  Send me a message – and have fun!

Update (16 Sept 2008 0800 EDT): All entries must be built from Halo 3 screenshots.  You can submit your entry just as soon as you have it done, and for the purposes of the contest, I will only judge your first submission – so make it a good one.  You’re more than welcome to submit more, though, if you’re feeling really creative and ambitious.  They just won’t count toward the competition itself.

Update (18 Sept 2008 2111 EDT): Prizes added to the pool of 1600 Xbox Live points and one signed Reclaimer print.