Inkscape is a great program to have in your toolbox as a web designer. It’s similar to Adobe Illustrator, but the user interface and tools are slightly different. It’s also an open source program released under the GPL, and is available for Windows, OS X, and Linux. This program can be used on on its own without the use of photo editing software like Photoshop or Gimp to create professional websites. This tutorial will walk you through some basic techniques for creating websites with Inkscape using this very basic blog design as a guide.

Document Set Up

Open up a new document in Inkscape and edit the document size by navigating to File » Document Properties or just press Ctrl + Shift + D. Then choose the dimension for your website, I’ll choose 960 pixels wide by 2000 pixels high, but you can choose whatever size you’d like.

Document size for our website.

A width of 960 pixels is popular for the web because most people in the US have a computer with a resolution of 1280 by 800 or greater. However, the dimensions you choose totally depend on your target audience (which may not be the US). You may also want to consider making a special style sheet for the growing number of people accessing the web from their mobile phones.

The Layout

The next thing we need to think about is the site’s layout. I’m going with a fairly standard blog layout with a header section, an article section, a sidebar (which I’ll call “aside”) and a footer section. You’ll also notice that I didn’t include a navigation section. That’s because this site is a fairly simple blog and I just wanted to integrate the navigation into the sidebar.

The basic structure for the website (which follows the HTML5 naming convention).

Creating An Export Layer

Since Inkscape doesn’t support a function like Photoshop’s ability to slice an image into multiple pieces, we will need to create an export layer. To do this press CTRL + SHIFT + N, and name your new layer “slices” or “export”. Then bring up the layers pallet if it’s not already by pressing CTRL + SHIFT + L. Click on your new layer and then using the rectangle tool create the sections of your website. You’ll want to make sure that your rectangles have no stroke applied and that they’re butted up to one another as well as your document’s border. To make this easier turn on your grid ( SHIFT +3 ) and make sure snap is enabled in your document preferences. You can actually do this after you design the site and you’re ready to export, but why not just get it out of the way? You can also save this as a template to start all of your website designs with.

Our export layer - with the sections varied shades of gray so we can easily pick them out.

Guides

Next you’ll want to select and copy all of the objects on this layer by pressing CTRL + A and then CTRL + C. Then turn these objects into guides by pressing SHIFT + G and then paste your export layer back in place by pressing CTRL + ALT + V. I like to use guides when designing, but it’s not a requirement by any means. You can turn guides on or off by pressing the pipe key “|”.

Some guides for the major sections of your website.

Design

I’m going to start with the header and I already have an idea for the colors. Using the rectangle tool draw a rectangle that fills your header.

The header background image.

Then with your header rectangle selected open up the fill and stroke dialog box by pressing CTRL + SHIFT + F and select the radial gradient icon. Click edit and adjust your stops accordingly. I’ve chosen to use a light blue center that gently darkens at the edges.

Website header background image with a gradient applied.

Duplicate your header background image by selecting it and pressing CTRL + D. Then make the width of this duplicate object 40 pixels smaller. You can do this quickly by turning on the grid using the # key and using the select tool. You may also want to create new guides to use later on, but it’s not necessary for this design.

The website's header background image.

The Drop Shadow

This next step will be to create the drop shadow, which you can do easily in version .47 of Inkscape using filters, but in .46 it’s a bit more involved so this quick and easy method will do. You’re going to duplicate the header yet again (yes again) and give it a fill of black and a blur of 3.0. Then move this document below the header you created prior to this one by pressing Page Down. This will give you the drop shadow that we’re after.

The header with a simple drop shadow.

The body

Next up we’re going to create the body for our website. Duplicate your header just one more time (I promise this is the last time) and give it a fill of solid white. Then with the selection tool grab the top center arrow and drag it half way down the page. This way your body will be flush with the header. Now cycle through your objects using the tab key and select your drop shadow. With the drop shadow selected grab the bottom arrow and drag it until you can see it beneath you website’s body.

Website body with drop shadow.

Now this is close, but not quite the effect that I’m looking for. To get it just right bring up the fill and stroke dialog and click on the linear gradient icon. Using the node tool (or the gradient tool) give the shadow a vertical gradient that fades out slightly below the header.

Web page with drop shadow.

The logo

At this point you’re going to want to lock your background layer in place and create a new layer for your logo. A good name for this layer would be something like “logo” or branding. Now, I’m going to go over how to draw a logo, so you’ll either want to draw one on this layer or import your existing logo. To import an image press CTRL + I and navigate to your SVG or bitmap file. If you import a bitmap, select the object and then press CTRL + A to convert the object to a pattern. This will allow you to save the file without loosing the bitmap, and you can edit the image as an SVG object.

A really basic logo for demonstration purposes.

Main Content

Now the we can move into creating the main content section. I’m just going to be using plain text for the main content and headlines without any other background images besides the one’s we’ve already created. So, the following won’t actually be used in the creation of the site, but it’s just to give you an idea for how you want the typography set up or if you need to show a client how the site will look before coding it out.

To start lock your logo layer and then create a new layer named “content”. Then whip out the text tool and start typing. Fortunately Inkscape has a built in lorem ipsum function that will automatically input dummy text for you. This is an extremely useful function that can easily be accessed through Extensions » Text » Lorem Ipsum. Just choose your settings and press the generate button.

The mock up is starting to look like a blog with the text added.

You should now have something looking like the image above. You might have notice I added a sun burst pattern to the header. If you want to read up on how to make that effect, I’ve written a tutorial about it here.

Finishing up – Batch Exports

All we have to do now is export our images. We’re going to start by exporting the background images, so you’ll want to hide all layers except the background and export layers.

Hide the content and logo layers.

Then you’re going to select the header export layer and bring up the export dialog by pressing CTRL + SHIFT + E. Next make sure the selection tab is pressed so that only the header is exported and then select where you’d like to export the image to. It’s a good idea to create an images folder to keep everything in one place. For this example though, I’m just going to be exporting to my desktop.

Exporting the header section.

Repeat this step for the body.

Exporting the body section.

Now you’re going to select all (CTRL + A), and then hide the layer. With the objects still selected, bring up the export dialog and select batch export.

Batch export your background images.

Now your header and main background will be exported. This should give you an idea for how the batch export tool works. And how you would build the rest You’ll need to create an export object for your logo as well.

Tags: Inkscape, web design
Posted in Articles | 12 Comments »