But because the gradient mesh is inherently stored as a rectangular curve network, you'll end up with an entire new row and/or column of additional cells. For one, if you want to add more detail to your shape, you'll likely need more cells. Refinements?Īfter using the gradient mesh tool for a while, you'll probably become aware of certain shortcomings. The gradient mesh feature facilitates the design of lifelike graphics that are fully scalable. Soon after, it also became available in CorelDRAW, and nowadays it is available in Inkscape as well. The overall concept is known as a gradient mesh, and it was added to Adobe Illustrator as a new vector graphics primitive in 1998 following the introduction of PostScript 3. Something like the 2x2 curve network in Figure 2 will do for now.įigure 4: … and then interpolate the node colors to fill in the cells. A linear or radial gradient brings the result a bit closer to life but is still rather limiting.įor something better, consider a rectangular curve network, where each cell is defined by four Bézier curves. The fill of paths can be set to a single color, though that probably won't result in something quite lifelike. You can design these shapes manually or obtain them automatically – in Inkscape, a raster graphic can be traced using the option Path | Trace Bitmap. Most nodes in Figure 1 are smooth nodes, with the exception of some nodes defining the outline of the character S from the Linux Libertine font, which are sharp nodes.īézier curves facilitate the design of intricate 2D shapes. If a node and its two handles lie on a single line, the connection between the two segments is smooth (or tangent-continuous in mathematical language), which is often desired in a design. When a curve consists of multiple segments, nodes usually have handles on both sides. (Press B in Inkscape and click/drag on the canvas to create a new Bézier curve.) Bézier curves are the fundamental building block of vector graphics. These curves are known as (cubic) Bézier curves, and they were discovered in the French car industry in the early sixties by Paul de Casteljau and Pierre Bézier, who at the time were working at Citroën and Renault, respectively. A single curve segment consists of two of each: a node at each endpoint of the curve segment and a handle connected to each node to define the tangent – that is, the direction – of the curve at those points. The squares (referred to as nodes) and round handles are all it takes to define these composite curves. Viewing the resulting paths in edit mode (F2) with everything selected should yield a result similar to the images in Figure 1.įigure 1: Nodes and handles define a vector graphics object. Then, with all three selected, choose the option Path | Object to Path. Set the fill of all objects to none and the stroke to a solid light gray. Start by adding a circle, a (rounded) star, and a single character from your favorite font. If you're interested in taking a closer look at the curves defining these characters, install FontForge (or alternatively, Birdfont ), and open a font you're interested in (commonly stored in /usr/share/fonts).įor a deeper look at vector graphics, it is very useful to install a dedicated vector graphics editor – the open source Inkscape is an excellent choice. The glyphs of a font that you look at on your screen are examples of vector graphics in daily life. These descriptions are resolution-independent, which means that vector graphics can scale without losing quality. On the other hand, vector graphics relies on mathematical descriptions of curves. This blurring or distortion is caused by an interpolation algorithm that generates new pixel data for the magnified version based on the values of neighboring pixels. Zooming in on a pixel-based raster image eventually results in either a blocky picture or a somewhat smoother result that often looks a bit blurred. You're probably quite familiar with raster graphics – rectangular grids composed of individually colored pixels. What gives text this resolution-independent property, and is it possible to extend this property to graphics in general? Understanding Vector GraphicsĪ discussion of computer graphics should begin with the observation that there are two types of graphics: raster graphics and vector graphics. Have you ever wondered why you can zoom in on a piece of text in your web browser, PDF viewer, or word processor, and it still retains the smooth look it had at the original scale? In comparison, zooming in on a web image generally yields a pixelated or ragged-looking result.
0 Comments
Leave a Reply. |