Posts tagged ‘Inkscape’
My latest web app crush is squarely on Stencilizer, a cool online tool for automatically posterizing, smoothing, vectorizing and color separating photo input. Upload an optimized (clear, close up, cropped, background removed, high contrast) image and Stencilizer first presents you with 9 choices in various brightness levels and number of colors.
Choose your favorite and then Stencilizer yields up to 5 SVG files ready to download, cut and layer.
In addition to its intended purpose of making layered stencils, I see at least 3 more ways the digital diecutting community can put this tool to use. First off, if you are familiar with the stunning Paper Portraits by Greg over at Paper Kutz Studios you may have wished for a lazy crafter’s version. Stencilizer gives you that.
The Stencilizer output is not nearly as detailed as what you would get through the meticulous methods Greg generously shares in his tutorials, of course, but should work fine for smaller projects, greeting cards, etc. Though I haven’t tried it yet, I can foresee combining the Stencilizer output with Greg’s advice on paper colors to create some nice pieces.
Secondly, rendering photos in vinyl for tiles and for etching on vases, etc is very popular. File creation has been a challenging proposition, though, as most crafters lack the image editing savvy to translate a photo into a single color cut file that is recognizable, much less flattering. While the SVG files from Stencilizer are not suitable for vinyl work, the enlarged previews it generates are adequate for tracing.
I’ve put together a video tutorial on how you can use Stencilizer to make cut files for vinyl. In it I use Silhouette Studio for the tracing, but any cutting program or Inkscape would do the job just as well if not better.
Though not diecutter related, I will mention (since it happens to be October) that you could use Stencilizer in this same manner for custom pumpkin carving designs. Assuming the black will be cut out, be sure you add “bridges” so that you don’t have any white completely surrounded by black.
Thirdly, Stencilizer works well for the posterization needed for the hatched sketch technique I recently posted and for other projects such as glitter/sand painting where areas of discreet color need to be delineated. The SVG files Stencilizer generates are meant to be stacked, so they will not work for this, as we can not have hatching layers overlap, but once again, the previews can be traced with good results.
I’ve made a video on using Stencilizer as part of the sketching process, too.
Finally, let me mention that Stencilizer’s revenue stream comes from sales of custom cut paper stencils. Since those of us with our own diecutters will not need to buy stencils, I encourage you to take advantage of Stencilizer’s donate button if you find the web app useful.
Ever wished you could sketch a photo with a pen in your diecutter? Well, I found a way, if you’ve got enough patience. The general steps are as follows: simplify photo, posterize photo, vectorize posterized photo, hatch fill each section with density corresponding to color, randomize the hatching, save as svg, send to cutter.
It’s a simple idea, but tedious to execute. I am surprised I wasn’t able to find software to do this automatically (that’s a big hint to you programmers out there). Anyway, here is my tutorial. It assumes you have at least an intermediate comfort level with Inkscape, and some basic photo editing skills as well.
To do this you will need:
- Eggbot extensions for Inkscape installed. Click here for download link and installation instructions.
- some sort of photo editing software that has a Posterize command or ability (I used Photoshop. You could use Photoshop Elements, Paint Shop Pro, Gimp, paint.net, fotoflexer.com, iPhone apps like ToonPaint, etc.)
- large clear photo with good contrast.
- diecutter and software that can read vector formats output by Inkscape. (Cricut users may be disappointed as its drawing capabilities are inferior to other consumer machines.)
- method to hold a pen in your cutter. I use the adjustable marker holder from Chomas Creations.
- suitable pen for drawing. I am using a Sharpie retractable pen.
Before you get started, it is a good idea to draw out the sample file I put together to help you see how the different fills will equate to the grays in an image. I have an SVG version and a .studio version for you to download. For best results, use the pen, settings, paper, any type of mat that you will be using for your final portrait.
It should look something like this when you are done:
Here’s the photo I started with
Using Photoshop, I:
-deleted the background
-changed the photo to black and white
-adjusted brightness and contrast
-posterized to 4 levels
The great thing about using Photoshop for this is that you can set up adjustment layers so that you can change the brightness and contrast and see the effect on the final posterization in real time.
-I also used the Dust and Speckles filter to smooth out the image
If you don’t have Photoshop, PSE or a similar program, the key here is to obtain a 3 or 4 tone image that is relatively smooth (this is for the sake of efficiency, it doesn’t have to be as smooth as for cutting) and at least medium resolution. You might even try some of the web apps that produce an “Obama Poster” as these produce a similar effect, albeit in fairly low resolution. Another possibility is to do this directly in Inkscape concurrent with the Trace Bitmap step (take advantage of the Options tab). My original photo was too dark and lacked contrast so I did not have good results with these alternate methods, but I think better photos would work fine this way. There are dozens of methods for and tutorials on posterizing. Find one that fits your software and skill level.
Another update: Make the Cut has added a feature for this under Pixel Trace>Color>Grayscale.
-Next bring the image into Inkscape using the Import command and with the image selected choose Path>Trace Bitmap.
-We will be autotracing using the following settings: Grays checked, Smooth checked, and Stacked unchecked. The number of scans will depend on the number of colors in your image, more or less. Start with the same number as your posterization levels and experiment up or down a notch if you aren’t satisfied with the results.
And here is my result, shown ungrouped and split into the light, medium and dark layers for reference. There was an additional lighter layer, which I deleted.
-Size your image to the approximate size you will want the final sketch to be. If you change the size later it will affect the shading and might not appear the way you want it to.
-Make a copy of the trace to use as reference and drag it off to the side. Ungroup the working copy one time. You will have 3 or 4 paths, each representing one brightness level of the image.
You will probably find it easier to work with the pieces separately, but it is important to be able to bring them back together in exactly the right orientation. You can either paste each piece in place onto a separate layer or use shift-arrow to move the pieces in large discreet increments that make it easier to backtrack later. I put each piece on its own layer, titled light, medium and dark, so that I could toggle them on and off as needed, but also make frequent use of the shift-arrow technique for interim moves.
-Start with the darkest section and apply a hatch fill by selecting Extensions>Eggbot Contributed>Hatch Fill
-Choose an angle you’d like the strokes to lean with 0 being horisontal and 90 being vertical. In my case, I chose the angle to match the tilt of the subject’s head. You can choose any angle you like.
-You’ll want to refer to your sample swatches to help you select a setting for the hatch spacing. Smaller numbers mean the lines will be closer together, and the effect will be darker. Looking at my swatches for reference, I used 1.5 for black because I wanted the pen strokes to still be visible, but barely.
-It may help to switch to outline view (control- 5 on numeric keyboard to toggle) so you can see the hatching take effect.
-When the Hatch extension finishes, you will have a group of 2 objects: the original path and the hatched version. Ungroup them and move the original out of the way. (I sent it back to another layer for safekeeping.)
-Choose the next darkest color and repeat the steps above, using a larger setting for the hatch steps. I chose 2.7 and 3.5 for the medium and lighter colors respectively.
-To get a better idea of what your sketch will look like, select the entire hatched version and set the fill to none and the stroke to a width of 1 px.
-If you are satisfied with the relative shades of your hatching, its time to add some randomness to give the sketch a more hand-drawn look. Select one section and choose Extensions>Modify Path>Jitter Nodes.
You will want to experiment with settings to see what you like as results will vary depending on the size and composition of the image. The settings I used for my sketch are shown in the screen capture below.
-Repeat the Jitter Nodes process for each shaded section. You can use different settings for each one if you like. Longer strokes lend themselves to more displacement without distorting your image.
-Save a copy of your working document for safekeeping. Select the completed hatched and jittered sketch portion of your drawing and copy it to a new document and save it as SVG. If you are using Make the Cut or Sure Cuts a Lot, this SVG should be ready to import and draw as is.
Silhouette Studio DE users may also use this SVG version, however, if you have the standard version of Silhouette Studio, save the sketch as DXF instead.
-If you use either version of Silhouette Studio, you will need to set all the line widths to 0.0. Do this by going to the Line Style pane and sliding the slider all the way to the left.
-You will also need to go to the Cut Styles pane and set everything to Cut Edge.
It’s also a good idea to zoom in closely to verify that the cut lines are single, open paths, as that is what we want for pen sketching.
-It’s time to sketch your masterpiece. Choose the appropriate settings and find something else to do for the 15-30 minutes or so it will take this complex of a file to draw.
Here’s a scan of my sketched result, drawn with a Sharpie pen in my Silhouette SD. I think maybe I would like the middle tone a little darker next time, but you get the idea. Up close you can see the marker strokes and it really has a hand drawn look to it. From a distance, it looks even more like the original photo.
Ever wonder how to autotrace those hard to handle .pngs with light colors against a transparent background. It’s quick and easy in Inkscape? Hint: It involves my favorite tool…the paint bucket. I’ll show you in less than 2 minutes.
IMPORTANT UPDATE: As of March 14, 2011, MTC no longer supports Cricut.
With new official releases of SureCutsALot and MakeTheCut finalized in the last few days, I have been busy updating my comparison chart. So click below for the latest on who does what, current for SCAL 2.038 and MTC 3.2. By the way, both MTC and the comparison chart are celebrating their first anniversary this week.
Here’s the video I should have done first, showing how to tame the Inkscape paint bucket tool. Also included in this video is an example of how to use this technique to convert graphics from Lettering Delights.
By popular demand, a video on how to create your own TrueType font with Inkscape.
Back in the day, there was a great free program for the Mac called TypeBook, which I used to print specimen sheets and character maps for my fonts. Unfortunately, it didn’t make the leap to OS X. I have been using an Excel spreadsheet to print character maps for my giant collection of dingbat fonts in the intervening years, but wanted to make something easier to use and to share. The result is my Inkscape version that you can download here.
And I also made a version for Adobe Illustrator that you can download here. Illustrator has a built in character table (Type menu>Glyphs), but if you want something to print out, this will come in handy.
Here’s what a completed page looks like for my 09kutups font.
Buried in Inkscape .47 is the ability to make your own SVG fonts. This isn’t all that exciting because even Inkscape can’t use SVG fonts. However, pair this with a free font conversion tool and you now have a way to create your own TrueType fonts for free! The font creation features are not well developed yet, and there is precious little documentation, but after playing with this quite a while I have finally come up with a set of procedures that works. View/download the tutorial (PDF) here. View the video here. If you develop an original font for digital diecutters, please let me know so I can post it on my fonts page.
- fontstarter.svg file Inkscape file to be used with the tutorial
- Dingbat map webapp (Windows) for viewing your completed font
- Online Font Converter or Free Font Converter
- Inkscape documentation covering font editor
- See and download some example fonts at Denise’s Scrapbooking Room
Want a quick and easy way to autotrace a simple line art shape in Inkscape without the pesky double line problem? Well, once you have your defaults set, all it takes is one click with the paint bucket tool.
The steps above work for any fairly crisp line art you can open or import into Inkscape. Zoom in so that the shape you want to vectorize fits on the screen and is as large as possible without the “jaggies.” Clicking the plus and minus keys is helpful for finding the right zoom level. Then simply follow the steps on the screen shot above, which is from this file if you want to follow along. (Note: I set my paint bucket fill to none and its stroke to hot pink for high visibility, but remember, colors, line styles, etc. don’t matter to SCAL.)
Some other notes:
- If nothing happens when the paint bucket is clicked, try again and see if the infobar gives you an error message.
- If you do not see an outline appear, but a dotted rectangle appears around the shape, you need to set the stroke (outline color/thickness/transparency) so it is visible. This can be done with the Object>Fill and Stroke pallette.
- You can also switch to outline mode to see your new vector View>Display mode>Outline. The red X is your original image, which doesn’t display in outline mode since it is a bitmap.
- If your template’s shape is not completely closed like the one above, use the “Close Gaps” adjustment to the right of the other settings before you click with the paint bucket.
- If your template’s lines are not crisp like the one above or it has many levels of gray, turn the threshold level up and try again. If you do not like the result, just backspace, change the threshold setting and try again.
- When you are done tracing, you may want to press control-L one or more times to simplify the trace before you cut it. Set the simplification threshold in your Inkscape Preferences>Misc to .0005 for best results.
- If your template consists of multiple shapes, you can hold down the shift key as you click the paint bucket to automatically union each piece to the last.
SCAL has a lot going for it, but one glaring flaw is how it handles the sizing of imported files. Basically you lose all your hard work at getting your Inkscape files at the right size and in proportion to one another when you go to import and have to find ways to correct for that once in SCAL. Hidden in these lengthy videos is a great tip for correcting this issue. I took the idea, refined it a little and made it into a 12 x 12 Inkscape template, which you can download here.
To use it, open the document in Inkscape (sorry, but it crashes Illustrator). Create your design to scale (leave a 1/4 inch margin to allow for the uncuttable area). You may add new layers but be sure to leave the original layer on at all times. Save as usual to Inkscape’s native svg format. Open a new document in SCAL. Set the default size to 12 inches (in the box on the Library Window). Placing the object at X:0, Y:0 is recommended but not required. Import your saved SVG.
The screen shots below show how using this template to create files for export to SCAL differs from a using a normal 12 x 12 document. When designing in Inkscape, both documents look like this: (more…)