23,50 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
In Detail
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 Inkscape 0.48 Essentials for Web Designers-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 and having no dearth of competitors, has already separated itself from the competition. Learn everything you need to know about enhancing your website-from site layouts to templates and animations-whether you are looking for a new website design or just some eye-candy.
The Inkscape graphics editor is powerful, but getting started is often difficult. Inkscape 0.48 Essentials for Web Designers walks you through the challenge of using Inkscape from a web design perspective in the easiest way possible.
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.
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-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.
This book will teach you all that and more, in a simple effective manner; and what's more-you'll have fun doing it.
Approach
This book is written in a clear conversational style, which emphasizes a practical learn-by-doing approach. Packed with illustrations and examples, this book will make the task of using Inkscape simple and straightforward.
Who this book is for
This book is written for web designers who want to add attractive visual elements to their website. It assumes no previous knowledge of Inkscape. General familiarity with vector graphics programming is recommended but not required. It will also be a useful guide for experienced Inkscape users who want to learn how to apply their skills to website design.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 279
Veröffentlichungsjahr: 2010
Ähnliche
Table of Contents
Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers
Copyright © 2010 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: November 2010
Production Reference: 1021110
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849512-68-8
www.packtpub.com
Cover Image by John M. Quick ( <[email protected]> )
Credits
Author
Bethany Hiitola
Reviewers
Jack Armstrong
Richard Carter
Noreen McMahan
Vic Perez
Acquisition Editor
Dilip Venkatesh
Development Editor
Maitreya Bhakal
Technical Editor
Pallavi Kachare
Indexer
Hemangini Bari
Editorial Team Leader
Aanchal Kumar
Project Team Leader
Ashwin Shetty
Project Coordinator
Zainab Bagasrawala
Proofreader
Aaron Nash
Lynda Sliwoski
Production Coordinator
Kruthika Bangera
Cover Work
Kruthika Bangera
About the Author
Bethany Hiitola is a working writer. She's worked as a technical writer and multimedia developer for over 12 years and spends the rest of her time as a wife, mother, caretaker to pets, and Master of the household. She's written more user manuals than she can count, essays, short stories, academic papers, press releases, and feature articles. All between the day job, nap times, and diaper changes. More details are at her website: www.bethanyhiitola.com.
Without you Matt, this book wouldn't have been possible. Thanks for watching the kids for endless hours, late nights, and into the wee mornings.
About the Reviewers
Jack Armstrong spent over 40 years in the Silicon Valley computer industry as a researcher, programmer, analyst, designer, and network architect. At Stanford Research Institute he worked in a large scale scientific computing, artificial intelligence and robotics, and the development of ArpaNet, predecessor to the Internet. At Hewlett-Packard's Central Research Labs and Computer Division, he participated in the design of the HP3000 and the development of HTML, serving on HTML standards committees. After years of successfully operating a software and consulting partnership and 10 years with DHL as Manager of Infrastructure Research and Development and later as Principal Architect, he is now semi-retired, developing unique web sites for local and global clients and participating in development, testing, and standard groups to extend the use of XML and in particular, SVG on the Web. When away from computers, he can be found skiing in the Sierra Nevada mountains of California as often as possible.
Richard Carter is the Creative Director at Peacock Carter Ltd (http://www.peacockcarter.co.uk), a web design and development agency based in the North East of England, working with clients including Directgov, NHS Choices, and BusinessLink.
Richard is the author of MediaWiki Skins Design,Magento 1.3 Themes Design, and Joomla! 1.5 Templates Cookbook, and previously reviewed MediaWiki 1.1 Beginner's Guide.
He blogs at http://www.earlgreyandbattenburg.co.uk and tweets nonsense at http://twitter.com/RichardCarter.
I would like to thank the author of the book for dedicating time to Inkscape, which is fast becoming a better alternative to traditional graphic design software. As always, thanks to Alexandra and EJ.
Noreen McMahan lives in Austin, Texas, where she works for Freescale Semiconductor, Inc. as a member of their Single-Source Documentation System (SSDS) team. She is the SSDS training lead, providing both classroom and written instruction in the use of DITA XML, the Freescale component content management system (CCMS), and the tools required for SSDS content development, including Inkscape. She also participates in SSDS software regression testing and user acceptance testing, which are both activities that feed the training.
For several years, Noreen worked as an information developer and editor at Freescale Semiconductor. At one point, she supervised the work of an 8-person editing team. Noreen has over 20 years of experience drawing engineering diagrams for a variety of document types. She is among the early adopters charged with researching scalable vector graphics (SVG) and promulgating the use of Inkscape at Freescale Semiconductor.
Noreen has lived in Austin since she moved there as a graduate student to attend the University of Texas, where she earned her Ph.D. in English and taught technical writing. Noreen has a 25-year old son, Eric Garrison, and two cats, Xena and Gabrielle.
Vic Perez is a guy that loves art. His experience includes painting with oils and water colors, drawing with inks, pencils and prisma colors. He has created a few custom indoor and outdoor painted wall murals, numerous logos, and web designs.
Thanks to Zainab Bagasrawala, from Packt Publishing, the author of this book, and the Administrative Team at the Inkscape forum website.
Preface
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 Inkscape 0.48 Essentials for Web Designers—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 and having no dearth of competitors, has already separated itself from the competition. Learn everything you need to know about enhancing your website—from site layouts to templates and animations—whether you are looking for a new website design or just some eye candy.
The Inkscape graphics editor is powerful, but getting started is often difficult. Inkscape 0.48 Essentials for Web Designers walks you through the challenge of using Inkscape from a web design perspective in the easiest way possible.
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.
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—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.
This book will teach you all that and more, in a simple effective manner, and what's more—you'll have fun doing it.
What this book covers
Chapter 1, Inkscape 101: The Basics discusses 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 it gives simple instructions about using Inkscape including installation, details about all the menus and tools, and creating some simple and complex objects.
Chapter 2, Designing Site Layouts introduces design techniques that can make web pages move from good to great, describes a simple web page layout, and then shows how to make the site that has a header, navigation bar, and content areas.
Chapter 3, Working with Images teaches you everything you need to know about images—raster and vector—in Inkscape. From importing bitmap images, embedding images, rendering bitmap images as vector graphics, working a little with photographs and filters, importing clip art, and all the tips and tricks for "tracing" bitmap images to convert them into full vector graphics for both photographs and logos.
Chapter 4, Styling Text is about text editing and styling. Specifically about kerning, rotating, moving letters from the baseline, reflection, following paths, shadows, the perspective tool, and even some cool envelope effects.
Chapter 5, Creating Wallpapers and Pattern Backgrounds describes how to use the built-in patterns within Inkscape, create a new pattern, and use spirals and the Spiro effect, as well as how to manipulate the patterns to make them even more intricate and incorporate them into an example project.
Chapter 6, Building Icons, Buttons, and Logos starts by describing icon and button design principles. Then it explains new techniques like the glow effect and masking while creating buttons. There is also some discussion of logo design principles, how to best tackle that logo design project, and step-by-step directions on creating icons, buttons, and logos.
Chapter 7, Making Diagrams, Site Maps, and More teaches you how to use Inkscape to create diagrams, charts, and site maps—including the basics for what each type of diagram is, what it would be used for, and then how best to create each of them.
Chapter 8, Designing for Blogs and Storefronts is all about web design for blogs and online merchant stores. We walk through simple designs for each, defining common elements for each website type and even some sub-level pages to help keep the designs consistent. There is also a discussion about using grids and a CSS framework.
Chapter 9, Using the XML Editor is all about XML and SVG code. It teaches how to access the Inkscape XML editor in Inkscape and edit the code for a pleasant result in your graphical image.
Chapter 10, Creating Simple Animations discusses how Inkscape has limited capabilities for creating animations—but with a little help from another open source tool like Gimp, you can still create animations. We will break down an animation into individual animation frames and create each one that will then be brought together using Gimp to complete a full animation sequence.
Chapter 11, Plugins, Scripts, and Templates starts discussing the pre-installed templates in Inkscape. Then it describes how to install a new template, modify a standard template and save it as a custom, and how to start from scratch and save a custom template. Lastly, it discusses what plugins, scripts, and extensions are within Inkscape and how you can access them.
Appendix A, Keyboard Shortcuts mentions the basic keyboard shortcuts for Inkscape 0.48.
Appendix B, Glossary of Terms is a glossary of Inkscape and basic web design terms used throughout this book.
Appendix C, Fonts is an overview of how fonts are viewed in web browsers and in SVG files.
What you need for this book
You'll need the latest version of Inkscape 0.48 and the latest version of Gimp.
If you are using a Mac, then they also need the X11 app on your system to run Inkscape (this typically come pre-installed on Leopard OSX. More details in Chapter 1.)
Who this book is for
This book is written for web designers who want to add attractive visual elements to their website. It assumes no previous knowledge of Inkscape. General familiarity with vector graphics programming is recommended but not required. It will also be a useful guide for experienced Inkscape users who want to learn how to apply their skills to website design.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "For any Windows device, an .EXE file is downloaded."
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Now find the Inkscape icon in the Application or Programs folders to open the program."
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Inkscape 101: The Basics
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—as is the focus of this book—designing web pages and the elements within web page design.
This book's purpose is to help you learn to use Inkscape to help develop web pages. We'll start at the beginning of design, the principles of web design, then move to wireframe and mockups development and then learn how to export all of your images and files for use in the HTML development. There will also be information about how to enhance your web page designs by learning the ins and outs of using Inkscape as a graphics tool for creating icons, backgrounds, buttons, blog designs, flowcharts, diagrams, site maps, banner advertisements, and more.
Specifically this book will teach you how to:
However, before learning the details on how to use Inkscape, let's take a step back and define vector graphics, how computer displays and vector graphics work together, and why we want to use them in web design.
Vector graphics
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 ScalableVectorGraphics (SVG), a vector-based drawing language that uses some basic principles:
SVG and WorldWideWebConsortium (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.
Installing Inkscape
Inkscape is available for download for Windows, Macintosh, Linux, or Solaris operating systems.
Note
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:
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.Note
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.
Note
In this book, the screen shots will be specific to the Mac OS X software. Don't be concerned if this is not the computer operating system of your choice; the software itself is very similar between them and notable differences in the Inkscape software screens will be noted.
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.
Note
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:
Main screen basics
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.
Toolbars
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.
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 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 Texttool (A icon) in the ToolBox shown above is the only way of creating new text on the canvas. The T icon shown in the CommandBar 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:
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:
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.
