1. The Foundation of Digital Illustration: Points and Lines
Welcome to Digital Illustration Fundamentals ! This book will take you through the foundation of digital illustration, as well as covering how to use vector illustration assets with popular computer programming languages and open source content publishing platforms such as Kindle, Android Studio, HTML5, and JavaFX. I will start at the lowest level concepts in this chapter it is the vertex and the lines that connect these vertices together and then we will build upon each of these foundational concepts in subsequent chapters, until you have a comprehensive understanding of digital illustration modeling, color, gradient or pattern shading, command editing and vector rendering concepts and associated terminology, file formats, work flows, spline editing, effects processing, data footprint optimization, computer programming, and content publishing.
I will show you how these concepts, techniques, and terms apply to the Inkscape open source digital illustration software package. This just so happens to be free for commercial use and very similar in features to Adobe Illustrator and CorelDRAW.
For this reason, part of the chapter, logically the first part, would be how to download and install open source Inkscape software, just in case you do not have any digital illustration software on your multimedia workstation currently. Then, youll learn about the foundational elements of digital illustration.
Industry professionals call this a vertex or a node. Once you put this together with other vertices, the new media result comprises whats called a vector shape.
How these digital illustration vector shapes are created and rendered is what this book is all about, and we will build on the knowledge in this chapter with curves, fills, gradients, patterns, commands, algorithms, tracing, layers, editing tools, fonts, data footprint optimization, content delivery, and more, until you understand everything about this digital illustration work process and how it can be used with modern-day devices.
Downloading and Installing Inkscape
All our readers are going to need to have digital illustration software of one type or another, whether that is CorelDRAW or Adobe Illustrator or Macromedia Freehand. If you do not own any of these, you can use the free-for-commercial-use Inkscape . Lets install Inkscape for Windows, Mac OS X, or Linux, next.
Inkscape.org: Get Inkscape Illustration Software
To download the current stable version of Inkscape, you will go to: , or alternately click on the Download tab, which is directly underneath the Inkscape logo.
Figure 1-1.
Go to the inkscape.org, and click the Download arrow
Download the inkscape-0.91-x64.msi installer file if you are using Windows or a Linux or Mac version. Next, right-click on it and select the Install option to start your installation process. Inkscape for Windows uses a 64-bit version, since most modern-day workstations run 64-bit Windows Vista, 7, 8.1, or 10. Figure shows the downloaded file, which has been selected, and right-clicked on to reveal the context-sensitive menu, with this Install option selected in blue. If for some reason you do not own a 64-bit content production workstation, go to Walmart, and purchase a brand name workstation tower for $400 to $500. I have used, and recommend, the Acer, HP, and Compaq workstations.
Figure 1-2.
Right-click on .MSI file, and select Install option
Once your installation starts, click the NEXT button, as is shown on the left-hand side of Figure .
Once you click on the Next button youll get an End-User License Agreement dialog. Select the I accept the terms in the License Agreement check box, and then click on Next to continue.
Next click on the Typical installation type button, then click on the Next button, as is shown on the right-hand side in Figure .
Figure 1-3.
Click Install, then Next, then the Typical Button
This will give you the Ready to Install Inkscape dialog, seen in Figure on the left, where you can click on Install .
Figure 1-4.
Accept default installation options, and click Next
You will then get your Installing Inkscape progress bar, and once that has finished, the Completed Inkscape Setup Wizard dialog will appear. Click the Finish button, and install shortcut icons to Inkscape on the desktop or taskbar for easy launch access. Once you have done this, launch Inkscape, and make sure that it works. You should see what is shown in Figure .
Figure 1-5.
Click the Install Button to begin the installation
Now lets take a look at some of the basic elements of a vector illustration asset, called vertices, paths, and lines.
Basic Vector Shapes: Vertices and Lines
Digital illustration vector imagery is composed of shape objects that are composed of data points, called vertices; or in Inkscape, nodes, which are placed in 2D space, by using X,Y coordinates . Lines, arcs, or curves then connect the vertex points together. We will be looking at concepts and terminology for these points and lines during this section. If you create a closed shape, that is, one where there are no openings for a fill (color, pattern, or gradient) to escape, you can also fill a vector shape so that the shape looks solid instead of empty. In fact, you can fill your open shape, but the fill will act as though the shape were closed, so this is not generally done.
The Vertex: A Foundation for 2D and 3D Geometry
The foundation for any 2D (or 3D) vector geometry asset is called the vertex. Multiple vertices (the plural of vertex) are required to create a line or arc , which require two vertices, or a closed shape , which requires at least three vertices if you are using lines, or two vertices if you are using arcs or curves. Vertices are used in 2D vector (SVG) data processing, as well as in 3D vector (OpenGL) data processing, both of which are integrated into Java, JavaFX, HTML5, and Android Studio.
Vertex data is outlined in SVG using X,Y coordinates, as mentioned earlier, which tell the processor where the vertex is located in 2D space. Without these vertex coordinates, lines and curves cannot be drawn, as they must have an origin , as well as a destination vertex coordinate, as part of vector line drawing operations. A line or arc would be an example of an open shape .
When we get into creating and looking at SVG data youll notice that these X,Y numeric pairs are the majority of the SVG data, which can be contained using the XML format, or in a Java SVG object for Android Studio application. SVG data can also be used in your JavaScript (HTML5) code as well as in JavaFX (Java 8 or Java 9) code, so it is compatible across each of your open platform new media application or content development workflow.