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
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:
- 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).
- Now create a Background Layer.
- 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.
- 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.
- Want to add in a gradient? Click the Gradient icon, and adjust how you want your gradient to appear.
- 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.
- From the Linear gradient field, choose the Add stop.
- 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.
- Next change the solid color value. In this example, we used white and changed the R, G, B values to achieve the results.
- For this example, the gradient goes from a bit darker green on the left to a lighter shade on the right side.
- 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.
- Close the drop shadow box and then save your file.
- 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:
- 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.
The example above shows white as the fill color and no stroke (border).
- 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.
- Close the drop shadow box and then save your file.
- 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:
- Duplicate the header background. Select the header and from the main menu, choose Edit and then Duplicate.
- Drag the duplicate rectangle down to the footer area of the page and adjust the size so it fits within the footer defined area.
- Notice, since the object was duplicated all formatting—gradients and drop shadows—were maintained.
- 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:
- 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.
- Create a new layer and name it Logo.
To create a new layer, you can use the Shift+Ctrl+N keyboard shortcut.
- 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.
- Lock the logo layer, and then create a new layer and name it Title.
- Within this layer, use the Create and Edit Text tool and type in the business name and then place it on the header background.
- Save your file.
Next up, is to create the Navigation tool bar.
