To make this easier turn on your grid ( SHIFT +3 ) and make sure snap is enabled in your document preferences. 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. Click on your new layer and then using the rectangle tool create the sections of your website. Then bring up the layers pallet if it’s not already by pressing CTRL + SHIFT + L. To do this press CTRL + SHIFT + N, and name your new layer “slices” or “export”. 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.

That’s because this site is a fairly simple blog and I just wanted to integrate the navigation into the sidebar. You’ll also notice that I didn’t include a navigation section. 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. The next thing we need to think about is the site’s layout. You may also want to consider making a special style sheet for the growing number of people accessing the web from their mobile phones. However, the dimensions you choose totally depend on your target audience (which may not be the US). 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.Ī width of 960 pixels is popular for web design because most people in the US have a computer with a resolution of 1280 by 800 or greater. Open up a new document in Inkscape and edit the document size by navigating to File » Document Properties or just press Ctrl + Shift + D. This tutorial will walk you through some basic techniques for creating websites with Inkscape using this very basic blog design as a guide. This program can be used on on its own without the use of photo editing software like Photoshop or Gimp to create professional websites. It’s also an open source program released under the GPL, and is available for Windows, OS X, and Linux. It’s similar to Adobe Illustrator, but the user interface and tools are slightly different. Inkscape is a great program to have in your toolbox as a web designer.

How to use inkscape basic