|Don’t judge a book by it’s cover. We’ve been told that a million times, but we do it anyways. Unless your scripts are funnier than Jesus, people aren’t going to look at your sprite comic if it looks like crap. I’ve had a bajillion people e-mail me asking to look at their comic. More often than not I do, and what do I see when I get there? 3 color backgrounds, small sprites, and borderless talk bubbles. Yuck. |
That’s why I’m writing this, or when you read it, wrote it, because I want to see the quality of sprite comics go up. I’m sick and tired of comics just not looking good, or being a pain in the butt to read.
In this tutorial you will not only learn how to make your comic look better, but you will learn some special effects, and the basics on what makes a comic work.
First of all, you need to write a script in Word or your word processing program of your choice.
Serious Sprite comic = bad
Serious sprite comics do not work, not unless you are the king of sprite editing, and can display emotions properly. I’m sorry, I can’t feel the death of Sonic’s re-colored mother in his “just standing there” pose. It’s true, I’ve seen a well done serious sprite comic. But he edited it so much, and changed the camera angels, it actually worked. That, and the story was good. If you’re brand new to sprite comics, stay away from something serious.
Keep it short
I don’t care if the punch line is the funniest thing in the world, if it takes 10 frames to get there, and there’s a lot of reading, I just don’t give a crap. I won’t read it. And, chances are, a lot of other people won’t either.
How a script should look
Well, there’s no “rule” on how a script should look. But usually I just write who’s saying what, and a brief description of what’s going on so I don’t forget when I look back at it later.
Let’s take one of my comics for example
Here’s how the script looked like
Shade: Double, you remember that 5 bucks you owe me?
Fists: Dude, someone ate all my cake, and I found this orange lock of hair right by it. Do you know something about this Double?
Speed: Hey Double, do you know why my house burnt down and I found your hat at the scene of the crime?
Double: UH!! UH!!!
*double closes his eyes tight*
If I close my eyes, no one can see me!
Speed: Hey where did he go?
Shade: Dude, what the hell?
*everyone goes away*
Fists: Oh well, we better go look somewhere else.
The spaces in-between each little conversation indicates another panel
I didn’t name what background to use, because I usually pick those on the fly.
- So now you have your script. It’s time to start work on the comic.
This tutorial uses Adobe Photoshop CS (but should work for most versions anyways). Don’t have it? Steal it. Download it from BitTorrent, Kazaa it, get it from a friend. I don’t care! Or you could do the legal thing like me and BUY it, but it’s like…500 bucks so I don’t think you want to do that.
Oh, and I use a Mac. Not that I’ll only talk about the Mac Shortcuts, but I haven’t used Photoshop on a PC in like…3 months. So I forget what shortcuts are what. So I’m just going to explain the drop down menus and blah blah blah.
First pick your sprites you want to use. I don’t expect you to use my sheets, you can look at the bottom of the fireball20xl sprites page for resources to game sprites you can use. But, for this tutorial I’m going to pick 2 from my page.
First, open up Photoshop.
Got it open? Good job.
Now open both of the sprite sheets (drag them to the Photoshop icon and release).
You should have both sheets displayed on the screen now in separate windows.
And, pick a background. I’m going to use…
The Sonic 1 background, everybody loves that.
First I’m going to start by “double-sizing” them. It’s easier to see the characters if they’re double sized, and become the main focus of the comic. If you leave them like this, the background becomes the main focus, and the whole point of the comic is completely lost. So, double size them to help them attract more attention.
First make sure it’s indexed color. Go to
Image -> Mode -> Index color
And click okay
If we didn’t do this when we double sized them, they look like poop. I would tell you why, but you probably don’t care.
Anyways, now go to
Image -> Image Size
Then change the option in both text boxes to percent
It looks like this
Make sure the bottom looks like this:
|(Well, make sure Constrain Proportions is checked, if you don’t have any other options) |
Now you should see both of them at “100” change it to “200” and click okay.
File -> Save
You might want to make a sprites folder on your HD, so you can come back to the sprites whenever you want, and won’t have to re-download and double-size them every time.
Do this for the other sprite sheet and the background. Don’t forget index color.
You’re ready to start on the comic! Yippie Skippy!
Make a new document
(file -> New)
Width: 8 inches
Height: 10 inches
Color Mode: RGB, 8bit
Background Contents: Transparent
And click okay!
You should see an 8x10 document, with a gray and white checkered pattern. You should have the rulers displayed. If you don’t go to
View -> Rulers
Then double click the ruler itself on either side
And make it look like this:
|It should look like this above. Press ctrl+backspace (Apple+Delete) at the same time to fill it with the background. You don’t wanna do this yet, but holding alt+backspace (option+delete) will fill it with the foreground. |
Now, in the layers pallet
|This thing. (don’t mind the extra stuff just yet). In the layers pallet click the name of the layer and rename it to bottom (Double click on the name in CS, or click once and wait for all other versions), then click the icon next to the trash can (new layer) and drag it above the “bottom” layer. |
It should look like that.
Now, click inside the ruler and drag out
You see a small one pixel blue line, or “guide” come out. Put that about two pixels from all sides except the bottom.
|And it should look like that. |
Now would be a good time to save your document incase something dumb happens.
File -> Save As
Title it whatever you want, and put it on the desktop.
Next, select the Marquee tool and make sure “snap to guides” is on
You can see if this is true by going to
View -> snap
And if there’s a checkbox, that means yes.
You can deselect it by selecting it again (turning it off, like a light switch)
And, you can see what it will snap to by highlighting
And picking guides
“snapping” refers to adhering to a set point within 5 pixels or so. So if you want to be right on the edge of something, you don’t have to zoom in to 500 times magnification and be right on the money. You can be zoomed out, and when you’re 5 or 10 pixels away, it will “snap” to it, and you’ll know it’s on the sweet spot.
If only this worked for women. Anyways…
With the marquee tool selected, click and drag from the left hand corner of the intersecting guides and drag down to the “440” mark. You can tell you’re on the 440 mark by looking at the left ruler and seeing a little “phantom shadow” of where you’re at. (drag out horizontally about 400 or so) Make sure you’re on the new layer you created not to long ago, and fill it with any color. (make sure feathering is off) I’m going to fill it with the background color because I’m smart.
And rename layer one: “Panel 1”
You should see no major change expect for the preview image in “Panel 1” should show you a white box. Double click to the right of the name in the empty space, wait a tiny bit, and you’ll get a layer style box.
On the left you should see a list of choices. Down at the bottom there is a choice called “stroke” click the name, not the checkbox, the name of that “style” and it should give you a list of options for “stroke”.
We see the default stroke width (How thick the line is) is set to 3. Which, is way too bold I think, change that to “1”.
Position: Outside. Sure.
Blend Mode: Normal, I won’t get into that yet.
Opacity (if it’s transparent or not) is set to 100%. This means it’s 100% opaque, and any less will let any layer under it show.
Fill type color
Double click the default red and make it black
There should be a very thin black outline around “panel 1”. Congratulations. You made a comic panel. You are awesome. I love you.
*Time saver tip
Go to styles
Window -> Styles
And with “Panel 1” selected, click the new icon. The icon left of the trash.
Name it, I dunno, 1 pixel stroke, and click okay.
Now, when you make a new panel, you just have to click the new “style” and you don’t have to do the stupid stroke thing every single freaking time.
Now, grab a guide from the top and place it under “panel 1” right at the bottom. Snap is still on, so it should snap to the bottom of the panel. This is for when we make the next panel. Now, drag another guide down to “410” on the ruler on the left. This is the space for the panels below that.
Anyways, before we get to work on the next panel, this panel we just made needs something in it. So, go to your background.
Window -> Your background
With your background as the main window go to
Select -> All
Edit -> Copy
Find your comic in progress
Edit -> Paste
Your background to the window.
But, arugh! It’s too freaking big! How do I get it “inside” the panel?
Well, you’re going to “clip” it.
First, rename the layer to “background”
And move the mouse in-between “background” and “panel 1”
Hold alt (option)
And, you should see a little 8 thing
And, the background should be “clipped” inside this layer.
This is a bajillion times better than cutting a background, because you can freely move the background ANYWHERE and it will stay inside the clipped area. You can clip anything else, but they have to be above the main clipped layer, or it will, uhm, not work. This is good for when you have a HUGE sprite and it goes out of the box, just clip it inside the layer, and everything’s fine.
Now might be a good time to save
Move the background around so we see some of the floor (with the move tool, the second thing in the tool bar), not a WHOLE FREAKING lot, just enough to where the floor peeks over the bottom.
Now we’re ready to put the sprites on it.
I don’t have a script written up for this, because it’s a tutorial. But, to follow my own damn rules, I’ll write one.
Lucky: I like pie!
Flute: Me too!
*super close up shot with speedlines*
Flute: You suck.
Not the funniest thing in the world, but this is for the tutorial. And, I get to explain special effects and POOP.
So, okay, go to the lucky sprite and find some sprite that looks like he’s saying “I like pie”.
I like the second one from the left-top, so click the lasso tool
And, before you select anything, make sure the settings at top look like this
|Feather refers to if the edge is soft, or fades out, or is a really hard edge. 0 means it will be really hard, and a number above zero is the amount of feather it will have. We’re working with sprites, hard edged stuff, so make it zero. |
And Make sure Anti-Aliased is un-checked. It’s like, mini-feather for photos and junk. We’re working with sprites, it…doesn’t matter!
And leave the junk on the left as is.
Now select the magic wand
The thing next to the lasso that looks like a
And make sure the settings are as follows:
|Okay *deep breath* |
Tolerance refers to the amount of shades close to what you select it will select. Okay, you’re lost.
Let’s say I have a picture of a white cup with a green logo on it on a black background, and I want to select only the white part of the cup. I would make my tolerance about 100 or something, so it will get all the shades of white around it.
But, for a sprite, there’s only a total of 9 colors (shades included) at usually any given time. So you want it to be zero. Anti-aliased is that “mini-feather” BS, so unless you want the edges of your sprites to look like crap, make sure this is checked off.
And Contiguous refers to weather or not you want it to select EVERYTHING or just the inside or outside of something.
If a sprite sheet is made well, the background color will NOT be a color that appears on a sprite, and you can click contiguous off. If it’s made poorly, like some sheets I know, you’ll have to click it on, and go in-between the legs or hands, or any closed off spaces and de-select the background color out. Which is a pain in the ass and I find myself cursing the maker of the sheet in several languages.
And, use all layers, I just have it checked because, I dunno, why not? It really has no major function for this tutorial, maybe in a “how to color pictures” in photoshop. But not sprite comics.
Anyways, you’re actually going to deselect the background layer out. Lucky you, the white inside the gloves is one shade off, so we can leave Contiguous off (YAY!). Hold down “alt”and click the white. And you should have selected Lucky and ONLY Lucky.
Woo-hoo! It worked!
Edit -> Copy
Go to your comic
Edit -> Paste
And put him on the floor
Wow, he’s still kind of small. Oh well, Sonic Battle sprites for ya, I guess.
You can clip him to the layer you want. Just put your cursor in-between the layer with Lucky, and the background and do the whole clip process. It will actually clip to whatever’s below it. So you can stack ‘em up like legos if you want.
I’m not going to, because he doesn’t break the edges anywhere.
But, I am going to rename the layer he’s on to “Lucky”
Now do the same for Flute
And, lucky you, the background of this one it’s transparent! (HOORAY!)
I just picked one of him standing there.
Do what you did for Lucky
Copy / Paste into the comic
WOW! Holy shit Flute is huge!
Well, fut. I guess we should of made Lucky 400% bigger or something.
Oh well, ignore it for now, but you usually want sprites to be about the same size.
Damn he’s small.
Anyways, we have a problem. Flute is not only fucking huge, he’s facing the wrong way.
Rename the layer with Flute on it to “Flute”
With the “Flute” layer selected go to
Edit -> Transform -> Flip Horizontal
He should flip around. And now, the giant ass Flute should be facing the tiny tiny Lucky.
And, move him around anywhere.
God he’s huge.
THERE! Everybody is inside the DAMN panel.
Now we’re going to make talk bubbles! Cuz I say so!
Go back to your script and copy what Lucky says.
I like pie!
God I’m an idiot. Anyways, copy that, go into photoshop and paste it with the text tool.
The big giant freaking T on the tool bar.
|The first box is how you want the text to be displayed. Other options make it do different stuff, play with it later. But, for right now, leave it normal. |
The next text box is the font, I have my font set at Digital Strip. For most comics, try to use a Sans Serif (Without feet) font. Like…Helvetica, or…Verdana.
The number is how big it is. I’m going to make it 11.
And the next box is how it looks. I think any other option than “strong” looks like crap. So leave it on strong. I would use “none” for when I want to make stuff look like it was displayed on a really old computer. But then, that would go hand in hand with a small font.
The lines next to that are how you want it displayed.
Oh, crap, just to prove a point I’m going to make Lucky say the following:
I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie! I like pie!
The first box is left justified, then center, then right.
Then the next color box next to THAT is color
And, I’ll get into the rest some other time when I want to commit suicide.
ANYWAYS!!! With the text tool selected, drag a box that’s inside the panel but doesn’t run over the main characters.
| Now copy that big long list of “I like pie!” and paste it into the text box. |
There, with center justification selected we see the text is contained in a box. This is good for when we make our text bubbles. Sometimes, if you have too much text, the text will be chopped off and not all of it will be displayed. Just make the text box bigger and more text will be displayed.
On the layers pallet
Select the flute layer
And click the new layer icon (icon next to the trash)
Then rename it “word bubble”
I get asked a million times how I make my word bubbles transparent, so now I’m going to show you. You don’t have to do it this way, but you can if you want.
Click and hold the custom shape icon on the tool bar and select the rounded rectangle tool
Make sure everything else looks as follows:
|- Make it look like that. |
The 3 icons next to each other refer to pen-shapes and points. Just ignore the first 2 and click the 3rd one so you’ll get a shape on screen, and not pen-points.
Make the radius 10 (refers to how round the edges are). I do this instead of an oval, because I hate ovals.
And Anti-Aliased! It’ll look better for bubbles. Trust me. Click it on.
Make your foreground color white (going to window -> Swatches, or by double clicking the foreground color)
And now, with the rounded rectangle tool selected, inside the bubbles layer, click and drag around the edges of the text. And a white, round-edged rectangle, should appear.
(If it snaps to the edge, just turn snapping off. Turn it back on later though)
There, now it’s a million times easier to see the text. But, aw crap, we forgot a talk-bubble-tail, we best add one. (So we can tell who’s talking) Click and hold the lasso tool and select the “Polygonal lasso tool”. You can tell which one it is because the names are right next to it.
This will make a straight edge in-between points.
(make sure it’s anti-aliased and feather is 0)
All you have to do is (while in bubbles layer) click once inside the white, click somewhere close to Lucky’s mouth, and click back at the bubble where it looks like it’s getting smaller closer to Lucky’s mouth. Like this.
|And then double click to make a selection |
Then fill with the foreground
Well, there, a talk bubble. A really crappy talk bubble on a very small Lucky.
Now we’re going to learn how to make a stroke, make it look cool, and then make it transparent. OH JOY.
Okay, we’re going to make a style for it, and then save it like we did the 1 pixel border thing.
First double click the empty space next to the words “bubble” on the left in the layers pallet.
Give it a 1 pixel black stroke
Now click the words “Bevel and emboss”
Make the depth 50 or something light
And, hm, yeah everything else works as default
Then click on the words “drop shadow”
On drop shadow, make the opacity 50
There, that looks much better. But now we can’t see the background. Aw.
|Make that 85 percent. Enough to see the background, but still has to be pretty opaque so it’s easy to read. |
Now, go to styles, and with the "word bubbles" layer selected, click the new icon in the styles window.
Name it whatever.
Now, when you make a talk bubble ever again, you just have to click that. Styles are saved forever, even when you close photoshop. The next time you open it, it’ll still be there. YAY!
God that was a pain in the ass, but it looks good, yeah? Yeah.
Okay, I’m going to leave you alone. Make the second panel on your own, naming all the layers. And I’ll make my own so you can see what you should end up with.
Make sure to snap it to the top, right, and bottom guides, while leaving some space between the first panel.
|Did you get something close to that? If not, I HATE YOU. |
I just chose that pose for Flute because it looks like it’s going to eat him.
Make sure you place them in the same spot as they were in panel one. Or it looks like their moving all over the place.
I mean, heck, I made the bottom move up a little, and it’s painfully obvious.
Do your layers look like this?
|I can’t stress enough how important it is to have the layers named properly. Things could get really confusing really fast and I don’t feel like clicking a layer, then moving it around on screen to see which one’s right. |
To that you would click the move tool, the second thing in the tool bar.
Okay, now make Flute say something.
|Good job, and it shouldn’t of taken as long, with the style you saved anyways. |
And now I’m going to show you how to make this:
|*OMA taught me how to do this, now I will teach you. YAY. |
First make another guide at around “670” vertically, and you get to pick how wide it is. You lucky bastard you.
(the small set of boxes)
and click the gradient tool
And make sure the settings are as follows
|Now click at the top-center of the new window you just made and drag to the bottom (while holding shift to make a straight line) |
Filter -> Distort -> Wave
|Set everything to that |
Make me a sammich’
You should have a neat little design going on. Now go to
Filter -> Distort -> Polar Coordinates
Check rectangular to polar
And there, you have the base for the speed lines. Now all you have to do is invert it.
Image -> Adjustments -> Invert
There, save that and set that aside for a little while. We’ll bring it up later.
Go back to the comic
Make a new layer
Label it “black”
Fill it with black
And clip it to “Panel 3”
Go to the lucky sheet, and make it 300 times as big
(or 400, if you closed it)
Select the one of him freaking out
Paste it into the comic and clip it to the “black”
Move him so a little bit of his feet goes off panel
Get your speedline document
Paste it above Lucky
And clip it to Lucky (while Lucky is clipped to "Black")
Now, you need to make it so the black goes away but the white stays. To do this, you’re going to need to change the layer blend mode and rub mustard all over my naked body. Uh, ignore that last part.
|Where it says normal in the layer pallet, change it to screen. |
Now the white should show through. Move it around so it’s over Lucky and all the attention is going to his face. You can move it with the move tool (second thing on the tool pallet, dumbshit)
Doing pretty good.
Select the type tool and click above his head. Don’t make a box. Just click. And type: AVAST!
Make it Red
Now go to
Edit -> Free Transform
Now there should be a bounding box over the word “avast”. Click the lower left hand corner and drag it down holding “alt” (Mac: option). Make it kinda big and hit Enter.
Click on the Speedlines layer
Make a new layer
Make a word bubble
But, make it inside the text. Like so:
|Ctrl+Alt+Click the Avast Layer (Mac: Apple+Click) |
(This gives you the selection of whatever layer you click)
Then go to
Select -> Modify -> Expand
Select the newest bubble layer
Fill with white
The border of the bubble should now run around the edges of “avast!”
Now just to add that red glow.
Open up the layers Style (double click to the right of the text of the layer) and click the word “Outer Glow”
Make the blend mode normal
Make it red
And spread it to about 11 pixels
|There. Your are now certified in the art of minor special effects.|
Make that as the final panel.
|There. After all that work you now have the dumbest fucking comic ever. Way to go. |
Well, you want to title your comic and put your credit. The first thing you need to do is flatten all the layers without the background-white.
With any other layer besides the “bottom” one selected, click the eye next to the bottom layer so it goes away and you can’t see it anymore. Now go to
Layer -> Merge Visible
Turn on the bottom layer again
And go to
View -> Clear Guides
Click the move tool
And, while holding shift, move down the entire panel set a little.
Select the text tool
Make it left justified
Put a title and date in the upper left hand corner
Make it right justified
In the lower right hand corner type the ©’s
Select the Crop tool
|And make a box around everything |
File -> Save as -> Whatever
*tips for file names and images:
For lots of colors use a high quality jpg (Like, 8 or something)
If it’s only 9 or so colors use a gif
Always keep the extension
There. You’re done.
Go make a comic that isn’t dumb as hell.
*checks pages*God, 26 pages. I didn’t even take a break!