<html> <head> <title>User's Guide: Concepts</title> </head> <body bgcolor=white text=black link=blue vlink=navy alink=red> <TABLE WIDTH="100%"> <TR> <TH ALIGN="left" WIDTH="33%"><img SRC="Images/arrow-left.png" WIDTH="16" HEIGHT="16" ALIGN="top" ALT="Prev"></TH> <TH ALIGN="center" WIDTH="33%"><img SRC="Images/arrow-up.png" WIDTH="16" HEIGHT="16" ALIGN="top" ALT="Up"></TH> <TH ALIGN="right" WIDTH="33%"><img SRC="Images/arrow-right.png" WIDTH="16" HEIGHT="16" ALIGN="top" ALT="Next"></TH> </TR> <TR> <TD ALIGN="left"><A HREF="usersguide-2.html">Quick Overview </TD> <TD ALIGN="center"><A HREF="usersguide.html">User's Guide</TD> <TD ALIGN="right"><A HREF="usersguide-4.html">Configuration </TD> </TR> </TABLE> <HR NOSHADE> <H1><FONT face="Helvetica,Arial"><A NAME="N1"></A>Concepts</font></H1> <P>To use the full potential of Sketch, it is important to know some fundamental concepts, such as the various kinds of objects that make up a drawing and their relationship. This section introduces these concepts and the terminology needed to talk about them. This terminology is also used in the menus, the status bar and other parts of Sketch's user interface.</P> <H2><FONT face="Helvetica,Arial"><A NAME="N2"></A>Object Types </font></H2> <P>Sketch has two fundamentally different kinds of objects: <EM>primitives</EM> and <EM>compound objects</EM>.</P> <H3><FONT face="Helvetica,Arial"><A NAME="N3"></A>Primitives </font></H3> <P>Primitives are the basic building blocks of a drawing. They are the ones that actually leave marks on the paper. Among this kind of object are the rectangle, the bézier curve (which also serves as a polygon or even as a straight line) and text object.</P> <P>Most primitives can have <EM>fill properties</EM> and <EM>line properties</EM>. Properties are discussed in more detail <A HREF="#N7">below</A>.</P> <H3><FONT face="Helvetica,Arial"><A NAME="N4"></A>Compound Objects </font></H3> <P><EM>Compound objects</EM> group several primitives or other compound objects together into one object. As such, compound objects are invisible, but the primitives contained in them are not. Therefore, compound objects are mainly interesting for editing purposes.</P> <P>It is often convenient to group the primitives that form a distinctive part of a drawing together into a <EM>group</EM>. For instance, in the sample file <CODE>flags.sk</CODE> each of the flags is a group of several primitives (often just a few rectangles as many of the flags consist of some stripes). Whenever you click on one of the flags the whole group is selected not just the rectangle you clicked on. Thus, most of the time the group is manipulated as a whole (there are ways to work on the parts of a group without ungrouping them first, but that is an advanced topic).</P> <P>There are some compound objects that behave in a special way. The only example at the moment is the BlendGroup. This group consists of two (or more) control objects and a number of objects that are linear interpolations of the control objects. When you edit one of the control objects all interpolated objects are updated automatically.</P> <H2><FONT face="Helvetica,Arial"><A NAME="N5"></A>Structure of a Drawing </font></H2> <P>A drawing consists of <A HREF="#N3">primitives</A> organized in <A HREF="#N4">compound objects</A>. The entire drawing itself, the <EM>document</EM>, is a compound object that contains all the others.</P> <P>When speaking about the objects contained in a compound object, it's convenient to use the terms parent and child. The compound object is the <EM>parent</EM> of the object it contains, the contained objects are the compound object's <EM>children</EM>.</P> <P>The objects are always drawn in the same order with the objects drawn later obscuring the ones drawn earlier in case of overlap. One might also say that some objects lie on top of each other and that objects are drawn from bottom to top. This is the model we usually use and the reason for menu items such as "Move To Top".</P> <P>The order in which the objects are drawn changes only when the user explicitly chooses a command that does so. Moving an object around or changing the <A HREF="#N8">fill properties</A> does not change this order.</P> <H3><FONT face="Helvetica,Arial"><A NAME="N6"></A>Layers</font></H3> <P>The top-level compound object, the <EM>document</EM>, is always divided into <EM>layers</EM>. Layers are the only kind of children a document can have and the parent of a layer will always be a document.</P> <P>This means that normal objects such as primitives or other types of compound objects are never contained directly in the document object but are always, directly or indirectly, contained in a layer.</P> <P>The layer is a special compound object with some special attributes. These attributes control whether its children are visible or not.</P> <H2><FONT face="Helvetica,Arial"><A NAME="N7"></A>Properties </font></H2> <P>Primitives can have <EM>properties</EM> that define how they are drawn.</P> <P><A HREF="#N8">Fill properties</A> define how the area defined by a primitive is drawn. Often this is just a single color, but Sketch offers some more variety in the form of <A HREF="#N9">patterns</A>.</P> <P><A HREF="#N13">Line properties</A> define how the lines of a primitive are drawn. The most important line properties are probably color, width and dashes.</P> <P>A primitive can usually have both, fill and line properties, but there is no need for a primitive to have any properties. You might just want to draw the outline but not the interior of a rectangle, for instance.</P> <P>Some types of primitives even cannot have fill or line properties. An image object for instance has neither fill nor line properties and a text object doesn't have a line attribute (currently at least) but has an attribute that defines its font. </P> <P>As an advanced feature, Sketch offers <EM><A HREF="#N15">dynamic properties</A></EM>. These allow you to define logical properties to use instead of physical properties. Whenever you change the definition of a dynamic attribute, all objects that use that attribute are automatically updated. This is similar to logical markup versus physical markup in LaTeX or SGML.</P> <H3><FONT face="Helvetica,Arial"><A NAME="N8"></A>Fill Properties </font></H3> <P><EM>Fill Properties</EM> define how the area of a primitive is filled.</P> <P>The simplest case is just a single color that fills the area uniformly. Sketch offers more variety than that, though, in the form of patterns. A single color is then viewed as a very simple type of pattern.</P> <P>A primitive may have empty fill properties or, phrased differently, no fill properties. In this case the area of the primitive is not changed all and the objects below the primitive are not obscured. Only its line is still drawn if it has line properties.</P> <H4><FONT face="Helvetica,Arial"><A NAME="N9"></A>Patterns </font></H4> <P>Sketch currently offers three kinds of pattern: <A HREF="#N10">solid</A>, <A HREF="#N11">gradient</A> and <A HREF="#N12">hatching</A> pattern.</P> <H5><FONT face="Helvetica,Arial"><A NAME="N10"></A>Solid </font></H5> <P>This is the simplest pattern: Just a single color that uniformly fills the area.</P> <H5><FONT face="Helvetica,Arial"><A NAME="N11"></A>Gradient </font></H5> <P>A gradient is the interpolation between two or more colors. A gradient pattern can be either linear, radial or conical.</P> <P> <TABLE> <TR> <TD> <img SRC="Images/gradient-linear.png" WIDTH="72" HEIGHT="72"> </TD> <TD> <img SRC="Images/gradient-conical.png" WIDTH="72" HEIGHT="72"> </TD> <TD> <img SRC="Images/gradient-radial.png" WIDTH="72" HEIGHT="72"> </TD> </TR> <TR> <TD> Linear Gradient </TD> <TD> Conical Gradient </TD> <TD> Radial Gradient </TD> </TR> </TABLE> </P> <H5><FONT face="Helvetica,Arial"><A NAME="N12"></A>Hatching </font></H5> <H3><FONT face="Helvetica,Arial"><A NAME="N13"></A>Line Properties </font></H3> <P>A primitive may either have no line properties (which means that only its area is filled if it has an area and nonempty fill properties) or one of each of the following properties: <DL> <DT><B>Pattern</B><DD> <P>Currently, this can only be a solid color or the empty pattern. An empty pattern means that no line is drawn. Future extensions will probably allow arbitrary patterns.</P> <DT><B>Width</B><DD> <P>The line width. A width of zero means that the thinnest possible line is drawn.</P> <DT><B>Dashes</B><DD> <P>Whether to draw a solid line or a dashed line. A line can have arbitrary dash patterns. </P> <P>Dash patterns are represented by a list of numbers such as "5.0, 2.0, 1.0, 2.0". This list describes a pattern of a drawn segment of 5 units long, followed by a gap of 2 units, followed by a drawn segment of 1 unit and finally a gap of 2 units, after which the sequence starts over. The unit used is the line width. This means that a thicker line has longer dashes and gaps.</P> <DT><B>Join Style</B><DD> <P>.</P> <DT><B>Cap Style</B><DD> <P>.</P> <DT><B>Arrow Heads</B><DD> <P>.</P> </DL> </P> <H3><FONT face="Helvetica,Arial"><A NAME="N14"></A>Font </font></H3> <H3><FONT face="Helvetica,Arial"><A NAME="N15"></A>Dynamic Properties </font></H3> <HR NOSHADE> <TABLE WIDTH="100%"> <TR> <TD ALIGN="left"><A HREF="usersguide-2.html">Quick Overview </A></TD> <TD ALIGN="center"><A HREF="usersguide.html">User's Guide</A></TD> <TD ALIGN="right"><A HREF="usersguide-4.html">Configuration </A></TD> </TR> <TR> <TH ALIGN="left" WIDTH="33%"><img SRC="Images/arrow-left.png" WIDTH="16" HEIGHT="16" ALIGN="top" ALT="Prev"></TH> <TH ALIGN="center" WIDTH="33%"><img SRC="Images/arrow-up.png" WIDTH="16" HEIGHT="16" ALIGN="top" ALT="Up"></TH> <TH ALIGN="right" WIDTH="33%"><img SRC="Images/arrow-right.png" WIDTH="16" HEIGHT="16" ALIGN="top" ALT="Next"></TH> </TR> </TABLE> </body> </html>
