HOME | DD

MoongazePonies — Guide on how to create vector-style rasters (OLD)
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

Jegab In reply to ??? [2012-12-06 18:24:31 +0000 UTC]

Alguien que lo haga en español para que lo pueda entender?? ):

👍: 0 ⏩: 1

nanaisahedgie In reply to Jegab [2012-12-19 04:01:47 +0000 UTC]

utilizar el traductor de google! o puedo publicar aquí para usted!

👍: 0 ⏩: 0

CrownedColt In reply to ??? [2012-11-30 22:18:10 +0000 UTC]

This a great tutorial but I feel that vector masks would be more efficient than fill and stroke layers

👍: 0 ⏩: 0

Celticfan91 [2012-11-30 04:56:59 +0000 UTC]

also which adobe Photoshop do you use? thanks

👍: 0 ⏩: 1

MoongazePonies In reply to Celticfan91 [2012-11-30 19:21:52 +0000 UTC]

I use CS5, although this tutorial applies to pretty much every version of Photoshop.

👍: 0 ⏩: 0

Celticfan91 In reply to ??? [2012-11-30 04:10:27 +0000 UTC]

actually, I watched the videos a few times and I think I solved my problem, my only question right is how to you create another path, like going from body, to a separate path for the hair and mane?

👍: 0 ⏩: 1

MoongazePonies In reply to Celticfan91 [2012-11-30 19:21:15 +0000 UTC]

I put those paths on different layers.

👍: 0 ⏩: 0

Celticfan91 [2012-11-29 19:22:55 +0000 UTC]

How do you hide pen paths in a layer in cs6 photoshop? It won't allow me to do it unless I make a vector mask, but then it won't allow me to select all the vector masks I've done. I'm probably making a easy error or rookie mistake. What do I do?

👍: 0 ⏩: 1

MoongazePonies In reply to Celticfan91 [2012-11-30 01:48:04 +0000 UTC]

Not entirely sure what you mean, could you be a bit more descriptive of the issue? I'll try to answer as well as I can, though; Pen paths shouldn't be showing unless you've selected them with the pen tool. You can select a different layer and the paths you had selected previously will become unselected and therefore invisible. You can select all masks on a layer by ctrl+alt+clicking all the paths on a layer. You can't select paths simultaneously if they're on different layers, however. I'm not sure if this is what you're asking about.

👍: 0 ⏩: 1

Celticfan91 In reply to MoongazePonies [2012-11-30 04:27:59 +0000 UTC]

Also how do you pick-up paths too?

Thanks

👍: 0 ⏩: 1

MoongazePonies In reply to Celticfan91 [2012-11-30 19:22:55 +0000 UTC]

ctrl+alt+click to select an entire path

👍: 0 ⏩: 0

Raiokoo In reply to ??? [2012-11-17 03:03:57 +0000 UTC]

This is an amazing guide! Next time I try to vector one of my drawings, I'll stick to this guide.
Normally it would take my like 4 hours to do a pretty simple drawing, and it always looked a bit off!

👍: 0 ⏩: 1

MoongazePonies In reply to Raiokoo [2012-11-30 01:43:52 +0000 UTC]

Glad you found it useful!

👍: 0 ⏩: 0

TopHat-Trexxxy In reply to ??? [2012-11-16 01:10:54 +0000 UTC]

............I'm such a retard for not thinking of DOUBLE OUTLINE-ING. I kept freaking out cause i'm wanting to make MLP FIM art and can't figure out the outlines, but this REALLY helped a lot.

Thank You so much.

👍: 0 ⏩: 1

MoongazePonies In reply to TopHat-Trexxxy [2012-11-16 03:01:00 +0000 UTC]

Yep, it's the only way I can think of to achieve the exact shapes needed to make them look as show-accurate as possible. Stroking them just looks wrong, the show lines aren't perfect like that.

👍: 0 ⏩: 2

TheRealCuddles In reply to MoongazePonies [2013-10-02 18:05:57 +0000 UTC]

I always use strokes,and I can still trace pretty much everything perfect.

👍: 0 ⏩: 1

MoongazePonies In reply to TheRealCuddles [2013-10-03 21:23:03 +0000 UTC]

Yes, that was my point - strokes are too "perfect" for emulating MLP style. The linework of MLP is not uniformly perfect, so stroked traces do not look "right". Stroked artwork is an obvious trace - I like making my traces look exactly like the show, to the extent of any differences not being discernible.

👍: 0 ⏩: 1

TheRealCuddles In reply to MoongazePonies [2013-10-04 11:03:17 +0000 UTC]

But they will look more better and realistic.

👍: 0 ⏩: 0

TopHat-Trexxxy In reply to MoongazePonies [2012-11-16 03:17:57 +0000 UTC]

As of now, I totally agree.

Did you use Inkscape for the vectoring ?

👍: 0 ⏩: 1

MoongazePonies In reply to TopHat-Trexxxy [2012-11-17 01:46:12 +0000 UTC]

Nope, I do it all in Photoshop.

👍: 0 ⏩: 1

TopHat-Trexxxy In reply to MoongazePonies [2012-11-17 16:50:40 +0000 UTC]

oh, okay. Thank you for posting the guide again.

👍: 0 ⏩: 0

Sixcolors [2012-11-11 23:17:03 +0000 UTC]

Thank you so much for this! I'm doing a Photoshop class and the instructor said I could "vectorize" one of my drawings instead of going with the in-book assigned photo. I showed her my fan art of *Sibsy 's Wildfire and she approved! Problem was, I had no idea how to make it look all slick like the show, and your tutorial helped fill in the blanks.

👍: 0 ⏩: 1

MoongazePonies In reply to Sixcolors [2012-11-12 00:21:51 +0000 UTC]

Awesome, glad it helped you out! Be advised that this tutorial is pretty dated, though; there are better ways of achieving similar and better results, but lots of important bits in this one still apply.

👍: 0 ⏩: 1

Sixcolors In reply to MoongazePonies [2012-11-12 08:06:47 +0000 UTC]

I just needed a starting point and it helped. Thanks again!

👍: 0 ⏩: 0

A-Dawg13 In reply to ??? [2012-10-03 21:23:45 +0000 UTC]

Thanks, I think this will come in handy

👍: 0 ⏩: 0

dillpickles12293 [2012-09-16 22:09:44 +0000 UTC]

If you cant find a reference for a pose what do you do? i am asking because I have been trying to make a decent picture of my pony for months and I cant find any poses that look cool enough...

👍: 0 ⏩: 1

MoongazePonies In reply to dillpickles12293 [2012-09-17 00:47:32 +0000 UTC]

Well, in that case I sketch out poses until I get something I like and that looks decent, then I pretty much do the same thing, only with my lineart instead of a screencap. It's a lot more work since you have to eyeball everything instead of having premade lines to follow, but that what I do.

👍: 0 ⏩: 1

dillpickles12293 In reply to MoongazePonies [2012-09-17 10:47:25 +0000 UTC]

Ok, I Attempted that... and I learned 2 things. 1 I hate the pen tool now.. 2 It is going to take some practice before my work is up to par with the good vectors

👍: 0 ⏩: 1

MoongazePonies In reply to dillpickles12293 [2012-09-18 21:32:43 +0000 UTC]

haha! Yeah, it takes practice. I still have trouble doing my own stuff as well, so don't get discouraged.

👍: 0 ⏩: 2

dillpickles12293 In reply to MoongazePonies [2012-09-18 23:44:35 +0000 UTC]

thanks this guide is really helpful

👍: 0 ⏩: 0

dillpickles12293 In reply to MoongazePonies [2012-09-18 23:39:35 +0000 UTC]

I am using it as a general guide to get decent lineart. so far it is a drastic improvement next to my old lineart. Before I was struggling with getting a smooth/straight line. Now thanks to you I can do it with (relative) ease

👍: 0 ⏩: 1

MoongazePonies In reply to dillpickles12293 [2012-09-19 00:06:33 +0000 UTC]

Glad to hear it! Less nodes = smoother lines. Best advice I can give you for the pen tool.

👍: 0 ⏩: 0

PocketDemon In reply to ??? [2012-08-21 19:19:37 +0000 UTC]

How do you make the pen tool lines like that? Mine won't let me make points, they always get curved and weird. I'm new to Photoshop, sooo.

👍: 0 ⏩: 0

InvaderDylan In reply to ??? [2012-08-21 10:05:02 +0000 UTC]

Is it even possible to make or modify vectors using a free program like Paint.net? That's all I have or can afford, and I'm REALLY wanting to modify pre-existing vectors, like changing manestyles completely.

👍: 0 ⏩: 1

SirCxyrtyx In reply to InvaderDylan [2012-10-08 08:11:24 +0000 UTC]

Inkscape is a wonderful and free program that makes vector graphics. You should give it a look.

👍: 0 ⏩: 0

Kawaiikutie778 [2012-08-13 20:13:55 +0000 UTC]

I noticed you mentioned in a comment (I am such a comment stalker) that this is an older tutorial. Is there anything you changed, or is it still applicable to a vector noob beginner like me?

👍: 0 ⏩: 1

MoongazePonies In reply to Kawaiikutie778 [2012-08-13 20:39:37 +0000 UTC]

There are still useful things that can be gleaned from this tutorial, but there are also parts that can be done much better and more efficiently. I'd write a new, better and updated tutorial but I have no time these days, unfortunately, plus there are already better tutorials out there that more or less match my methods, so I never saw any reason to essentially re-write what the others say already.

👍: 0 ⏩: 1

Kawaiikutie778 In reply to MoongazePonies [2012-08-13 21:41:46 +0000 UTC]

Makes sense. Still, thank you for this tutorial.

👍: 0 ⏩: 0

inkhoof In reply to ??? [2012-08-03 03:10:04 +0000 UTC]

"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."

And this is why I love one of Inkscape's features. (I'm assuming there's an equivalent in Photoshop and/or Illustrator, since they are, after all, the top-of-the-line programs for this sort of thing.)

Start by drawing the single path, and stroking it. Then, with a single key combination (Ctrl+Alt+C, IIRC) it converts that path into a shape. It basically (automatically) outlines the stroked path with a new path, gets rid of the stroked one (and the stroke) and sets the new one to have a fill the same color, therefore letting you adjust line width at any given point and easily taper off the ends.

That being said, you clearly have a process that works well for you, and I'm by no means trying to belittle that.

👍: 0 ⏩: 2

MoongazePonies In reply to inkhoof [2012-08-04 01:21:18 +0000 UTC]

This tutorial is an old method that I don't really employ anymore, the main difference being that, instead of filling the selected areas, I convert the paths into vector shapes that I can manipulate at any time. This old method is not very good, which is why I don't publicize it on my page, although I leave it accessible since many, many people have told me they still learned a lot from it and they've gone on to create great stuff, so I figure if so many people find it useful, who am I to remove it?

Thanks for the input, regardless. I use Photoshop instead of Illustrator (personal preference; I hate Illustrator's interface. It is very counter-intuitive compared to Photoshop.) and Photoshop is a bit lacking in specialized tools like that, unfortunately.

👍: 0 ⏩: 0

TrueActi In reply to inkhoof [2012-08-03 12:11:19 +0000 UTC]

In Adobe Illustrator CS5 there is a similar feature that enables you to change the width of your path in any points without outlining it (Width Tool, I believe). What it does is implicitly creates the brush of desired shape for that path and applies the brush to it, then modifies the brush as you continue to play with widths.

Ideally that will save you a lot of time, because 1) most of the outlines are of the same or almost the same width; 2) no pain filling. And to taper corners you can outline your polished path and work on endpoints.

However, I tried that thing and it seemed very fragile to me. You may eventually ruin something (like change the master width) and after 100 enhancing steps notice that you reset the brush and it's gone, so you have to repeat everything again. That's why I decided to make my first vector as in this tutorial (outlining outlines). I guess, I'll upload it now to dA because I like the output.

P.S. A little advice if you decide to outline outlines in Illustrator. There's a less painful way to create fills.

1) Duplicate everything and hide and lock originals. Optionally you may omit eyes, they are filled easily enough.
2) Select everything you just duplicated and do Live Paint. Now you can fill spaces as if it were bucket tool. If you can't, it means you used clipping paths. They are very handy, but you'd have to do little Pathfinder manipulation to convert your masked paths to normal paths.
3) After you made your fills, expand Live Paint object into our normal paths (Object -> Live Paint -> Expand). It will make you a group consisting of two groups — fills and strokes. Delete the strokes, you already have them in your locked layer (better stay with those, cuz who knows, maybe Live Paint messes up precision).
4) Combine fills as you wish.
5) Do a little offset (Object -> Path -> Offset) so that fills would overlap strokes (to avoid holes that may come with floating point precision problems).
6) Unlock strokes, ungroup fills, rearrange to your convenience.

👍: 0 ⏩: 0

zvaxxi [2012-07-28 22:34:16 +0000 UTC]

i get that you outline everything with the pen tool but lets say that im like halfway done outlining the pony and i say to my self " this is enough for today ". is there any way to save all the line created with the pen tool so i can close photoshop and continue another day ?

👍: 0 ⏩: 1

MoongazePonies In reply to zvaxxi [2012-08-04 01:15:40 +0000 UTC]

All paths you put down should always be in the file unless you delete them, even if you close the file. They are saved along with all the rest of the data in the file.

👍: 0 ⏩: 0

Oji-Kun In reply to ??? [2012-07-25 01:44:37 +0000 UTC]

What program are you using to make the fancy lines? I'm still pretty confused on the whole process.

👍: 0 ⏩: 1

MoongazePonies In reply to Oji-Kun [2012-07-27 03:07:18 +0000 UTC]

I use Adobe Photoshop, although Adobe Illustrator is more suited to making vectors. I just prefer Photoshop, personally.

👍: 0 ⏩: 1

Oji-Kun In reply to MoongazePonies [2012-07-28 19:52:18 +0000 UTC]

Is Illustrator free? I've been meaning to learn how to do vectors but... yeah. .-.

👍: 0 ⏩: 1

MoongazePonies In reply to Oji-Kun [2012-08-01 02:51:48 +0000 UTC]

It isn't free (unless you pirate it) but there are similar programs out there for free.

👍: 0 ⏩: 1

Oji-Kun In reply to MoongazePonies [2012-08-01 02:53:36 +0000 UTC]

Alright, thank you very much!

👍: 0 ⏩: 1

inkhoof In reply to Oji-Kun [2012-08-02 15:21:30 +0000 UTC]

Try Inkscape or GIMP if you want something that's free. They're both multiplatform, too.

And if you decide to drop some money on this and want to go with Photoshop but can't afford it, Photoshop Elements is a slimmed-down version for a lot less.

👍: 0 ⏩: 1

Oji-Kun In reply to inkhoof [2012-08-03 00:14:01 +0000 UTC]

I use gimp often. THough I have NO idea how to do vectors on it..

👍: 0 ⏩: 1


| Next =>