Creating a Layout Example 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, Designing Site Layouts in Inkscape, we saw the web layout and its principles.

In this article by Bethany Hiitola, author of Inkscape 0.48 Essentials for Web Designers, we will create a web page layout. This part of web development allows the most creative expression for web designers. It's creating a mock up of how the web page will look when complete. Mock ups are graphic images of the web page, so we don't worry about all the technical details in making the web page work, just how it looks.

 

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.)

Designing the background

In Inkscape, since your canvas is white, it looks like your web page might have a white background. It does not, without creating a background image, currently it would be transparent or 0 percent opacity. So we need to start by determining which colors to use for the background.

You can get really creative here, as you don't need to use just one color! Create a header background color, one for the main body, and then another for the footer area. Let's start by creating a simple background based on our Basic Layout layer.

Making the header background

To start, we're going to create a simple header background—a rectangle with a simple divider line and drop shadow. Here are the detailed steps to make this header background:

  1. With your new document open and the newly created guides viewable, first lock the Basic Layout layer (click the lock icon) and hide its elements (click the Eye icon).

    Inkscape

  2. Now create a Background Layer.
  3. Draw a rectangle that fills the header and navigational areas. We're going to create only one background for both of these, as the navigation will be in the same color and area as the header.

    Inkscape

  4. Choose a fill color and no stroke (border). If you decide you want to change either of the option, open the fill and stroke dialog box (from the main menu select File and then Fill and Stroke or the keypad shortcut Shift + Ctrl + F) and adjust colors accordingly.
  5. Want to add in a gradient? Click the Gradient icon, and adjust how you want your gradient to appear.

    Inkscape

  6. By default the Inkscape gradient applies an alpha setting of 0 to the stop gradient, which will be fully transparent. This means, in the above settings, the right side of the gradient would be transparent. Click Edit to change this setting.
  7. From the Linear gradient field, choose the Add stop.

    Inkscape

  8. Change the alpha opacity setting (A) to a solid color—either move the slider to the left side of the screen or change the value to 255.

    Inkscape

  9. Next change the solid color value. In this example, we used white and changed the R, G, B values to achieve the results.

    Inkscape

  10. For this example, the gradient goes from a bit darker green on the left to a lighter shade on the right side.

    Inkscape

  11. Next, let's add a simple drop shadow. From the main menu select Filters, Shadows and Glows, and then Drop Shadow. For this example, the Blur Radius px 10, Opacity, 20% and a vertical offset px of 5 and click Apply.

    Inkscape

  12. Close the drop shadow box and then save your file.
  13. Your header is complete! Now let's add to this to create the main content background.

To change the gradient orientation, you can drag the outer two gradient stop nodes indicated by the square and circle handles on the object. You can also add more gradient stops and edit their transparency (A) values and colors to adjust to your liking.

Building the main body background

For the main part of the web page sample, we're using a white box as a background with a similar drop shadow. Here's how to add this to your Background layer:

  1. Draw a rectangle that fills the entire content, main content area. This includes the entire middle portion of your web page, and covers all the 'sections' between the header and the footer in the basic layout.

    Inkscape

    The example above shows white as the fill color and no stroke (border).

  2. Let's also put a drop shadow on this box as well. From the main menu select Filters, Shadows and Glows, and then Drop Shadow. Adjust the settings to be the same as the previous drop shadow so they match (Blur Radius px 10, Opacity, 20% and a vertical offset px of 5) and click Apply.
  3. Close the drop shadow box and then save your file.
  4. The main content background is complete. Lastly, we need to create the footer background.

Creating the footer background

Creating a footer background is the last step to this process. Very much like the header, we'll follow these steps:

  1. Duplicate the header background. Select the header and from the main menu, choose Edit and then Duplicate.
  2. Drag the duplicate rectangle down to the footer area of the page and adjust the size so it fits within the footer defined area.

    Inkscape

  3. Notice, since the object was duplicated all formatting—gradients and drop shadows—were maintained.

    Inkscape

  4. Save your file.

Now that your footer background is complete, so is the entire web page background. Let's move on to details.

Designing the header

Now that we have the entire background already created, it's time to add details to the header area like a logo and company name. Here are the steps to add in these basic details to our example design:

  1. Before any more work is done, it makes sense to 'lock' the background layer. We don't want any items shifting, or any elements being selected accidentally when we are working on other layers. To lock the background layer, click the lock icon in the Background layer dialog box.

    Inkscape

  2. Create a new layer and name it Logo.

    To create a new layer, you can use the Shift+Ctrl+N keyboard shortcut.

  3. Within the Logo layer, create and/or import the logo and place it on the header background. If you are importing a graphic that has already been created, it's as simple as clicking File and selecting Import. Find the logo file and use the selection tool to place it correctly in the header area.

    Inkscape

  4. Lock the logo layer, and then create a new layer and name it Title.
  5. Within this layer, use the Create and Edit Text tool and type in the business name and then place it on the header background.

    Inkscape

    Inkscape

  6. Save your file.

Next up, is to create the Navigation tool bar.

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.)

Navigational elements

This portion of the website is essential to most web pages, as it is the common element (like the header) on all pages of this website. For our example, we are only creating one web page, but typically web sites include a number of pages. This is the menu that allows a user to move between the pages in the web site.

We'll create a simple bar of rectangular buttons along the bottom of the header area for this element. Here are the details:

  1. Create a new layer called Navigation.
  2. Draw a long rectangle along the bottom of the header area.

    Inkscape

  3. Change the fill color of the navigation rectangle by left clicking a color box in the Palette bar and set the fill.
  4. Since we know the width of our entire page all we need to do is a little math to determine the width of each of the buttons. Take the page width (800) and divide it by the number of buttons (4). 800/4=200. This means each of the buttons will be 200 pixels wide.
  5. From the left side of the navigational bar, draw a vertical path at 200 pixels. Using the Ctrl key will snap the path's angle, on top of the navigation bar, and this will make the first button.
  6. Tap the Space bar to quickly change to the Selector tool, and then set the X position in Tool Controls Bar at 200.0.

    Inkscape

  7. Select the line you just created and duplicate it. From the main menu choose Edit and then Duplicate or use the Ctrl + D keyboard shortcut.
  8. Again, press the Space bar to toggle to the Selector tool and change the X position to 400 pixels.
  9. Repeat Steps 6 through 8, but position X will be at 600. Now we have four evenly spaced buttons for the design.

    Inkscape

  10. Label each button with the appropriate page or menu item.

    Inkscape

  11. When complete, save your file.

Creating a footer

This is a very simple item to frame the web page from a design perspective. In this example, we are just going to add a simple legal disclaimer for this webpage.

  1. Create a new layer named Footer.
  2. Use the Create and Edit Text tool and type the disclaimer information along the footer area.

    Inkscape

  3. To ensure correct positioning, select the text first and then the rectangle background object last using the Shift + Left click combination.
  4. From the main menu, select Object and then Align & Distribute.
  5. In the Relative to drop down box, select Last Selected.

    Inkscape

  6. In the Align section, click the Align Objects Equidistantly Horizontally icon and in the Distribute section, click the Center on Horizontal Axis icon as shown in the following screenshot:

    Inkscape

  7. Then save the file to make sure your work is not lost.

Making a sidebar

Now we are moving to create some content within the main content areas of the web page. Sidebar information is not always needed in a design. Or some designs might call for navigational elements to be shown here. For our example, this will include some information about the company and links to other articles relevant for this small business.

  1. Again, lock all layers you are not using, and create a new layer using the Shift + Ctrl + N keyboard shortcut. Call this layer Sidebar.
  2. Then select the Create and Edit Text tool. This time, type a title for this section of the site. For our example, we will name this sidebar About Us.
  3. Using the Tool Controls bar, adjust the font size and leading so that it is appropriate for a heading.

    Inkscape

  4. Next select the Create and Edit Text tool and drag your mouse to create a flowed text bounding box (a 'text box' that will automatically wrap larger amounts of text).
  5. Let's generate some dummy content for this small paragraph of text.
  6. In the Tools Control bar, set your font size.
  7. From the main menu, select Extensions and then Text and Lorem Ipsum. Once you adjust the settings press Generate, you'll have some placeholder text that you can place on the screen.

    Inkscape

    It's possible that your Inkscape installation did not come with the Lorem Ipsum extension pre-installed. Don't worry! You can download and install it from http://cheeseshop.python.org/pypi/lxml/. It is called the fantastic lxml wrapper for libxml2.

  8. Next we're going to create another part of this sidebar. So we'll create another heading called Articles and then create some dummy text for visual placement.

    Inkscape does not currently support bulleted lists. In order to create the look of bullets use a dash/minus sign to mimic a list.

    Inkscape

  9. Once everything is complete, again save the file.

Lastly, we're going to place some dummy text in the main area of the website to pose as our content.

Creating content areas

In our simple design example we are going to create a grid of content in this area. As it will only be dummy text, we'll just be creating headings and then using the Loren Ipsum extension to fill the rest of the area. With proper alignment and placement it will give a great look at the design of the site. Let's get started:

  1. Use the Shift + Ctrl + N keyboard shortcut to make a new layer called Content.
  2. Use the Create and Edit Text tool and create a heading for the first of two "articles" of content we are going to create.
  3. Then add the dummy text in any fashion you like. To show off some simple design options, we created two columns of dummy text.

    Inkscape

  4. Repeat creating another header and some text as shown below.
  5. Once all is created, and you have no more final touches to your design, your mock up is complete. Save your file.

Your web page mock up is ready to go out for approval! That's right, you can now export this to a PNG file (File | Export Bitmap) or save a copy as a PDF file (File | Save a Copy) and send it via email for others to approve.

Remember, you always want to keep the source Inkscape SVG file intact as it saves all of your layers and editing functionality so you can adjust the design based on feedback from the client or others on your team.

It is likely you will have a number of review cycles before the design is indeed approved. But once it is complete we're ready to save this design for use by a programming team.

Also, we used dummy text for our design mock up. It's likely your client will want real content inserted into the content area space. It can be static content—content that doesn't change or dynamic content that changes frequently (like a blog or through a content management system). The following section will explain how to export this design in a way that will allow a software programming team to work within your design and add in the code that will allow those dynamic posts to work. Essentially it means we export the header, navigation, a small portion of the content area, the sidebar, and footer.

Exporting design mock-ups

Once the design in final, it is time to export our design. We'll do this in two general steps—slicing the web page into separate images (via a layer we'll name slice) and then exporting all of sliced images into an appropriate directory.

Creating a slice layer

What is slicing? It is a term used to describe breaking of an image created in a graphics program apart so that it can be re-assembled in HTML to create a web page. To do this, we'll use Web Slicer Extension.

  1. From the main menu select Extensions | Web | Slicer | Create a slicer rectangle.

    Inkscape

  2. Type an appropriate name for this 'slice'. Ideally it would be a recognizable name like Header, so that when exporting all the slices of the image, the files will be named in a way that is intuitive to place it all back together into the specified design.
  3. Specify the format for this slice. The default PNG format works best.
  4. You can force the slicer to a certain size by entering it in the Force Dimension field.
  5. Choose all other appropriate settings and click Apply. A rectangle is displayed on the screen.
  6. Place the rectangle in an appropriate location, based on its name.
  7. Repeat Steps 1 through 6 until your entire design is 'covered' with slicer rectangles—as follows:

    Inkscape

  8. Save your file again to keep all of the changes you have done so far. Now, you're ready to export the images for the web!

Exporting slices

In Inkscape 0.48 there is a batch export layout pieces and HTML + CSS Code option. This means you can export all your layout slicer rectangles and more all at once. Here's how it's done.

  1. From the main menu select Extensions | Web | Slicer | Export layout pieces and HTML+CSS code.

    Inkscape

  2. Choose a directory or folder to save all of the slicer rectangles (PNG image files) and the HTML/CSS code.
  3. Check the Create directory, if it does not exist and With HTML and CSS checkboxes.
  4. Click Apply.

    Inkscape

  5. Inkscape will automatically save the slicer rectangle areas—as you have defined in the Name fields—as PNG image files in the export location in the Filename field.

Issues finding your exported files?
Make sure, before you perform an export you have saved you source Inkscape SVG file in the main directory (folder) where you want the sliced files to be exported.

Now you're ready to hand off your files to the team that will complete the HTML for the web pages.

Working with programmers

You've done a lot of work to create the look and feel for this website, and even built what essentially will be the interface for this website—at least from a graphical standpoint. Now it is time for programmers to take your images, and make them work together on a web site. At a basic level they will take each graphic image you exported and then piece them back together—but not from within a graphics program. They will use HTML code to make this happen.

Inkscape

Then the hard part starts—they start coding links, dynamic content plugins that will pull content into the content areas and more. As a designer, you might also be asked to help do the layout for some sub-pages within this website (if the header, footer or sidebar changes). Or you might also be asked to help make the graphics for dynamic menus that might 'drop down' from the navigation bar we created in the example web page.

So what do you provide to the programming team?

  • The PNG image files you exported from your design (likely within a folder called images)
  • The source Inkscape SVG file of your design mock up

Why do you give them the source files? Inkscape creates SVG files that are more and more commonly able to be read in web browsers as they are. Want to try it out?

Take the SVG source file you just created, and then drag it over a browser window. Did it open a 'page' that looks almost like the one you created? There might be some black boxes or alignment issues. But the code can almost work for the programmers. At the very least it gives them already created IDs and parameters to start working with to create the web pages.

Our example in this article was focused on designing a web page for computer viewing. But, with the increasing use of mobile handheld devices, you might be asked to design a mobile website.

Summary

In this article we designed a sample web page project. Using many layers we created a header, navigation bar, content areas, and footer for our site, and then worked to slice it into images and export for final integration into a web site.


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.
u
i
E
q
8
j
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