Inkscape 0.48 Essentials for Web Designers

Inkscape 0.48 Essentials for Web Designers
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
save 44%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • The first book on the newly released Inkscape version 0.48, with an exclusive focus on web design
  • Comprehensive coverage of all aspects of Inkscape required for web design
  • Incorporate eye-catching designs, patterns, and other visual elements to spice up your web pages
  • Learn how to create your own Inkscape templates in addition to using the built-in ones
  • Written in a simple illustrative manner, which will appeal to web designers and experienced Inkscape users alike

Book Details

Language : English
Paperback : 316 pages [ 235mm x 191mm ]
Release Date : November 2010
ISBN : 184951268X
ISBN 13 : 9781849512688
Author(s) : Bethany Hiitola
Topics and Technologies : All Books, Other, Open Source, Web Development

Table of Contents

Chapter 1: Inkscape 101: The Basics
Chapter 2: Designing Site Layouts
Chapter 3: Working with Images
Chapter 4: Styling Text
Chapter 5: Creating Wallpapers and Pattern Backgrounds
Chapter 6: Building Icons, Buttons, and Logos
Chapter 7: Making Diagrams, Site Maps, and More
Chapter 8: Designing for Blogs and Storefronts
Chapter 9: Using the XML Editor
Chapter 10: Creating Simple Animations
Chapter 11: Plugins, Scripts, and Templates
Appendix A: Keyboard Shortcuts
Appendix B: Glossary of Terms
Appendix C: Fonts
  • Chapter 1: Inkscape 101: The Basics
    • Vector graphics
    • What is Inkscape and how can it be used?
    • Installing Inkscape
    • The basics of the software
      • Main screen basics
        • Main menu
      • Toolbars
        • Command bar
        • Snap bar
        • Tool controls
        • Toolbox bar
        • Palette bar
        • Status bar
        • Canvas
      • Dockable Dialogs
      • Panning and zooming
    • Creating and managing files
      • Creating web sized documents
      • Saving Inkscape files
      • Managing multiple file projects
    • Paths
    • Creating shapes
      • Complex shapes
        • Combing shapes
        • Freehand objects (Paths)
    • Summary
  • Chapter 2: Designing Site Layouts
    • Architecting a web site
    • Web layout—principles and basics
    • The basic design
    • Starting a new design project
    • Using grids and guidelines
      • Viewing the grid
      • Making guides
        • Creating a new layer
        • Creating basic design areas in Inkscape
        • Converting shapes to guides
    • Creating a layout example
      • Designing the background
        • Making the header background
        • Building the main body background
        • Creating the footer background
      • Designing the header
      • Navigational elements
      • Creating a footer
      • Making a sidebar
      • Creating content areas
    • Exporting design mock-ups
      • Creating a slice layer
      • Exporting slices
    • Working with programmers
    • Summary
  • Chapter 3: Working with Images
    • Importing images in Inkscape
      • Embedding images
      • Importing from the Open Clip Library (Mac users)
    • Rendering a Bitmap image
    • Basics about photo manipulation
    • Tracing images
      • Using Protrace
      • Using SIOX
    • Converting raster logos to vector-based logos
    • Using individual images as design elements
    • Summary
  • Chapter 4: Styling Text
    • Creating and editing text tools
      • Text styling keyboard shortcuts
    • Text effects
      • Using the Lorem Ipsum effect
      • Find and replace
      • Sentence case
      • Title case
      • Uppercase and lowercase
      • Flipcase
      • Random case
    • Using reflections, shadows, and glows
      • Reflections
      • Shadows and glows
    • More about text and paths
      • Using a path for text
      • Placing text within a closed shape
    • Using perspective
    • Pulling it all together
    • Creating title bars and headings
    • Exporting title bars for use as a design element
    • Summary
  • Chapter 5: Creating Wallpapers and Pattern Backgrounds
    • Using wallpapers and patterned backgrounds
    • Using the built-in patterns
    • Creating a simple pattern
    • Creating a pin-stripe background
      • Use the pin-stripe as a fill for another object
    • Creating advanced tiled backgrounds
      • Changing Inkscape bounding box preferences
      • Creating your base tile
      • Cloning the template tile
      • Decorating your tile
      • Exporting your tile for a background
    • Creating swirling design backgrounds
      • Creating a swirl
      • Creating spiro swirls
        • Editing your spiro
      • Converting swirls to backgrounds
    • Exporting for use in a functional web page
    • Using the design in the layout design
    • Summary
  • Chapter 6: Building Icons, Buttons, and Logos
    • Using icons, buttons, and logos in web design
    • Creating icons
      • Using grids and snapping
      • Simple icons
      • More detailed icons
    • Creating buttons
    • Logos as the cornerstone of the design
    • Best practices for creating logos
      • Information gathering
      • Creating initial designs
    • Importing existing logos
      • Re-creating existing logos
    • Logo re-designs
    • Exporting logos for use on the web and more
    • Summary
  • Chapter 8: Designing for Blogs and Storefronts
    • Web design principles for blogs and storefronts
      • Keeping it simple
      • Identifiable
      • Making your site navigationally easy
      • Feeds and social networking links
      • Making checkout easy
    • Creating Web templates in Inkscape
      • Designing for blogs
      • Designing a storefront and merchandise pages
    • Grids and Cascading Style Sheets (CSS)
    • Summary
  • Chapter 9: Using the XML Editor
    • What is Inkscape's XML Editor
    • Accessing the XML Editor
    • SVG basics
      • Attribute types
      • Basic attributes
      • Paths
        • Images
        • Text
    • Using the XML Editor to change characteristics
    • Using XML and graphics with programmers
    • Summary
  • Chapter 10: Creating Simple Animations
    • Animations in web design
    • Basic techniques to animate
      • Installing Gimp
      • Creating the animation
      • Bringing the animation together
    • Creating scrolling text
    • Exporting animations
    • Creating animating banners or advertisements
    • Summary
  • Chapter 11: Plugins, Scripts, and Templates
    • Templates in Inkscape
      • Installing and using templates
      • Creating your own custom templates
    • Plugins, scripts, and extensions
      • Installation
    • Common extras for web design
    • Summary

Bethany Hiitola

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:

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Inkscape 0.48 Essentials for Web Designers +    Object-Oriented JavaScript - Second Edition =
50% Off
the second eBook
Price for both: £23.70

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • What Inkscape is and how it can be used for web design
  • Everything about site layouts—from architecting a website to exporting image files
  • Adding illustrative and web-ready diagrams, maps, designs to your website
  • Importing, manipulating, and rendering trace and raster images for your web page
  • Tips and Tricks for "tracing" bitmap images to convert them into full vector graphics for both photographs and logos
  • Text editing and styling—kerning, rotating, moving letters from the baseline, reflection, following paths, shadows, the perspective tool, and cool envelope effects
  • Icon and button design principles and how to add them to your website
  • Creating simple and effective animated GIFs for your web page with GIMP
  • Incorporating animated banners, advertisements, and scrolling text in your website
  • The basics of XML and SVG coding


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.


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.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software