Inkscape 0.48 Essentials for Web Designers — Save 50%
Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website
Inkscape is an open source, free program that creates vector-based graphics that can be used in web, print, and screen design as well as interface and logo creation, and material cutting. Its capabilities are similar to those of commercial products such as Adobe Illustrator, Macromedia Freehand, and CorelDraw and can be used for any number of practical purposes—creating vector graphics for use in illustrations, business letterheads, computer and electronic wallpapers, designing logos, and designing web pages and the elements within web page design.
In this article by Bethany Hiitola, author of Inkscape 0.48 Essentials for Web Designers, we will learn the basics of Inkscape.
|Read more about this book|
(For more resources on Inkscape, see here.)
Vector graphics are made up of paths. Each path is basically a line with a start and end point, curves, angles, and points that are calculated with a mathematical equation. These paths are not limited to being straight—they can be of any shape, size, and even encompass any number of curves. When you combine them, they create drawings, diagrams, and can even help create certain fonts.
These characteristics make vector graphics very different than JPEGs, GIFs, or BMP images—all of which are considered rasterized or bitmap images made up of tiny squares which are called pixels or bits. If you magnify these images, you will see they are made up of a grid (bitmaps) and if you keep magnifying them, they will become blurry and grainy as each pixel with bitmap square's zoom level grows larger.
Computer monitors also use pixels in a grid. However, they use millions of them so that when you look at a display, your eyes see a picture. In high-resolution monitors, the pixels are smaller and closer together to give a crisper image.
How does this all relate to vector-based graphics? Vector-based graphics aren't made up of squares. Since they are based on paths, you can make them larger (by scaling) and the image quality stays the same, lines and edges stay clean, and the same images can be used on items as small as letterheads or business cards or blown up to be billboards or used in high definition animation sequences. This flexibility, often accompanied by smaller file sizes, makes vector graphics ideal—especially in the world of the Internet, varying computer displays, and hosting services for web spaces, which leads us nicely to Inkscape, a tool that can be invaluable for use in web design.
What is Inkscape and how can it be used?
Inkscape is a free, open source program developed by a group of volunteers under the GNU General Public License (GPL). You not only get a free download but can use the program to create items with it and freely distribute them, modify the program itself, and share that modified program with others.
Inkscape uses Scalable Vector Graphics (SVG), a vector-based drawing language that uses some basic principles:
- A drawing can (and should) be scalable to any size without losing detail
- A drawing can use an unlimited number of smaller drawings used in any number of ways (and reused) and still be a part of a larger whole
SVG and World Wide Web Consortium (W3C) web standards are built into Inkscape which give it a number of features including a rich body of XML (eXtensible Markup Language) format with complete descriptions and animations. Inkscape drawings can be reused in other SVG-compliant drawing programs and can adapt to different presentation methods. It has support across most web browsers (Firefox, Chrome, Opera, Safari, Internet Explorer).
When you draw your objects (rectangles, circles, and so on.), arbitrary paths, and text in Inkscape, you also give them attributes such as color, gradient, or patterned fills. Inkscape automatically creates a web code (XML) for each of these objects and tags your images with this code. If need be, the graphics can then be transformed, cloned, and grouped in the code itself, Hyperlinks can even be added for use in web browsers, multi-lingual scripting (which isn't available in most commercial vector-based programs) and more—all within Inkscape or in a native programming language. It makes your vector graphics more versatile in the web space than a standard JPG or GIF graphic.
There are still some limitations in the Inkscape program, even though it aims to be fully SVG compliant. For example, as of version 0.48 it still does not support animation or SVG fonts—though there are plans to add these capabilities into future versions.
Inkscape is available for download for Windows, Macintosh, Linux, or Solaris operating systems.
To run on the Mac OS X operating system, it typically runs under X11—an implementation of the X Window System software that makes it possible to run X11-based applications in Mac OS X. The X11 application has shipped with the Mac OS X since version 10.5.
When you open Inkscape on a Mac, it will first open X11 and run Inkscape within that program. Loss of some shortcut key options will occur but all functionality is present using menus and toolbars.
Let's briefly go over how to download and install Inkscape:
- Go to the official Inkscape website at: http://www.inkscape.org/ and download the appropriate version of the software for your computer.
- For the Mac OS X Leopard software, you will also need to download an additional application. It is the X11 application package 2.4.0 or greater from this website: http://xquartz.macosforge.org/trac/wiki/X112.4.0.
Once downloaded, double-click the X11-2.4.0.DMG package first. It will open another folder with the X11 application installer. Double-click that icon to be prompted through an installation wizard.
- Double-click the downloaded Inkscape installation package to start the installation.
For the Mac OS, a DMG file is downloaded. Double-click on it and then drag and drop the Inkscape package to the Application Folder. For any Windows device, an .EXE file is downloaded. Double-click that file to start and complete the installation. For Linux-based computers, there are a number of distributions available. Be sure to download and install the correct installation package for your system.
- Now find the Inkscape icon in the Application or Programs folders to open the program.
- Double-click the Inkscape icon and the program will automatically open to the main screen.
The basics of the software
When you open Inkscape for the first time, you'll see that the main screen and a new blank document opened are ready to go.
If you are using a Macintosh computer, Inkscape opens within the X11 application and may take slightly longer to load.
The Inkscape interface is based on the GNOME UI standard which uses visual cues and feedback for any icons. For example:
- Hovering your mouse over any icon displays a pop-up description of the icon.
- If an icon has a dark gray border, it is active and can be used.
- If an icon is grayed out, it is not currently available to use with the current selection.
- All icons that are in execution mode (or busy) are covered by a dark shadow. This signifies that the application is busy and won't respond to any edit request.
- There is a Notification Display on the main screen that displays dynamic help messages to key shortcuts and basic information on how to use the Inkscape software in its current state or based on what objects and tools are selected.
Main screen basics
Within the main screen there is the main menu, a command, snap and status bar, tool controls, and a palette bar.
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 tool bars 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.
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.
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.
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:
(Move the mouse over the image to enlarge.)
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.
You'll use the tool box 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.
eBook Price: $26.99
Book Price: $44.99
|Read more about this book|
(For more resources on Inkscape, see here.)
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.
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 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/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).
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 Document Properties window 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, while 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:
- Path Effect
- SVG Font Editor
- Filter Editor
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:
- Showing dialog boxes: To show these dialog boxes, on the main menu select View and select Show/Hide Dialogs. Then go to the Layer, Object, Path, or Text menus and choose the Editor, Layer, or Property options to show the correlating dialog box.
- Displaying more than one dialog box: If you open more than one dialog box, they stack in the order they were opened in the Dialog area of the main screen. Use the scroll bar to see those below the first viewable.
- Minimizing dialog boxes: To minimize a dialog, press the right arrow button, along the right side of the title bar of each dialog box. This places a shortcut along the left side of the Inkscape screen. To re-open it, just click the text/icon and the dialog re-opens to the large state on the screen.
- Floating dialog boxes: Dialogs can also be dragged off of the main window into their own window. Each dialog can have its own window or they can be grouped in floating docks.
- Closing dialog boxes: To close the dialog window, you can click the X on title bar for that box. It immediately closes.
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 a darker in title.
Panning and zooming
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 the Tool box , a mouse with a scroll wheel, or use your keypad (= or + zoom in and – zooms out).
For easy access to the Zoom to fit selection, Zoom to fit drawing, and Zoom to fit page in the window options, see the options in the command bar.
Creating and managing files
As stated when you first open Inkscape, a new document is opened and ready to start. However, it uses a default canvas sizes as 8.5in x 11in (standard letter size) and you likely need orientations and sizes for web design elements.
Creating web sized documents
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:
- Desktops with sizes: 1024 x 768, 1600 x 1200, 640 x 480, 800 x 600
- Web Banners 468 x 60 or 728 x 90
- Icon sizes: ranging from 16 x 16, 32 x 32, and 48 x 48
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.
The recommended format for transferring non-native Inkscape files is to use the original source program and files to create a PDF. Then open the PDF in Inkscape.
Saving Inkscape files
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 web site.
Managing multiple file projects
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 web site integration.
We spent much of this article understanding vector graphics—what they are, how they differ from the rasterized images, what this means in terms of their creation, and how best to use them on the web. Then we dove right into the basics about Inkscape, what the program is about, what it can do for you, installation, and then the details about all the menus, tools, and using the basics in the software.
- Logos in Inkscape [Article]
- Web Design Principles in Inkscape [Article]
- Creating Web Templates in Inkscape [Article]
- Creating a Layout Example in Inkscape [Article]
eBook Price: $26.99
Book Price: $44.99
About the Author :
Bethany Hiitola is a working writer and technology geek. With a degree in Scientific and Technical Communications, she's worked as a technical writer and multimedia developer for over 12 years—she spends the rest of her time as a wife, mother, gadget geek, and Master of the Household. She's written more user manuals than she can count, essays, novels, and a few technical books—including Inkscape 0.48 Essentials for Web Designers. More details are at her website: bethanyhiitola.com