Intro to Vector Based Drawing

[gabumon]

 I wrote this guide in the old arena to help budding new artists become familiar with this type of drawing.  Please feel free to post feedback ! Enjoy.
Introduction to Vector Based Drawing
Vector based drawing allows you to create scalable drawings that can be reproduced in any size, without loss of quality.  It does this by managing the drawings as lines and geometry, not pixels.  One other advantage is that it is easier to return to a finished vector graphic and make revisions to it.  Copy-paste new parts in, revise, re arrange, all without worrying about pixels.
The industry standard file format for vector images is SVG.  So the files you work with will usually by my-drawing.svg.  When you are ready to share your art, you should export your drawing to PNG or JPG which are much more common.   All vector software should have this menu option.  Remember that when you create a PNG or JPG this file becomes a COPY of the original SVG work.   You should continue to work in SVG if you want to keep working in vectors.
InkScape is a free Vector drawing windows and mac.  InkPad for iPad and it works really well; not to mention it can export to SVG! 
Adobe Illustrator is a high end vector drawing tool.  Photoshop and GimpShop also have some vector drawing features.  Look for "Paths" options.

High Level Process:
 1. Draw a doodle, scan it in (or take a pic with your phone).
 2. Import the picture it into InkScape or some other vector drawing software. Make a new layer.
 3. Use the Pen tool (the icon usually looks like an old fashioned ink pen, except in InkScape) to trace your outline in vectors.  This creates a "path" with points along it.  These points can be curve points or plain points that are just flat angled connections. (See Tip #1 below).
 4. Use the "Edit Paths" tool to fine tune the vector points.  When you select a curve point to edit you get these two handle glyphs.  These control the incoming and outgoing curves.  Experiment!
 5. Use the "Stroke" menu to change the thickness, color and fill of your shapes.
 
TIPS!
 #1 When using the Pen tool, a plain "single" mouse click creates a point WITHOUT curve-ability, it has no curve "grabbers".  To create a curve-able vector point click and drag a little when you place the point before releasing  the button. When you do this you can come back later and tweak the points curve.
 #2 Make one big continuous path for the main body shapes. (joining separate paths is messy)
 #3 If you can't get a line to match up your sketch, try deleting one of the draw points. I found that simplifying the line actually made it match better.
 
Working with vector Files and Formats:
Vectors are SVG files : drawing_name.SVG
SVG files are editable and changeable. They are your "live" working copies. These are similar to PSD files. PSD files in Photoshop are the working files, they have layers and all sorts of stuff in them, hidden things, special effect rules, etc. Most of the time you only open PSD files with Photoshop, you can't open them in Word or PowerPoint (not usually anyway).
You also don't use PSD files for web pages or email, right? No. You use "Save as" or "Save for Web" and create JPG or GIF or PNG files. Note that JPGs, GIFs and PNG are not working copies of your PSD files; they are simply the output copy of the PSD.
Vector files work in a similar way. You generally don't use SVGs in web pages or email. (Although most browsers can be used to preview SVG files.) You typically will only use the SVG file with your vector drawing software, like Inkscape, just like you only use PSD files with Photoshop. Like Photoshop, if you want to create an output file of an SVG you have to use a special menu option to create a JPG or PNG. In Inkscape this is "Export Bitmap". Remember that like Photoshop the JPG or PNG file you create is an output copy of the SVG file, not the working copy.

So, in summary: Work with SVG files; they are the real deal. When you want to share your vector drawing via email or the web, export it to JPG or PNG and remember this is just a copy of the original source SVG.
Once you have that concept down, you are ready for a twist on that idea. (Please make sure you've got it, because this next notion might confuse you.) SVG files can contain JPGs or PNGs. As suggested earlier you can import a sketch or some other art into a vector drawing to trace. Keep in mind that you can't (and shouldn't) edit the actual pixels of JPGs or PNGs once they are in a SVG. You can move them around, rotate or scale them, but not change the content.
When you save a SVG that contains a JPG or PNG the whole file is still a SVG, but it keeps the pixels of the imported JPG and PNG intact too. (FYI: The resulting SVG file is usually much bigger than normal SVG files in KB.) So a SVG file that contains JPG is a mix of vector line geometry and JPG/PNG pixels, but it is still a working SVG source file.
Hint: After you are done tracing the JPG/PNG image in vectors you can remove the imported JPG/PNG from the drawing, this will make your file size smaller!

Layers in SVG files:
Layers in SVG files work exactly the same as Layers in Photoshop. They are a way to group parts of the drawing together. Among other things, layers can be locked, hidden or made semitransparent.
(the Layers menu in Inkscape is under "Layer - Layers...")

Visual Examples:
visitors can't see pics , please register or login


p2
visitors can't see pics , please register or login


p3
visitors can't see pics , please register or login


Feel free to stop by my DA gallery:  http://jimbox31.deviantart.com/

[Lina]

yay, thanks for sharing!

[ZennaBug]

I remember this thread, thanks for bringing it over 

[teresat]

OMG! I've always wanted to know this. Thanks for posting!

[gabumon]

bump in case any new folks are interested in learning. 

[JigglesTheCat]

Thanks for sharing! I may have to try this

[gabumon]

little bump for new folks.