Creating Patterns in Inkscape
Right now there is a very popular trend on the web and in print media to use a pinsrtipe pattern for a background image. This tutorial will go over how to create a pinstripe pattern in Inkscape and hopefully it will give you an idea of how to use and make patterns for Inkscape. Read on to learn how to make this seemingly simple pinstripe pattern using Inkscape.
Document Set Up
Open Inkscape and create a document that is 40 x 40 pixels. You do this by opening the document properties located at FILE > DOCUMENT PROPERTIES or by pressing CTRL + SHIFT + D. Now edit the page dimensions to 40 x 40 pixels.
Document settings for Inkscape set to 40 by 40 pixels.
While you’re here, also make sure that snap to grid is enabled. I also recommend setting the snap distance to 10 pixels if its not set already, it’s located under the SNAP tab.
Editing the snap settings for Inkscape
Now turn on your grid by going to VIEW > GRID or by pressing SHIFT + 3, and then enable snapping. (You could also use guides opposed to grids, but for beginners grids are a little easier to use.)
Start Drawing
The quickest and easiest way to produce this technique is to draw the pattern by hand with the pen (or bezier) tool. Select this tool by pressing B. Start at the top left corner of the border (0, 40) and draw the top piece of the pattern. Your pen tool should be snapping to the grid and you should make the points of the triangle at (0, 40), (20, 40) and (20, 0). For now, don’t worry about the stroke and fill settings.
Starting the pattern
Now you will want to begin drawing the second part of the pattern. Again use the pen tool, and make sure your lining up to the intersections of the top stripe.
Drawing the second object and lining up the points.
Combine Objects and Finish Up
Now we need to combine the two objects. Select both objects with the select tool (S) by clicking on each and holding down the SHIFT key. Now press CTRL + K or navigate to PATH > COMBINE. Now both stripes are part of the same object. With the object selected, open the fill and stroke dialogue box by going to OBJECT > FILL AND STROKE or press CTRL + SHIFT + F. Set the fill to black and remove the stroke by clicking the X box under the STROKE tab.
Finished stripe pattern.
Exporting to Photoshop or GIMP
You’re finished with the pattern. From here you can export it as a PNG to use in Photoshop, another raster program, or use it as-is for a repeating background for a website. To export, navigate to FILE > EXPORT BITMAP or press CTRL + SHIFT + E and select the “export page” option and export bitmap.
Using the pattern in Inkscape
Unfortunately, due to a bug in Inkscape patterns that butt up next to the page border will display with very slight gaps separating the stripes. This isn’t a problem if your patterns have white space around them. For example, if you just want to use a simple repeating star background, you would simply:
1.) Create a star with the star tool.
2.) Select the star.
3.) Transform the star into a pattern by selecting OBJECT > PATTERN > OBJECT TO PATTERN or by pressing ALT + I.
4.) Apply the pattern to an object by selecting the object, opening the fill and stroke dialogue box, and select the pattern for the fill.
How it should work
How patterns are supposed to work in Inkscape
The Inkscape Pattern Bug (affects verision .46 and below)
Trying the same technique with the stripes pattern, exposes some problems. Notice the white gaps below.
A bug in Inkscape causes gaps between patterns
Work Around
The best option I’ve discovered for getting around this problem is to use tiled clones in place of patterns.
1.) Select your pattern, and transform it back into an object by selecting OBJECT > PATTERN > PATTERN TO OBJECT or by pressing ALT + SHIFT I.
2.) With the object selected go to EDIT > CLONES > CREATE TILED CLONES. With Simple translation selected, enter your desired height and width or number of clones and select CREATE. You may still notice some slight gaps, but they will be fixed shortly.
Creating the pattern using clones
3.) Select all of your clones and then select EDIT > CLONES > UNLINK CLONE or SHIFT + ALT + D.
4.) Combine your pattern by selecting all of the stripes and pressing CTRL + K or selecting PATH > COMBINE. This will fix any remaining gaps.
If you just want to use this as a background image, you’re finished. However if you want to use this pattern to style an object you have one more step.
5.) Turn this new object into a pattern by selecting OBJECT > PATTERN > OBJECT TO PATTERN or by pressing ALT + I. Now you may apply this to whatever shape you would like, as long as your new object is smaller than your clone-created-pattern.
The final object with our pattern applied.
Download the SVG image. Right click > save link as.
Leave a Reply