User:Nayayen/Vector

Vectorifying is a word
So, what with Trip absent since April 2009, I've decided to continue with what he was doing: vector conversions. This page exists for at least three reasons:
 * 1) To keep stuff on it when a text file is inconvenient/inadequate.
 * 2) To keep stuff on it that you, another Wookieepedian, may find interesting/useful.
 * 3) To keep track of the source images and the vector versions that I have completed.

Important links, in no particular order

 * User:Volemlock/insignia, logos, and symbols: If I was Yoda (with many zeroes after him) these would all be vectorified.
 * User:000/Colors: Some specific SW colors. I'll probably make my own version if I find and remember any more.
 * WP:IM/Vector Art: It's not a trap.
 * WP:IM/Vector Art/Images: Arranged by source and coded by state of completion. Woefully in need of updating and filling in from Volemlock's page.
 * Category:Vector graphics: This should have the vector counterparts to...
 * Category:Source images: ...the respective source images.
 * W3C validator: Go to the full size version of any of the SVGs that me or Trip have done and copy and paste the URL into this. They should all come up as valid.

How It's Made: Tutorial
This is how I do it. There may be better ways, I may be a genius, who knows? This is just what I do, if it doesn't work for you then go look somewhere else for help. I wrote this while I was using GIMP 2.6.3 and Inkscape 0.47, both on Windows Vista. I can normally manage stuff okay with the 2Gb RAM/1.67GHz CPU/224Mb GPU on my laptop. I just use a normal mouse (not the trackpad in the laptop) but you can use a graphics tablet if you want (I do have one which I won at some point but I don't have the steady hand needed to make it worthwhile for anything other than inking/colouring). NB: Although I do use the Trace function sometimes, I'm not covering it here. This is for direct drawing best suited to fairly simple shapes.

You'll need:
 * Inkscape
 * A source image
 * The GIMP, or decent image editor of your choice (I'll refer to it as GIMP anyway)


 * 1) Open the source image in GIMP. Take the  and set it to  . You'll need to get the colours of the solid areas so that you can use them later. Set the   to as high a number as you can whilst staying inside the area you are taking the colour of. Do this for however many separate colours there are and write the HTML code down (if you don't know where to get it then you probably won't understand the rest of this) in a text file, on a piece of paper or by whatever medium you want. Don't do this if there is a gradient. I'm not tackling those just yet.
 * 2) *If the source really is a bit of a pixelated mess, use  and possibly  . If you're really lucky, you can get away with  . You'll undoubtedly need to do some manual tweaking to these settings anyway. You need to make sure you've gotten the colours first though. What you want in the end is something where you can clearly tell where the edges are and the proportions of it all. If in doubt, don't touch it.
 * 3) Close GIMP and fire up Inkscape. Go to  and open the source image. It should appear on the page. Now go to   and click  . The page should shrink down to the same size as the source image.
 * 4) Now you need to lock the source downstairs while you draw over it. Click  and call it something like   with the position  . Now select your source image and go to  . This will move the source image onto the source layer: clever. Switch to the source layer and click the lock to, you guessed it, lock the layer. Now go back to the other one (probably Layer 1) and get ready to draw.
 * 5) Use whatever tools are needed, typically the,   and   tools. I'll refer to these as  ,   and   respectively. Start drawing over the source image (you'll just have to use trial and error to work out the best way) making sure to have horizontal/vertical lines snapped to 180deg. Draw enough points that the shape is easily recognized but not so many that you start making the SVG too complex. Work in order by drawing each different colour in turn. If you find you need to tweak the lines then either drag and pull the red line until it fits and/or use the Node handles (them thar small circles on sticks) and tweak it.
 * 6) *So that you can see what you're doing, set the opacity of the stroke and fill to about 30%. You'll also want to set the fill to a colour that is easily distinguishable from the source so that you can see where you've gone. Change the fill colour to a totally different one when switching to working on a new colour in the source. If there are no black lines in the source (like File:CHA logo.svg) then set the stroke colour to none. If there are black outlines (like File:Mirax Terrik symbol.svg) then set the stroke colour to bright green (or some other distinguishable colour) and set the stroke thickness to the same as the source. You may need to do some tweaking to get the thickness right.
 * 7) When it comes to drawing images with holes in them (like File:Neyo logo.svg) the best thing is to use the options on, normally  . Using Neyo logo.svg as an example, I started by drawing the big red circle whole. Then I drew the smaller circle inside it on top. Select the two and click   and the small circle should disappear, leaving a hole in the red one. The same thing was done for the vertical stripe using  . Experiment with these until you get the hang of them, that's all I can say.
 * 8) When you're happy, with the drawing, it's time to fill the colours in. Hide and unhide both the vector layer and the source layer a few times (hopefully you did this whilst you were working) to check that everything is all lined up and dead-accurate (zoom in to a couple hundred, sometimes thousand percent zoom to tweak if need be). Then go through each colour and replace the fill whatever the HTML /hex code it currently is with the actual one which you wrote down earlier. If it doesn't show up, make sure that there are 2 's at the end so that you have 8 digits rather than just 6. Turn the opacity back up to 100% and voilà, you should have a vector version of your source image.
 * 9) The fun doesn't stop there though, you need to go to the source layer and delete it so that you only have the vector drawing on its own layer. When that is done, go to  to clean up any loose bits of code (that's what an SVG actually is; elaborate HTML). Then go and save the final version as a plain SVG file. Inkscape insists on adding your preferences (or something like that) to the Inkscape SVGs and some browsers don't like this.
 * 10) To check that it will render okay, open the SVG in Firefox (yes, Firefox) and inspect it. You may need to ZOOOOOOM in to check the fine details. If that all checks out then you should have one fully finished SVG. Well done.

...Failing that: Requests
If you didn't manage to work the "tutorial" out yourself or you just don't want to then I will (happily) vectorify something for you. Just leave a message on my talk page. In your request, please give me a link to as high a quality version of the source image that you can find. If it is not feasible to vectorify an image then I will leave a reply on your talk page to say so. If not, I'll to work on it when I have the time. You can start bugging me to do it if I haven't done it (or told you that I'm getting delayed in doing it) after 2 weeks or so.

I have also had a Wookieepedian contact me to do an image outside of Wookieepedia for them. I may do more of these in future depending on how this turns out so watch this space.