Introduction: Rapid Webcomic Prototyping System (Microsoft Edition)

Using aspects of Microsoft Word and Microsoft PowerPoint, it is now possible for budding artists (including angsty HS teenagers) to make their own professional-looking webcomic in less than 5 minutes (if you're good) per strip. It's also good to get the creative juices flowing when sharing your quirkiness with your friends, as you can fill your comics with inside jokes and caricatures of your friends.

Since someone pointed this out:
Rapid = faster than drawing sprites on paper and scanning (or using an expensive tablet)
Webcomic = I recommend comics you make be published on the internet
Prototyping = You can change the layout of each scene until you find the best layout
System = I do this systematically to arrive at agreeable results
Microsoft Edition = The tools required are the basic components of Microsoft Office programs

You can see some of my existing comics at http://www.xanga.com/cryptopath

And if you can't see the details of my comics, just click the links that I've pasted, which look like:
https://static.instructables.com/data/uuid/FD/BCF922/458D1029AC23001143E7E506/FDBCF922458D1029AC23001143E7E506.jpg

Step 1: Make the Sprite Database

Start up Microsoft Word and go to the Autoshapes menu, which should be in the Drawing toolbar. If you don't see it, right click on where the toolbars are, and select "Drawing". A drawing canva should appear, which is an integral part of the RWPS.

https://static.instructables.com/data/uuid/A6/AB3F36/458D1029AC23001143E7E506/A6AB3F36458D1029AC23001143E7E506.jpg

Step 2: Make a Sprite

Using the Autoshapes in Word, there is an almost unlimited supply of different shapes you can use in your comics. The key is to strike a balance between complexity (which would make your comic look better), and simplicity (which would make production times shorter).

In my webcomic, Freaks and G33k$, the characters consist of circular heads and bodies that look like upside down Dixie cups.

https://static.instructables.com/data/uuid/AE/114266/458D1029AC23001143E7E506/AE114266458D1029AC23001143E7E506.jpg

Note that you can resize the drawing canvas as necessary to fit in more elements to your sprite.
Tip: Holding down SHIFT while making circles using the oval tool allows you to make perfect circles.
Tip: Holding down CTRL while making shapes allows you to make them symmetrical in the direction you are dragging.

Step 3: Add Sprite Details

The most difficult part of modeling sprites after real life people is adding features such as hair. I have decided not to add mouths, because I like that solemn, sarcastic look my character has without a mouth. More features means the ability to incorporate defining features for your characters.

The best way to do hair, including my rediculous longish (emo?) styling, is to use the Curve tool under the Autoshapes, Lines menu. Remember to make enough points by clicking, and then double-clicking on your FIRST point in order to make the curve into a shape.

If you make a mistake halfway through your points, you can erase one or more points by pressing BACKSPACE.

https://static.instructables.com/data/uuid/B3/1B3212/458D1029AC23001143E7E506/B31B3212458D1029AC23001143E7E506.jpg

Step 4: Populate Your Sprite Database

By using various Autoshape elements within the Drawing Canvas, you can make your sprites. Make sure you implement the "fill" function to give your characters some color. I find skin tones most difficult to replicate, and require much time under the Custom Fill menu to perfect.

You can quickly duplicate a sprite by clicking on the border of its Drawing Canvas and then copy-paste-ing. This allows you to make the characters in various poses.

https://static.instructables.com/data/uuid/B7/4AD1E4/458D1029AC23001143E7E506/B74AD1E4458D1029AC23001143E7E506.jpg

Step 5: Add Sprites to PowerPoint

Pull up a default blank PowerPoint slide, and then add Text Boxes (without borders, I'd prefer) to give your comic a title and a number (if you're making a series).

Paste in your sprites after highlighting the Drawing Canvas (by clicking the border). Note that you cannot adjust the individual placement of the sprite elements in PowerPoint, so you should put the character into his/her final pose before importing.

https://static.instructables.com/data/uuid/BC/53341A/458D1029AC23001143E7E506/BC53341A458D1029AC23001143E7E506.jpg

Step 6: Layout Your Scene

Add more sprites by ctrl-paste-ing more people into your scene. Then make them talk by adding a speech bubble from the Autoshapes menu. Under Properties, you can also align your text to be in the middle center of the box.

Tip: You can add effects by using unbordered text boxes with stuff in asterixes like *blink* and *scratch head* and *BZZZZT!*

https://static.instructables.com/data/uuid/ED/67FB9E/458D1029AC23001143E7E506/ED67FB9E458D1029AC23001143E7E506.jpg

Step 7: Finish Off Your Scene

Add the remaining characters and place them in such a way that the dialogue makes sense. Make sure you drag the speech bubble points so it looks like it's coming from the character's mouth or chest.

Tip: If your character is vertically symmetrical, then you can make him/her turn to face the other way by holding down CTRL while you drag either the 3 o'clock handle or the 9 o'clock handle. Just drag from one side to the other, it should flip your sprite. Or you could use the flip vertical function.

https://static.instructables.com/data/uuid/F2/34BDA6/458D1029AC23001143E7E506/F234BDA6458D1029AC23001143E7E506.jpg

Step 8: Generate the JPEG to Publish

When you are done, save the PowerPoint slide somewhere and you are now ready to generate the image file of your scene. Just go to File, Save As, and choose Save As Type: JPEG File Interchange Format. Just save the current slide if you only have one scene (which is what I would recommend) inside your PowerPoint file.

https://static.instructables.com/data/uuid/F7/4FE734/458D1029AC23001143E7E506/F74FE734458D1029AC23001143E7E506.jpg

Step 9: Publish Scene for Webcomic

Find somewhere you publish your newly finished webcomic, hot off the renderer! You can use an image hoster like http://www.photobucket.com or http://imageshack.us (NOT .com!) and post them on your website. Start a cult following with your comics! Express your inner geekiness! Who cares! Just share it!

https://static.instructables.com/data/uuid/FD/BCF922/458D1029AC23001143E7E506/FDBCF922458D1029AC23001143E7E506.jpg

I personally use the simplistic Xanga servers to upload and host my pictures. You can see the new Extended Comic: The Legends of Cryptopath here:

http://www.xanga.com/cryptopath

Step 10: Make MORE!!!

This last step is decidedly the most difficult, but it's very rewarding when you have people come up to you and telling you that they enjoy reading the randomness you produce.

The usual comic strip is Freaks and G33k$, featuring the random true stories from my life. The usual theme is my own geekiness and hobbies, as well as the funny things my friends do.

https://static.instructables.com/data/uuid/2B/103542/458E1029AC23001143E7E506/2B103542458E1029AC23001143E7E506.jpg
https://static.instructables.com/data/uuid/02/462162/458E1029AC23001143E7E506/02462162458E1029AC23001143E7E506.jpg
https://static.instructables.com/data/uuid/2F/53FC7E/458E1029AC23001143E7E506/2F53FC7E458E1029AC23001143E7E506.jpg

As of now, I have completed one "Extended Comic" (which is an independent storyline) called H4xx0rZ.

Now I'm working on another Extended Comic called The Legends of Cryptopath, also starring my friends.

If you found this useful, or have any questions, please email me at robocraft@gmail.com (which is a spam reducing dead-email box set to forward to my primary email). Good luck!

Comments

author
dungeon runner (author)2010-08-13

A normal caucasian skin tone can be achieved by the following RGB value: Red: 225, Green: 221, Blue: 198. You can mess with the values to make it lighter or darker. -Y

author

Double apology gambit for double posting and the above non-sequitor, but you mentioned coloring characters and that troubled me early on, so I thought I'd spread some knowledge.

-Y

author
hungyhipo 2 (author)2009-09-14

thanks dude this realy came in handy cause i need to make comics for my school news paper. PLEASE READ AND REPLY TO WHAT YOU THINK OF The Comic!!!!!!!!!!!!!!!!!!!

Picture 025.jpg
author
Mr. Smart Kid (author)2007-06-24

i have my task bar the same way,but with 10 quick start icons i love fire fox too :-)

author

make your task bar double height then put your quick launch icons on the bottom and right click and change the icon size to large

looks cool and easy way to get 2 programs
i dont even have anymore icons my desktop

<a href="http://img409.imageshack.us/my.php?image=scr34353cke9.jpg" target="_blank"><img src="http://img409.imageshack.us/img409/2286/scr34353cke9.th.jpg" border="0" alt="Free Image Hosting at www.ImageShack.us" /></a>

author
mucker (author)2006-06-10

Say what you will, there is very little actual instruction there. Even the helpful comments are effectively empty. (Want to illustrate? Try a product called Illustrator!) The point being: if you know enough about illustration and what you want to illustrate to be able to use any such software tool effectively, then you already know more than you would learn from this instructable. There is no possible beneficial audience for it. Even worse--documentation already exists for these tools and is vastly better. Now, if you had a guide that explains what is funny (good luck with that), or principles of drawing (proportion, perspective, composition, etc.), or how to adapt other visual media to the web, or at least suggested ways to refresh the creative process that yields comedy--then, maybe, you'd be onto something. Keep at it, though. Often the real lesson of a project takes several tries to uncover.

author
radiorental (author)mucker2006-06-10

constructive comments are infinitely more benificial to everyone.

author
radiorental (author)radiorental2006-06-10

to put it another way, critising projects like this only serves to turn those people who post projects away from Instructbles, leaving the site to those who have nothing better to do than knock everything down.

author
mucker (author)2006-06-05

This "Rapid Webcomic Prototyping System (Microsoft Edition)" is neither rapid nor comic. It does not contain instructions for publishing its results, so "web" and "edition" seem incorrect as well. I suppose it might be used for prototyping, though as far as I can tell the author uses its output as a final product, so really that's a miss also. The "system" does, however, feature Microsoft tools, albeit at their most rudimentary and inconvenient. In sum, its most useful feature is as an object for any excess scorn you may want to unload.

author
cryptopath (author)mucker2006-06-05

Sorry about that, I had to go to lunch before I could publish the rest of my steps (which included a suggestion of how one can publish one's work). My most humble apologies for my inability to figure out how to save work on instructables.com without publishing. I guess I should also apologize for my body's requirement for physical nourishment. I wanted to make this because a lot of my friends wanted to know how I make my "webcomic". Tell me if I am mistaken, but this is probably the proper place to place such a guide? I direct all my geeky friends to this site, and they all love it, so it seems this is the perfect place. And regarding the name, I have no idea what else to call it. It's more rapid than physically drawing characters, although the final product is rudimentary, it gets the job done. Do you have any suggestions for a better name?

author
radiorental (author)cryptopath2006-06-05

you have nothing to apologise for, I suggest you ignore negative comments from people who dont create their own projects.

A few suggestions on this though. A good start, I would say you have a firm grasp of the basics. I recommend you start thinking about where you want to take this and look at buying the correct tools for the job.

Illustration (not my area) but I think Adobe Illustrator is what a lot of people use. Photoshop is always worth knowing no matter what you do.

Prototyping, I recommend visio as a nice medium level drawing tool. You will be able to stecil-ise often used element, work on multiple sheets and re-work in a semi postscript fashion. If you're on a mac, and I suggest you move towards this platform for creativity, I highly recommend Omnigraffle. This was created in omni
https://www.instructables.com/ex/i/D707CA08D8111028931A001143E7E506/?ALLSTEPS

Excellent start, maybe steer clear of the stereotyping there a little (o; but you will outgrow those MS products really fast. For ideas, have a look at Get You War On
http://www.mnftiu.cc/mnftiu.cc/war.html

Dont let the tools limit your creativity, start on pencil/paper. I recommend this setup
https://www.instructables.com/ex/i/A4D8D886B57210289B50001143E7E506/?ALLSTEPS
-p.eace

author

This is absolutely the right place for a webcomic guide. No need to apologize for prematurely publishing the Instructable. In fact, let me apologize to you for a slightly confusing interface -- we're actively working to make it better.

About This Instructable

4,303views

9favorites

License:

Bio: Electrical engineer. Techie. Geek.
More by cryptopath:Steampunk Dr. Horrible (Victorian Mad Scientist) CostumeHalloween Costume: Wikus van de Merwe - District 9Rapid Webcomic Prototyping System (Microsoft Edition)
Add instructable to: