Open Inkscape and create a document that is 40 x 40 pixels by pressing (Ctrl + shift + d) and editing the page dimensions. Now turn on your grid, and enable snapping, and increase the sensitivity to 5 pixels. The quickest way I’ve found is to draw the stripes by hand with the beizier tool. Start at the top left corner and draw points at pixels from zero in both directions. Then remove the stroke (ctrl + shift + f) and add a fill. Draw the other stripe starting at 0 40 and then 40 0 and make it 20 pixels in width.

At this point we have a basic pinstrip at a 45 degree angle that can be exported to a PNG and used as a repeated background for a website. Press Ctrl + shift + E then select page and export bitmap. Simple enough.

Unfortunately, due to a bug in Inkscape the pattern will display with spaces, so there are two work arounds that I’ve came up with. One is to resize the original pattern and make a clipping for what ever shape you want. The downside to this is that you can’t resize the stripes or the spaces will appear. The other work around is to make a tiled clone of 4 X 4 and then edit the original nodes by about .01 pixels until the spaces aren’t visible, then make the tiles however big you need them to be.

Download the .svg and the .png.

To start, lets talk about the tools. The most popular open source pixel-based image editing program by far is Gimp, but there are others such as Krita, and there is also Pixel which runs on Linux but it’s not open source, so we won’t discuss that here. I’ll take the base assumption that Gimp is the best available alternative to Photoshop. As far as vector graphics go, I think Inkscape takes on most of the duties you would typically employ Illustrator or Quark for. So assuming that Gimp and Inkscape our are best choices, and if we want to reduce licensing cost to a bare minimum, then there is no better choice than Linux for our OS. If you already have Mac OS X or some version of Windows and you’re comfortable with that, that would be fine too.

Designers coming from a background of using Adobe products, often scoff at the poor interface of Gimp and odd keyboard commands. Of course this begs the question; if you’re coming from a background of using Adobe products why would you want to switch? There could be many reasons for this: maybe you’ve used Adobe products in school and can’t afford them currently, you might prefer to work on a Linux or Unix platform, maybe you never enjoyed working with them in the first place, or maybe you’d like to contribute a new function or tool to an open source project.

Whatever your the reason for choosing to run open source design software, I think main benefit is the $0 dollars in licensing cost versus hundreds or even thousands for using the proprietary counterparts. Are the end results that different? I argue no. In my opinion an artist is able to make art on whatever medium or platform they are provided with. Many people coming from a Adobe background might be quick to point out that Gimp has a very poorly designed user interface, it’s keyboard commands are different, and it’s not in anyway designed to work with or be similar to Inkscape (whereas Photoshop and Illustrator have a very similar workspace and keyboard commands). These are valid concerns, but for someone without a background in Adobe products, these complaints aren’t often made. I would argue further that if we didn’t have Adobe products running design studios, we would still be seeing very similar end products.

Making the broad assumption that a skilled user of Adobe’s creative design suite would make the switch, problems in the workplace are of course inevitable. If you’re working for yourself, that fine as most of your clients aren’t going to care whether your producing SVG and XCF file format images rather than AI or PSD, but your boss and colleagues probably will. Most web design companies expect (or even require) their designers use Illustrator, Photoshop, Flash, Fireworks, etc,. Basically I don’t see any way around this unless you either work for yourself, or somehow find a really cool boss (which can happen). But if you’re committed to running Linux, a cool boss might not even be able to help you, because they’ve probably already bought you a new iMac, and the words “Linux” and “iMac” in the same sentence probably won’t be taken kindly.

However, if running Linux is something you’re permitted to do, there are still other obstacles. The primary being that your going to need to be working with PSDs, AIs, and other file formats that aren’t native to you open source design software. That’s not to say they aren’t going to work, but you might run into some problems (like crashes, data loss, and corrupted files) if you aren’t using the software it was created on. With this in mind, you really only have a few options: dual boot, use Wine, or use virtualization software . I really don’t think any of these are good options. Dual booting is slow, and disrupts work flow. Using Photoshop CS2 on Wine works (well), but Illustrator doesn’t (it installs but doesn’t run), and virtualization software is just to slow in my opinion.

Of course these options all kind of sidestep the whole idea of using open source applications to build websites. So where does this leave us? I can only guess. It’s my opinion that the problem isn’t that the open source programs available to Linux users aren’t good enough to produce professional results, it’s just that people don’t want to deal with anything they’re unfamiliar with.

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.