Get Started With Sodipodi

A Beginners Tutorial on Creating Graphics

Document Version: 0.1 Project: UNESCO/DigiArts Contributed By: Sarai, India. (sarai.net) Author: Niyam Bhushan (niyam.com) Date: 25 February 2004 Copyright: Niyam Bhushan 2004 License: Free Documentation License FDL (gnu.org) Availability: The latest version of this ongoing document could possibly be found at the websites of DigiArts, Sarai, Niyam, or via web-search engines. Software: Sodipodi Platforms: GnuLinux, Windows Category: Vector Illustration, SVG-authoring Version: 0.31.1 or higher Website: www.sodipodi.com Level: Beginner

What Does Sodipodi Do

A free graphics software, Sodipodi provides a playful and fun-filled interface for creative and non-techie people to author stunning graphics, logos, and illustrations. Anything you see drawn in Sodipodi is an independent and editable object, called a vector shape. You can scale, rotate, or modify every shape, fill it with colors, stroke and color its outline, and stack it above or below other shapes. So let's get started. For our project, we'll create a music CD cover. Download the latest version of Sodipodi from the webaddress mentioned above, follow the instructions and install the software. Finally, launch the application. What do you see? The Sodipodi tools palette. Click on the 'New' icon, which is marked here by the orange circle at the top-left.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 1

First Steps
[Step 01: Left] A white pasteboard, containing a canvas sheet instantly pops up on your screen. The canvas sheet is usually A4 or US Letter size, depending on your settings. Notice the Little right triangle at the top-left of the new document, marked in an orange circle. Click and hold down the mouse on this. A menu pops up on the screen. [Step 02: Below] Click on the 'View' menu, and then 'New Docked Toolbox.'

[Step 03: Below] You guessed it. The tools palette neatly docks to the document window, for a clean, uncluttered interface. You can safely close the first tools palette if you wish. Note the palette is divided into the 'File', 'Edit', 'Object', 'Selection', 'Draw', 'Zoom', and the 'Nodes' section. Click on the '1:1' icon in Zoom for an actual size view.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 2

[Step 04: Left] Change the canvas size to that of a CD. Right-click anywhere on the pasteboard. The complete Sodipodi menu pops-up instantly under the mouse cursor. Click on Dialogs>Document. In the Document settings dialog, choose Centimeters as the unit, and type both width and height to 120.00. Your document window reflects the change.

[Step 05: Below] Create the semi-transparant green background. Click the rectangle tool in the Draw section of the toolbox, and drag across the diagonal of the CD canvas. Click the Fill tool, the one that looks like a paint bucket spilling paint. A dialog box reveals itself, offering color settings for the fill, stroke, and stroke style of the rectange. Click the Fill tab. Create the greenish tone by adding together lights of Red, Green, and Blue, in the values given below. The level of transparancy is called 'Alpha' and enter its value to make the rectangle semi-transparant.

[Step 06: Below] Create the Star. In the Draw section of the toolbox, click and hold down the Rectangle draw tool. A drop-down menu appears, revealing tools to draw ellipses, stars, and spirals. Select the star tool, click in the centre of the CD canvas and drag in any direction to draw a nice, huge, star. You need to color it into a semitransparant shade of yellow. Using the Black Arrow tool in the Draw section, click once on the star. This will select it. Then, just like in Step 5, click on the Fill tool, and this time enter the following values: Red .90, Blue .85, Green .31, Alpha .36, in the fill tab. For convenience, we can also write this as R.90+G.85+B.31+A.36.

[Step 07: Right] Let's draw another star, this time even bigger than the previous one, using the same steps as in Step 06. Again, select it with the Black Arrow tool, and this time enter the following values for the Fill color: R.90+G.05+B.31+A.60. This gives us a semi-transparant salmon-pink color. But the star is stacked over the previous one, and we wish to send this behind the smaller star. So keeping the bigger star selected, right-click anywhere on the screen, and click you mouse sequentially on Selection > Order > Lower. The bigger star is stacked behind the smaller star. Notice how the transparancies inter-play.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 3

Scratch Some SVG

[Step 08: Below] The big star needs nine sides. Fortunately for us, Sodipodi remembers each shape as an independent object. So select the big star, rightclick anywhere and from the pop-up menu, choose Dialogs > XML Editor. A new pane displays on the screen. This is how Sodipodi really understands your graphics: through the left brain. You will find a highlighted entry on the left. That's your big star. On the right, click on the text-entry 'sodipodi:sides 5' which obviously means this star has five sides. In the bottom right, the number '5' is displayed. Select it and just type '9'. Then click the strange, upside-down enter key button on the right. Your star is reborn with nine sides, at faster than the speed of light.

Pause. You need to understand that what Sodipodi really does, is create tagged text. Much like the web's HTML, or its more sophisticated cousin, XML. Creating graphics as a sequence of text commands is quite cool. Browsers can display such images, no resolution loss occurs, and graphics can be scaled and transformed in myriad possible ways with no overhead. This special format is called SVG, which stands for Scalable Vector Graphics. These images work on Pcs running Windows, GnuLinux, on Macintoshes, and even handheld devices and cellphones. Welcome to the future. Find out more at www.svg.org. Thanks to Sodipodi, as a designer you need not have to know anything about SVG. Just follow your creative juices and continue working on the CD album cover. Let's add a third star in the centre. It has R.90+G.85+B.31+A.36. Draw a circle that encompasses this new star, but this time, let us add the RGBA values in the Fill tab directly. RGBA=ffe20038. These are called Hex values. Just think of them as a shortcut for writing really long sequences of numbers in computers.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 4

Spiral Into Calligraphy

[Step 09: Left & Below] By now the imagery looks close to the screenshot here. Time to feel a little playful. In the Draw section of the tools, choose the Calligraphic tool. Randomly drag around on the screen, both at slow and fast speeds, to get a feel of how weird calligraphy feels with a mouse. Let's try that huge spiral. You'll note that how much you try, you'll tend to get it lopsided. So here's a tip. Let us actually draw a nice, perfect, geometric spiral, using the

Draw Precise Curves

[Step 10: Below Left] Let's play connect-the-dots. From the Draw tools, select the Pen tool. This is a strange pen, for you don't drag it to draw. You just click on anchor dots or points across your drawing, and Sodipodi joins them with straight lines. Should you click and drag a point, Sodipodi extends a 'rubber band', sort of like drawing a catapult. Click on the next dot, and you get a precise curve between the two dots. But you've got to try it to experience this.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 5

[Step 11: Right] Study the image on the right. Using the Pen tool, just click on points 1, 2, and 3, and watch straigh lines join the dots. Click AND drag point 4 to point 5. You will notice the birth of a 'rubber band.' Remove your finger from the mouse button, glide the mouse over to point 6, and click. There, you just got the first, precisely-created curve in your graphic. Don't worry if the sand-dune shape gets filled or has a heavy stroke. We will just adjust the fill and stroke colors in a minute.

Let's adjust the curve between points 3 and 4, so that the curve tides and ebbs gently into 4, smoothly rising again to meet point 6. First, make sure the sanddune is selected by clicking on it using the Black Arrow pointer. Then, arm yourself with the Node tool, circled in orange here. The moment you click the Node tool, the sand-dune glistens with tiny diamondshapes marking the anchor points you clicked earlier. Just click in the centre of point 3, and drag to pull out a 'rubber band'. Should the point start moving, release the mouse immediately, press control+z or undo, and try again. Pull the rubber band in the direction and length indicated in the earlier graphic. [Step 12: Left] Color the sand dune shape. Open the Fill Tool, and in the Fill tab, type the following RGBA value: c9279929. Click the Stroke Paint tab of the dialog box, and click on None, which is the square with a large X sign.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 6

Colors, Inks, Hues

In the world of graphic design, color is king. Most designers work with colors for video displays such as monitors. Colors in this medium are created using Red, Green, and Blue video light rays, added in various strenghs to form colors. We have been creating colors using RGB. Designs for the print medium need colors defined as percentages of inks, usually Cyan, Magenta, Yellow, and Black. Such colors are called CMYK colors. But most of the time, designers just conjure up colors to form interesting combinations. At these moments, choosing a color for its Hue, how deeply or richly saturated it looks, and how bright or dull or soothing it looks, is far more important. This is called the Hue, Saturation, and Brightness model, or just HSB. Some also call it HSV, where V stands for Value. Do a web-search on the word 'HSB color model' to find out much more about HSB than is possible in this tutorial. Let's play with colors.

[Step 13: Above] Choose the rectangle drawing tool. Just drag out the four horizontal rectangles and one vertical rectangle. Using the Black Arrow pointer, shift-click on each one to form a group. Click on the Fill tab button. Click and hold down the pointer on the Color Mode pop-up menu in the Fill tab. Choose HSV. Type in the following values. Hue = 0.01, Saturation = 1.00, Value = .5, Alpha = .14. Deselect the rectangles by clicking anywhere. [Step 14: Above] Choose the circle drawing tool. Drag out the large, orange circle. In the Fill tab, choose CMYK. Key in the following value for the selected circle: Cyan =0, Magenta = .47, Yellow = .9, Black = .08, Alpha = .36

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 7

Text As An Element of Design

[Step 15: Below] Let's give our imaginary music artists a name. I recommend 'Under Ground Chalisa'. In the Draw section, click on the Text tool. Click the lower left of the image and type the name. Don't worry if your text looks too big or too small. Once done, immediately click on the 'Text and font settings' button in the Object section of the Toolbox. A Text properties dialog box opens up. Note the text field, marked with a large orange dot. You could type or rephrase your text here if you wish. Make sure the text is highlighted here. Choose Courier As the font family, Bold as the style, and 36 points as the size. Typesetting is usually measured in Points, where 72 points make an inch. Do note the options for Alignment as well as for Orientation, which is important for several scripts of the world.

Use the Black Arrow pointer to move your text to the correct position. The pink background actually belongs to the 'sand dune' shape we built a few steps ago. Just select the background Green wash and resize it, pushing it up such that it touches the top of this text. The pink will automatically come into view. The text is colored black with full opacity. Repeat the steps for text entry, to typeset 'Air Pressure' the album-name. 'Air' is set in Helvetica Bold, 72 points. Its alpha transparancy is set at .69. 'Pressure' is set in Helvetica Bold, 56 points. Its transparancy is at .80. To rotate the text, select it with the Black Arrow pointer. In the Object section, click on the Rotate button a couple of times to get the correct orientation.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 8

Finishing Strokes
[Step 16: Below] Take the pen tool and in three smart clicks, draw that thin sharp red line that runs from Air Pressure to Under Ground Chalisa. Click Fill button, choose None as the fill color, by clicking on the first box that has that X sign. Click on Stroke Paint and create a bright Red color. In the Stroke Style tab, type in a width of .70 points. Ensure the Line pattern is a solid horizontal line. The design needs some zing! Draw a huge semi-circle curve. You can do this in two clicks. Click and drag a rubber band towards the horizontal right. Let go of the mouse button, find a position exactly vertically underneath the first point. Click and drag a second rubber band horizontally to the left. A curve is formed.

Remove any fill color from this curve. In the Stroke Paint tab, color it to RGBA= 551601ff. Finally, move to the Stroke Style tab. Give it a generous width of 6.26 points, and choose the dotted square pattern for the line, which is the fourth in the pop-up menu. You get neat looking squares on a curved path. To create a more interesting look, copy and paste this dotted curve. Then rotate it by 90 degrees, change the color. Select the two curves, copy and paste them. Then rotate them by 180 degrees. You soon have the whole CD cover ornamented in an aboriginal style of art. Move the curves around to position the dots so they do not distract from the text.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 9

Importing Photographs and Bitmaps

I can almost hear the music of this imaginary band in my head. The CD album cover tries to evoke that music. The music is rich with textures of ambient sounds in the background. Here's what I have in mind. I've got this photograph I took a few months ago of a slab of stone at a temple, with an ancient script carved on it. Have touched it up in Cinepaint, another free software used for professional-quality image-editing, and saved the file as a JPG file.

[Step 17: Below] Remember all the graphic elements in our design are semitransparant. We are reaching the moment of truth. Let's bring in the above image and place it right at the back of all these semi-transparant graphic shapes. Right-click anywhere to bring up the Sodipodi menu. In the File menu, click on import. Bring in any digital photograph into the CD design. Alternatively, you could create your own painted textures in software such as GIMP or Cinepaint. Right-click the image, and in the pop-up menu use the option to send the image to the back of all elements. See Step 7 for reference, when we sent the bigger star stacked to the back of the smaller star. Let the image peek through in some places. Select the green wash, and reshape it to pull in towards the albumname and band-name. Why just JPG files? You can similarly place a PNG file (Portable Network Graphic), such as the alternative GNU head that goes rather nicely with this design. Our CD album cover design is ready at last.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 10

Much More To Sodipodi

Export PNG: You may want to output your images as simple pixel-based bitmaps for browsers or backgrounds. Use the File menu's export feature. Plain SVG: By default, Sodipodi has its own extended specifications for SVG. For the broadest range of compatibility, use the File menu's Save As feature and choose 'Plain SVG.' Gradients: You can fill gradients or tones of colors that move from one to the other, as fills. Unfortunately, there is no way of filling patterns such as leaf motifs or simple geometric shapes, into other larger shapes. Grids and Guides: To align elements across a canvas, click and drag a guideline from the horizontal or vertical ruler. You get an on-screen, nonprinting hairline that you could use as a guideline. Animated SVG: The specification of SVG allows it to be animated as well as interactive, much like Flash movie files. However, Sodipodi natively offers no feature yet. You could type in the code manually into the SVG XML editor, or use a text editor to add scripts into the SVG data structures. Hiding Elements: Often, too many design elements make it difficult to select underlying elements, or to conveniently transform existing shapes. Right-click any item, and from the pop-up, choose Item Properties to select how you wish to hide the element. Tips & Techniques: The sodipodi website mentions some interesting tips and techniques briefly, including how to issue print commands without running the software in graphics mode. Clip-Art: The site has a growing collection of clip-art, including national flags from across the world. Text To Curves: You can easily convert typed text and headlines into editable curves to further tweak the shapes, or to create custom logotypes. Nodes: The Nodes section, at the bottom of the Toolbox, offers the most exhaustive set of tools to further refine and tweak any curve. With the tools here, you can add or delete anchor points, convert sharp corners into smooth curves or vice-versa, and do lots more. Companion Software: I tend to use Sodipodi with atleast two other free graphics software under GnuLinux. The first is Sketch. This is invaluable for translating graphics back and forth into Postscript, EPS, or even PDF through other software such as Ghostscript, as well as to raster images. Inkscape is a fork of Sodipodi, which means it uses the same code base, but attempts to make the interface even more intuitive.

GE T S TA RTE D W I T H SO DI PO DI B y N i ya m B h u sh a n f o r S ar a i. n e t Fe b 2 0 0 4 11