Creating Web Templates in Inkscape

Exclusive offer: get 50% off this eBook here
Inkscape 0.48 Essentials for Web Designers

Inkscape 0.48 Essentials for Web Designers — Save 50%

Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website

$26.99    $13.50
by Bethany Hiitola | November 2010 | Open Source Web Development

In the previous article, Web design principles in Inkscape, we saw the web designing principles for blogs and storefronts.

In this article by Bethany Hiitola, author of Inkscape 0.48 Essentials for Web Designers, we will see how you can use Inkscape to create basic design templates that can be used with Cascading Style Sheets (CSS), HTML, and HTML5 in the final implementation. CSS are used with the HTML/XML coding to define the look and formatting of an entire website. One style sheet can be created that determines fonts, colors, spacing, placement, and more—reducing complexity and repetition in the coding of the pages themselves.

 

Inkscape 0.48 Essentials for Web Designers

Inkscape 0.48 Essentials for Web Designers

Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website

  • 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
        Read more about this book      

(For more resources on Inkscape, see here.)

Creating Web templates in Inkscape

Blogs and storefronts have some different elements when designing, however they also have "pages" within them that use standard items, those that repeat over time.

Blogs have posts that all have (at least):

  • headings/titles
  • content in the body
  • options to comment

Storefronts have some of the following:

  • lists of items to purchase
  • prices
  • descriptions
  • ratings/comments
  • checkouts or shopping baskets

And since these items are common on a number of the website pages, it can use templates for the design. You can create a site based on a template. Here are two quick examples based on each type of site.

Designing for blogs

Some common parts of many blog site are: the blog header or banner, a sidebar with recent posts (or archives), about section, recent posts, blog roll and/or links section, a main content section that will contain all of the blog posts, then links to their relevant comments, and a footer of the site. Of course you can get as fancy as you would like here, or as simple, but let's design a site based on these simple sections. Here's how it's done:

  1. Open Inkscape, and create a new document. From the file menu, select File, New, and Desktop_800x600.
  2. When open, create a new layer (Shift + Ctrl + N) and call it Basic Layout.
  3. Use the Rectangle Tool to draw rectangles for each of your layout areas in your blog design.

    Inkscape

  4. For now, use different shades of gray for each area so you can easily distinguish between them at a glance. To change the fill color of a particular rectangle, left click the rectangle and choose a gray shade for the rectangle. Or drag the gray shade from the color palette onto the rectangle.
  5. Use sharp edged (not rounded) rectangles. If you need to change to sharp, click the Make Corners Sharp button in the Tool Controls Bar.

  6. Make sure your rectangle shapes do not have an outline or stroke. Use the Shift + Left click keypad shortcut to open the Stroke dialog and choose No Color (the icon with an X) to delete the stroke.
  7. Position the rectangles so there are no white spaces in-between them.
  8. From the main menu choose Object and then Align and Distribute. In the Remove Overlapssection, click the icon. This makes sure that the bounding boxes around each object don't over lap each other and place the objects tangent to each other.

    Inkscape

  9. Use the Tool Controls Bar W (width): number fi eld to apply a setting of 800.0 px so the Header fills the entire width of the web page.

    Inkscape

  10. Continue using the steps described to add rectangles for all areas shown below in the rough layout of the blog page we'll be creating.

    Inkscape

  11. Once all of your areas are blocked out on the canvas, we'll need to convert the current rectangles into guides so we can use the guides when creating our web page layout graphics. We can easily keep the Basic Layout Export layer intact; we need to copy all of the rectangles in this layer. On the main menu, select Edit and then Select All (or use the keyboard shortcut keys Ctrl + A).
  12. Then select Edit and Duplicate (or use the keyboard shortcut Ctrl + D) to duplicate all of the elements in this layer.
  13. Now you are ready to convert these current shapes into guides. First, select all the rectangles in the top (duplicate) layout. Do this by clicking a rectangle and then holding the Shift key on your keypad. Then click/select the next rectangle.
  14. When you have all rectangles selected, from the main menu select Object and then Object to Guide. Your duplicate rectangles will be removed from the canvas and replaced with blue guides. To better see the guides, turn off the grid (from the main menu choose View and Grid) and hide the basic layout layer (click the eye icon).
  15. Create a new layer (Shift + Ctrl + N) called Background.
  16. Use the rectangle tool to draw a background that fills the entire canvas. Use the control bar, to set the width to 800 and the height to 600.
  17. Use the Color Palette to choose a fi ll color of white.
  18. In the Status bar, right-click the Stroke setting and select Remove Stroke.
  19. Create a new layer (Shift + Ctrl + N) called Header.
  20. Click the Create and Edit tool and enter the header title as shown in the following screenshot. Remember to use the control bar to adjust the font type and size.
  21. Then, still using the Create and Edit tool, type the sub-title as shown below and, again use the control bar to adjust the font type and size.

    Inkscape

  22. Create a new layer (Shift + Ctrl + N) called Navigation.
  23. Now we need to import the icons that we have created. From the main menu, select File and then Import. Select the SVG file for the icon and then place it on the canvas. Repeat this until you have all five icons on the canvas.
  24. Use the rectangle tool to draw the horizontal bars below the title and then below the navigation icons. Use the Color Palette to choose a fill color for the rectangles. For our example, we're using a turquoise color.
  25. Select both rectangles, and then in the Status bar, right-click the Stroke setting and select Remove Stroke.
  26. With the rectangles still selected open the Align and Distribute dialog (Shift + Ctrl + A) and click the Center on Vertical Axis button.
  27. Select all of the icons and then open the Align and Distribute dialog (Shift + Ctrl + A) and click the Distribute Centers Equidistantly Horizontally button.

    Inkscape

  28. Next we will create the sidebar content. Most of this will be the links to help with navigating to previous posts or static content—content that doesn't change. Create a new layer (Shift + Ctrl + N) called Sidebar.
  29. Import a photograph (File and then Import).
  30. Place it on the upper left side of the page. Use your guides to place it appropriately on the page.
  31. Select the Create and Edit tool, and drag it across your canvas in the area you want to add a block of text to create a textbox. Then start typing placeholder text for an author bio.
  32. Use the control bar to adjust font styles and sizes.
  33. Again use the guides for left alignment placement.
  34. Continue to use the Create and Edit to create any Headings and other text content on the left sidebar. Note that Inkscape does not support bullets or numbers. So any "bullets" will need to be created manually with dashes (-) or importing graphics.
  35. Your blog web page should look similar to the following screenshot:

    Inkscape

  36. Now it is time to create the look of the content portion of the site—where the blog posts will appear. Create a new layer (Shift + Ctrl + N) called Blog Post.
  37. Just like with the sidebar text, use the Create and Edit text tool to create text and use the control bar to adjust fonts and sizes. Start with a heading.
  38. Then with the Create and Edit text tool selected, drag it across the screen to create a textbox. Add in dummy text or write some placeholder blog post. Again, use the control bar to adjust font and size of the text.
  39. Select the heading and the blog post text and align it within your guides. Or use the Align and Distribute dialog (Shift + Ctrl + A) to align items on the page correctly.
  40. Now it is time to create the comment, permalink and share this link text. Create a new layer (Shift + Ctrl + N) called Blog Post Footer.
  41. Again select the Create and Edit text tool, and type: comment | 0 comments | permalink | share this post.
  42. Use the control bar to adjust font and size as needed.
  43. Then use the color palette to change the text to red.
  44. If desired, use the rectangle tool to draw the horizontal bars to show a break between blog posts. Use the color palette to choose a fill color for the rectangles. For our example, we're using turquoise color.
  45. You can save the file, or add additional post examples. Use Steps 37 – 44 to do a second blog post. Your page should now look something like the following example:

    Inkscape

  46. There will likely also be a sub-page of this content that will show an individual blog post. We can design that page, based on how we want it to look here.
  47. Finally, for this page, let's add blog footer with some copyright information to see a completed blog design. Create a new layer (Shift + Ctrl + N) called Footer.
  48. Select the horizontal bar under the navigation icon. From the main menu select Edit and then Duplicate.
  49. Select the duplicate rectangle and use the guides to place it at the footer area of your web page.
  50. Select the Create and Edit text tool and type a copyright attribution statement. In the following example we entered: © 2010 Jane Somebody | All rights reserved.
  51. Select both the rectangle in the footer and the copyright text and open the Align and Distribute dialog (Shift + Ctrl + A). Click the Center on Vertical Axis button to center the footer content.

    Inkscape

As stated in Step 46, there will also likely be a "sub-page" used in a blog to show each individual post as it's unique web address (if you want to link to the one blog post instead of the dynamic stream posts). Here's what this page would look like:

Inkscape

As you can see, it looks very much like the main blog page, just without any posts before it, or after it. And in this case, we display the comments on this post directly instead of just making it a link.

To modify the existing web page file to match the previous image, you would:

  1. Open the existing file in Inkscape.
  2. From the main menu select File and then Save a Copy. Give this a new file name.
  3. Delete any sample blog posts below the first one.
  4. Use the Create and Edit text tool to create the comments, headings, and text.
  5. Re-align all text appropriately with guides and the Align and Distribute dialog (Shift + Ctrl + A).
  6. Save the file again to save your work.
Inkscape 0.48 Essentials for Web Designers Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website
Published: November 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Inkscape, see here.)

Designing a storefront and merchandise pages

When creating item pages for an online store, you often use a grid system to show off items that your store is selling in sort of a catalog fashion. These pages would also include prices, brief descriptions, a way to add them to the shopping cart, a link to a return, or purchasing policies. Below is a wireframe on how you could design a merchant store based on a grid. We'll keep this example to wireframes (black and white drawings) to show that elements are based on a grid, and as an example of a fast and easy mock up to start. But remember header graphics, shopping cart graphics, product pictures, and more are always added into a design mock up at the next phase to get approvals and "test" the design.

  1. Again, let's start with a basic area layout in a new document in Inkscape. Open Inkscape, and create a new document. From the file menu, select File, New, and Desktop_800x600.
  2. When open, create a new layer (Shift + Ctrl + N) and call it Background.
  3. Use the rectangle tool to draw a background that fills the entire canvas. Use the control bar to set the width to 800 and height to 600.
  4. Use the Color Palette to choose a fill color of white.
  5. In the Status bar, right-click the Stroke setting and select Remove Stroke.
  6. Create a new layer (Shift + Ctrl + N) called Header.
  7. Use the Rectangle Tool to draw a rectangle for the background of your header area. Use the control panel to make sure the width is exactly 800 pixels.
  8. Use the Color Palette to choose a fill color of gray.
  9. Next use the Rectangle Tool to draw a rectangle as a placeholder for the company logo. Place it in the left side of the header. Use the Color Palette to choose a fill color of gray and keep a stroke of 1.
  10. Use the text tool to put in a placeholder company name and some navigational elements. Remember to use the Align and Distribute dialog (Shift + Ctrl + A) to adjust for spacing, alignment, and centering.

    Inkscape

  11. Next let's add in the header and footer locations. Create a new layer (Shift + Ctrl + N) called Footer.
  12. Use the rectangle tool to create a rectangle along the bottom of the page. Use the Color Palette to choose a fill color of gray.
  13. In the control bar, make sure the width of this rectangle is exactly 800 pixels.
  14. Select the Create and Edit text tool and type some footer text. Since this is placeholder text, just make sure it looks about the same length as a copyright attribution.
  15. Select the text and open the Align and Distribute dialog (Shift + Ctrl + A). Click the Center on the Horizontal Axis icon to center the text.
  16. Now we can add in the "grid" of products to give it a catalog feel. Create a new layer (Shift + Ctrl + N) called product display.
  17. Use the rectangle tool to create a square. Use the Color Palette to choose a fill color of gray.
  18. Use the Bezier tool to create two lines to make a cross in the middle of the square.
  19. Then use the Create and Edit text tool to type: Product Photography. Use the color palette to change the text color to a gray color.
  20. Select the square and the text, then open the Align and Distribute dialog (Shift + Ctrl + A). In the relative to drop down, choose first selected, and then click the Center on the Vertical Axis icon to center the textbox.

    Inkscape

  21. Below this square, let's add some placeholder product information. Select the Create and Edit text tool and create a textbox (click, hold, drag, and then let go of mouse).
    Type: Product Name
    Price: $12.99
  22. Using the control bar, adjust font and size.
  23. Now select the square, the two lines, Product Photography text and product information text. Select the first item, then use Shift + Click to select multiple items.
  24. Press Ctrl + G (or from the main menu select Object, then Group) to group the items so they can be treated as a single object.
  25. With this group object selected, from the main menu select Edit, Clone, and then Create Tiled Clone.
  26. Select the Shift tab, and set Shift X, per column and Shift Y, per row to 15%. Also set Rows, columns to 2 x 4.

    Inkscape

  27. Click Create.
    Your product image and information is replicated into a 2 x 4 grid, spaced evenly on the canvas.

    Inkscape

  28. Let's add in a shopping cart area that shows what has been added into the cart, a link to checkout, and a link to the returning user account. First find a shopping cart image (from http://www.openclipart.org/) or use the client's desired design.
  29. Select the Header layer.
  30. From the main menu, select File and then Import and select the shopping cart image.
  31. Place the image on the right side of the header.
  32. If needed use the Create and Edit text tool to add in some additional text and cart information to the graphic to illustrate how the shopping cart will function and look on the web page. Your page should now look similar to the following screenshot:

    Inkscape

You can also use a template to create the product details pages for each individual item in your store. These pages contain more detailed descriptions of items, the price, specifications (if applicable), and at least one picture of an item. Let's look at how this could look.

Start with the simple product page layout, but keep the same header, footer, and shopping cart as the main catalog page. Add in photography for different angles or sizes and content for product specifications and details and links to add it to the shopping cart and/or return to the catalog. A mock up of that page might look like the following:

Inkscape

To create the mock up, you would use the rectangle, Bezier, create and edit and alignment tools—just like the previous example.

Even just using wireframe boxes to indicate pictures (as we did in both examples), it gives a clear idea of the design. It is one of the fastest ways to create mock-up designs of these pages, but still provide enough information to a client and/or programming team to help create the site.

Also, within this scenario you'll need to design forms for checking out, collecting credit card and/or PayPal information, and more. But from the perspective of templates and creating similar catalogue and product details web pages, you've seen a couple wireframe examples to start.

Grids and Cascading Style Sheets (CSS)

In all of our examples, our designs have been based on rectangles, turned, and varying width/height rectangles, but all rectangles nonetheless. That being said, then, all of your designs can also be the same—and essentially designed using Inkscape's Grid and Guideline features. Using this method would allow you to use tables to design your site. But a cleaner approach would be to use Cascading Style Sheets or CSS.

As a refresher, CSS are used with the HTML/XML coding to define the look and formatting of an entire website. One style sheet can be created that determines fonts, colors, spacing, placement, and more. And they are based on grids to determine the exact placements of areas within the site. What this means is if you decide to change the colors of your fonts, or spacing within an area on the site, you can do it in one file—and changes will happen throughout the site.

How best can you implement a CSS? If you make the areas of your site (as we did in each initial step of the template designs) the exact sizes of your CSS "areas" then dropping in the content and/or graphics into those areas will be easier from a programming standpoint.

There are online tools or CSS frameworks that also help with the Inkscape XML/ SVG and CSS creation. All of the mentioned systems, give you common layouts based on grid sizes and then let you customize them. Here's an overview of a few of these CSS systems below:

  • 960 Grid System (http://960.gs/): This framework uses a width of 960 pixels and creates CSS based on 12 and/or 16 columns, which can be used separately or together.
  • Blueprint (http://www.blueprintcss.org/): This is a bit more flexible framework that let's you determine how many columns you want, how wide they should be, and how much space you want between them. It has some pre-loaded cross-browser support, some built-in fonts and styles and plugin support.
  • YUI Grids (http://developer.yahoo.com/yui/grids/): Offers six templates as a base, with four page widths. You can also stack next regions of 2, 3, or 4 columns—all in all about 1000 page layout combinations.

Using a framework to help you create your CSS, or working with a programmer to help create one for larger websites, CSS creation helps keep blogs, storefronts, and catalogues consistent in look and feel as the content for these types of sites are driven by dynamic content that is pulled from a content management system to display it on the web.

As with all the other designs—template, grid, and/or CSS-based—you export all of your graphics for the programmers to work their magic as they implement the blog or the store you designed.

To export in PNG—as you have many times—follow the instructions we've always reviewed, but this time use the design areas to help you export in a batch form:

  1. Make sure you select all the rectangles of the Basic Layout areas selected (even if you have made them "invisible" you should be able to select them). Use the select tool and select each of them while pressing the Shift key to multi-select.
  2. Once they are all selected, from the main menu select File and then Export Bitmap. The Export Area screen is displayed.
  3. Make sure the Batch export selected objects is checked.
  4. Click Export. Inkscape will automatically save the Background Areas— as you defined in the ID fields (right-click an object and select Object Properties)—as PNG image files in the export location in the Filename field.

Now you're ready to hand your graphic files to the team that will create the HTML for the web pages. As always, when providing files to programmers include:

  • The PNG image files which you just exported from your design
  • The source Inkscape SVG file of the page you designed and all other elements on the page like buttons, logos, and headings

Summary

In this article we looked at creating templates so that you can create the design and each part of the web page faster so it can be pushed into development, including using grids and CSS. A few CSS framework tools were also given as options to help create the CSS or at least give you a place to start if you want design with these tools in mind. Of course we also reviewed exporting all of your work in Inkscape to hand off to a programming team.


Further resources on this subject:


Inkscape 0.48 Essentials for Web Designers Use the fascinating Inkscape graphics editor to create attractive layout designs, images, and icons for your website
Published: November 2010
eBook Price: $26.99
Book Price: $44.99
See more
Select your format and quantity:

About the Author :


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: bethanyhiitola.com

Books From Packt


Inkscape 0.48 Illustrator's Cookbook
Inkscape 0.48 Illustrator's Cookbook

Agile Web Application Development with Yii1.1 and PHP5
Agile Web Application Development with Yii1.1 and PHP5

Blender 3D 2.49 Architecture, Buildings, and Scenery
Blender 3D 2.49 Architecture, Buildings, and Scenery

PostgreSQL 9.0 High Performance
PostgreSQL 9.0 High Performance

OpenSceneGraph 3.0: Beginner's Guide
OpenSceneGraph 3.0: Beginner's Guide

YUI 2.8: Learning the Library
YUI 2.8: Learning the Library

OpenCart 1.4 Beginner's Guide
OpenCart 1.4 Beginner's Guide

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
m
k
P
p
S
s
Enter the code without spaces and pay attention to upper/lower case.
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
Resources
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