How To Create A Saturn Infographic With Blender and Inkscape PDF

08/11/2018 How to Create a Saturn Infographic With Blender and Inkscape
How to Create a Saturn

Infographic With Blender and
Inkscape
by Kelvin Song 12 Mar 2015 Difficulty: Advanced Length: Long Languages: English
Infographics Inkscape Illustration Blender Graphic Design Science

Vector
This post is part of a series called Astronomical Graphic Design.

Amazing Timelapse of Exploding Planet Illustration
Create a Vector Space Composition in Illustrator
What You'll Be Creating
In this tutorial, I will show you how to create this “photo-realistic” cutaway Saturn illustration
in pure SVG. We will use the open source 3D graphics software Blender to produce a
physically shaded render of the planet, which we will use as a base to reproduce the
image entirely in SVG vector. You will learn how to replicate 3D shading and bounce
https://design.tutsplus.com/tutorials/how-to-create-a-saturn-infographic-with-blender-and-inkscape--cms-23257 1/65
lighting with SVG gradients in Inkscape, draw the planet’s transparent rings with colors
sampled from NASA images, create an aurora effect over the planet’s north pole, and
much much more.
1. Modeling Saturn in Blender

Step 1
If you don’t already have it, download Blender from blender.org (current version at the time
of writing is 2.73a). Blender is an incredibly powerful 3D app which we will be using to
render a bitmap image of the Saturn illustration we will be creating.
This tutorial will assume some basic knowledge of the workings of Blender, as well as
Inkscape. If you need a refresher, check out these Blender tutorials, or these Inkscape
ones.
You will also need the Blender SVG export script, which you can download here. (The
export script was written by a member of the Blender community and allows us to export
the 3D vector geometry in Blender to 2D SVG vector geometry.) Copy the script into
the 2.73/scripts/addons directory in your Blender install.
Step 2
Activate the script from within Blender in the Preferences window by checking the box
next to the script (the script will be found under the Import-Export tab).
Step 3
Modeling the interior layers of Saturn involves creating concentric spheres of different
sizes in Blender. Use smooth-shaded UV spheres with a radius of 1, and a high UV
resolution (128 segments × 64 rings is probably sufficient). The scaling is dictated by how
big the layers in the actual planet are. There are two ways this can be done. If you know
the actual mile radius of the layer, you can just input that into the sphere’s scaling factor
(here 0.063 corresponds to 6,300 kilometers, the radius of the Saturn core).
You might also set the scaling of the sphere to the Saturn radius (60,268 km) and then use
the Delta Scale to set the size in terms of planet radii, given below.
Liquid hydrogen layer 0.890 planet radii

Helium rain 0.553
Metal hydrogen 0.483
Icy core 0.225
Rocky core 0.104
Step 4
Next we parent all the inner spheres to the main Saturn sphere.
This is important because if we squish or squash Saturn, or rotate it or something, the

insides will go along with it. We need to do exactly this because Saturn is not actually a
sphere—it’s an oval, as its polar radius is only 54,364 km, compared to 60,268 km for its
equatorial radius. If you set the Z Scale of the Saturn object to 0.54364, then the rest of
the planet will conveniently scale by that amount too.
Step 5
Next we create the cube which will outline the cutaway section in the image. Move it so
that its corner sits on the origin. You might find it helpful to set the cube to a wire display so
that you can see Saturn inside.
Then just go through each sphere and cut away the section inside the cube with
a Boolean modifier.
Step 6
After color-coding each layer with the colors you want each layer to be in the final image,
you might notice a problem. The layers overlap each other.
Fix this by creating copies of each sphere (except for the largest and the smallest) without
the Boolean modifiers. (You might want to move them to a different Blender layer so that
they don’t clutter your view). Then, give each original sphere a second Boolean modifier
against the next smallest copy sphere. This creates hollow, disjoint planet layers that don’t
bug out in the viewport.
Finally give each original sphere an Edge Split modifier to give the corners sharp edges.
Sometimes the Boolean modifiers will simply refuse to work properly (3D Booleans are
notoriously fussy), in which case you might just want to perform the cutaway operation on
the mesh manually (this should be possible if you set the UV resolution of your spheres to
a multiple of four).
2. Rendering Saturn in Blender

Step 1
The next step is to texture Saturn. Making sure that you’re in the Cycles Rendermode,
create the following node setup.
For the image texture, use the image which can be found here, courtesy of Björn Jónsson.
Step 2
The texture will show up as a homogenous yellow in the viewport (Material mode). This is
because we need to UV map Saturn so that Blender knows which parts of the texture to
apply to which parts of the 3D sphere. Enter XZ orthogonal view (1 5 on the number pad)
in edit mode, select all the faces (A), and unwrap the mesh under Sphere
Projection mode. Set Direction to Align to Object and Align to Polar ZY.
The hard part is scaling the UV map (found in the UV/Image Editor) to the rectangular
region overlaying the image texture. Scale to Bounds in the Sphere Projection panel will
handle the vertical dimension, and for the horizontal you'll have to spend some time
adjusting it until it looks right.
Once you’ve completed the UV unwrap, you should see a textured Saturn in the viewport.
Step 3
The next step is drawing all the guidelines for the rings and moon orbits. Create a bunch
of Bezier Circles and scale them according to your scale scheme to mark out important
transitions in Saturn’s rings, as well as its moons’ orbits, if you want. The radii are listed
below.
D–C ring border 74,500 km

Colombo gap 77,870
Maxwell gap 87,491
C–B ring border 92,000
B–Cassini 117,580
Cassini–A 122,200
A ring border 136,780
F ring 140,220
Janus and Epimethius 151,500
Mimas 185,400
Enceladus 237,900
Tethys 294,600
Dione 377,400
Rhea 527,100
Titan 1,221,900
Hyperion 1,481,000
Step 4
The rings are simple to model, just a flat mesh formed from two circles. Add a UV
seam between two arbitrary panels in the ring object.
The texture I used I modified from a public domain NASA image. Just take a 1px-high
cross crop of the bottom of the ring and scale it vertically to some arbitrary height so you
can see the pattern.
The rings are tricky to UV unwrap, but there are many ways to get it right. All you need to
do is make sure each face spans some vertical part of the radial texture, in its horizontal
entirety. Personally I used the Follow Active Quadsoption and straightened out the sides
with S X 0, but you could also unwrap each face individually and have them each take up
the entire image space, overlaid on each other. Take care that the texture is oriented in the
right direction.
Then scale the inner and outer circles until the features on the texture agree with the
guidelines we marked out earlier.
Step 5
Create a material for the rings. The node setup here will make the dark parts of the rings
transparent, which will allow them to cast shadows (we need to know where the shadows
will land when we convert to SVG).
Step 6
Now we set up our Blender scene to render Saturn. Add a sun lamp to provide
illumination (a Strength of 3 and a Size of 0.01 is recommended).
And position the camera to capture the scene. This is the most important step because it
will set in stone the angle that Saturn will be drawn from in our SVG illustration. I used
a Focal Length of 45 and some shift to position Saturn within the camera frame for a
more pleasing composition. Make sure Depth of Field is turned off (Size = 0).
Step 7
You might want to add a fresnel atmospheric effect to Saturn (this gives the edge of the
planet a blue tinge). You do this by duplicating the Saturn object, removing any Boolean
modifiers and manually deleting the cutout sector. Give it a slight Delta Scale to keep it
from overlapping the Saturn mesh, and set it to a wire display.
Here’s the node setup I used. The Light Path node is there to prevent the atmosphere
from casting unsightly shadows.
This should yield you a nice render of the planet. While we’re going to use it as a base for
an SVG drawing, you could also use the 3D model itself in a 3D animation project if you
want.
Step 8
There are several other images we need to generate. We need to make Open
GL (viewport) renders of the various guidelines we laid down (Render > Open GL Render
Image).
We also need to generate a plain texture render of Saturn, without any Booleans or other
elements (make sure you saved the original file though). Change the material shader
to Emission (Strength = 1.0) to make the Saturn object shadeless and render it at the
same size as the full-scene render.
Step 9
Finally we have to create an SVG render of the interior layers. Remove all the Booleans
and other modifiers from the interior spheres, except the first ones, which cut the spheres
away from the cube object. The layers should overlap one another again. Then select the
interior faces and delete the round exteriors (Control-I, Delete).
Then select all the layer objects and export them to SVG geometry with the Export SVG
script we downloaded at the beginning. The plugin lives in the 3D viewport N-panel.
3. Texturing and Modeling Saturn in SVG

We now exit Blender and move to another piece of open source software, GIMP, to
process the Saturn texture we rendered in Step 2.8. GIMP can be installed in many
different ways, and comes pre-installed with some operating systems; this tutorial will not
cover how to install it.
Step 1
The only thing we actually need GIMP for is to produce a negative of the Saturn texture
render (Colors > Invert). Save and export the negative to a .png file.
Step 2
Next we import the negative into Inkscape. Inkscape will probably import the image at the
wrong size, so in the SVG source code panel, set its width and height to whatever the
image was originally.
Fit an SVG ellipse around the Saturn in the negative. This will serve as our clipping mask.
Step 3
To turn the negative texture into vectors, we use Inkscape’s Trace Bitmapfunction. Set it
to Colors; 8 scans is probably sufficient.
Inkscape will trace from lightest to darkest, stacking the scans. This is why we inverted the
texture, so that the black background (now white) would become the bottommost scan.
Turn the scans back to their true color by reinverting

them: Extensions > Color> Negative.
Step 4
You might want to optimize the scans a bit to reduce the number of stacked objects near
the edges, which can cause aliasing problems. Many parts of the lower-level scans are
covered by higher scans, redundancy that ought to be reduced if possible.
Step 5
Next we import the Saturn Blender render we made, in the same manner as with the
texture render. Drag and drop the SVG rendering of the layers into your workspace, over
the Saturn render. (Here, the bitmap render is above everything except the ellipse from
Step 3.2 and the SVG planet layer render).
The planet layers will almost certainly come in at the wrong size, so we have to scale them
to match the bitmap render.
Then we ungroup the layers completely, and run Path > Object to Path on all of them to
make them editable in Inkscape. It helps to run Path > Simplify to turn the polygonal
shapes into smooth wedges. Finally, turn all of their opacities up to 100% (they will
probably come in at 90%), remove strokes, and color them.
4. Shading Saturn
We will also be relying on the Blender render of Saturn we made to tell us how to shade
the planet in SVG.
But wait! Isn’t that cheating?
Of course not. It’s just like an acrylic painter laying down a grisaille layer, or a 3D artist
modeling from reference images. It helps us achieve a much better result than we ever
could free-drawing by eye or memory. Blender’s raytracer will tell us exactly how to shade
the planet so that it makes sense when we look at it; surely that’s easier and better than
simply guessing how the light falls.
Step 1
The highlit faces—the ones perpendicular to the sun in this image—are more or less
shaded completely flat. You can just use the eyedropper tool to retrieve their colors from
the render.
Step 2
The shadow faces are more complexly shaded. For the very thin layers, we can get away
with just using a linear gradient, sampling colors from the corresponding spots in the
render. Avoid sampling by simply clicking with the eyedropper. The render will likely be
very grainy, and sampling by clicking only takes color from a single pixel, so the color you
get might vary wildly. Instead, hold and drag the eyedropper over the region you want to
sample—doing this makes the tool average out all the pixels within a certain radius.
In the thicker faces, the color varies in two-dimensions—arc-wise and radially. Here we
shade the face radially only, sampling from the middle of the arc in the render. Accordingly,
we use a radial gradient to accomplish this shading.
Step 3
We will create the arc-wise shading by overlaying the base objects with transparencies.
These transparencies are a faint white at one edge, and transparent elsewhere, lightening
the shadow faces where they meet the other two faces (bounce lighting).
Note that the pink face gets tinted a brighter shade of pink at the edges, not white. Try to
avoid muddy gradients—the transparent stop still needs a color too. Also pay attention to
z-ordering; all of the transparencies are underneath the next-highest layer.
Step 4
The tangent faces (parallel to the direction of lighting) are simpler to shade. The thinner
layers can take linear gradients, just like in the shadow faces.
The thicker faces are shaded conically, which we can fake with a radial gradient, centered
off the face. Because the gradient needs to be steeper on one side than the other, we shift
the gradient focus (Shift-drag the square part of the gradient) closer to the steep side to
make an asymmetrical gradient.
Step 5
The core is simple enough to shade—just a radial gradient.
Step 6
As polish, add underneath each set of three faces a triangular shield of an intermediate
color (or an approximate gradient).
This fills in the “seam” between the three faces that make up each layer, preventing anti-
aliasing artifacts from showing up in the SVG.
Step 7
Next we shade Saturn itself. First group all the texture scans and clip them with a copy of
the bounding ellipse (Object > Clip > Set).
Step 8
Then we duplicate the ellipse and fill it in with a soft radial gradient that’s a faint blue on the
outside and transparent on the inside (remember that the transparent stop still has to be
blue!). This recreates the fresnel (inverted halo) atmospheric effect around Saturn. Make
sure it’s underneath the various cutaway shapes. Because the left side of Saturn in the
render appears to be bluer than the right, we shift the transparent center of the gradient a
little to the right to reflect this.
If you look closely at the render, you’ll notice that the planet appears to be ringed by a
sharper blue fresnel. We recreate this with a second ellipse, this one shaded by a steeper
fresnel gradient, and centered on the planet core (we couldn’t just add stops to the first
fresnel ellipse because its gradient wasn’t centered).
Step 9
Finally, take the last remaining ellipse and use a radial gradient to make it into a shadow
shader (black on the outside, transparent on the inside). Play around with the stops to
create a smooth falloff similar to the one in the render.
Consider making the radius of the shadow ellipse one or two pixels wider than those of the
underlying ellipses—this prevents the yellow edge of the planet from peeking out from
behind the shadow ellipse on the dark side of the planet.
However, since that still might happen at small sizes (faintly visible in the image below),
you should create a thin black collar around the disk of the planet to cover the artifact up.
The black collar will also help prevent aliasing on the lit side.
5. Creating Saturn’s Rings

At last, we come to the most spectacular part of this tutorial—creating Saturn’s rings.
Step 1
Using the Open GL render we made earlier, fit SVG ellipses around all the visible
transitions in the ring system. (Pictured below is a semi-transparent version of the Open
GL render overlaid on our SVG Saturn, with one ellipse fitted.)
This step is probably the most tedious part of this tutorial, because you will have to fit
probably two dozen ellipses. Consider color-coding them to distinguish different parts of
Saturn’s rings.
Step 2
Next, we use the ellipses to produce filled regions. To make a filled region, select two
ellipses, combine them into one object (Path > Combine) and reverse the direction of the
inner path (Path > Reverse) to make a hole. Use your artist’s judgment as to whether the
regions should be disjoint or stacked—areas with different hues should probably be

disjoint, while a region that is a brighter part of an adjacent region should probably be
stacked on that region. Most of your regions will probably be disjoint.
Step 3
Here comes the fun part—coloring Saturn’s rings.
How did I get the rings like that? I’ll show you.
First we need a good source to glean the colors of the rings from, as the ring texture we
used in Part II isn’t as attractive as some other photographed-textures of the planet’s rings.
I chose this NASA image as my source.
But you can’t just grab the eyedropper tool and pick from the reference image. That would
only give you an opaque color and part of the beauty of Saturn’s rings is their partial
transparency. So what we do instead is take the color from the ring reference, then
brighten them in color while simultaneously reducing them in transparency. This yields the
same color when viewed over black, but partial transparency over other backgrounds (like
Saturn’s planetary disk).
Do the same thing for every ring region you carved out.
In some regions, like the heavily banded B-ring, it makes sense to use an SVG stroke
outline to add additional complexity, but use stroke sparingly in the rings because it does
not get thinner at the top or bottom as it should.
The rings become very faint close to Saturn, creating beautiful transparency effects over
the planet.
Finally, we tune the opacity of the rings as a group by tweaking their group opacity (I used
63% opacity).
Step 4
We need to make the rings disappear behind the planet. We do this by combining the inner
edge from a copy of the black collar object with a rectangle the size of the page to make a
filled rectangle with a hole in it for Saturn.
Since the rings only disappear behind Saturn (not in front of it, obviously), we fill in the
bottom half of the hole.
Then set it as a clipping mask for the rings.
Step 5
The black collar might exacerbate the “seam” between the lit side of the planet and the
clipped rings.
Fix this by punching a “hole” in the black collar with a small transparency gradient (black
around the gradient, transparent inside it).
Step 6
Saturn casts a shadow on its rings. We create this shadow by adding a circle object to the
ring group, and using it as a canvas for a black–transparency radial gradient.
Step 7
The rings also provide illumination to the dark side of Saturn. As you can see in the render,
the bounce lighting casts two faint bands of light on Saturn, separated by a gap (from the
Cassini division, probably). First we make a single light patch with a radial gradient on a
copy of one of the blue fresnel ellipses. This gradient will have a very low opacity given the
faintness of the bounce lighting.
Then we make the dark gap with another gradient on an identical ellipse. This gradient is
transparent on both ends, but a faint black in a narrow band in the middle (shown below on
top of the cutaway sector, though it should actually be underneath). The ellipse the
gradient lives on should be reduced to an segment covering the left half of the planetary
disk, to prevent the dark band from showing up on the lit side of the planet.
This creates a subtle bounce lighting effect on our vector Saturn.
Step 8
Finally, just as Saturn shades its rings, the rings also shade the planet. Roughly trace the
ring shadows seen in the Saturn render, and color them accordingly with transparencies of
black.
Then give the shadow group a 1% gaussian blur and tuck it underneath the ring group.
6. Auroras and Moon Orbits

According to some sources, Saturn has some lovely pink auroras, which we can recreate
in SVG.
Step 1
First draw the surface footprints of the auroral rings.
Step 2
Then draw vertical sheets emanating from the rings. Give them gradients that make them
red at the bottom and purple at the top. The trick to making ray effects is overlapping these
sheets.
Step 3
Then just give the auroras a slight gaussian blur (3%).
Step 4
The auroras might not look that great at this point. That’s because they are not being
overlaid on the image with the right blend mode. Create a new SVG layer, and move the
aurora objects into it (right click > Move to layer…).
Then set that layer’s Blend mode to Screen. That makes it so that the light from the
auroras gets added to the colors underneath them, rather than replacing them.
Step 5
If you want to include moon orbits in your drawing, you can produce another Open GL
render, this time with a wider field of view (decrease the focal length), and fit ellipses to
that.
Step 6
You might notice that the area around the aurora is acting funny. That’s because the
Screen blend filter bugs out over transparent areas of the image.
We can fix that by simply adding in a black opaque background underneath the drawing.
Advertisement
Awesome Work, You’re Now Done!

In my final image, I added annotations, as well as small circles representing the moons.
You can see the finished SVG at Wikimedia Commons, where it now lives.
I hope you’ve enjoyed this tutorial! Check out some other planets I’ve drawn,
including Jupiter, Uranus, and Neptune, as well as the Moon. If you have any questions or
comments, please don’t hesitate to leave a comment below!
Extra Resources
If you're interested in getting some help with your infographics, Envato Studio has a great
collection of infographic design services that you might like to explore.

How To Create A Saturn Infographic With Blender and Inkscape PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Create A Saturn Infographic With Blender and Inkscape PDF

Uploaded by

Copyright:

Available Formats

08/11/2018 How to Create a Saturn Infographic With Blender and Inkscape

How to Create a Saturn

Infographics Inkscape Illustration Blender Graphic Design Science

This post is part of a series called Astronomical Graphic Design.

What You'll Be Creating

1. Modeling Saturn in Blender

Liquid hydrogen layer 0.890 planet radii

This is important because if we squish or squash Saturn, or rotate it or something, the

2. Rendering Saturn in Blender

D–C ring border 74,500 km

3. Texturing and Modeling Saturn in SVG

Turn the scans back to their true color by reinverting

But wait! Isn’t that cheating?

5. Creating Saturn’s Rings

regions should be disjoint or stacked—areas with different hues should probably be

Then set it as a clipping mask for the rings.

This creates a subtle bounce lighting effect on our vector Saturn.

6. Auroras and Moon Orbits

Awesome Work, You’re Now Done!

You might also like