HOME | DD
Published: 2011-05-24 19:58:14 +0000 UTC; Views: 31160; Favourites: 292; Downloads: 0
Redirect to original
Description
body div#devskin0 hr { }
EDIT - Dec 08, 2013 - This is OLD, like really, really OOOOOOLLLLD and outdated, and there are better methods out there. I don't even do vectors this way anymore. That said, it's still useful as a guide on how to use the pen tool to make shapes specifically for pony vectors in a manner where they're layered efficiently easily modifiable. Just felt the need to point this out as I am still getting messages from people who don't understand that this is old and that I know there are alternative methods. I thank you all for your input.
Before I say anything, if you're familiar with proper vectoring at all then once you've heard what I do you'll realize I'm not making "true" vectors with the process I use. This might seem a bit odd because what I do means that if I wanted to make a larger version of the image I would basically have to scale the paths I've made and re-"paint" the whole image, but I'm just doing these for fun so I make them large to begin with; the end result is plenty big for anything anyone who might use them for. For simplicity's sake, I will still refer to the image I am creating as a vector from hereon out.
(If you don't want to read my monilith o' text and just want to watch some movies, scroll down to the bottom)
I do traces as well as original art, but the "vectoring" process I utilize is exactly the same, so I'll just start off pretending I'm about to do a trace of a screencap from the show. Let's make Pinkie Pie being adorable. Here is a decent image of her taken from the show. Notice how it is tiny. I want this image to be HUGE. Let's make a vector of it!
I begin by tracing the body outlines with the pen tool. However, instead of using the shapes like you normally would for vector images, I just use the regular pen tool to create paths that I then use to make selections and fill in later. I completely outline the body and other details like the nostrils and mouth.
I then do the same for the mane and tail.
Now, you might be going "LOL what an idiot, why would he outline the strokes instead of just making a single path down the middle of the lines and using the Stroke option?"
NO. BAD. That is ugly, at least to me. Lines with the exact same width througout and with perfect, round ends are weird looking, especially for this style. I much rather emulate the exact look of the show with the imperfect lines and tapered ends.
I do the eyes last since they are a bit more work.
D'AWWW! O-O Once the entire image and all its details have basically been outlined with paths, I make the selections and fill them in with the appropriate colors. I do the strokes first. Here are the mane, tail and body stroke layers all turned on.
Now, I've done enough of these thing to the point where I've come up with an organized system of folders and layers that I can use on pretty much any image I decide to make so that individual layers stack with minimal editing after they've been filled. If everything is done correctly, the only thing I usually have to do is remove a bit of overlapping mane and/or body strokes around the ear and the neck, depending on the angle of the image and style of hair.
This is my basic folder structure below:
The PP folder you see in the above image is where everything for the vector is contained. the REF image is the reference image I am working from, obviously. I bet you can't guess what the BG layer is...
The very first layer you see, COLOR REF, is my color reference layer (NO WAY). If possible, I use 's color references that he has created. Unfortunately, he doesn't have these for every character, so sometimes this layer will just be the most correct-looking image I can find of the character I am working on, color-wise. Luckily, he has one of Pinkie Pie, so I used that. I highly suggest using his stuff, especially if you're making vector images like this.
Now I'll show you how I organize my folders and layers and continue to make sarcastic comments.
That image above is what's inside the PP folder. Amazing, is it not? (The "mane backfill" layer is simply a flattened copy of the mane I use as a gap-filler between the body and mane should any gaps be created once I've edited the stroke and fill layers of the mane so that they don't overlap the body stroke and fill where they aren't supposed to.
That image above is what you would find inside the folders. Again, incredible. You've probably never seen something so astounding. The "lines" layers are extra details in the mane and tail. I do that for a couple reasons that aren't worth explaining.
Now, once the lineart has been created, I use the magic wand to make appropriate selections with "sample all layers" turned on and expand the selection a bit so that it overlaps the lineart. I fill those selections with the proper color on the proper layer to create the fills.
There, finished! Wait...I'm forgetting something.
D'AWWW! O-O
EYEBALLS. She just needs some eyeballs. Just make all the outlines needed, make all the layers needed, make the selections needed and fill those suckers in. Apply a gradient to the iris layers for extra D'AWW effect and let it sit and cool for a few minutes while you go refill your drink. Come back, try and remember what it was you were working on, remember, and then double-check to make sure you've done everything right. Chances are you will forget something and will only notice right after you've uploaded it to DA or wherever and you'll rage. Luckily, you'll learn after doing this ten times in a row to KEEP RUNNING until you've uploaded the image and made sure that you didn't miss any errors. This will save you precious seconds while you go back to correct your failures and prevent an aneurism. Possibly.
There we go, now it's done. And, just to show that my method isn't complete insanity and is actually quite modifiable, I created two variations:
Below, I present the idiot's beginner's guide to what all my layers are.
Folders are annotated with "-", capitalized, and bold, while the layers are italicized and underlined. If you are still confused as to which ones are the folders and which ones are the layers, well...can't help you there. I will add a note to anything that might require it.
-MANE
stroke
fill
-EYES
snout/cheek (if the image is at an angle where part of the eye is behind their nose, or if their eye is squinted so that a body-stroke-toned line is used, this will be part of the body stroke made to overlap it.)
eyeline (the black outlines usually used around the upper part of the eyes)
eye shine (the white higlight spots)
pupils
iris sheen (the two-tone "sheen" of the iris.)
irises (generally the only layer that I ever apply a gradient to on these types of images.)
whites
lashes
-CUTIE MARK
whatever layers it takes to create the cutie mark go in here. Sometimes I will place this folder inside the BODY folder under the stroke layer if it requires it.
-BODY
stroke
shadefill (if parts of the body (usually the farther legs) are in shadow, this layer is for that.)
fill
-TAIL
stroke
fill
And that is the folder structure I start off with every time. Sometimes the image will require more (or less) than that, and I add stuff as needed. Hopefully it will help you understand how I layer everything with little hassle.
NOW FOR SOME AWESOME MOVIES (not really that awesome, they are really boring and only useful if you want to actually see me making things.)
To help you understand all this, I have two different videos below. These, combined with the above description, is the next best thing I can do short of physically coming to your house and showing you what I do in person, so I hope you understand everything I've said. I'm not very good at writing instructions and walkthroughs, I'm afraid.
this one starts out at normal speed to give viewers the chance to see what I'm doing but I bump the speed up to 4x I think somehere about halfway through it. www.youtube.com/watch?v=7jEqBJ…
This one is just a really fast runthrough : www.youtube.com/watch?v=SIjQH4…
I hope I didn't forget anything. If you have any more questions, feel free to ask.
Oh, and these usually take me aright around an hour each.
Related content
Comments: 243
MoongazePonies In reply to ??? [2011-05-25 04:20:05 +0000 UTC]
Oh, I have Illustrator. I'm just crazy.
Seriously, though, no problem, and thanks for making those. They come in handy.
👍: 0 ⏩: 1
kefkafloyd In reply to MoongazePonies [2011-05-25 11:00:28 +0000 UTC]
How much time do you spend on one of these? Because I can show you how to cut it down to like... 25% of whatever you're spending.
👍: 0 ⏩: 1
MoongazePonies In reply to kefkafloyd [2011-05-25 11:52:21 +0000 UTC]
Usually no more than an hour, and that's with my dawdling along. If I push it without getting distracted I'm sure it wouldn't take me that long.
👍: 0 ⏩: 0
geradexacondari In reply to ??? [2011-05-25 02:38:18 +0000 UTC]
I like this guide. I noticed some disdain towards Inkscape. Maybe I just don't know how to use GIMP yet or something, but I found Inkscape to be easier to use...
Regardless, this is a good guide, has been bookmarked, and you have been added to my watch list.
Now maybe I will make more art again...
👍: 0 ⏩: 1
MoongazePonies In reply to geradexacondari [2011-05-25 02:50:22 +0000 UTC]
It's just that from what I've seen, Inkscape gives subpar results. :iconderpyshrug: Like I said to someone else earlier, it might just be the user and not the tool. I wouldn't know in this case.
Glad some people are finding it useful; I know it's not so much a tutorial so much as a glimpse at how I organize my crap and what tools I use, but I guess for some people, even that is helpful.
Thank you for the watch! I've already got some of your stuff fav'd I believe, I'll watch you back and hope that you do some more stuff!
👍: 0 ⏩: 1
geradexacondari In reply to MoongazePonies [2011-05-25 23:35:45 +0000 UTC]
Well now I feel special!
Also the few things I did were with Inkscape.
I for some reason never thought to break everything out into many layers as you have. Will probably help keep Inkscape from crashing rofl!
👍: 0 ⏩: 0
Sc0t1n4t0r In reply to ??? [2011-05-25 02:33:22 +0000 UTC]
Finally a vectoring tutorial on this...
I was looking for it far too long and I need to say...
YOU ARE AWESOME
👍: 0 ⏩: 1
MoongazePonies In reply to Sc0t1n4t0r [2011-05-25 02:51:05 +0000 UTC]
Thanks, glad it's useful for somebody.
👍: 0 ⏩: 1
Sc0t1n4t0r In reply to MoongazePonies [2011-05-25 04:47:34 +0000 UTC]
it is, by the way, is this vector line style applicable in flash? I don't know myself
👍: 0 ⏩: 1
MoongazePonies In reply to Sc0t1n4t0r [2011-05-25 04:57:20 +0000 UTC]
I couldn't say, sorry. I've always wanted to learn Flash but never really got around to it. Flash relies more on shape layers, so although you could probably do something similar to what I do in Flash, it would be much easier and more beneficial to do it the proper way and just use solid shape layers.
👍: 0 ⏩: 1
Sc0t1n4t0r In reply to MoongazePonies [2011-05-25 05:09:50 +0000 UTC]
(im learning flash myself)
anyways thanks!
👍: 0 ⏩: 0
Kishmond In reply to ??? [2011-05-25 02:10:13 +0000 UTC]
So not only does keeping multiple paths on one path layer save time, it also saves memory. Thanks again!
👍: 0 ⏩: 1
MoongazePonies In reply to Kishmond [2011-05-25 02:47:45 +0000 UTC]
Yes, it is a lot easier to categorize them. Having a bajillion path layers is a nightmare.
👍: 0 ⏩: 0
yellowfireyoshi In reply to ??? [2011-05-25 00:12:09 +0000 UTC]
I'm so dense... I never actually thought to use separate layers for certain things. Well, this guide just helped, a lot.
Now all I need to do is figure out how to get the gradient to work right in Illustrator CS2.
👍: 0 ⏩: 1
MoongazePonies In reply to yellowfireyoshi [2011-05-25 00:22:22 +0000 UTC]
lol yeah, layers are kind of key here. I know Illustrator has gradient functions but I've never used them so I can't help ya there, sorry.
👍: 0 ⏩: 0
clyvore In reply to ??? [2011-05-24 20:39:38 +0000 UTC]
I just use flash ;w;
I believe Flash is considered a vector drawing program idk
hehehehe, nice tutorial btw
👍: 0 ⏩: 0
SandwichHorseArchive In reply to ??? [2011-05-24 20:34:53 +0000 UTC]
This is great, good job!
👍: 0 ⏩: 0
WraithX79 In reply to ??? [2011-05-24 20:19:06 +0000 UTC]
Personally I use Illustrator for all my vectoring, I start off with a silhouette which will later become the outline, then I trace out the fill. That's pretty much all I do with each individual area. ^-^
It's great learning new ways of doing things though!
Also...
I flippin' LOVE the pen tool!
👍: 0 ⏩: 1
MoongazePonies In reply to WraithX79 [2011-05-24 20:24:58 +0000 UTC]
And that is the proper way to do it! I just like being difficult and doing things in weird ways.
👍: 0 ⏩: 1
ohlookaturtle In reply to MoongazePonies [2011-05-24 20:36:28 +0000 UTC]
I might attempt something in this style to see how it turns out
👍: 0 ⏩: 1
Sansbox In reply to ??? [2011-05-24 20:10:45 +0000 UTC]
Nice write-up!
BTW, have you ever tried using Inkscape? It has a feature called "path-to-object" which lets you transform any path, even thick strokes, into fully editable objects. It's a godsend for drawing those variable width strokes and tapered ends because you only have to draw one thick line, then tweak it as you see fit. I absolutely love it.
👍: 0 ⏩: 1
MoongazePonies In reply to Sansbox [2011-05-24 20:22:04 +0000 UTC]
I have not, although I watched someone else use it on a stream once. I don't know if it's the artists or Inkscape, but everything I've seen that I know was created in Inkscape has less than desirable looks, like jagged edges and other odd things. Again, no idea if it's the tool or the user in those cases.
Sounds like a cool feature, though; Photoshop probably has something similar and I've simply not stumbled across it yet.
👍: 0 ⏩: 0
SirLeandrea In reply to ??? [2011-05-24 20:10:27 +0000 UTC]
This is a great tutorial Moongaze.
I use GIMP. To anyone curious, This is almost exactly the same way I do it there. The only difference is the layout between GIMP and Photoshop.
Its easier in Photoshop because you can organize the layers and paths better but you can do the exact same thing in GIMP. (don't ask me about Inkscape. The moment I learned I could do this in GIMP I uninstalled it and haven't used it for a long time.)
👍: 0 ⏩: 1
MoongazePonies In reply to SirLeandrea [2011-05-24 20:19:30 +0000 UTC]
Wise move. I definitely recommend GIMP if people can't afford PS or IL and don't want to pirate the stuff.
👍: 0 ⏩: 1
sekinto In reply to MoongazePonies [2011-05-25 03:02:38 +0000 UTC]
If you are doing Vector art you will want to use Inkscape over GIMP.
👍: 0 ⏩: 1
MoongazePonies In reply to sekinto [2011-05-25 04:27:28 +0000 UTC]
I'll take your word for it.
👍: 0 ⏩: 0
Salohcin-Silverwing In reply to ??? [2011-05-24 20:06:31 +0000 UTC]
wow......that's some complex stuff
👍: 0 ⏩: 1
MoongazePonies In reply to Salohcin-Silverwing [2011-05-24 20:09:04 +0000 UTC]
I think it's just me unintentionally making it sound more complicated than it is. I suck at explaining things clearly sometimes. It is actually a pretty simple process, and extremely boring to do.
👍: 0 ⏩: 1
Salohcin-Silverwing In reply to MoongazePonies [2011-05-24 20:12:32 +0000 UTC]
I skipped through a lot of stuff, so you probably mentioned this already, but what program were you using?
👍: 0 ⏩: 1
Salohcin-Silverwing In reply to MoongazePonies [2011-05-24 21:35:25 +0000 UTC]
oh....well, that kills my idea.
👍: 0 ⏩: 1
MoongazePonies In reply to Salohcin-Silverwing [2011-05-24 21:38:44 +0000 UTC]
What was your idea?
👍: 0 ⏩: 1
Salohcin-Silverwing In reply to MoongazePonies [2011-05-24 21:41:13 +0000 UTC]
I found this program called Inkscape, and I was hoping your tutorial would have the same thing.
But if half of this stuff is still going over my head, even with a tutorial this detailed, then I figure this kinda stuff isn't meant for me
👍: 0 ⏩: 1
MoongazePonies In reply to Salohcin-Silverwing [2011-05-24 21:55:37 +0000 UTC]
I recommend trying Gimp if you're new to this stuff. Inkscape just seems...inadequate.
👍: 0 ⏩: 3
Jacen4789 In reply to MoongazePonies [2011-05-25 12:22:36 +0000 UTC]
That is because you are talking apples and oranges when you are talking about the difference between Inkscape and Gimp.
It's because Inkscape is a vector graphics program and is the free equivalent of Adobe Illustrator. Gimp is a raster graphics program which is equivalent to Photoshop.
The difference between raster and vector graphics is how they work their graphics.
Raster works with pixels; vector works with lines that are freely editable and movable.
👍: 0 ⏩: 1
MoongazePonies In reply to Jacen4789 [2011-05-25 12:27:55 +0000 UTC]
I know the difference, thanks. It had appeared that Inkscape was junk based on how many subpar-quality images I've seen people make using that program, but after hearing a few people here refuting that idea, I went and actively hunted down some stuff made using Inkscape, and it does seem that it was mostly the people using the program rather than the program itself, so that's good.
👍: 0 ⏩: 0
maskedretriever In reply to MoongazePonies [2011-05-25 02:50:29 +0000 UTC]
Inkscape actually can kind of, well, AUTOMATICALLY create vectors out of bitmaps...
👍: 0 ⏩: 1
MoongazePonies In reply to maskedretriever [2011-05-25 02:59:05 +0000 UTC]
Orly? How is the quality of one of these? I'd like to see.
👍: 0 ⏩: 2
maskedretriever In reply to MoongazePonies [2011-06-06 16:30:35 +0000 UTC]
If you let it run long enough, pretty damn good. It has two knobs: number of colors and number of passes, so if you have it go for a few hundred passes it'll pick up, say, the pattern in Pinkie Pie's stockings...
👍: 0 ⏩: 0
nosoop In reply to MoongazePonies [2011-05-25 06:52:51 +0000 UTC]
Given the picture you've posted as an example, it's [quite terrible ]. A piece of commercial software called "Vector Magic" does a bit better with the given image.
I'd give it a shot with some 720p caps, but I really should be heading off to sleep now.
Note: The software used in the image posted is not the latest version, and may not reflect updates in the vectorization methods used in the current version. (This copy of Vector Magic is from late 2009, and Inkscape+potrace is from early 2009.)
👍: 0 ⏩: 0
Salohcin-Silverwing In reply to MoongazePonies [2011-05-24 21:59:21 +0000 UTC]
I have a small amount of experience with GIMP, but I found that Paint.NET is a nice intermediary tool
👍: 0 ⏩: 0
<= Prev |