Illustrating Skeletor

I recently posted a rough guide to battlegrip.com  in which I outlined a process I’ve been using to create digital illustrations by pulling photos into Photoshop (or the free GIMP program). That rough guide sparked questions that, to properly explain, led me to create a new illustration. While trying to come up with a cool subject I remembered the photo of Skeletor on a throne from Poe’s review . . . and, as you can see, I elected to use that photo as my base.

Step One: Choose Your Photo

Before you can even begin you’ll need a photo to work from. The best photos are those with harsh lighting — lots of shadows and highlights — since those lend themselves well to the angular and sharp style I’ve been using for these digital illustrations. A single bright light source from one side can lead to dramatic shots, but any good photo will do. And you don’t even need anything to be in sharp focus; all you really need are the rough shapes.

Step Two: Point-to-Point Illustration

Create a layer over your photo. GIMP and Photoshop both work with layers and it’s vital that you understand how layers work to follow the process I’ve been using. If you’re new to Photoshop or GIMP I suggest Photoshop Layers Explained by Colin Smith which will give you the basics.

Once you’re on your layer select a hard brush; I prefer to work on images 2000 to 3000 pixels wide with a 7 pixel brush. Set your foreground color to black and then click on one outer edge of your subject. Just a single point. Now hold down the SHIFT key and move your brush to another point on the outer edge of the subject and click again. When you hold down the SHIFT key Photoshop (and GIMP) immediately draws a straight line from the first point you clicked to the second point.

You can adjust the detail by shortening the distance between clicks. Image s02 shows a detail of Skeletor with the entire figure drawn in black. Look closely and you can see that the black lines are all straight lines; I created this with the point-to-point method.

Step Three: Fill With Color

Once you’ve got all of the lines in place you’re ready to start adding color. Image s03 shows the same detail with Skeletor colored in flat colors. To do this create a new layer UNDER your lines. Jump back to the layer of lines and select areas you want to be the same color using the magic wand. Drop back to your new layer and expand the selection two pixels — this will help eliminate any jagged edges in your color — and then fill the shape with the appropriate color. Repeat for every color until your base color layer is complete.

Step Four: Add Shadows and Highlights

Image s04 shows Skeletor with shadowed areas created. To do this select a darker shade of your base color, create a new layer BETWEEN the base color and your lines, and then turn off the base color. Now point-to-point draw the shadowed areas by tracing over the shadowed spots on the photo. Repeat for each color. You can make the image more detailed by using multiple shades for your shadows; I try to limit myself to one or two shadow colors.

Image s05 shows the same trick except with a lighter color to create highlights. I use yet another layer for this; if I make a mistake I want to be able to isolate the problem. The highlight and shadow layers sometimes takes as long as creating the basic lines but it’s worth the effort.

NOTE: Images s06, s07, and s08 shows the same coloring process except focused on the throne. Again, I used different layers just in case I made a mistake. I’m a bit cautious when working in Photoshop and often have a dozen or more layers by the time I’ve finished.

Step Five: Background and Done

Drop a new layer between the original photo and your work and fill that with white. Now create another new layer over the white layer and add whatever color, gradients, or effects you want to use for the background. You may have to do some cleanup on your subject layers to deal with any spots showing through but once that’s finished you have your new illustration.

And that’s it!

And with that you are finished and ready to share your new creation with the world. It’s not difficult for anyone to create these images, and with the free GIMP software anyone with a computer and a photo can create a new digital illustration whenever they want.

I hope you guys found this basic guide fun and if you have any questions at all please ask away. I’ll try to answer as best I can.

Related articles

Enhanced by Zemanta

Previous

Toy Aisle Trolls > Crime Syndicate of Troll-Land

Next

Pic of the Day > Wanted by Kwehttamm

13 Comments

  1. http://www.flickr.com/photos/28354390@N08/6808764

    If anybody wants to give this pic the same treatment as above, I would be thrilled! Especially with some kind of awesome planetary background.

  2. Mecha-Shiva

    Well it would be good practice for doing line weights just like inking.. .http://www.youtube.com/watch?v=dMwhZryRUr4

  3. grif

    Its not drawing, its using what amounts to a cheap tracing technique. sorry , but thats a fail in my book. Learn to actually , yknow draw, it's far more rewarding.

    • Reverend Ender

      Some people cannot draw. I feel that this technique creates legitimate art, as long as the artist is also the photographer. I personally CAN draw fairly well, yet I am still intrigued by this idea, and I think I will try it out.

    • So any Webcomic artist who uses photos of landscapes or cityscapes and draws over them for their comic backgrounds aren't real artists?

    • I think artists such as Neal Adams and Timothy Bradstreet — both have used lightbox/photo techniques in many, many projects — would take issue with your thoughts on photos and tracing.

  4. Mecha-Shiva

    Hah,I should have not waited on getting the Marvel select Mephisto for that chair.

  5. I use this method sometimes when I'm drawing comics. Especially when I was doing comics for the now defunct Articulated Discussion. I would find photos of toys to trace over so I got them right (and to save myself frustration to be honest).

  6. Ugh. What happened to the editing feature?

    Here:
    http://i189.photobucket.com/albums/z58/MonteWilli

    • It looks like it's using Photoshop-like filters to render the image in a different form. I've never tried that approach, but it's something I should maybe experiment with.

  7. I tried to use Gimp for speech balloons, but apparently I've become a Luddite; I found it too frustrating and counter-intuitive. Comic Book Creator must have spoiled me.

    I like Phixr 'cause it allows even an idiot like me to make animated-looking versions of my toy photos, though admittedly none of mine ended up looking even half as cool as your Skeletor.

    Here's one of the better samples:

    <img src="http://i189.photobucket.com/albums/z58/MonteWilliams/Cartoon%20Photos/ACartoonPhotoImmortal.jpg&quot; border="0" alt="Photobucket">

    [IMG <a href="http://]http://i189.photobucket.com/albums/z58/MonteWilliams/Cartoon%20Photos/ACartoonPhotoImmortal.jpg%5B/IMG%5D” target=”_blank”>]http://i189.photobucket.com/albums/z58/MonteWilliams/Cartoon%20Photos/ACartoonPhotoImmortal.jpg[/IMG]

Powered by WordPress & Theme by Anders Norén