<html> <head> <title>User's Guide: Quick Overview </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-1.html">Introduction</A></TD> <TD ALIGN="center"><A HREF="usersguide.html">User's Guide</A></TD> <TD ALIGN="right"><A HREF="usersguide-3.html">Concepts</A></TD> </TR> </TABLE> <HR NOSHADE> <H1><FONT face="Helvetica,Arial"><A NAME="N1"></A>Quick Overview </font></H1> <P>Since the User's Manual is quite incomplete and even a bit outdated, here is a quick guide to the main features of Sketch.</P> <H2><FONT face="Helvetica,Arial"><A NAME="N2"></A>The Main Window</font></H2> <P>There's not much to say about the main window, since many of its components are fairly standard, like the <A HREF="#N3">menu and toolbar</A>.</P> <P>The status bar at the bottom indicates the current <A HREF="#N8">mode</A>, the current magnification factor, the current position of the mouse pointer (you can change the unit from the context menu) and some information about the current selection.</P> <P>The palette just above the status bar allows you to easily assign a fill color (click the left mouse button) or a line color (middle mouse button). It also has an experimental Drag&Drop facility: click on a color and drag the color to the pattern window in the fill dialog or onto a color button.</P> <H2><FONT face="Helvetica,Arial"><A NAME="N3"></A>Toolbar/Menu </font></H2> <P>Here's a brief description of some menu commands. If the command is also available as a button in the toolbar, the icon is also shown.</P> <P>Some commands are accessible via key strokes. The key sequence is indicated in the menu. The notation for key strokes is described in the section on <A HREF="#N7">key strokes</A>.</P> <P> <DL> <DT><B>File Operations</B><DD> <P> <DL> <DT><B><img SRC="Images/Open.png" WIDTH="24" HEIGHT="24"> Open</B><DD> <P>Load a file into Sketch. Sketch tries to determine the file type automatically. It recognizes its own format, XFig, Adobe Illustrator, CMX (an exchange format defined by Corel), SVG (the upcoming web-standard for vector graphics) and WMF files.</P> <P>The filters for the 'foreign' formats are not complete. The XFig filter for instance has some problems with the ordering of objects (because of that awful `depth' feature) and ignores arrow heads and dashing.</P> <DT><B>Insert Document</B><DD> <P>Insert the contents of a document as a group into the current document.</P> <DT><B><img SRC="Images/Save.png" WIDTH="24" HEIGHT="24"> Save</B><DD> <P>Save the current file. If it was read from an SK-file (Sketch's own format) it is saved under the same name after Sketch has created a backup file. If it was not read from a file or the file was not an SK-file, you have to specify a filename. Sketch can currently save SK-files and Illustrator files.</P> <DT><B>Save As PostScript</B><DD> <P>Save the current drawing into a PostScript file. The file conforms to the EPS specification (I hope).</P> </DL> </P> <DT><B>Edit Commands</B><DD> <P> <DL> <P><A NAME="N4"></A></P> <DT><B><img SRC="Images/EditMode.png" WIDTH="24" HEIGHT="24"> Edit Mode<BR> <img SRC="Images/SelectionMode.png" WIDTH="24" HEIGHT="24"> Selection Mode</B><DD> <P>Switch to one of Sketch's major modes, <A HREF="#N8"><EM>edit mode</EM> and <EM>selection mode</EM></A>.</P> <DT><B><img SRC="Images/Undo.png" WIDTH="24" HEIGHT="24"> Undo<BR> <img SRC="Images/Redo.png" WIDTH="24" HEIGHT="24"> Redo</B><DD> <P>Sketch allows you to undo every operation and maintains a virtually unlimited undo history. If you really want to limit the undo history, you can do so from the preferences dialog (<b>File/Options...</b>).</P> <DT><B><img SRC="Images/Delete.png" WIDTH="24" HEIGHT="24"> Delete</B><DD> <P>Delete the current object.</P> <DT><B><img SRC="Images/Duplicate.png" WIDTH="24" HEIGHT="24"> Duplicate</B><DD> <P>Create a duplicate of the current object just above the current object and select it. The duplicate is slightly offset. You can set the duplication offset in the preferences dialog.</P> </DL> </P> <DT><B>Effects</B><DD> <P> <DL> <DT><B><img SRC="Images/FlipHorizontal.png" WIDTH="24" HEIGHT="24"> Flip Horizontal<BR> <img SRC="Images/FlipVertical.png" WIDTH="24" HEIGHT="24"> Flip Vertical</B><DD> <P>Flip the current object(s) horizontally (vertically)</P> <DT><B>Remove Transformation</B><DD> <P>Some objects have an intrinsic geometry, like text objects, where the geometry is defined by the font and the font size, and bitmap images or EPS files. Any transformations (rotations, reflections, ...) later applied are stored in the object. <b>Remove Transformation</b> reverts these objects to their natural size and orientation.</P> </DL> </P> <DT><B>Rearranging the Stacking Order</B><DD> <P> <DL> <DT><B><img SRC="Images/MoveToTop.png" WIDTH="24" HEIGHT="24"> Move To Top</B><DD> <P>Move the current object to the top of its layer.</P> <DT><B><img SRC="Images/MoveToBottom.png" WIDTH="24" HEIGHT="24"> Move To Bottom</B><DD> <P>Move the current object to the bottom of its layer.</P> <DT><B><img SRC="Images/MoveOneUp.png" WIDTH="24" HEIGHT="24"> Move One Up</B><DD> <P>Swap the current object and the next higher one.</P> <DT><B><img SRC="Images/MoveOneDown.png" WIDTH="24" HEIGHT="24"> Move One Down</B><DD> <P>Swap the current object and the next lower one.</P> </DL> </P> <DT><B>Grouping Objects</B><DD> <P> <DL> <DT><B><img SRC="Images/Group.png" WIDTH="24" HEIGHT="24"> Group</B><DD> <P>Replace the currently selected objects with a group containing these objects and select it.</P> <P>Grouped objects are usually manipulated as a whole, but if needed, you can <A HREF="#N10">select individual objects</A> with the mouse or keyboard.</P> <DT><B><img SRC="Images/Ungroup.png" WIDTH="24" HEIGHT="24"> Ungroup</B><DD> <P>Replace the currently selected group with the objects it contains and select them.</P> <P>While Group creates only normal groups, this command can ungroup other <A HREF="#N13">special groups</A> such as blend groups or mask groups as well.</P> </DL> </P> <DT><B>Viewing Commands</B><DD> <P> <DL> <DT><B><img SRC="Images/Zoom.png" WIDTH="24" HEIGHT="24"> Zoom</B><DD> <P>After invoking the zoom command you can either <UL> <LI>Zoom into a region. Click and drag <b><Button1></b> to indicate a rectangular area in the main window. This area will be magnified such that it just fits into the window. </LI> <LI>Double the magnification Just click (and don't drag) <b><Button1></b> on a point in the main window. This point will be centered and the magnification factor doubled.</LI> </UL> The maximum zoom factor is 1600%.</P> </DL> </P> <DT><B>Arranging Objects</B><DD> <P> <DL> <DT><B>Convert To Curve</B><DD> <P>Convert the current object to a bézier object. This works for béziers :-), rectangles, ellipses and text. (To convert text to béziers, Sketch must have access to the appropriate type1 font file (either .pfa or pfb)).</P> <DT><B><img SRC="Images/GridOn.png" WIDTH="24" HEIGHT="24"> Snap To Grid</B><DD> <P>Turns the grid on (or off, if it's on). If gridding is on, objects will snap to grid points when they are edited.</P> <P>This command doesn't affect the visibility of the grid. The visibility is controlled via the layer dialog. The grid is a special layer which is usually called "Grid".</P> <DT><B>Snap To Objects</B><DD> <P>If snapping to objects is active, dragged objects snap to the nearest special point of any other visible object. Special points are the nodes of a bézier curve or the corners of a rectangle.</P> <DT><B>Snap To Guide Lines</B><DD> <P>If snapping to guide lines is active, dragged objects snap to the nearest guide line or other objects on the guide layer.</P> <P>This command doesn't affect the visibility of the guide lines. The visibility can be controlled from the layer dialog. The guide layer is usually called "Guide Lines".</P> </DL> </P> <DT><B>Creating Objects</B><DD> <P><A NAME="N5"></A> <DL> <DT><B><img SRC="Images/CreateRect.png" WIDTH="24" HEIGHT="24"> Rectangle</B><DD> <P>Create a Rectangle by pressing the left mouse button and dragging the mouse. One corner of the newly created rectangle is where the button was pressed, the other where it was released. Holding <b><Ctrl></b> while dragging creates a square, holding <b><Shift></b> creates a rectangle or square centered on the starting point.</P> <P>In <A HREF="#N8"><EM>edit mode</EM></A>, you can drag the corners of a rectangle to create rounded corners.</P> <DT><B><img SRC="Images/CreateEllipse.png" WIDTH="24" HEIGHT="24"> Ellipse</B><DD> <P>Create an Ellipse by pressing the left mouse button and dragging the mouse. Holding <b><Ctrl></b> while dragging creates a circle, holding <b><Shift></b> creates a ellipse or circle centered on the starting point.</P> <P>In <A HREF="#N8"><EM>edit mode</EM></A>, you can drag the handle of an ellipse to create arcs.</P> <DT><B><img SRC="Images/CreateCurve.png" WIDTH="24" HEIGHT="24"> Bézier Curve</B><DD> <P>Create a Bézier curve. This requires at least two click-drag-release cycles. The first cycle defines the start point of the curve and its tangent. The next cycles define the rest of the points and tangents in the same fashion. Click <b><Button2></b> or press <b>Space</b> to finish.</P> <DT><B><img SRC="Images/CreatePoly.png" WIDTH="24" HEIGHT="24"> Polygon</B><DD> <P>Create a polygon. The first click-drag-release cycle defines the first line segment. The next cycles define the rest of the segments. Click <b><Button2></b> or press <b>Space</b> to finish. The object created is actually a Bézier curve consisting only of straight lines.</P> <DT><B><img SRC="Images/Text.png" WIDTH="24" HEIGHT="24"> Text</B><DD> <P>Create a text object by clicking where you want the text to be and type. If you click and drag you create rotated text.</P> <DT><B><img SRC="Images/Image.png" WIDTH="24" HEIGHT="24"> Bitmap/EPS images</B><DD> <P>This command opens a dialog box to let you specify the image file. After selecting the file, place the image on the page by clicking at the desired position. A dashed rectangle indicates the size and position.</P> <P>Sketch can load any image the Python Imaging Library (PIL) can read. EPS files are not read by the PIL, they are imported and printed unmodified. Sketch uses Ghostscript to render a preview image, so an EPS file looks like an ordinary bitmap image on the screen.</P> </DL> </P> </DL> </P> <H2><FONT face="Helvetica,Arial"><A NAME="N6"></A>Mouse and keyboard </font></H2> <H3><FONT face="Helvetica,Arial"><A NAME="N7"></A>Notation of key strokes </font></H3> <P>The notation of key strokes used in this manual and in the menus is very similar to the one used in GNU-Emacs:</P> <P> <TABLE BORDER="2"> <TR> <TH>Notation </TH> <TH ALIGN="left">Meaning </TH> </TR> <TR> <TD><b>Space</b> </TD> <TD>space </TD> </TR> <TR> <TD><b>Right</b>, <b>Left</b>, <b>Up</b>, <b>Down</b> </TD> <TD ROWSPAN="2">The cursor keys </TD> </TR> <TR> <TD><b>Prev</b>, <b>Next</b>, <b>Home</b>, <b>End</b> </TD> </TR> <TR> <TD><b><Shift></b> <b><Ctrl></b> <b><Meta></b> </TD> <TD>The modifier keys Shift Control and Meta (which may be the Alt key) </TD> </TR> <TR> <TD><b><Button1></b></TD> <TD>The left mouse button </TD> </TR> <TR> <TD><b><Button2></b></TD> <TD>The middle mouse button </TD> </TR> <TR> <TD><b><Button3></b></TD> <TD>The left mouse button </TD> </TR> <TR> <TD> <b>C-d</b> </TD> <TD> <b><Ctrl></b> and lowercase "d", similarly <b>S-</b> for <b><Shift></b> and <b>M-</b> for <b><Meta></b> </TD> </TR> </TABLE> </P> <P>Unless otherwise noted, "Clicking" means a click with the left mouse button.</P> <H3><FONT face="Helvetica,Arial"><A NAME="N8"></A>Modes </font></H3> <P>Most of the time, Sketch is on one of two major modes: <EM>Selection Mode</EM> or <EM>Edit Mode</EM>. You can switch between these modes with <b>Space</b> or the <A HREF="#N4">toolbar</A>. </P> <P>In selection mode, you can select objects and <A HREF="#N11">move and transform</A> them as a whole with the mouse. Most commands operate on the currently selected objects (see also <A HREF="#N6">Mouse And keyboard</A>). In edit mode, you can edit individual aspects of an object, like the nodes of a bézier curve or the text of a text object.</P> <P>Sometimes, Sketch is in a temporary minor mode, for instance when selecting a region for zooming, or when <A HREF="#N5">creating an object</A>.</P> <H3><FONT face="Helvetica,Arial"><A NAME="N9"></A>Selecting Objects</font></H3> <P>To select... <DL> <DT><B>...a single object:</B><DD> <P>Click on it. It will become the new currently selected object.</P> <DT><B>...multiple objects:</B><DD> <P>Click <b>S-<b><Button1></b></b> on an object to add it to the selected objects.</P> <P>Click <b>C-<b><Button1></b></b> on an object to deselect it.</P> <P>You can also select multiple objects by rubberbanding. Click and drag <b><Button1></b>, all objects in the dashed rectangle will be selected. Again, holding <b><Shift></b> or <b><Ctrl></b> add or deselect the indicated objects.</P> <DT><B>...an object in a group:</B><DD> <P><A NAME="N10"></A></P> <P> <OL> <LI>Select the group.</LI> <LI>Click <b>C-S-<b><Button1></b></b> on the sub-object.</LI> </OL> </P> </DL> </P> <P>You can also use the cursor keys to navigate through the object hierarchy:</P> <P> <TABLE> <TR> <TD><b>M-Right</b> </TD> <TD>Select the next (higher) object </TD> </TR> <TR> <TD><b>M-Left</b> </TD> <TD>Select the previous (next lower) object </TD> </TR> <TR> <TD><b>M-Down</b> </TD> <TD>Select the first child (sub-object) of the current object </TD> </TR> <TR> <TD><b>M-Up</b> </TD> <TD>Select the parent of the current object (if the current object is a sub-object) </TD> </TR> </TABLE> </P> <H3><FONT face="Helvetica,Arial"><A NAME="N11"></A>Manipulating Objects </font></H3> <P>If you're in selection mode and you've just selected an object, Sketch indicates this with 8 rectangular <EM>handles</EM> around the object:</P> <P> <CENTER> <img SRC="Images/selsize.png" WIDTH="270" HEIGHT="120"> </CENTER> </P> <P>Clicking on a handle and dragging it will resize the object. Just clicking on the object and dragging the object, moves the object. Holding <b><Ctrl></b> while dragging constrains the resize and move operations.</P> <P>A single click (and no drag) on the object switches to transformation mode:</P> <P> <CENTER> <img SRC="Images/seltrafo.png" WIDTH="270" HEIGHT="120"> </CENTER> </P> <P>Another single click switches back to the resize mode.</P> <H2><FONT face="Helvetica,Arial"><A NAME="N12"></A>Object Types</font></H2> <H3><FONT face="Helvetica,Arial"><A NAME="N13"></A>Special Effects </font></H3> <P>Sketch currently has three special effects groups:</P> <H4><FONT face="Helvetica,Arial"><A NAME="N14"></A>Blend Groups</font></H4> <P>To create a blend group: <OL> <LI>select the two objects you want to blend </LI> <LI>open the blend panel (<b>Effects/Blend...</b>) </LI> <LI>set the number of steps </LI> <LI>and press the Apply-button</LI> </OL> </P> <P>If you later edit one of the control objects, the blend group will be updated automatically.</P> <P>For optimal results, the objects should have a similar structure: bézier curves with the same number of nodes, groups with the same number of sub objects, etc.</P> <P>To create a blend group with more than two control objects, select the start or end object of an existing blend group and the new control object and press apply in the blend panel.</P> <P>It's a little awkward to change the number of steps in an interpolation with the blend panel if the blend group has more than two control objects (and therefore more than one interpolation). In that case, you have to select the interpolation itself by holding <b><Ctrl></b> and <b><Shift></b> while clicking on it.</P> <H4><FONT face="Helvetica,Arial"><A NAME="N15"></A>Mask Groups</font></H4> <P>A mask group is a special group where one object defines a clip mask for the rest of the group. If this object is e.g. an ellipse, all that is drawn of the other objects are the parts that overlap the ellipse.</P> <P>To create a mask group <OL> <LI>Select the mask. </LI> <LI>Invoke <b>Arrange/Move To Top</b> </LI> <LI>Add the other objects to the selection. </LI> <LI>Create the mask group via the menu <b>Effects/Create Mask Group</b></LI> </OL> </P> <P>Note: The <EM>topmost</EM> of the selected objects will become the mask, regardless of the order in which you select them. (In versions prior to 0.5.3 it was the lowest object)</P> <P>If you want to edit the mask you can select it via the context menu (<b><Button3></b>).</P> <P>The mask has to be a rectangle, an ellipse, a bézier curve or an image.</P> <H4><FONT face="Helvetica,Arial"><A NAME="N16"></A>Text on a Curve</font></H4> <P>In Sketch, you can align text along a curve: <CENTER> <TABLE> <TR> <TD><img SRC="Images/textpathrot.png" WIDTH="200" HEIGHT="150"> </TD> <TD><img SRC="Images/textpathskew.png" WIDTH="200" HEIGHT="150"> </TD> </TR> <TR> <TD COLSPAN="2">Text on a path can have either rotated letters (left) or skewed letters (right). </TD> </TR> </TABLE> </CENTER> </P> <P>To create this <OL> <LI>Select a text object and a curve (a bézier curve, an ellipse or a rectangle) </LI> <LI>Choose <b>Effects/Create Path Text</b> from the menu.</LI> </OL> </P> <P>To edit either the text object or the curve individually, select it via the context menu if the whole group is selected.</P> <P>This way, you can hide the curves by assigning empty fill and line patterns.</P> <HR NOSHADE> <TABLE WIDTH="100%"> <TR> <TD ALIGN="left"><A HREF="usersguide-1.html">Introduction</TD> <TD ALIGN="center"><A HREF="usersguide.html">User's Guide</TD> <TD ALIGN="right"><A HREF="usersguide-3.html">Concepts</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>
