Book Image

Inkscape 0.48 Essentials for Web Designers

By : Bethany Hiitola
Book Image

Inkscape 0.48 Essentials for Web Designers

By: Bethany Hiitola

Overview of this book

<p>Do you think that your website could do with more visual appeal? Are you looking to spice it up with attractive designs and effects? Enter <i>Inkscape 0.48 Essentials for Web Designers</i>&mdash;the only book specifically tailored to using Inkscape for web design. This book will teach you how to effectively use the fascinating new Inkscape vector graphics editor, which, despite being in version 0.48 <i>and</i> having no dearth of competitors, has already separated itself from the competition. Learn everything you need to know about enhancing your website&mdash;from site layouts to templates and animations&mdash;whether you are looking for a new website design or just some eye-candy.<br /><br />The Inkscape graphics editor is powerful, but getting started is often difficult. <i>Inkscape 0.48 Essentials for Web Designers</i> walks you through the challenge of using Inkscape from a web design perspective in the easiest way possible. <br /><br />The first book to unlock the potential of Inkscape for web design, it begins with an introduction to the basics of Inkscape and then journeys you through implementing them in your website one by one.<br /><br />Learn to build your first website design using Inkscape. Create web page and desktop wallpapers with repeating pattern backgrounds and swirling designs. Incorporate icons and interactive maps on your website. Style and graphically manipulate text&mdash;from simple headings to shadowing, following paths, reflections, 3D effects, and more. Enhance your web pages using flowcharts, diagrams, and site maps and learn how to export them. Spruce it all up using animations. <br /><br />This book will teach you all that and more, in a simple effective manner; and what's more&mdash;you'll have fun doing it.</p>
Table of Contents (20 chapters)
Inkscape 0.48 Essentials for Web Designers
Credits
About the Author
About the Reviewers
Preface
Keyboard Shortcuts
Glossary of Terms
Index

Appendix B. Glossary of Terms

Alignment: Lines up all the elements, horizontally or vertically, upon the screen. Use natural alignments within an entire web space when you use more than one graphical element such as photos, graphics, and/or text.

Animated GIFs: In Inkscape, you can create vector graphics and export them as PNG files. Then you can use those individual PNG files and create individual animation frames that can be used in other open source programs like Gimp to create animated GIFs.

Attributes: It is the properties of an object as seen in the Inkscape XML Editor. Selecting an attribute (like stroke or fill) will then let you see the detailed properties (such as color codes and line thicknesses).

Backgrounds: These are "behind" the overall design of a web page. Can be of any design, shape, size or color but, as a rule of thumb, a background should not distract from the overall design of a web page.

Blogs: Now commonplace on the web, these are web sites or portions of websites that offer commentary on personal events, politics, videos, pictures, and anything else that can be "posted" online. Blogs are structured around posts that are published in reverse-chronological order and allow readers to provide comments and sometime ratings.

Buttons: Used on forms and other forms of web pages where a user needs to "submit" information that will be stored.

Canvas: The page or document in Inkscape where your objects and shapes are created.

Cascading Style Sheet (CSS): Used with the HTML/XML coding to define the look and formatting of an entire web site. One style sheet determines fonts, colors, spacing, placement, and more—reducing complexity and repetition in the coding of the pages themselves.

Contrast: A design principle that can help create effective and pleasant web pages. Contrast uses abstractly different sizes, colors, directions, shapes and fonts (mixing modern with old style), font weights, and more.

Diagram: A graphical representation of information that uses shapes, images, and more to create a cohesive thought. There are a number of diagram types such as Venn, Activity, Tree, Network, and more.

Dialogs: Windows or portions of screens that appear in response to a user action and invite the user to select from a set of options in the window to or make a decision. Often, the user must click OK to confirm the decision.

Extensions: Inkscape scripts that, when installed, "extend" the features or functionality of the software.

Fill: Terminology to describe the color of an object or shape.

Font: A certain size and style of type in text fields.

Flow chart: One of the most common types of diagrams. It shows the general process for completing a task or decision. It shows each step, decision, and option as a particular box/option/connector. And in general it represents a step-by-step solution to a given problem.

Gimp: An open-source photo manipulation software tool. It is used in this book for the process of creating an animated GIF. More information can be found at: http://www.gimp.org.

Grids: A tool in Inkscape to help align and measure objects. Can be particularly useful in creating web page designs because there are "snap to grid" options to help with exact alignment.

Guides: Another tool in Inkscape that can be user-generated. You can create guides on your canvas to help with align and place objects.

Handle: Small squares or circles at edges of an object in Inkscape. Handles are often used to change the size of an object or change the shape of a path.

Icons: Usually smaller objects that represent a certain feature or function on a web page. However, they can be completely graphical or a combination of graphics and text.

Layers: A feature of Inkscape software that allows multiple "layers" on a canvas for easier creation. Each layer can be locked, viewed, moved, and more. You must select a layer before you can start manipulating objects within that layer. This selected layer, is then termed the drawing layer.

Lock: Objects, shapes, text, and layers can all be locked in Inkscape. Once this setting is in place, these objects cannot be edited until they are unlocked.

Logos: A visual representation of a company or brand.

Lorem Ipsum : A text effect that displays a pseudo-Latin form of text that is used as a "placeholder" in the larger context of the web page design. Allows visual correlation of text content, without having to create actual text for that space in the design.

Open Clipart Library: An open-source, free clip art image library that you can search directly from Inkscape.

Organizational chart: Or "org chart" shows the structure of an organization. It also details roles, job titles, and sometimes the relationships between the jobs.

Panning: Moving left, right, or up and down on the Inkscape main screen.

Paths: Lines that have a start and end point, curves, angles, and points that are calculated with a mathematical equation. However 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.

Plugins: Additional software you install to add new capabilities to Inkscape.

Properties: Attributes/details of an object created in Inkscape. These are typically editable and can be changed with the software interface or within the XML editor.

Proximity: A grouping of similar information together on a web page.

Rasterized images: Images that are created by tiny rectangular dots which we call pixels. File types like JPG, FIG, and BMP are all rasterized images.

Repetition: The idea of repeating elements such as buttons, shapes (graphical or just placement), or colors in a design to make a pleasing impact.

RSS (Really Simple Syndication) feeds: A basic way to continually broadcast (or publish) blog entries. These feeds are in a standardized XML format and pull the metadata tags you assigned when publishing your blog post and display them in "readers" for others to automatically receive.

Scalable Vector Graphics or SVG: An OASIS standard vector-based drawing language that uses some basic principles: it can be scalable to any size without losing detail and 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.

Scans: A process Inkscape uses to describe a "pass" over a bitmap image in order to create a trace of the image. Single scans are done with a single pass (or scan) to create the paths. Multiple scans, in turn, use multiple passes with different settings each time to create different paths that are then stored and displayed in a group to create the trace.

Scripts: Add new features to Inkscape. They must be installed after the initial Inkscape installation and are typically written in a different programming language than the main program (Inkscape in this case) and can be modified at any time.

Shapes: In Inkscape and SVG there are basic shape elements that include rectangles, circles, ellipses, straight lines, polylines, and polygons. They have different attributes than paths, and can have fill and stroke information edited via the software interface as well as with the XML editor directly.

SIOX Simple Interactive Object Extraction: A process of separating an object from the background in a bitmap image.

Site tree/Site map: A list of all the individual pages of a web site. Typically the site map outlines how each page is linked to the others. It can be used for web site planning, but also as a user interface aide to help web site users find where they need to be on the site.

Storefronts: Any web site that sells a commodity. They often allow you to search through products and then purchase a product through a "shopping cart".

Stroke: The border of an object or shape. You can often change the stroke color and thickness.

Template: A base document that has been created to simplify the design process. Basic settings like canvas size, fonts, colors, and placement have already been pre-defined and set in the document.

Text styling: Manipulating text so that it creates a certain feel when seen in an overall design. Sometimes it is also called typography or typesetting.

Tracing: The process of creating paths (and nodes) to represent an underlying bitmap image and then using those paths to create a vector based image.

Vector graphics: The use of points, lines, curves, and shapes or polygon(s), which are all based on mathematical equations, to represent images in computer graphics.

Wallpapers: Images used as desktop backgrounds. These are also commonly used (and downloaded) with cell phones and other electronic devices.

XML Editor: Code-based version of objects and drawings on your Inkscape canvas. Within the XML editor you can change any aspect of the document and see it immediately reflected on your canvas.

Zoom: A function that magnifies your canvas to see more detail (zoomed in) or displays the entire canvas at a glance (zoomed out).