So You Want To Create Vector Files?? I'll Walk You Through It!

 

Let me guess, you want to make your own files for laser cutting, but have no idea where to start? You've come to the right place!!

Before we get too crazy, let's talk about some basics.

My brother and I have a Glowforge Pro. I'm not sure about other lasers, but I know with Glowforge lasers you can engrave raster images, but you can only cut vector files. 

If you don't know the difference between the two file types, that's ok - we're going to walk through it together.

Raster images are pixel based. If you try to rescale your design, it most likely is going to lose a lot of quality and become fuzzy and pixelated. The same thing happens if you try to zoom in a lot - you will see jagged edges. When working with raster files, it is best to create your files at a larger canvas size and DPI (dots per inch) instead of trying to make it larger later on. JPG, TIFF, BMP, PNG, etc. are all popular raster formats.  The Glowforge can engrave some these, but it cannot cut them. 

On the other hand, vector images are completely scalable - no matter how large or how small, you can resize the design and the quality does not change. You can zoom in for what seems like forever and the image will stay clean. Vector images are typically saved as SVG files - this is the ideal file type for working with the Glowforge and can be engraved, scored, or cut. 

Okay, so, what's the point? 

When designing my laser files, I typically draw my designs in the Procreate app - a raster based program - because it is where I am most comfortable designing. If you're catching on to where I'm going with this - you know that means I can't use the final images from Procreate in the Glowforge app.

Once I finish designing my files, I have to turn them into vector images before I can use or sell them. There are plenty of vector programs out there, but I primarily use Inkscape for turning my drawings into SVGs, and I'm going to share my entire process here with you. 

Before we get started, I have a few reminders: 

  • First and foremost - if you plan to use a reference image, make sure you have permission to use your image, otherwise you may be infringing on someone else's copyright and intellectual property. Unsplash is a great place to get commercial use images, or you can practice taking your own photos and building up a reference library. You CANNOT take an image from Pinterest or Google or Instagram and trace it. Just because it is online does not mean it is fair game.

  •  Make sure you are creating something original and you are not copying someone else's work. It is fine to be inspired by someone else's work, but put your own twist on things. When in doubt, give credit! It is ALWAYS okay to say you were inspired by someone. It's when you don't acknowledge the inspiration that things can get a little shady.

  • If you are using fonts in your designs, make sure you read through the licensing agreement from when you purchased that font to be sure it can be included in digital designs. 

  • It is never okay to resell someone else's design. Almost always, when buying a digital design, the licensing agreement will tell you it is fine for physical creations, but you cannot modify and resell the file in any way.  Doing so will get you removed from Etsy quickly and may get you in legal trouble. The same thing goes for copyrighted content - stay clear of this - just stick to selling your own original designs and you should be fine. 

OK - now that the boring stuff is out of the way - let's design a cute fall pumpkin file together from start to finish.

1. First, create a new file in Procreate. These are the settings I usually default to: 

 

 

 

 

 

 

 

 

2. Draw the outline of a pumpkin. Add some leaves or embellishments if you'd like. I usually use the "monoline" brush under "calligraphy" brushes. It's included in the app. 

3. Fill in each section of the pumpkin with a doodle pattern. Here's how I filled mine: 

4. Thicken up any of the lines if necessary. 

5. Turn off the background layer.

6. Export the file as a PNG. 

 

 7. Import the file into Inkscape. Because I use an iPad for drawing but Windows laptop for the rest, I love the Google Photos app to sync my photos from one device to another. 

8. Update your document properties. I usually set my file up so the design is approximately the same size as the Glowforge bed. I use 11" tall by 19" wide so that the design will fit without having to be scaled. Make sure you turn the "display units" to inches as well. 

 

 9. From here, scale your design to the desired size. I used 8" wide for this pumpkin. 

 

 10. Now we are going to convert the design to a vector. Right click on the drawing, and select "Trace Bitmap." 

 

 11. When the pop up opens, select "autotrace" and press OK. 

12. Move your traced image slightly to the side. You can delete the original PNG. Note that you can tell which image is the SVG by double clicking. It will show the outline and all the "nodes" - also called "anchor points." In this image, it is the pumpkin on the right that has been converted to SVG. 

 

13. Open the fill and stroke panel (on the right hand side). Change the stroke to red by going to the "stroke paint tab" and selecting red from the color finder. I usually set the "stroke style" to 1px thick.

 

After you change the stroke, remove the fill - you can do this by selecting the "x" under the fill tab.

Basically, what you are doing here is outlining where your laser is going to cut. In the Glowforge user interface, a "fill," or a color inside the shape, typically means engrave, and "stroke," or cut lines, means cut. The Glowforge can also score, which is essentially a half powered cut that just leaves a score line instead of cutting all the way through. 

Something to note for more complex designs - if you want to have the Glowforge perform the same function for every part of your design, make everything the same color (in this case, all lines are to be cut, so all lines are red). If you want it to have different actions for different parts, you can color code your groups and it will recognize each group as a separate function. I usually use red path to mean cut, blue path to mean score, and purple fill (with no path) to mean engrave. When you upload the file, the Glowforge app will recognize these as different elements and you can update the function for each set. 

Ok, so we are done with this part, but what about creating a backer?? 

14. Copy and paste (Ctrl + C and Ctrl + V) to duplicate your design.

15. Click on the second pumpkin, and go to Path > Break Apart.

This is the result: 

16. Select just the outline, and move it to the side. It should look like this: 

If you are going to be making a second version with the negative space, you can cut (Ctrl + X) the negative space for later. Otherwise, you can just delete that so it leaves the original line art and the backer. It should be something like this: 

17. The last step is to select both items, right click, and select "group." I use this last step in case anyone is going to use my files for vinyl cutting - it seems to make a difference for Cricut's design space. 

18. Now it's time to save your file!  Go to File, Save As, and save your file as a "Plain SVG" wherever you want to save it (desktop, documents, etc.)

And that's it! You're done converting your file to a SVG. 


NOW IT IS TIME TO TEST IT!!

Uploading your file to the Glowforge app is easy. 

Go to app.glowforge.com, and select the "create" button. Then, select "upload file." 

 

Select your file, and it will open up. Since you sized your file to match the Glowforge bed, it will load to match the layout of the Glowforge interface. It should look something like this: 
(It's still showing the last cut I did on my Glowforge since it is offline at the moment.) 
 
From here, you can select your material, edit your cut settings, and send your design to print!!
         
I use 1/8" mdf from RedJamCreative on Etsy. I use the medium draftboard PG settings, but update the speed to 162 instead. I've found this to cut perfectly!
         
BEFORE YOU CUT ANYTHING - make sure you do a test cut - I usually do a tiny star in the corner of the wood and then eventually i'll use them for something. Each machine is different and sometimes the wood can be warped or slightly off. There is nothing more frustrating than to do a long cut and realize none of it went through. Better to check first!!
          
This is what it looks like after cutting: 


What I do next is to remove all the negative space pieces (some people like to paint those and stick them back into the outline for a seamless design, but that's not what I wanted to do for this particular cut) and put them in my scrap bucket to use as fire starters in our fire pit lol. 
Then I remove all the masking from the remaining pieces, and it looks like this unfinished: 
           
     
 For sample purposes, I didn't prime. However, some of the makers I follow online swear by priming, sanding, priming again, sanding, and then spray painting. I didn't do that for this blog post, but I have done it for other projects. 
     
Here's the final product: 
       
I love how it turned out! I have the file listed on my Etsy page (here) if you would like to try cutting and finishing one yourself. 
          

FOR ALL MY BLOG READERS - I'M DOING A SPECIAL COUPON FOR MY DIGITAL FILES! USE CODE "SDBLOG25" FOR 25% OFF ALL ORDERS OF $10 OR MORE.             

            
Alright, this has been the world's longest post, so I'm going to stop here. Let me know if you try this file or if you use these instructions to make your own vector images! Can't wait to see what you come up with!

xx Sam 

Back to blog

3 comments

Hi Sam!

What an in depth tutorial! Thank you so much, I’ve learnt a lot. I’m very new to both procreate and Inkscape. I just have a question which I’m just not able to find answers for. No matter what shape I create in procreate, when I save it as png and bring it over to inkspace and convert to svg, it has two lines . Example, if the drawing is a circle, I’ve 2 lines, I understand that it must be the top and bottom of line that inkspace is drawing in svg. In the steps above, after you converted to svg, did you also get double lines for every stroke/shape? If so, how to clean it up please? Any help is greatly appreciated.
Thanks!

Sameera

ZznKEXgbApiSo

ZlgFvfnxP

yjWEihnH

KWJeHpnzgaEBQG

Leave a comment