Create gritty, worn and distressed designs in Inkscape
In the previous tutorial - Create curved vector ribbons in Inkscape - we created a graphic element with a vintage aspect to its design. As an extension of this, we're going to advance the design further and apply a distressed or worn effect to it, while keeping everything entirely within Inkscape.
Using a helpful resource from the ever-brilliant Chris Spooner, I've written this Ten-minute Tip which will show you how to take your flat vector object and create a weathered feel to it in seconds. It's not difficult, it's really powerful and it looks great, so let's do it.
Using the vector ribbon technique we learned in the previous tutorial, here's a snapshot of what we'll be creating using our new-found knowledge:
- Spoongraphics Blog Gritty/Grainy Texture Pack for Photoshop (Download link at the bottom - 2.1Mb)
Skills you'll be developing in this tutorial
- Importing raster images to Inkscape projects
- Use of (monochromatic) Inkscape masks to create texturing of vector graphical elements
- Correct z-ordering and grouping of objects to simplify projects
Step 1 - Load the source images and create the mask
Load up Inkscape and Open your file to be edited. It's not necessary to create a Group out of the objects you're working with, but in this case I'm going to as it will make the Masking process a little more straightforward later, particularly if we want to back-track and remove the Mask and make changes.
NB. It's absolutely fine, by the way, if you have one Group of objects sitting within another. Inkscape's Information bar will always tell you what you're working with anyway.
Time to bring in the textures. Chris's Gritty textures are built for Photoshop use, and are therefore primarily black with white flecks for the speckled effect; the black parts work as being transparent, while the white spots are intended to 'knock out' small areas of the image to produce the grittiness. Inkscape works the other way round but, as you'll see, that's not a problem.
Hit Ctrl and I to bring up the Import image dialog box (File --> Import is the menu path to this) and import one of the textures from the Spooner pack. Select Link from the option box that appears as this will help to keep your Inkscape file size down.
As I mentioned before, the white-grit-on-black nature of these textures in the inverse of what Inkscape needs, so head to the menus and select Extensions --> Raster --> Negate, which will do just that.
Depending on the size of the artwork you're applying the texture to, this imported image may completely obscure your vector design, as mine has here. In that case, reduce the transparency of the texture in the Fill and Stroke panel a bit so you can position it correctly, then reset the transparency to 100% when you're happy.
Resize it slightly if needed, so those speckles cover some of your design without totally smothering it. This is very much a 'by eye' measurement and highly subjective, but you'll get a feel for it quickly enough and there's always the Undo option if it doesn't work out how you intended.
Select both the items with Ctrl and A or a dragged out selection box, then click Object --> Mask --> Set in the menus to see the effect applied on the canvas.
And there it is. Those black gritty areas turn the areas of your graphic over which they sit transparent, meaning whatever's underneath shows through. It looks great over a white Inkscape canvas, but over a contrasting base image it can be even more effective.
We've used a raster image here as a Mask, which is fine because it was of a sufficiently high resolution, but you can achieve the same outcome with a vector mask too, meaning there's always a way to keep the whole result in a fully-scalable SVG form. Great work!
Has that Ten-minute tip stamped an imprint on your memory, or just left you feeling a little distressed? Let me know with a comment below.
comments powered by Disqus