Inkscape 0.48 Illustrator's Cookbook - Mihaela Jurković - E-Book

Inkscape 0.48 Illustrator's Cookbook E-Book

Mihaela Jurković

0,0
34,79 €

oder
-100%
Sammeln Sie Punkte in unserem Gutscheinprogramm und kaufen Sie E-Books und Hörbücher mit bis zu 100% Rabatt.

Mehr erfahren.
Beschreibung

Inkscape is an open source vector graphics editor with an intuitive user interface that has enough depth to make quality graphic designs with an attractive layout comparable to what you would make using Illustrator or CorelDraw. But choosing the right tool and the best approach to creating the desired effect can be challenging. Inkscape 0.48 Illustrator's Cookbook makes it super-easy for you to make your own vector-based graphics with the powerful Inkscape editor.
Inkscape 0.48 Illustrator's Cookbook provides you with the latest recipes to quickly create scalable vector graphics. Recipes in this book teach you about some of the most useful time-saving features in Inkscape accompanied by a list of keyboard shortcuts that you can easily memorize. In addition to covering use of Inkscape tools and their advanced features, examples from the recipes uncover solutions to common graphics problems.
The book starts off with familiarizing you with the tools and techniques in Inkscape that you can use to draw 2D shapes, calligraphic shapes, and 3D boxes easily. It then guides you through the most common color-changing steps performed in Inkscape along with some convenient procedures that can save your time when dealing with colors. It explains drawing using linear and radial gradients, which are irreplaceable, usage of clones to create interesting effects in illustrations, and live-path effects that can help you speed up constructing a shape and make the process more natural. You will learn how to make those tweaks on some of the ready-made filters, and in the final recipe we will create a filter from scratch. This practical book also contains recipes showing how to use Inkscape as a raster editor and how to achieve photo-realistic effects in Inkscape. For each important technique and skill, you'll see some simple recipes, then some more advanced recipes followed by an explanation of how Inkscape works to produce the desired effects in your illustrations.
By the end of this book you will be confident enough to create your own vector-based graphics with Inkscape.

Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:

EPUB

Veröffentlichungsjahr: 2011

Bewertungen
0,0
0
0
0
0
0
Mehr Informationen
Mehr Informationen
Legimi prüft nicht, ob Rezensionen von Nutzern stammen, die den betreffenden Titel tatsächlich gekauft oder gelesen/gehört haben. Wir entfernen aber gefälschte Rezensionen.



Table of Contents

Inkscape 0.48 Illustrator's Cookbook
Credits
About the Authors
About the Reviewer
www.PacktPub.com
Support files, eBooks, discount offers and more
Why Subscribe?
Free Access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Creating and Editing Objects
Introduction
Creating and editing 2D geometric shapes
Getting ready
How to do it...
How it works...
There's more...
Creating complex shapes in seconds with Star tool
Dotted spirals
Creating freehand and straight lines
How to do it...
How it works...
There's more...
Tapered lines using shapes in Pencil and Pen tools
Creating "lines" using the Calligraphy tool
Sketch mode fixing the path while drawing
Creating dots using Pencil and Pen tools
See also
Editing paths using the Node tool
How to do it...
There's more...
Symmetric and auto-smooth nodes
Deleting nodes
Using Simplify to smooth paths after creation
Node sculpting
Path direction
See also
Creating paths using the Pen (Bezier) tool
How to do it...
How it works...
There's more...
See also
Creating smooth paths with Spiro Spline
How to do it...
How it works...
See also
Creating calligraphic shapes
How to do it...
There's more...
Erasing using Calligraphy tool
Calligraphy presets
Hatchings using Calligraphy tool
Changing calligraphy path colors
See also
Using the Eraser tool
How to do it...
See also
Creating and editing 3D boxes
Getting ready
How to do it...
How it works...
There's more...
Isometric projection and 1, 2, and 3-point perspectives
See also
Creating and editing text
How to do it...
How it works...
There's more...
Flow text into frame
Text on a path
Clipping
How to do it...
How it works...
There's more...
See also
Masking
How to do it...
How it works...
There's more...
See also
Path operations
How to do it...
There's more...
Inset and Outset
Dynamic Offset
Linked Offset
See also
2. Editing Colors
Introduction
Changing fill and stroke color using a palette
Getting ready
How to do it...
How it works...
There's more...
Changing color using the Fill and Stroke dialogue window
See also
Making objects partially transparent
Getting ready
How to do it...
How it works...
There's more...
See also
Creating linear gradients
Getting ready
How to do it...
How it works...
There's more...
Gradient through multiple objects
Gradient repeat
Moving gradients along with objects
Gradient sharing
Smoothing out abrupt color changes simulating non-linear gradients
Reverse gradient orientation
Remove unnecessary stops from complex gradients
Editing gradients using other tools
See also
Recreating HAL 9000 using radial gradients
Getting ready
How to do it...
How it works...
There's more...
See also
Patterns
Getting ready
How to do it...
How it works...
There's more...
Moving patterns along with objects
Pattern edges visible
Clipping bitmaps using patterns
See also
Picking and assigning colors with the Dropper tool
Getting ready
How to do it...
How it works...
There's more...
Inverse picked color
Copy color under cursor
Adjusting hue, lightness, saturation, and stroke width using Color Gestures
Getting ready
How to do it...
How it works...
There's more...
Different color icon sets using RGB Barrel
Getting ready
How to do it...
How it works...
There's more...
See also
3. Speeding Up Your Workflow
Introduction
Autosaving documents
How to do it...
How it works...
There's more...
Exporting to formats other than SVG
Designing plate rims using Layers
How to do it...
How it works...
There's more...
XML editor as textual layers dialog
Blend modes
Geometric illusions using Grids
How to do it...
How it works...
There's more...
Anti-aliasing and snapping to pixel grid
Axonometric grid
See also
Creating a simple flashlight using Guides
How to do it...
How it works...
There's more...
Creating guides from objects
See also
Creating a stylized flower using Snapping
How to do it...
How it works...
There's more...
See also
Leaflet design using Align and Distribute
How to do it...
How it works...
There's more...
Align and Distribute nodes
Rows and Columns
Creating your own custom color swatches
Getting ready
How to do it...
How it works...
See also
Creating your own color palette
Getting ready
How to do it...
How it works...
There's more...
See also
More time-saving tips
The Notification region in the Statusbar
Space bar to switch between Selector and other tools
Panning and zooming using the mouse wheel
Paste in place
Paste style
Paste size
Stamping copying objects while dragging them across the screen
Showing/hiding open dialogues
Hiding everything except dialogues
Changing the focus from dialogue to canvas
Toggling display modes
Importing drawings from OpenClipArt
How to do it...
There's more…
4. Creating and Editing Clones
Introduction
Drawing clock dial markers using clones
How to do it...
How it works...
There's more...
Relinking clones
Copying clones between documents
Unlinking clones
See also
Drawing a colorful grid of tiled clones
How to do it...
How it works...
There's more...
Use saved size and position of the tile
See also
Changing icon colors using tiled clones
Getting ready
How to do it...
How it works...
See also
Drawing clock dial markers using tiled clones
How to do it...
How it works...
See also
Creating halftones using tiled clones
How to do it...
How it works...
See also
Creating a bokeh effect using tiled clones
How to do it...
How it works...
See also
Creating a kaleidoscopic pattern using tiled clones
Getting ready
How to do it...
How it works...
See also
Drawing a tree with cloned leaves using the Spray tool
How to do it...
How it works...
There's more...
See also
Clipping with clones
How to do it...
See also
5. Live Path Effects
Introduction
Bending paths
How to do it...
There's more...
Bending groups
Stacking LPEs
Removing Path Effects
See also
Using Pattern Along Path
How to do it...
How it works...
There's more...
Pattern along Path extension
See also
Using Envelope Deformation
How to do it...
There's more...
Envelope extension
See also
Interpolating sub-paths
How to do it...
There's more...
Interpolate extension
See also
Stitching sub-paths
How to do it...
There's more...
See also
Creating gears
How to do it...
There's more...
See also
Creating hatches (rough)
How to do it...
See also
Sketching shapes
How to do it...
How it works...
See also
Constructing grids
How to do it...
See also
Creating rulers
How to do it...
See also
Creating knots
How to do it...
See also
Generating VonKoch fractals
How to do it...
There's more...
See also
6. Extensions
Introduction
Setting Color Markers to Match Stroke
How to do it…
There's more...
Object to markers
See also
Using Whirl
How to do it...
How it works...
There's more...
Adding nodes
See also
Rendering 3D polyhedrons and wireframe spheres
How to do it...
How it works...
See also
Rendering barcodes
How to do it...
Rendering calendars
How to do it...
There's more…
Using Render Grid, Cartesian Grid, and Polar Grid
How to do it...
How it works...
See also
Rendering spirographs
How to do it...
How it works...
See also
Rendering L-systems
How to do it...
How it works...
See also
Rendering functions and parametric curves
How to do it...
How it works...
See also
Rendering printing marks
How to do it...
How it works...
See also
Playing "connect the dots" with Number Nodes
How to do it...
See also
Creating irregular edges
How to do it...
How it works...
There's more...
See also
7. SVG Filters
Introduction
Blurring
How to do it...
How it works...
There's more...
See also
Creating irregular edges using filters
How to do it...
How it works...
There's more...
See also
Using lighting effects
How to do it...
How it works...
There's more...
See also
Creating a red wax seal
How to do it...
How it works...
There's more...
See also
Creating a brushed steel effect
How to do it...
How it works...
See also
Creating a water surface effect
How to do it...
There's more...
See also
Filtering all objects in a layer
How to do it...
How it works...
See also
Creating your own filter from scratch
How to do it...
How it works...
8. Putting it All Together
Introduction
Creating a wallpaper
How to do it...
How it works...
There's more...
See also
Exporting a wallpaper in different formats
How to do it...
How it works...
There's more...
See also
Hatching over a photo using the Calligraphy tool
How to do it...
How it works...
See also
Creating a coloring book using the Paint Bucket tool
Getting ready
How to do it...
How it works...
There's more…
Growing and shrinking the region
The Paint Bucket and strokes
The Paint Bucket and gradients
Filling noncontiguous regions
Constrain fill region
See also
Rail sleepers using markers
How to do it...
How it works...
There's more...
See also
Creating a woven straw mat
How to do it...
How it works...
See also
Assembling a modern chair using the 3D Box tool
How to do it...
There's more…
See also
Creating a flow chart using connectors
How to do it...
How it works...
There's more…
See also
9. Raster and Almost Raster
Introduction
Exporting to PNG with different dpi
How to do it...
How it works...
There's more...
Removing the Alpha channel
Sharp edges with the PixelSnap extension
Extracting embedded images
See also
Importing raster images of different dpi
How to do it...
How it works...
There's more...
Make a Bitmap Copy
See also
Isolating part of a raster image
How to do it...
How it works...
There's more...
See also
Using raster extensions
How to do it...
How it works...
There's more...
See also
Creating gradient meshes
How to do it...
How it works...
See also
Painting a mosaic using the Tweak tool
How to do it...
How it works...
See also
Tracing bitmaps
How to do it...
How it works....
There's more...
SIOX foreground selection
Autotrace
See also
Manually tracing a red wax seal
How to do it...
How it works...
See also
Creating a photorealistic mobile phone
How to do it...
How it works...
There's more…
See also
10. Web Graphics Preparation
Introduction
Creating "Aqua" style buttons
How to do it...
There's more...
See also
Creating a reflection effect
How to do it...
How it works...
See also
Creating curled stickers
How to do it...
See also
Creating a golden award with a ribbon
How to do it...
How it works...
See also
Repeating backgrounds using Tiled Clones
How to do it...
How it works...
There's more...
See also
Creating a button to use with the CSS Sliding Doors technique
How to do it...
How it works...
There's more...
See also
Creating rollover images
How to do it...
How it works...
See also
Creating small icons and favicons
How to do it...
See also
Creating a 960 Grid System template
How to do it...
How it works...
See also
Creating a web page mockup
How to do it...
See also
Slicing a web page mockup for website use
Getting ready
How to do it...
There's more...
See also
11. SVG in Websites
Introduction
Creating an interactive map for a web game
Getting ready
How to do it...
How it works...
There's more...
See also
Creating an editable business chart
How to do it...
How it works...
There's more...
SVG JavaScript chart libraries
See also
Creating a navigation menu
How to do it...
How it works...
See also
Creating an interactive physics simulation
How to do it...
How it works...
See also
Creating a slideshow presentation with JessyInk
Getting ready
How to do it...
How it works...
There's more...
Inkscape book slideshow
See also
12. Draw Freely
Introduction
Compiling the document metadata
How to do it...
How it works...
Command-line interface (CLI)
Getting ready
How to do it...
How it works...
There's more...
Shell mode
See also
Compiling development builds on Linux
Getting ready
How to do it...
How it works...
There's more...
Windows precompiled snapshots
Mac OS X Snapshots
Modifying an existing extension Darker extended
Getting ready
How to do it...
How it works...
See also
Creating an extension object guides
How to do it...
How it works...
See also
Index

Inkscape 0.48 Illustrator's Cookbook

Inkscape 0.48 Illustrator's Cookbook

Copyright © 2011 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2011

Production Reference: 1180411

Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK.

ISBN 978-1-849512-66-4

www.packtpub.com

Cover Image by Asher Wishkerman (<[email protected]>)

Credits

Authors

Mihaela Jurković

Rigel Di Scala

Reviewer

Issa Mahasneh

Acquisition Editor

Dilip Venkatesh

Development Editor

Hyacintha D'Souza

Technical Editors

Vanjeet D'souza

Conrad Sardinha

Copy Editor

Neha Shetty

Indexer

Hemangini Bari

Editorial Team Leader

Akshara Aware

Project Team Leader

Priya Mukherji

Project Coordinator

Jovita Pinto

Proofreader

Aaron Nash

Production Coordinator

Kruthika Bangera

Cover Work

Kruthika Bangera

About the Authors

Mihaela Jurković is the owner of a small Croatian web development shop. Drupal, Inkscape, and Linux are the most common words in her open source dictionary. In addition to being a friendly ghost on the Inkscape forum she also enjoys photography, hiking, TED talks, and lolcats.

Rigel Di Scala discovered computer graphics on a Commodore VIC-20 as a young child. Before going insane trying to render artistic landscapes using only the limited character set of his primitive 8-bit computer, he upgraded to a CBM Amiga 500 and started creating his first bitmaps with Dan Silva's Deluxe Paint II.

During his college years he started working part-time as a Web developer and consultant for several institutions and companies, and later as a system administrator, journalist, and editor in the computer games industry.

Today he works as a web application developer for an IT company based in Milan. He promotes and uses open-source technology exclusively in his projects. Inkscape is his tool of choice for developing vector graphics.

In his free time, he likes to freeclimb, skydive, and read Reddit.

I would like to thank my family for their constant support in everything I do.

About the Reviewer

Issa Mahasneh is an independent open source consultant with relevant experience in web development and design using open source technologies.

Issa got a B.Sc. in Computer Science from the Jordan University of Science and Technology (JUST) and worked as a supervisor of the open source department in a software company located in Amman. For years, he has been involved in several projects including Drupal, Songbird, and Mozilla.

Since 2009, he is the president of the Jordan Open Source Association (http://jordanopensource.org), a non-profit organization that promotes Free Software and Free Culture in Jordan and the Arab World. A frequent speaker in open source conferences and events, Issa also organizes local BarCamps, Drupal Meetups, and Linux installation fests.

I would like to thank my parents, my brother, and my sister. A special thanks to my one-year old nephew, Muhammad, who made the review of this book more challenging by randomly pressing keys on my keyboard and by constantly trying to turn off my PC!

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by PacktCopy and paste, print and bookmark contentOn demand and accessible via web browser

Free Access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

Inkscape is frequently mentioned, and lauded, as one of the best examples of open-source software available today. It is a mature, feature-full and flexible product, thanks to a very dedicated developer community. The latest version, 0.48, adds new tools, such as the Airbrush (which many have longed for), and advanced path editing, among many other additions and improvements.

Vector graphics are becoming increasingly important at the turn of this decade, now that the World Wide Web has begun its transition towards HTML5 technologies. All the major Web browsers are striving to conform to the SVG specification, as the attractiveness of scalable, high definition, three-dimensional, and Flash-free Web sites and games is irresistible. The future is bright, but the true outcome will ultimately depend on one decisive factor: user and developer adoption.

This is why a non-proprietary authoring tool such as Inkscape is important: it is a professional package for creating quality vector graphics which is freely available for everybody to use. Whether you wish to create Web site mockups, wallpapers to share with an Internet community, high-quality advertisements for the newspaper industry, digital art for a gallery exposition, or simply a Happy Birthday for your grandmother, Inkscape is available now and without limitations, to help you achieve your goal.

What this book covers

Chapter 1, Creating and Editing Objects Familiarize yourself with the user-interface and start drawing simple vector shapes.

Chapter 2, Editing Colors Learn the basics of coloring and use gradients to their full effect, by replicating an iconic image of a famous movie.

Chapter 3, Speeding Up Your Workflow Streamline and accelerate development with a set of commonly used techniques, tips and tricks.

Chapter 4, Creating and Editing Clones Use shape cloning to rapidly create interesting complexity in your drawing.

Chapter 5, Live Path Effects Create, assemble, and replicate objects programmatically in a variety of scenarios.

Chapter 6, Extensions Take full advantage of the many extensions available in Inkscape, to inspire and enhance your work.

Chapter 7, SVG Filters Experiment with SVG filter effects, taking vector graphics to a new level of sophistication, and create your own!

Chapter 8, Putting it All Together Use your knowledge, skills, and intuition to solve graphical problems in a variety of scenarios.

Chapter 9, Raster and Almost Raster Befriend bitmaps and use them in your vector drawings, by importing, converting (tracing), and exporting.

Chapter 10, Web Graphics Preparation Learn to design and prepare graphics for the modern web, from small but detailed widgets to the complete layout of webpage mockup.

Chapter 11, SVG in Websites Use vector graphics in your websites, games, and presentations, with the help of new extensions available in version 0.48.

Chapter 12, Draw Freely Complete your knowledge on SVG and Inkscape, by learning about document metadata, compiling the software from source, and programming your own extensions using Python!

What you need for this book

You will, of course, need a working installation of Inkscape 0.48, or a more recent version if available. You can download an installer for your operating system from the official website:

http://inkscape.org/download

You will also need a programmers text-editor, perhaps a little more advanced than a vanilla notepad. Consider using TextEdit (Mac), GEdit (GNOME), KWrite (KDE), or Notepad++ (Windows). This last editor can be downloaded for free at:

http://notepad-plus-plus.org

Finally, if you are interested in developing extensions for Inkscape, you will need to install the Python programming library and tools in order to complete the relative recipes in this book. You can download the necessary software from the official Python web portal:

http://www.python.org

Who this book is for

The first chapters of this book are aimed at the beginner with no previous experience of vector graphics design software packages. We will provide the fundamental concepts, an overview of the user interface, and start drawing straight away. No artistic talent is needed, just a bit of curiosity. The intermediate user will find these initial recipes useful in improving his or her competence in the use of the basic tools and workflows. The goal is to bring the reader to a level of expertise adequate for tackling the rest of the material in the book.

The more expert users will appreciate the later chapters, where we will illustrate advanced topics and demonstrate techniques for producing professional quality art, for use in web design, game development, and many other realms.

Whether you are a beginner or a battle-hardened veteran, a casual doodler or an academic artist, we hope you will enjoy the recipes in this book and find inspiration for your future works of art.

Conventions

In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.

Code words in text are shown as follows: " License information is also inserted under svg:metadata element."

A block of code is set as follows:

r=int(round(max(r*FACTOR,0))) g=int(round(max(g*FACTOR,0))) b=int(round(max(b*FACTOR,0))) return '%02x%02x%02x' % (r,g,b)

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

r=int(round(max(r*FACTOR,0))) g=int(round(max(g*FACTOR,0))) b=int(round(max(b*FACTOR,0))) return '%02x%02x%02x' % (r,g,b)

Any command-line input or output is written as follows:

$ inkscape --usage Usage: inkscape [-VzgDCjtTXYWHSx?] [-V|--version] [-z|--without-gui] [-g|--with-gui] [-f|--file=FILENAME] [-p|--print=FILENAME] [-e|--export-png=FILENAME] [-d|--export-dpi=DPI]

New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: " The information we entered into the Document Metadata dialog is inserted into SVG code."

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.

To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.

If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books maybe a mistake in the text or the code we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.

Piracy

Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[email protected]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors, and our ability to bring you valuable content.

Questions

You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.

Chapter 1. Creating and Editing Objects

In this chapter, we will cover:

Creating and editing 2D geometric shapesCreating freehand and straight linesEditing paths with the Node toolCreating paths using the Pen (Bezier) toolCreating smooth paths with Spiro SplineCreating calligraphic shapesUsing the Eraser toolCreating and editing 3D boxesCreating and editing textClippingMaskingPath operations

Introduction

In this first chapter we will start with the basics of vector graphics design, by creating and manipulating simple geometric objects. Several important techniques used daily by graphics artists, such as shape editing, clipping, and masking, will help us greatly when building more complex objects later on.

Creating and editing 2D geometric shapes

Inkscape is a full-featured software package that provides us with a powerful and flexible set of tools. These tools can build beautiful drawings out of fundamental geometric objects (primitives), such as straight or curved lines, simple or complex polygons, or curved shapes.

Getting ready

Before we start drawing, let's take a quick look at the user interface and the facilities it provides:

The Commands bar: Normally displayed under the Menu, it contains buttons of common application commands, such as file opening and saving, history browsing (undo and redo), zooming, and some common operations related to objects and groups.
The Snapping bar: Snapping facilitates the placement of objects in the Canvas and is often a valuable timesaver, although in some cases it might get in the way, such as when you need the freedom to position an object in a particular spot. Using this tool bar, you can enable or disable snapping to the page border, grids, and other objects, in order to get the exact behaviour you need.
The Canvas: This is the large central area where all the drawing is done. You will find rulers on the top and on the left of the Canvas, which provide information on scaling, dimensioning, and positioning.The Toolbox: Normally found on the left of the Canvas, it contains all the buttons related to drawing tools used to create primitives.
The Tools Controls bar: The content of this bar changes according to the tool you have selected in the Toolbox, exposing its specific functionality. In the following picture we can see what the Tool Controls bar would show us if we were using the Selector tool.
The Palette: This tool contains a swatch line with all the colors associated with the currently chosen palette.
The Status bar: This bar is normally located beneath the Canvas and provides a wealth of miscellaneous information, such as the style of the currently selected object, the name of the layer we are editing, some help messages on the function of the selected tool, and the current mouse pointer coordinates.

How to do it...

We will begin with a couple of four sided polygons that we are all very familiar with:

Rectangles and squares
Select the Rectangle tool (F4 or R). Click and drag on the Canvas holding the Ctrl key to create a golden ratio rectangle. While dragging with the mouse, you will see more information on the shape you are creating in the help message area of the Status bar. Let go of the mouse button when you are happy with the dimensions of your rectangle. You will now notice two little white square handles and one circle handle at the corners. The Status bar will provide some useful tips if you hover the mouse pointer over them. Click on the circle handle while holding the Ctrl key and drag downwards to make the corners evenly rounded. Move one of the square handles to resize the rectangle without changing the corner's radii, keeping the horizontal and vertical radii the same. Notice that if you reduce the width or height more than the corner radius, it will change to accommodate the lack of space. Switch to the Selector tool (Space or F1 or S). Several arrow shaped handles will now be visible on the sides of the rectangle. Grab the right-hand middle arrow handle and make the rectangle narrower. Notice how the horizontal corner radius now scales proportionally, adapting to change in width, so the horizontal and vertical radii are no longer the same. Select the Rectangle tool (Space or F4 or R) again and click the Make corners sharp button on the rectangle toolbar or click on one of the circular handles while holding Shift. This option cancels all the changes made to round the corners. You can also specify precisely the values of the horizontal (Rx) and vertical (Ry) radii in the rectangle toolbar.
Ellipses, circles, and arcs
Select the Ellipse tool (F5 or E). Click and drag on the canvas to create an ellipse. Notice two little white square handles and one circle handle. As we did before, hover over the handles with your mouse pointer and read the tips that appear in the Status bar. Move one of the square handles to resize the ellipse. Click on the circle handle and drag to the right and down to delimit a circular segment. Notice there are now two circle handles that control the span of the arc. Continue dragging one of the circle handles around the ellipse always keeping it outside of the ellipse area to create a "pacman" like shape. Click on one of the circle handles and drag inside the ellipse area to change the segment into a circular arc. Drag the cursor inside and outside the ellipse area to see how the shape changes. Click on the Make the shape a whole ellipse, not arc or segment button on the ellipse toolbar to get the full ellipse shape back. Create a circle by holding Ctrl while dragging with the selected Ellipse tool. Create another ellipse by holding the Shift key while dragging. This time the mouse click determines the position of the ellipse center, instead of the top-left corner of the bounding box as before. Create another ellipse by holding the Alt key while dragging. This time the first click and the release point will be on the ellipse edge and not the object bounding box. Create a circle by determining its center with the first click and its radius upon release by holding Shift + Ctrl + Alt while dragging.

Note

In Linux and Mac OS X, the Alt key may not be immediately usable in Inkscape because it might be already assigned to a system shortcut. Refer to the Inkscape FAQ for a solution:

http://wiki.inkscape.org/wiki/index.php/FAQ

Polygons and stars:
Select the Star tool (Shift + F9 or *). Click and drag towards the top while holding Ctrl to create an "upright" star. Hover over the star handles and read the Status bar tips to see which one is the tip radius and which one is the base radius. Drag the base radius outwards evenly by holding Ctrl so it's longer than the tip radius. Increase the number of corners to 8 by editing the Corners: option on the Star toolbar. Drag the tip radius while holding Shift to round it. The Rounded: number on the toolbar will be negative. Drag the base radius while holding Shift to round it in the other direction. The Rounded: number on the toolbar will be positive. Turn the star into a polygon by clicking on the Regular polygon button on the toolbar. Notice how the corners are still rounded. Hover over the polygon tip radius handle and notice what the Status bar has to say about it. Then, drag the handle while holding the Alt key to apply randomization to the position of the corners and create an irregular shape.
Spirals:
Select the Spiral tool (F9 or I). Click and drag on the canvas to create an Archimedean spiral. Hover over the spiral's inside and outside handles and read the Status bar tips. Drag the inside handle to unwind it one turn, then drag the outside handle to create one more turn. Drag the inside handle upwards while holding Alt to decrease the divergence and then downwards to increase it.

Here's what some of the preceding steps look like:

How it works...

As we have seen, Inkscape's 2D shape tools create special kinds of objects because they have additional editing parameters for their geometric qualities. By converting them to regular path objects by using the Object to Path (Shift + Ctrl + C) option, these special parameters will be lost in the process. This is a tradeoff we will sometimes need to make in order to make use of some extensions and effects that can only be applied to regular paths.

There's more...

Now that we know how to create simple shapes, we can advance to more interesting objects.

Creating complex shapes in seconds with Star tool

Moving the base radius handle away from its usual position can create wildly different shapes because tips and star inner corners form different relations, especially when combined with rounded corners. Try to recreate the following examples (you can find them in the StarsComplex.svg file):

Dotted spirals

You can also change the spiral stroke style to different kinds of dashes. Some very pretty effects can be achieved. (SpiralsDashed.svg):

Creating freehand and straight lines

Users trying Inkscape for the first time are sometimes confused when they don't find a special tool that creates lines. Such a tool isn't necessary because every object in Inkscape can be made to look like a line: remove the fill, adjust the stroke to your desired look and you've got a line. This means that all tools in Inkscape can be used to create lines, although some of them are more straightforward and better suited for what most users expect in that area.

In this recipe we will explore how to create freehand and straight lines.

How to do it...

Follow these steps to draw freehand and straight lines:

Select the Pencil tool (F6 or P) and draw the letter "O", dragging with your mouse on the Canvas as if you were using a pencil on a sheet of paper. Switch to the Selector tool (Space, F1 or S).The information in the Status bar notification area will tell you how many nodes are present in the object. Switch back to the Pencil tool (Space, F6 or P), set Smoothing: slider on the Pencil toolbar to 50 and create another "O". Switch to the Selector tool (Space, F1 or S) again and read the information in the Status bar notification area. Notice that there are fewer nodes this time and the line is smoother. Select the Pen (Bezier) tool (Shift + F6 or B) and change its mode on the toolbar to Create a sequence of straight line segments so we can create a shape similar to the musical instrument, the triangle. Click on the Canvas to draw the starting point of a line. Move the mouse to the right and you will see a red helper line. Hold Ctrl to keep the angle 0° and look at the Status bar to adjust the line width. Click when the distance is roughly 500 px. Move the mouse to the top-left holding Ctrl to set the angle to 120° and, when you reach approximately a distance of 500 px, click to create the top triangle corner. Release the Ctrl key and move your mouse downwards and to the left. Click to create a point when you reach roughly -123° and a distance of 480 px. The Status bar will report the current values as you move your mouse pointer. Right-click anywhere or press Enter to finish the object.

How it works...

With the Pencil tool it is important to adjust the Smoothing: slider in order to obtain the desired smoothness in our curved lines, as it determines how sensitive the line is to our mouse movements.

The easiest way to create straight lines is to use one of the modes of the Pen (Bezier) tool (named after the French mathematician Pierre Étienne Bézier) that disables the feature to draw curved segments and creates a sequence of straight line segments.

There's more...

The objects we created have default styles applied to make them look like lines, but they can also take fill color.

Stroke styles can affect the look of our "lines," and can be set in the Fill and Stroke dialogue (Shift + Ctrl + F) under the Stroke style tab. Joins can be Miter, Round, and Bevel, and Caps can be Butt, Round, and Square. Individual nodes (control points) of the path can be styled with a custom marker. The marker can be different for start, end, and middle nodes:

Tapered lines using shapes in Pencil and Pen tools

Both Pencil and Pen tools come with the option to automatically draw tapered lines. This can make creating lines more interesting, especially when using a graphics tablet. Before drawing a line we simply select a shape from the toolbar and the shape gets applied to the line when we finish drawing. Readymade shapes are Triangle in, Triangle out, Ellipse, and a custom shape that can be used by copying it and using the From clipboard option.

The following are some examples (they can be found in the Lines.svg file accompanying this chapter) where we used the Pencil with Smoothing: set to 50 and drew the letter "O":

Creating "lines" using the Calligraphy tool

In Inkscape, lines created by the Calligraphy tool are actually objects with a fill and no stroke. Although we can't bend them easily like we would with lines, they still are quite valuable in a lot of situations, especially when created with a graphics tablet a highly recommended purchase for any artist interested in creating freehand computer graphics.

Sketch mode fixing the path while drawing

Sketch mode is a special mode provided by the Pencil tool when holding the Alt key. This will treat all strokes as an attempt to draw one line, by computing the average and rendering the final result. Our various attempts are displayed in green as we keep drawing and a red line displays the current average, so we can keep tweaking the path until we are satisfied. The following example has been exaggerated to clarify the process; usually strokes are drawn closer together:

Creating dots using Pencil and Pen tools

You might have guessed that the Pencil and modes of the Pen tool we used in this recipe can't create dots by simply clicking on canvas. However, there is a shortcut that simulates dots by drawing circles of a certain size, by holding Ctrl and clicking with Pencil and straight line modes of the Pen tool. Dot size can be adjusted in Inkscape Preferences (Shift + Ctrl + P). Using Shift + Ctrl will double the dot size and Ctrl + Alt will make it random.

See also

For more information, refer to the recipes Creating calligraphic shapes and Creating smooth paths with Spiro Spline in this chapter, also refer to Chapter 5,

Editing paths using the Node tool

Nodes are control points that control the path shape. Nodes can also have tangent control handles that also contribute to the overall result. In this recipe we will use some of the most common node editing facilities.

How to do it...

The following steps will show you how to edit paths:

Create an ellipse and convert it to a path (Shift + Ctrl + C) so we can edit it using Node tool. Remove the fill and make the stroke thick (16 worked in my case). Select Node tool (F2 or N), and you will see that our ellipse now has four nodes. Select the top and right node by using a rubber band selection box around them or by clicking on them while holding Shift. Make the path open by deleting the segment. Use the Delete segment between two non-endpoint nodes button, from the toolbar. Select the bottom node by clicking on it and convert it to a cusp (corner) node by clicking on the Make selected nodes corner button (Shift + C). Hover over the right node handle and read the tip in the Status bar. Hold Ctrl + Alt to constrain angles to certain values and to lock handle length while moving, then drag upwards until you reach 90°. Do the same for the left handle, but this time move upwards until it reaches the same point as the right handle. Click and drag the bottom node downwards while holding Ctrl to constrain movement to the vertical Y axis. Select the left and top nodes using a rubber band box. On the toolbar select the Show transformation handles for selected nodes button. The transformation handles will now appear around the selected nodes. Click on one of the nodes to change handles to skew/rotate, and position the rotation center over the left node by dragging it there. Drag the top right rotate handle counter-clockwise and release when you reach an angle of roughly 200°. Add another node between the two selected ones by pressing Insert key or by using the Insert new nodes into selected segments toolbar button. Select the inserted and the two left-most nodes and convert the segment between them into a straight line by using the Make selected segments lines toolbar button (Shift + L).

There's more...

There are many shortcuts available for editing nodes and this recipe only uses some of them, so you are encouraged to go through the complete list. You can find them under Help | Keys and Mouse Reference (it will open a page in your default Web browser).

Once you learn the most common keyboard shortcuts for each editing mode, you will create graphics in a faster, more productive, and enjoyable way.

Symmetric and auto-smooth nodes

Pencil and Pen tools only create cusp nodes and smooth nodes, but symmetric nodes and auto-smooth nodes are also available. As we would expect, symmetric nodes have both handles of equal length and are collinear. To convert a node to symmetric, use Shift + Y or the Make selected nodes symmetric button on the toolbar. Auto-smooth nodes make sure that the segments they touch always remain smooth. If we move a handle of an auto-smooth node it will automatically become a smooth node. Use the Make selected nodes auto-smooth button (Shift + A) to convert any node into an auto-smooth node.

Deleting nodes

When we use the Delete key to delete selected nodes Inkscape will try to preserve the path shape as much as possible by changing the adjacent node types and handles angles and lengths. There are some cases where this kind of behavior is undesirable; for example, in an object that consists only of straight segments, we expect to get a straight line when we delete a node, and to get that kind of behavior we can use Ctrl + Del. There is an option to toggle this behavior in Inkscape preferences (Shift + Ctrl + P) under Tools | Node | Editing preferences.

Using Simplify to smooth paths after creation

In the previous recipe we saw that the Smoothing option in Pencil tool can affect the overall number of nodes created while drawing the path. If we need to smoothen or reduce the number of nodes in an existing path we can use the Simplify option (Ctrl + L). Inkscape preferences (Shift + Ctrl + P) under Misc hold an option where we can set the strength of the Simplify command; the larger the number, the more nodes are removed and the more distorted the path will be. It might be better to just start with the default value and, if needed, quickly use the Simplify option several times in succession for a better effect.

Node sculpting

By holding the Alt key while moving nodes, we will move them in a non-uniform way. The nodes closer to the one that is actually clicked on to move the selection will move with an incremented step. Some fine examples of node sculpting can be viewed in the screenshots gallery of the Inkscape website:

http://inkscape.org/screenshots/gallery/

Path direction

Path direction is important when putting text on paths or when using markers on strokes. It also affects the order in which nodes are selected using the Tab key. Visual indicators for path direction can be enabled in Inkscape preferences (Shift + Ctrl + P) under Tools | Node | Path outline. They only appear when path outline is enabled which can be done by toggling the Show path outline (without path effects) button on the Node toolbar:

See also

For more information, refer to Creating freehand and straight lines and Creating paths using the Pen (Brazier) tool in this chapter.

Creating paths using the Pen (Bezier) tool

The Pen (Bezier) tool is generally considered somewhat difficult to master but after some practice it can become a valuable tool when we need precision while drawing or tracing something along the edges. In this recipe we will write out the word "Mud" using the Pen tool. Our object will be composed of 2 sub-paths, one for the letters "Mu" and the other for the letter "d".

How to do it...

The following steps will show how to write words using the Pen tool:

Select the Pen (Bezier) tool (Shift + F6 or B) and make sure the selected mode on the toolbar is Create regular Bezier path Clicking without dragging creates a cusp (corner) node, so click four times to create the first four points of the letter "M" (at this point it will look like an "N"). The fifth and final point of the letter "M" will be a smooth transition into the letter "u". Choose a place where we want the "M" to finish, click, and slightly drag the pointer horizontally without releasing the mouse button to create a smooth node. Click where you want the first point of the letter "u" to be. Click and drag horizontally, where you want the bottom of the letter "u" to be, to create a smooth node. If you're not satisfied with the result, press Del to delete the last node and try again. Click to create the third, top right "u" node. Create the last "u" node by moving to the bottom right, clicking and dragging slightly towards top right until the red helper line partially fits over the previous segment. Right-click or press Enter to finish the first path. Hold Shift while creating the first node of "d", to add the path we are about to create to the first one. Click and drag upwards and to the left. Click and drag downwards and to the right to create the second node of "d" (consult with the screenshot that follows). Click where you want the highest point of "d" to be and drag upwards to adjust the ascenders as you see fit. Don't release the mouse yet. Press Shift while still holding down the mouse button. Move the pointer downwards until you almost reach the baseline of the text; release both the Shift key and the mouse button to create the handle. Click where you want the "d" terminal to end and drag upwards and to the right to adjust the last segment. Right-click or press Enter to complete the path.