Tag Archive for 'SVG'

Page 2 of 2

Family Portrait

After seeing some of my recent work I was asked to do a family portrait. The last time I did a portrait on such a large scale was in 2007 in Adobe Illustrator and the last time I did a realistic portrait was probably back in 2006 of an old photographer buddy. I’ve been using Inkscape for just over a year now and whilst I’ve been doing little bits and pieces I haven’t actually done a major illustration.

As always I started with the outline first and filled it in with basic colours. I used GIMP and a very useful cutout filter to help me visualise how I was going to layer the colours and shapes that I needed. From there it was a simple case of refining and perfecting! Have a look at some of the progress shots:

1 2 3 4

The finished product looks like so and is probably my favourite piece this year:

The finished family portrait

The finished family portrait

The finished result was printed onto a canvas and is mounted on their wall. Yay!

If you’re that kinda person you can have a look at the wireframe of the image:

wireframe 1 wireframe 2 wireframe 3 wireframe 4

Overall working in Inkscape was quite easy in terms of drawing. One bit of praise I often hear about it is its drawing and node editing tools, and it really did feel quite easy to draw this. However, there are two areas where I feel Inkscape hindered my creativity in creating this piece.

The first is how it implements brushes. Inkscape does this by using the Pattern Along Path Live Path Effect, which in some instances can be more useful than Illustrator’s brush tools. What I feel some users want is for the pattern to act as the stroke of a path and to still be able to edit the fill of a path. This would’ve been very useful for me when drawing the hair.

The second is it’s lack of extensive layer blending modes. Currently Inkscape has five layer blend modes, which includes normal/no blend and these can only be implemented on layers, not individual objects. As far as I know you were able to set the blend mode for each paths in 0.44, but it was removed for technical reasons. I achieved the effects in my earlier work by, at times, combining over ten different blend modes on individual objects. Take a look at this walkthrough by popular vector artist verucasalt82 and you’ll see why it can be quite handy. So, in the absence of blend modes for individual paths could we see a few more blend modes, overlay in particular?

With all of that said, you can see that Inkscape is still a very capable program. I overcame many of the problems I described by just doing things a little different than usual.

Making a Disco Ball using Blender and Inkscape

Awhile back I started doing a few experiments using Blender and Inkscape together. One of my creations from this was a ball.

Blender/Inkscape Sphere (by hellocatfood)

Recently one Inkscape user created a tutorial describing how to make a disco ball directly in Inkscape. Looking back at that ball that I made it kinda resembles a disco ball, so I decided to write a tutorial on how I did it.

This tutorial assumes that you know at least something about Blender and Inkscape. If not, go look at these tutorials for Inkscape and these tutorials for Blender. As with any program, the more you use it, the better you get at it.

We’re going to need three things before we begin. First install Blender. It’s available for Mac, Windows, Linux and probably any other system you can think of. Did I mention that it’s completely free? Next, install the VRM plugin for Blender. This is a free Blender plugin that allows you to export your Blender objects as an SVG (the file format that Inkscape uses by default). I’ve discussed the usefulness of this plugin before. Lastly, install Inkscape, if you don’t have it already. I’ll be using a beta build of 0.47, which should be officially coming out within the next two weeks. If not, just grab a beta build as it’s pretty stable.

Once you’ve installed these programs open up Blender and you’ll see the cube on screen.

The cube is usually the first thing you see.

The cube is usually the first thing you see.

Depending on how best you work you may want to switch to Camera view. You can do this by either clicking on View > Camera or pressing Num0 (the 0 key on the keypad). What we now see is what the camera sees. If you were to export this as a jpg or SVG this is the angle that you’d see it from.

oooh, shiny 3D!

oooh, shiny 3D!

We need remove this cube and add a UVsphere to the screen. Right-click on the cube and press X or Del to delete it.

Bye bye cube!

Bye bye cube!

To add a UVSphere, in the main window press the Spacebar and then go to Add > Mesh > UVSphere.

Add a UVsphere

Add a UVsphere

You’ll now see another dialogue box asking you to specify the rings and segments. This is important as it’ll define how many tiles there are in your disco ball. Think of these options in this way. The segments option is like the segments of an orange and cuts through the sphere vertically. The rings option cuts through it horizontally. These diagrams might explain it better:

Segments go vertically

Segments go vertically

Rings go horizontally

Rings go horizontally

Put the two together...

Put the two together...

The default is for both to be 32, but, if you want more tiles increase the value and if you want less decrease it. Once you’ve chosen press ok and your sphere should be on screen.

UVsphere

UVsphere

You can reposition, rotate or scale your sphere if needed. To reposition it, with the sphere selected (right-click it if it isn’t selected) press the G key. This grabs the object that’s selected and allows you to move it freely. Try moving your mouse about. This can be useful, but we’re working in a 3D environment which…er.. has three dimensions that you can move along. To move it along a set axis you can either left-click the arrows coming out from the sphere or, after pressing the G key, press the key that corresponds to the axis that you want to move it along. For example, if I wanted to move the sphere along the X axis (the red line) I’d press the G key, the the X key. Now, no matter how I move the mouse the movements of the sphere are constrained to the X axis.

Similarly, to rotate the sphere press the R key and to scale it press the S key. The same rules about constraining it to a certain axis can still apply.

You can do things such as repositioning the camera other such trickery but for that you’ll need to learn more about Blender for that.

With your sphere now ready go to Render (at the top of the screen) and then press VRM.

The VRM options window

The VRM options window

I left the options as they are, but if you feel adventurous have a mess around. When you’re ready press the Render button and then choose the place on your computer to save it and what name to give it and finally press Save SVG. You’ll notice the egg timer appears in place of your mouse cursor to let you know that something’s happening but otherwise there’s a handy progress bar at the top of the screen.

Blender Screenshot

Open up the saved object in Inkscape and voila!

It's an SVG Sphere!

It's an SVG Sphere!

That’s the first part of this tutorial done! The next part draws upon some of my own experiments but is also taken from the original tutorial.

When you’ve opened up the sphere you’ll notice that it’s all one object. This is because all of the paths (the tiles) are grouped into one. You can ungroup it if you want but for this tutorial you don’t need to. Give your object a base a fill and stroke colour. You can do this using either the colour palette at the bottom of the screen or the Fill and Stroke dialogue (Object > Fill and Stroke or Ctrl + Shift + F).

Applying fill and stroke colour

Applying fill and stroke colour

The final step of this tutorial from me is the following. With the base colour selected we’re now going to randomise the colours but within that hue. To do this we’re going to use the randomise filter which is located in (in Inkscape 0.47) Extensions > Color > Randomise.

Leave the Hue option unchecked (unless you want a multicoloured sphere) and then press Apply.

Your finished disco ball!

Your finished disco ball!

There is of course more that you can do to make this disco ball look more realistic but take a look at the tutorial that inspired this one and come up with something of your own ;-)

Click to download the SVG

Click to download the SVG

Bending a penguin

Awhile back I did a quick vector illustration of a penguin. It was nothing much really but as far as penguins go I quite liked this one. Recently (as in, the last four months) I’ve been interested in databending. Have you ever had an image you’ve taken come out like it’s been through a shredder? That’s the effect that most databenders are after. In a way it’s like trying to reproduce an error. Once you’ve done it a few times you get to learn what effects different methods can produce but even then it’s very unpredictable. For a short tutorial on databending an image, take a look at the one I wrote for fizzPOP.

Penguin

My curiosity lead me to see what can be done to databend an SVG file. In a similar way to a jpg or gif they’re just data but the difference is it’s human-readable. That is, someone could look at how an SVG is created and understand it. For example this code:

<!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
<!-- Created with Inkscape (http://www.inkscape.org/) -->

..Produces this circle:

Vector Circle

With a bit of time you could easily read and write that code yourself.

So, with that in mind, using similar methods to this databending tutorial, can we apply a similar effect to the penguin? Like jpg’s etc the SVG has a header that, if modified, completely destroys the file. Using the above example the header is from lines 01 to 10. Open up your SVG in a text editor (for Windows I recommend Notepadd++, for Ubuntu/Linux Scite), cut those lines (a simple Ctrl+X will do) and then begin to edit your document!

You’ll notice that you have little flexibility with how you can modify it. With a jpg you can replace or delete any character and replace it with (almost) any other one. In an SVG if you change any of the letters then you render it useless. For example, fill is a function that defines the colour of a shape. If you changed each instance of fill to say fail it would just simply break the file. Epic Fail. What you want to do is replace numbers with other numbers. There is a danger that replacing #090909 with #0909999909 could break the colour values but so far I have encountered no problems.

Once you have replaced a few numbers paste back in the header and then save it again. Open it back up and take a look at the results! Below are a few modifications I made. The process is described in the link.

Penguin - Delete 8 Penguin - Replace 8 with 15 Penguin - Replace 8 with 1

You may find that each shape has become very warped or that the dimensions of your document have increased tenfold! That’s the beauty of the randomness that is databending.

Blending Inkscape and Blender

One of the things I’ve always wanted to do is to work on an image in a 3D environment but then export the resultant image to an svg. Being the open source nut that I am my main weapons of choice are Blender for 3D work and Inkscape for vector. These programs have their advantages and their disadvantages. The main advantage they have over many similar programs is that they’re open source and free. They’re very capable products and are used quite widely and are being actively developed. In fact, Inkscape is getting ready to release version 0.47 (I’ve used a prerelease and it’s awesome)

For my task of exporting 3D models to SVG Blender falls slightly short because it doesn’t natively support this. There are a few plugins that have attempted to offer this and do well, but sometimes crash or give unexpected output. That, and for some users going through the hassle of finding the plugin might be too much.

The disadvantage Inkscape has is it’s handling of lots of nodes. The moment you hit around 10,000 nodes the program begins to noticeably slow down. For most simple logo work this isn’t a problem, but when you come to illustration and highly detailed artwork it gets in the way. This was the main thing stopping me from using the SVG that can be generated from Blender. To test it yourself, import an SVG into Blender and then export it as an SVG using either Pantograph or VRM. You’ll notice that it is now made up of about several hundred smaller shapes.

Before Import to Blender: 11 Objects, 124 nodes

Before Import to Blender: 11 Objects, 124 nodes

inkscapeblendertext

After Blender import: 2264 objects with 6792 nodes

This makes colouring or modifying the shape really hard. Sometimes, in Inkscape you can just highlight all of the shapes, go to Path > Union (Ctrl + Shift + +) to combine them all but sometimes it makes it all disappear.

Luckily there is a technique to get this to work. If you import an SVG be sure to apply the Ninja Decimate modifier to the shape and drag the Ratio slider down (thanks to heathenx for this tip). Please note that this only work if you shape is a mesh, so hit Alt + C and convert your shape to a mesh.

If you’re working with text you may notice that after you’ve applied the Decimate modifier and dragged the slider down all of your text looks… crap.

screenshot_15_01:24:52

This is because the modifier is treating the text as a whole shape and thus reducing the face count of the whole combine shape rather than treating each character as an individual shape. You need to separate them. To do this, in Edit mode (hit TAB to get there) hit P (don’t do this in normal mode. It runs the Blender game engine and will most likely crash Blender).

Separate menu

Separate menu

From the Separate menu choose All Loose Parts and now each character is an individual shape. Now, if you run the Decimate modifier on each individual character you have a lot more control over its final appearance.

After Modifications: 324 objects, 972 nodes

After Modifications: 324 objects, 972 nodes

I exported the text to an SVG using VRM but you can do so using that script, Pantograph or the 3D Polyhedron extension in the Render extension menu in Inkscape. Here’s another render showing exactly why you might want to go through this procedure:

70 objects, 36601 nodes

70 objects, 36601 nodes

After basic modification (text from an upcoming project)

After basic modification, 4042 nodes (text from an upcoming project)

The Decimate modifier has its limits. Where a human would simply combine two big triangular faces into a rectangle the modifier sometimes misses this and just over-complicates things and sometimes completely destroys a shape. This is where I ask the Blender community for assistance. Is there a script to easily reduce the face count of an object?

I think native SVG export is something that Blender should work towards in the future. There’s just too many possibilities and opportunities!