Within the main screen there is the main menu, a command, snap and status bar, tool controls, and a palette bar.

Main menu

You will use the main menu bar the most when working on your projects. This is the central location to find every tool and menu item in the program—even those found in the visual-based toolbars below it on the screen. When you select a main menu item the Inkscape dialog displays the icon, a text description, and shortcut key combination for the feature. This can be helpful while first learning the program—as it provides you with easier and often faster ways to use your most commonly-used functions of the program.

Let's take a general tour of the toolbars seen on this main screen. We'll pay close attention to the tools we'll use most frequently.

If you don't like the location of any of the toolbars, you can also make them as floating windows on your screen. This lets you move them from their pre-defined locations and move them to a location of your liking. To move any of the toolbars, from their docking point on the left side, click and drag them out of the window. When you click the upper left button to close the toolbar window, it will be relocated back into the screen.

Command bar

This toolbar represents the common and most frequently-used commands in Inkscape:

As seen in the previous screenshot you can create a new document, open an existing one, save, print, cut, paste, zoom, add text, and much more. Hover your mouse over each icon for details on its function. By default, when you open Inkscape, this toolbar is on the right side of the main screen.

Snap bar

Also found vertically on the right side of the main screen, this toolbar is designed to help with the Snap to features of Inkscape. It lets you easily align items (snap to guides), force objects to align to paths (snap to paths), or snap to bounding boxes and edges.

Tool controls

This toolbar's options change depending on which tool you have selected in the toolbox (described in the next section). When you are creating objects, it provides you all the detailed options—size, position, angles, and attributes specific to the tool you are currently using. By default, it looks like the following screenshot:

You have options to select/deselect objects within a layer, rotate or mirror objects, adjust object locations on the canvas, and scaling options and much more. Use it to define object properties when they are selected on the canvas.

Toolbox bar

You'll use the toolbox frequently. It contains all of the main tools for creating objects, selecting and modifying objects, and drawing. To select a tool, click the icon. If you double-click a tool, you can see that tool's preferences (and change them).

If you are new to Inkscape, there are a couple of hints about creating and editing text. The Text tool (A icon) in the Tool Box shown above is the only way of creating new text on the canvas. The T icon shown in the Command Bar is used only while editing text that already exists on the canvas.

Palette bar

This section of the Inkscape screen controls fill and stroke color options. Fill is the color that fills the object or shape. Alternatively, stroke is the outline around the object or shape.

There are a few ways you can set the fill and stroke in Inkscape:

• From the Palette bar, click a color and drag it from the palette onto objects to change their Fill. If you hold the Shift key and drag a color box onto an object, it will set the stroke color.
• Select an object on your canvas, and then right-click a color box in the palette. A pop-up menu appears with options to set the fill and stroke.
• Select the object on your canvas and then left-click a color box in the palette to immediately set the fill of an object. Shift+Left-Click a color box to immediately set the stroke color.

There are a large number of color boxes to choose from. Use the Palette bar scroll bar along the bottom to see more choices to the right of those displaying on the screen.

Status bar

This toolbar contains information relating to a selected object within the canvas or page of your document.

You can also use it to modify canvas settings. Here are the details:

• Style Indicator: This focuses a bit more on the selected object. If you choose any object in your canvas, you can change its fill (overall color of the object) or stroke (border color). Drag a color from the palette to this section for easy color changes. Right-clicking the Style Indicators provides a pop-up menu letting you make quick and easy coloring edits. Double-clicking the Style Indicators will launch the Fill & Stroke Menu. If you right-click the number next to the Stroke Style Indicator, you get a choice of Stroke thicknesses to choose from.
• Opacity Setting: This is the drop-down box near the Style Indicators. Right-click the drop-down box to change the opacity percentage (%) value (the default is 100%). A pop-up menu displays a set of preset values to choose from.
  
• Layer Indicator: Within Inkscape when you create documents you can have many layers of objects. This gives great flexibility when creating web layouts. You can move groups of objects at once (placing a group of them on a layer), separate objects by layer to manipulate and play with how they interact with one another when stacked, re-ordered, or hidden. You can also set certain settings by layer. You can even create drafts or different versions of mockups and keep all of this in one file.

  The Layer Indicator drop-down menu lets you choose which layer you are currently using and placing objects to—this is called the drawing layer. You can then set whether this layer is visible or locked. Sometimes you can use your documents as a "working draft" and decide to hide certain layers while developing others. You might also lock layers when you have specified the exact positioning determined and you don't want it accidentally changed while manipulating other layers.

• Notification Area: This contains hints or tricks about the objects or area you currently have selected in your document. Keep an eye on this area because it guides you with helpful information as you work within the layer. This feature is unique to Inkscape and the help messages change and update as you work with objects to reflect your available options.
• Pointer or Cursor Position: When designing any space print or Web it is often important to get precise placement of objects. To help do this, sometimes you want to see when or where your cursor or pointer is placed on the screen. This is the area on the Inkscape main screen where you can always see the exact x (horizontal) and y (vertical) placement of your cursor within the document.
• Zoom: Use the zoom tools to magnify your canvas for super close-up work or zoom out to see the whole canvas in one shot. If you right-click the zoom field a pop-up menu with commonly-used preset zoom levels is displayed and you can select one to immediately adjust the canvas to. It's nice because you can customize your viewable magnification at any time, and to whatever level you would like.
• Window resize: By default, Inkscape opens to a default window size. With the resize window option in the lower right side of this area you can click, hold, and drag the window to an appropriate size for your computer screen. Or you can choose to make the window full screen by going to the main menu and choosing View and then Full Screen (press F11 on a Windows or Linux-based system).

Canvas

Let's open a new document in Inkscape and discuss this portion of the screen.

The terms canvas and page are used interchangeably within the Inkscape interface. For simplicity, we'll refer to the canvas as the entire portion of the open document screen. A page is the portion of the canvas that is contained within the printable area—seen as a black bordered box in the previous screenshot.

You can always adjust the page—or printable area—size. Go to the main menu and select File and then Document Properties. In the Document Properties window's Page tab, look in the Format field. You can select any number of pre-defined sizes, or change the Custom Size field measurements to your liking.

The pre-defined sizes are specific to print media, whereas those found in the main menu, File | New path give common web design, logo, or web banner sized templates.

As soon as you make changes to these properties, you can see them reflected on your screen.

Dockable Dialogs are a great feature in Inkscape 0.48. They give you more freedom in your screen layout. You can Show (or Hide) dialog boxes on the right side of your screen or move to the top of your screen.

Useful dialogs to be shown here are:

The docked dialogs can be minimized, rearranged, stacked, and pulled into a separate window on your desktop. Here's how to do some of the basics:

For initial web design using these docks can be extremely useful. Particularly useful is having the Layers Dock visible, as it lets you re-order and select layers and the items in each layer quickly. To determine which dialog you have opened, there is a visual cue—the layer's menu title will be darker in title.

There are several ways to view your canvas or page in an open document. Panning means moving left, right, or up and down on the main screen.

The easiest way to pan to the left and right is to use the horizontal scroll bar along the bottom of your Inkscape screen. Panning up and down can be done with the vertical scroll bar on the right side of the screen. But, if you own a mouse with a scroll wheel you can use it to pan as well. Just scrolling with the wheel moves the canvas up and down, pressing Shift on the keyboard and then using the scroll wheel moves it sideways.

As discussed in the Status bar overview, you can use the Zoom tool to magnify your canvas so that you can see a lot of detail (zoomed in) or the entire canvas at a glance (zoomed out). By default, Inkscape opens documents at about 35%. You can also use the Zoom tool on theTool Box ,a mouse with a scroll wheel, or use your keypad (= or + zooms in and-zooms out).

You'll love that if you choose File and then New from the main menu, Inkscape has many pre-defined sizes for you already generated. For web design, you can choose from:

If you want to manually change your document properties just go to the main menu and select File and then Document Properties. You'll see the Document Properties window displayed with a number of options for customizing your canvas and "printable" page.

Some of the Web-based elements are also listed in the pre-define Format list on this screen. You can select any item in that field (i.e. Banner 468 X 60 or Icon 48 X 48) and return to the Inkscape main screen to begin.

To open an existing file, go to the main menu and choose File, then Open (or Open Recent).

Inkscape supports a number of graphic formats. Particularly, it can import or open a number of vector and bitmap based graphic formats, PDFs, and even text files. Some require additional plug-ins to be installed. See this version of the Inkscape manual for the fully supported formats and the caveats of importing each: http://tavmjong.free.fr/INKSCAPE/MANUAL/html/File-Import.html.

Remember, if you import and open a non-native Inkscape file, you may not be able edit all of the elements. Inkscape imports non-native files as flattened graphic files, so you can't edit anything within the graphic, but can manipulate or use the flattened image within Inkscape.

You'll notice when you are ready to save the document, Inkscape suggests saving in the Inkscape SVG format. Always save a version of your file in this format to allow editing at a later time. If file size is a concern, you can also save in the Inkscape compressed format of SVGZ.

For web design, it is possible that you can use the SVG files directly in the HTML/XML code. However, work with your programming team to confirm that they can use the SVG format (not all browsers or platforms support this). Using a file in any other non-Inkscape-SVG-format won't be editable to the extent of the original. So, always save the native Inkscape document and then export bitmaps and other graphics and or use File | Save Copy As to save in another format.

Exporting an entire canvas in PNG format is useful in web design when the client wants to see the graphical layout of the web design (a mockup) without having a need to interact with a live website. Details on how to perform this export will be given in Chapter 2, Designing Site Layouts.

Since you can export objects themselves or entire "pages" of content, you will need to create a directory—or folder—where you store all of the files for one project.

Just create a project folder on your computer in an easy to access location. Whenever you create a new file in Inkscape, you can save those source Inkscape files in a folder named Source. Then you can also create a Deployment folder (or another intuitive name) where you export all files in the various formats you need to hand off to a developer for website integration.

Sometimes as a designer you are asked to create logos or shapes that are outside the standard ones provided in the software. Since Inkscape is vector-based, you can combine simple shapes, masking, hiding, and layering them to create these more complex shapes. Let's perform a couple of examples to see how this can be done.

Combing shapes

So the simplest way to create more complex shapes is to combine others into one—or merge the shapes. Let's show how we can do this by creating a heart with two circles and a polygon shape.

1. Open a new document (any size will do, since we are just practicing).
2. Select the Circle/Ellipse tool in the tool box.
3. Create a circle shape.
   
4. On the main menu and choose Edit and then Duplicate.
   
5. From the tool box, choose the Select tool and then select the topmost circle object (the duplicate) and move that circle to the right side of the first, to make the crest of the heart. Press and hold the Ctrl key while you drag the circle to lock the horizontal axis of both circles.
   
6. From the tool box, choose the Star/Polygon tool.
7. In the Tool Control bar, make sure that the Polygon tool is selected.
   
8. Draw a polygon just below the circles on the canvas, with a point facing downward.
   

   Note

   Rotating an object

   While drawing the polygon on the canvas, you can swivel it up, down, left, and right to position it with a point downward (for the bottom of the heart).

   It is okay if you don't do this while drawing it initially, you can always choose the Select tool from the tool box, and click the polygon until the nodes turn to arrows with curves (this might require you to click the polygon object a couple of times). When you see the curved arrow nodes, click and drag on a corner node to rotate the object until it is positioned correctly.

9. Now choose the Select tool from the tool box, and drag the polygon so it creates the bottom point of the heart.
   
10. To readjust the size of the polygon so that the "top" doesn't ruin the crest of the heart and so that side points align with the sides of the circles just make sure the Select tool is active, and click the polygon. The resize nodes appear.
11. Click the node on a side that needs to be adjusted and resize. Repeat this as necessary until the polygon "fits" within the circles correctly.
    
12. With the polygon still selected, press and hold the Shift key while you select each circle so that all objects are selected.
13. On the main menu select Path and then Union.

This merges all three shapes into one... and voila, it's a heart!

Freehand objects (Paths)

You can also use the Bezier (Pen) tool to create objects in a bit more freehand form. This tool allows you to create straight lines and curves and connect them to create a freehand object. Here's an example of how to create a lightening bolt:

1. From a new document, choose the Bezier Pen tool from the tool box.
   
2. Click somewhere on the canvas to start drawing a straight line on the canvas, click to establish a node. Click again to change the direction of the straight line to create an angle in our lightening bolt.
   
3. Continue to create the lightening bolt object by joining line segments.

   Tip

   Don't worry if you stop a line and realize you need to extend its length. Just drag a straight line to add on to the original to make it as long as you need. Click again when you are ready to change directions.

   Also, if you made a mistake, there's no need to start over. Press the Backspace or Delete key and it removes the last line segment.

   
4. To "close" the lightening bolt, just create a line segment and join it to the starting point with a final click. You'll see that all of the lines are combined into one continuous closed path—a lightning bolt.

When you select the lightning bolt, the entire object is selected. You can resize it, fill it with a color (select it and choose a color from the color palette), and move it to another location on the canvas. It's become a unique object for you to work with.

The Bezier Pen tool also allows you to create controlled curves to create even more complex and unique objects. Try creating objects on your own and experimenting. These complex objects can be used for icons, banners, and for unique logo designs.