Inkscape 0.48 Essentials for Web Designers Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website Bethany Hiitola BIRMINGHAM - MUMBAI 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 Editorial Team Leader Bethany Hiitola Aanchal Kumar Reviewers Project Team Leader Jack Armstrong Ashwin Shetty Richard Carter Project Coordinator Noreen McMahan Zainab Bagasrawala Vic Perez Proofreader Acquisition Editor Aaron Nash Dilip Venkatesh Lynda Sliwoski Development Editor Production Coordinator Maitreya Bhakal Kruthika Bangera Technical Editor Cover Work Pallavi Kachare Kruthika Bangera Indexer Hemangini Bari 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. Table of Contents Preface 1 Chapter 1: Inkscape 101: The Basics 7 Vector graphics 8 What is Inkscape and how can it be used? 8 Installing Inkscape 9 The basics of the software 10 Main screen basics 12 Main menu 12 Toolbars 13 Command bar 13 Snap bar 14 Tool controls 14 Toolbox bar 14 Palette bar 15 Status bar 15 Canvas 17 Dockable Dialogs 18 Panning and zooming 20 Creating and managing files 22 Creating web sized documents 22 Saving Inkscape files 23 Managing multiple file projects 24 Paths 24 Creating shapes 25 Complex shapes 29 Combing shapes 30 Freehand objects (Paths) 34 Summary 37 Table of Contents Chapter 2: Designing Site Layouts 39 Architecting a web site 39 Web layout—principles and basics 40 The basic design 41 Starting a new design project 42 Using grids and guidelines 43 Viewing the grid 43 Making guides 43 Creating a new layer 44 Creating basic design areas in Inkscape 46 Converting shapes to guides 48 Creating a layout example 50 Designing the background 50 Making the header background 50 Building the main body background 54 Creating the footer background 55 Designing the header 57 Navigational elements 58 Creating a footer 59 Making a sidebar 61 Creating content areas 62 Exporting design mock-ups 64 Creating a slice layer 64 Exporting slices 66 Working with programmers 67 Summary 68 Chapter 3: Working with Images 69 Importing images in Inkscape 69 Embedding images 70 Importing from the Open Clip Library (Mac users) 71 Rendering a Bitmap image 72 Basics about photo manipulation 74 Tracing images 76 Using Protrace 76 Using SIOX 81 Converting raster logos to vector-based logos 83 Using individual images as design elements 84 Summary 87 Chapter 4: Styling Text 89 Creating and editing text tools 90 Text styling keyboard shortcuts 93 [ ii ] Table of Contents Text effects 95 Using the Lorem Ipsum effect 95 Find and replace 96 Sentence case 97 Title case 97 Uppercase and lowercase 98 Flipcase 98 Random case 98 Using reflections, shadows, and glows 99 Reflections 99 Shadows and glows 102 More about text and paths 103 Using a path for text 103 Placing text within a closed shape 106 Using perspective 107 Pulling it all together 109 Creating title bars and headings 112 Exporting title bars for use as a design element 114 Summary 115 Chapter 5: Creating Wallpapers and Pattern Backgrounds 117 Using wallpapers and patterned backgrounds 117 Using the built-in patterns 119 Creating a simple pattern 120 Creating a pin-stripe background 124 Use the pin-stripe as a fill for another object 131 Creating advanced tiled backgrounds 133 Changing Inkscape bounding box preferences 133 Creating your base tile 134 Cloning the template tile 136 Decorating your tile 139 Exporting your tile for a background 144 Creating swirling design backgrounds 147 Creating a swirl 147 Creating spiro swirls 153 Editing your spiro 155 Converting swirls to backgrounds 159 Exporting for use in a functional web page 160 Using the design in the layout design 161 Summary 162 [ iii ] Table of Contents Chapter 6: Building Icons, Buttons, and Logos 163 Using icons, buttons, and logos in web design 163 Creating icons 165 Using grids and snapping 166 Simple icons 167 More detailed icons 177 Creating buttons 182 Logos as the cornerstone of the design 187 Best practices for creating logos 187 Information gathering 188 Creating initial designs 189 Importing existing logos 189 Re-creating existing logos 190 Logo re-designs 190 Exporting logos for use on the web and more 192 Summary 194 Chapter 7: Making Diagrams, Site Maps, and More 195 Diagrams and maps 195 Diagrams 196 Organizational charts 203 Flow charts 207 Site maps 212 Exporting for use within a web page 216 Summary 217 Chapter 8: Designing for Blogs and Storefronts 219 Web design principles for blogs and storefronts 220 Keeping