Designing Websites With Inkscape
Don’t let the build number scare you. While the latest version of Inkscape is only at build number 0.45.1, it’s stable, feature rich, and above all else, it’s a very powerful program for creating vector artwork. Another notable feature is that it’s an open source program released under the GPL and it’s free. Inkscape can be used to create very nice looking websites all on it’s own without the use of photo editing software like Photoshop or Gimp. The image on the left is the final coded-out version of CalliePoole.com, which was designed completely with Inkscape. Today I’ll walk you through how I designed this site and go over how to create usable website mock-ups with Inkscape.
To start, let’s fire up Inkscape 
and choose our image dimensions. Go to File >> Document Properties or just press Ctrl + Shift + D. Now we’ll select the image size, I’ll choose 760px X 1000px at 90 dpi, but you can choose whatever size you’d like. A width of 760px is popular because its good for smaller screen resolutions. If you do choose to go ahead with your own size, make sure you pick an even number so it will be easier for you to slice up the different regions of you page. The same applies even if you want to build a fluid page layout, it’s just easier to do the math with an even number.
Okay, so we have our page dimensions defined, so lets go ahead and talk about the page layout.
My number one rule for web design is to keep it simple. With that in mind, the site will be divided into four main sections; a header, a main content section, a side bar (or alternate content) section, and a footer. Sometimes I create a basic navigation section, but for this tutorial, I’ll be designing a very simple blog so we’ll just integrate the navigation section into the sidebar.
I like to use guides when designing, but I generally just use them to eyeball object placement, not for alignment. I will hopefully cover guides in another tutorial. So, lets get started with the header. The header is going to be 120px in height and fill the entire page background. So select the rectangle tool and draw a box. 
Now that we have our header we need to get it aligned properly to avoid any anti aisling when we export our images. Press F1 for the selection tool and select your header. Now with the header still selected go to the tool control box with the X input and enter 0 and press enter. Now go to the Y box and enter 880 and press enter. Next enter 760 i the W box, and then 120 in the H box. 
If values in the other boxes are changing, make sure you have the lock open. It should look something like the image on the left, and the header should be aligned for our dimensions.
Next we’ll give the header a slight radial gradient. Select the header with the selection tool and press CTRL + Shift + F. Now choose the radial gradient and click on the edit tab. I’m going to select a very light blue to light blue blend, and place the center of the gradient to the lower left of the header. Feel free to experiment with your own color blends and position. Again, this site is a simple blog, so I’m not going to create a logo. I am however going to import a drawing that I made earlier to give it a unique cartoon-like look. To import go to file >> import or press CTRL + I and navigate to your SVG or bitmap image. If you import a bitmap, press CTRL + A or select Object >> Patern >> Object to pattern. This will allow you to save the file without loosing the bitmap, and you can edit the image as an SVG object.
You’ll also want to add your site’s name, the upper left hand of the page is fairly standard, but feel free to place it where ever you’d like it. Select the text tool (T) and type out your sites name. I’m also going to ad a generic tag line to describe the site.
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 background images. If you want to incorporate them in your design, by all means do so. Whip out the text tool and type “h3 - headline title”. I do this to remind myself later when writing the code to make this an H3 tag, so if you don’t think you need a reminder, you can just write whatever you want to appear in the site there, and then just copy and paste later.
Now we’re going to generate some fake content with Inkscape’s built-in Lorem ipsum generator. This is a really handy tool if your building websites, print layouts, or whenever you just want to see how your design will work when it has some content. Select the Text tool and draw a text box below your H3 header tag about 500 pixels wide and 100 to 200 pixels tall. Now select the Lorem ipsum generator, Effects >> Render >> Lorem ipsum. The default settings should be fine, but you’re making a mockup of a full blog page, but I’m just making a basic blog with excerpts on the front page. You should now have something looking like the above right image. Next we can select this text and our headline and then duplicate them (CTRL + D) and move it underneath the first post. Do this a couple of times to get your main content section. For the sidebar you can add in the text manually or just leave it blank if you have a good enough idea of how you want the site to come out. Using the Lorem Ipsum generator gives you the ability to quickly and easily change the typography of you site.
Now this is finally starting to look like a website, but it’s a little bit too boring for my taste. Simple doesn’t always mean boring, so to add a bit more visual flare I decided to do give the site a kind of tear-out look by using a drop shadow with a transparent gradient. This is a fairly easy thing to do with Adobe Photoshop, Illustrator, and Gimp, but we don’t really need to leave Inkscape for this since the introduction of the blur filter.
The easiest way I find to do this is to duplicate you header background CTRL+ D, and then drag resize it about 25 pixels higher and 500 pixels longer. Then edit the object’s fill properties, press CTRL + SHIFT + F and change it’s color to black, and pick a blur radius of about 3. Once this is done you can select the linear gradient option on the color pallet and then edit gradient nodes (shift + f2) so they are vertical. If everything has gone okay you can move the object to the bottom of the document (end or pg dn). Now you should have the page pop-out effect.
All we have to do now is export our images. Select all of the text and hide it. The most effective way to do this is to create a new layer, and name it “text”. Open up the layer dialog, (ctrl+shift+L) and then select all of the text and move it to the above layer (shift + pg up). You may need to do this a few times. Now hide that layer by clicking on the eye. All of your text should be disappear. From here there are two basic options that I see. Either export the entire image and then slice it up in Photoshop or Gimp, or you can export the sections individually in Inkscape.
Since this is an Inkscape tutorial, will look deeper into the second method. The easiest way to export you images for use on the web is to create a new layer, and name it “export regions”. Turn on the grid with the # command. Using the rectangle tool, create the regions that you’d like to use for images on you website (e.g., header, background, sidebar). Now set all of those images ids to something meaningful like “header” for the header etc. Now all you need to do is select the desired region, export it, and your done!
I’ll be adding images soon and answering any questions or comments.
Leave a Reply