Nayayen/Vector
Talk0this wiki
< User:Nayayen
NAYAYEN • USER TALK • WORKBENCH • SANDBOX • VECTOR • UPLOAD LOG
Sysops users are politely requested to only make edits to this page if they are related to file names (duplicate, file moves etc.).
Other users should not need to edit this page; feel free to leave a message on my talk page if you want to.
Contents |
Wolfpack emblem
Edit

Vector
Edit
Important links, in no particular order
Edit
- User:Volemlock/insignia, logos, and symbols
- Category:Images of insignia, logos, and symbols
- 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
- 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
- Category:Source images
- W3C validator
How It's Made: Tutorial
Edit
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 using GIMP 2.6.11 and Inkscape 0.47.0.9, both on Win7x64. You don't need any particularly good spec PC to do it, just something half-decent from the past couple of years (if you're doing stuff with 100s of nodes, several GB of RAM and a multi-core processor are good, but you probably have that already). I just use a normal mouse but you could use a graphics tablet if you want (I do have one which I won at some point but unless you always use one, it's better to do it with a mouse). 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 (duh)
- The GIMP/Photoshop/whatever decent image editor you use (I'm using GIMP for this)
- If the source really is a bit of a pixelated mess, open GIMP and use
Filters>Blur>Selective Gaussian Blurand possiblyFilters>Enhance>Unsharp mask. If you're really lucky, you can get away withColours>Posterize. 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 (use the dropper and write down the hex values). 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. - Close GIMP and fire up Inkscape. Go to
File>Importand open the source image. ChooseEmbedin the box that comes down and it should appear on the page. Now go toFile>Document Propertiesand clickResize page to content>Fit page to selection. The page should shrink down to the same size as the source image. - Now you need to lock the source downstairs while you draw over it. Click
Layer>Add layerand call it something likesrcwith the positionBelow current. Now select your source image and go toLayer>Move selection to layer below. 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. - Use whatever tools are needed, typically the
Rectangles and squares,Circles, ellipses and arcsandBezier curves and straight linestools. I'll refer to these asRectangle,CircleandBezierrespectively. 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.- 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.
- When it comes to drawing images with holes in them (like File:Neyo logo.svg) the best thing is to use the options on
Path, normallyDifference. Using
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 Path>Differenceand the small circle should disappear, leaving a hole in the red one. The same thing was done for the vertical stripe usingRectangle. Experiment with these until you get the hang of them, that's all I can say. - 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
f'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. - 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
File>Vacuum defsto 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. - To check that it will render okay, open the SVG in your web browser (except IE 8 or lower) 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
Edit
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 so just email me if you want me to have a go at one for you. If it is much more complex than the ones I've already done (this is probably the most complex I've done) then be ready to wait and don't expect it to be totally perfect.
3D modelling of KOTOR stuff
Edit
What you'll need
Edit
If you know what you're doing:
- KOTOR/TSL
- Kotor Tool
- 3DSMax
Or if you're poor/don't want to steal it:
- KOTOR/TSL
- Kotor Tool
- KAuroraEditor
- GMax
- NWMax plugin
- GMaxSLgrab
- Yafaray/Yafray
- Blender
- Python (for the lolz)
- Mdlops
How to do it
Edit
Google for now; I'll try and remember how in the meantime. It tends to just be something to with screwing the lighting up.