Inkscape 0.48 Essentials for Web Designers

Table of Contents

• Preface

• 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 7: Making Diagrams, Site Maps, and More
  • Diagrams and maps
  • Diagrams
  • Organizational charts
  • Flow charts
  • Site maps
  • Exporting for use within a web page
  • 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

• Appendix A: Keyboard Shortcuts

• Appendix B: Glossary of Terms

• Appendix C: Fonts
  • SVG fonts and Inkscape
  • Using common web browser fonts

• Index

Bethany Hiitola

The book is specifically focused on helping you to create your first web site designs and does a great job of getting you started

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.