Welcome back to my series on Adobe Illustrator for SVG designers and crafters! We’re coming toward the end of the series, and in today’s post I wanted to share just a bunch of quick Adobe Illustrator tips and shortcuts that can help you make more unique SVG designs, even faster. These are ten tips and tricks I haven’t covered in other tutorials.

This is the last scheduled tutorial in my Adobe Illustrator series! If you haven’t read the other posts, I highly recommend doing that before you go through this post. There are things here that I won’t go into detail about because I’ve explained them more thoroughly in other lessons.

• Workspace Overview (video)
• Paths, Anchor Points, and Handles (video)
• Make an SVG from a Font (video)
• Tips for Using Fonts in SVGs (video)
• Color Basics (video)
• Using Shapes and Lines to Make Illustrations (video)
• Using the Pen Tool (video)
• Creating Fun Text Effects (video)
• Image Trace (video)
• 10 Quick Tricks for SVG Design (video)

As always, I recommend using keyboard shortcuts! We’ll be using them in this lesson and you can download a free printable reference guide below.

While this is the last video in my scheduled series, there may be more in the future as Adobe comes out with more tools!

Watch the Video

Want to watch these quick tips in action? Check out my video for this post! Or read on for a written tutorial.

Adobe Illustrator Tips and Tricks

The first two tips I have for you involve changing the settings to make working in Adobe Illustrator easier.

1. Turn Tool Tips On and Off

After a while, you may start to get annoyed with the tool tips in Adobe Illustrator. There are two types of tool tips in Illustrator. Regular tool tips are a small pop up that tells you what the tool does.

And then rich tool tips give you an example of the tool.

I find the rich tool tips to be a bit much, so I turn them off. You can turn just the rich tool tips off, you can turn them both off, or you can leave them both on.

Go to the Menu bar at the top. Illustrator > Preferences > General.

Here, you can turn of both regular and rich tool tips, according to your preference.

2. Change Size of Anchor Points

Having trouble seeing or selecting your anchor points? You can also change the size of your anchor points in the Preferences menu!

Go to the Menu bar at the top. Illustrator > Preferences > Selection & Anchor Display.

Here, in the middle of the window, you can increase the size of your anchor points, handles, and bounding box display.

Click OK to set your preferences. So much better, right?

3. If Your Tools Disappear

If you’re using keyboard shortcuts (and you should be!), you may occasionally hit a key that does something unexpected. A big one is the Tab key. If you hit the Tab key, all of your tools go away! You’re left with just your art board. This can definitely make newer designers panic!

Instead of panicking, just hit the Tab key again and you’ll see all of your tools and panels once again.

4. Turn Off the Perspective Grid

Another very (VERY) annoying thing that might happen if you hit a keyboard shortcut incorrectly is that you’ll turn on the Perspective Grid.

Now if you are normal, you’d try and hit Escape or click the little X on that icon in the upper left. But neither of those things makes that darn Perspective Grid go away.

So instead, you can go to the Menu at the top and go to View > Perspective Grid > Hide Grid.

You can also use the keyboard shortcut Shift+Command+I (Mac) / Shift+Control+I (PC), which is what you accidentally hit to turn it on in the first place.

5. Smart Guides

I believe Smart Guides are turned on by default in Adobe Illustrator. Smart Guides help you align objects on your art board. It will try to both align your images to your art board itself, as well as to other objects on your art board.

As you move your image around, you’ll see pink lines that show how Illustrator is trying to align your object. This can be incredibly helpful and I almost always have it turned on.

But every once in a while, I find that I can’t seem to get an object exactly where I need it to go because of the Smart Guides trying to align my object to something. So you can easily turn the Smart Guides off using the keyboard shortcut Commmand+U (Mac) / Control+U (PC). This makes it so much easier to get exact placement for your objects.

If you are still struggling, you can also go to View > Snap to… There are several different options here. Turning of any of these “Snap to” options can also help you get good placement for your objects.

6. Select Same

Another Menu tool I use a lot in my SVG design is the Select Same tool. Let’s say you’ve created a bundle of SVGs but that green is just not doing it for you. The SVGs have already been turned into compound paths and grouped and you’d have to double click into each group to select and change the color of each green piece.

Instead, open up that Layers panel and select a single layer that is the green you wan to to change. In this case, I selected the word Cookies from the “Cookies for Santa” SVG above.

Then with that single image selected, go to Select > Same > Fill Color (there are some other options here, but I most often chose Fill Color when working with SVG files).

This will select ALL of the green artwork on your art board and nothing else.

Now with all of the green selected, you can easily change just that color in your artwork by selecting a different color.

7. Copy using Option / Alt

Let’s say you want to make a copy of something on your artboard (a single object or a group of objects).

You could use the copy and paste commands, but if you hold down the Option (Mac) / Alt (PC) key, you can click and drag a copy of the artwork to make a duplicate.

8. Join Tool

Sometimes if you’re using the pen tool or the pencil or brush tools, you may end up with ends that overlap instead of connect.

Choose the Join tool. This is found under the Pencil tool in the left-hand toolbar. Click and hold on the little arrow in the bottom right of the Pencil tool to see the other tools, and select the Join tool.

Now scribble over where the two paths intersect.

Then when you let go of the click, you will have a joined path instead of an overlapping path!

9. Changing Polygons on the Fly

If you want to make a polygon or a star, you can use the up and down arrows to increase the number of points in your shape!

Start with the Star or Polygon tool. While you are dragging to make your star, click the up and down arrows and it will add or subtract more points to your shape!

10. The Width Tool

This final tool is one I use often but didn’t show you in any of the other tutorials. You can use the Width Tool (Shift+W) when you draw lines (\) or use the Pen Tool (P).

Let’s draw a line on our art board.

Then choose the Width Tool (Shift+W) and click and drag anywhere on the line. It will increase the width wherever you click.

You can also use it on shapes and lines you make with the Pen tool, though I don’t use it as often with the Pen tool as I do with the line tool.

Once you have your line’s width as you’d like, you’ll need to go to Object > Expand Appearance to expand the shape. This will allow you to upload it to your cutting machine software properly.

And we’ve come to the end of this Adobe Illustrator series! I really hope you have enjoyed everything you’ve learned in the last 10 weeks. As always, if you have any questions I’d be happy to answer them!

The post Adobe Illustrator: 10 Quick Tips for SVG Design appeared first on Hey, Let's Make Stuff.

Welcome back to my Adobe Illustrator series for SVG designers and crafters! This series is designed to get you into Illustrator and using it to design SVG files—allowing you to ignore all of the parts of Illustrator that you don’t need and might find overwhelming!

Today we’re going to talk about a controversial tool in Adobe Illustrator—Image Trace. I wanted to tackle this one head on, first because I do think there are ways to use it as an SVG designer and second, because I wanted to talk about why it’s controversial.

There are so many people out there using Image Trace to copy other people’s SVG files. This is particularly bad with overseas sellers on Etsy, though it happens here domestically as well. Thieves will (badly) trace other people’s original SVG files and then sell them for a lower price, undercutting the original designer. I’ve had it happen to me and, honestly, it really sucks. Not only am I not getting paid, but my files are being traced into crappy SVG files and sold at prices like “5000 SVGs for $1!” that won’t cut well at all.

So while we talk about Image Trace today, I beg, implore, and cajole you NOT to steal other people’s images. There is no reason to when we’re literally learning how to make our own SVG files in this series!

Not to mention, it’s nearly impossible to get a 100% accurate version of anything you trace, as you’ll see, so it’s never a good substitute for just drawing the image yourself in Illustrator. It also takes a lot of work to get a good image trace, so despite this being a long tutorial, we only have two examples!

This is the ninth tutorial in this series! Each tutorial builds on the next, so I highly recommend reading them in order so that you’re not lost going through this tutorial, since there will be things in this tutorial that I don’t expand upon because I went into detail about them in previous posts.

• Workspace Overview (video)
• Paths, Anchor Points, and Handles (video)
• Make an SVG from a Font (video)
• Tips for Using Fonts in SVGs (video)
• Color Basics (video)
• Using Shapes and Lines to Make Illustrations (video)
• Using the Pen Tool (video)
• Creating Fun Text Effects (video)
• Image Trace (video)
• 10 Quick Tricks for SVG Design (video)

Like in every tutorial, I encourage you to get to know Adobe Illustrator keyboard shortcuts. They will speed up your workflow and you’ll be much faster at creating your SVG designs. I use shortcuts in this lesson in parentheses. You can also download a keyboard shortcut printable below to help you remember the most popular shortcuts for SVG design.

Watch the Video

Want a video tutorial for using Adobe Illustrator Image Trace? Just click play below. Or read on for a written tutorial!

How to Turn a Sketch into an SVG

One of the best ways to use Image Trace in your SVG files is if you are drawing things by hand and want to turn them into cuttable files. This is particularly good for hand-lettering artists, cartoonists, and everyone else who loves to draw.

I had my friend Colleen from Hand-Lettered Printables hand-letter some text for me, since hand-lettering is not in my wheelhouse. She’s an hand-lettering artist who understands cutting machines, so make sure to check out her site!

Colleen gave me two versions:

This brings me to my first point—the black version on the left is so much better for a cut file than the brushed version on the right. If you recall from the Make an SVG from a Font tutorial, there are some fonts that are better than others for cutting. Brush fonts, grunge fonts, and other “complex” fonts are much harder to cut on a cutting machine. The same is true when you’re using your own drawings.

Whether you are hand-lettering or or doing some other type of sketching, you’ll want to use black and try and keep your lines as smooth and inked as possible. You’ll have a lot less clean-up after you’ve traced your file if you do!

First, Place (Shift+Control+P (PC) / Shift+Command+P (Mac)) your image into Illustrator.

With the image selected (V), click Image Trace in the top Control Bar. This will start the Image Tracing process. Depending on the complexity of your image, you might receive a warning that it might fail, but I have yet to trace an image that actually has failed.

Now open the Image Trace Panel. There’s a small panel icon up in the Control Panel, or you can go to Window > Image Trace to open the panel.

The Image Trace panel allows you to refine the tracing of your image. Mine defaults to Black and White mode, which is what we want for this image.

Now you can start to play around with those sliders. For example, if I slide the Threshold higher, I start to get some black dots because it’s starting to try and read the paper as part of the image.

If I slide the Threshold the other way, my text starts to fall apart (I’m getting white areas in the vertical bars of my H and K, for example). So find somewhere in the middle, where your text looks as close to the original sketch as possible.

Then you can do the same with the Paths slider. Sliding it higher means the edges of my image become even rougher.

And when I slide it to the right, I lose some of the definition. So again, find the place on the slider that keeps it closest to the original image.

You can do the same with the Corners and Noise sliders, trying to strike the best balance.

One other thing you need to check is the Ignore Color box. This will allow you to ignore the white background (so it won’t become a part of your SVG).

Then go back to the Control Panel and click Expand. This will turn your traced image into a vector file.

Now when I click on my file using the Direct Selection tool, you can see that it’s kind of messy. To start, there are a few stray artifacts (tiny closed paths or stray points) in the upper right and lower left.

You can double click to isolate and then use Delete or Backspace on your keyboard to delete them, but I also like going to the Layers Panel to see if I’m missing anything (I covered this quite a bit in this SVG from Fonts video)

In the Layers Panel, I can easily see that that I have two pieces that are clearly not a part of the rest of the image. My other pieces are the heart, the Y, the OU, and THANK. I can select just those random pieces and click the trash can in the Layers Panel to delete them.

Remember, the Layers Panel is one of the best places to look to see if you have anything extra you don’t want on your artboard!

Next, we can use that same Simplify tool (Object > Path > Simplify) to help simplify our image a bit. Again, we’ve used this tool in other lessons. Use the slider to remove some of the anchor points and make the file more simple, but don’t lose the definition in your image.

Now technically, you could make this Compound Path (Command+8 (Mac) / Control+8 (PC)) and cut it and it would probably cut okay. There are some smaller pieces (like the white areas in the K) that I would probably double click to isolate and remove, but overall, it would probably cut reasonably well.

But if you want, you can go in to those paths, anchor points, and handles, and clean things up. I noticed that some of the letters have little spikes where the ink crept into the paper in the original image. I don’t love how they look in vector form. So I went in to this A, for example, and cleaned it up a bit. I smoothed out some of the anchor points and tried to get it to look cleaner.

This is one of those places that keyboard shortcuts can REALLY help. After a while, switching tools becomes second nature. When doing cleanup like this, I’m constantly switching between these tools:

• Select (V)
• Direct Select (A)
• Anchor Point Tool (Shift+C)
• Add Anchor Point (+)
• Subtract Anchor Point (–)

I worked my way through the entire image, cleaning up all the edges and just making it look better overall.

Much cleaner! Let’s look at my example compared to before the cleanup. You can see on the left that there are some weird spikes and rough edges. The right version, which I tidied up, looks similar, but smoother and it should be easier to cut.

Then let’s compare it to the original. Overall, I feel like we kept the integrity of the artwork while making it a better file to cut on a Cricut or other cutting machine.

How to Turn a Logo into an SVG

Next let’s try an image that is complex in a different way. Let’s say you have a logo or other image that is a JPG and it’s more than one color. And you want to turn it into a vector file using Adobe Illustrator Image Trace. I have a logo for a make-believe company called Candy Beach. I placed (Shift+Control+P (PC) / Shift+Command+P (Mac)) the JPG logo onto my artboard.

Now, with the image selected (V), click Image Trace in the Control Panel. Also open the Image Trace panel like we did in the last example.

Mine defaulted to a Black and White trace, and it’s…not great. But we can make it better. Start by going to the Image Trace Preset dropdown and choose 3 Color instead.

Now…this looks like only two colors. But actually the white background is considered one of the colors, so the program has automatically changed the blue piece to white so we’d have 3 colors: pink, yellow, and white. You’ll also notice that our text looks better than it did before.

But you can use the Colors slider to change the number of colors in this image to 4.

Not looking too bad. But if I zoom in to the text, you can see that Image Trace is really struggling with the letters in particular, compared to the real font below it. The inside corners of so many of the letters (the As and H in particular) are rounded. This is one of the biggest places where Image Trace fails—in these little details.

I can use those same Paths, Corners, and Noise sliders to make it a bit better, but no matter what I do, I can’t get the original perfect font. The whole thing just looks a little sloppy and at a glance, it’s easy to tell it’s been traced.

Now you can go in there and use all of our anchor point tools to perfect this, if have the skill and the time. I could probably get close, but this font has those tiny rounded corners, for example, and that is very hard to achieve working from a traced image. It would be so much better to find out what font is being used (in this case Larosa) and re-type it from scratch.

Let’s head back to the candy part of our logo. This part is much better, but if you have a layered image like this, there’s one thing I want to point out. In the Image Trace panel, you’ll see two options for Method. The first option (the default) creates cutouts wherever your pieces overlap. So if I Expand this file and move the yellow and teal pieces, you’ll see cutouts.

I don’t love this type of SVG design because it doesn’t give the user the flexibility that having a complete pink circle would (see more in the Colors and Swatches for Beginners lesson). So instead, let’s choose that second option and Expand, that will create layers instead of cutouts.

Much better! This is more flexible for the user. The final file looks pretty good, but you can still tell it was traced when you get into the text more closely, like I mentioned above.

This is the primary reason I don’t recommend Image Trace for most things. Small details and precise paths get lost in the image tracing and it’s really hard to re-create something perfectly using this method. Most often, it’s just easier to draw the image from fonts, shapes, and lines, as well as using the pen tool.

If there’s anything you come away with in this lesson, it’s that Image Trace is imperfect and you should NOT use it to steal other people’s artwork! But it can come in handy when tracing your own sketches or if you have your own images that you need to convert to vector. The process of Adobe Illustrator Image Trace can be slow and maddening, but it is a helpful tool to use when you need it.

The post Adobe Illustrator: Image Trace appeared first on Hey, Let's Make Stuff.

We’re well into this Adobe Illustrator series and today we’re diving even deeper into text! We learned how to create a simple SVG from a font and some basic tips and tricks for using fonts in SVG files. Today we’re going to continue exploring fonts and create some really fun text effects and using some of my favorite tools in Adobe Illustrator.

You can use these Adobe Illustrator text effects and tools in so many ways to create really interesting, unique cut files for your Cricut, Silhouette, laser, or other cutting machine.

This is the eighth tutorial in this series! Each tutorial builds on the next, so I highly recommend reading them in order so that you’re not lost going through this tutorial.

• Workspace Overview (video)
• Paths, Anchor Points, and Handles (video)
• Make an SVG from a Font (video)
• Tips for Using Fonts in SVGs (video)
• Color Basics (video)
• Using Shapes and Lines to Make Illustrations (video)
• Using the Pen Tool (video)
• Creating Fun Text Effects (video)
• Image Trace (video)
• 10 Quick Tricks for SVG Design (video)

Like in every tutorial, I encourage you to use keyboard shortcuts. They will speed up your workflow and you’ll be much faster at creating your SVG designs. I use shortcuts in this lesson in parentheses. You can also download a keyboard shortcut printable below to help you remember the most popular shortcuts for SVG design.

Watch the Video

Want a video tutorial for using these Adobe Illustrator text effects? Just click play below. Or read on for a written tutorial!

Adobe Illustrator Text Effects

Using an Arc Text Effect

The first arc text effect has a similar result to the typing on a circle path that we talked about in the Tips for Using Fonts in SVGs post. Depending on your font and the look you are going for, you can use either method. I find that sometimes the arc works better and sometimes the circle works better, depending on the font!

Let’s say we have this cute chick image. You should be able to draw something similar using what you’ve learned in this tutorial series so far! We want to put “just hatched” over the top, perfect for newborn baby projects, using the Text Tool (T). I’ve chosen a font (Marker Print) and changed the color to teal.

Now I want to arc the words over the top of the chick’s head. Select the text (V) and in the Menu at the top, go to Effect > Warp > Arc. This will open up the Warp options. In the dropdown, you can see tons of different text effects, but the two I’m showing in this tutorial (Arc and Wave) are the two I use most often.

You can play around with the settings. If you have the Preview box checked, you should be able to see the live changes. When you have an arc you like, click OK.

So cute! Now if you hover over the text, you’ll see that it’s not expanded. You’ll see the original text in blue (and you can edit it). But we need to expand it to be able to cut it on a cutting machine.

Select the text (V) and go to the top Menu and choose Object > Expand Appearance. This step is in lieu of the Outline Fonts step we normally do. Because we’ve used a text effect, we need to Expand Appearance vs. Outline Fonts.

Now the text is a shape that can be cut!

Make each piece of your project a compound path (Command+8 (Mac) / Control+8 (PC)) and your SVG is finished! (See more in the How to Make a Font from an SVG post for more information about why compound paths are important.) You can see in the Layers Panel that I have my words as a compound path, and then I’ve grouped (Command+G (Mac) / Control+G (PC)) the compound paths of the chick together.

Using an Offset Text Effect

Another fun way to create unique SVG files in Adobe Illustrator is using an offset. Let’s start by typing (T) a simple “xoxo” on our artboard. I’m using the font Vintage Culture.

I used two different glyphs for the x’s, to make the text more interesting (we covered this in the Tips for Using Fonts in SVGs post).

Select the text (V) and now we need to outline our font (Shift+Command+O (Mac) / Shift+Control+O (PC)). This turns it from a font to a shape we can cut. You can see the blue outline around the letters.

Now let’s select our shape (V) and make it a compound path (Command+8 (Mac) / Control+8 (PC)). This is one of those cases where it looks like our image disappears (we’ve talked about this in previous lessons), but really it’s still there—it just has an empty fill.

Using the Select tool, click on the image (V) and change the color back to black.

Now we can apply our offset. In the Menu at the top, go to Object > Path > Offset Path. This will bring up the Offset Path window.

You can play around with the settings here. Again, if you keep Preview checked you’ll be able to see the changes as you make them. I settled on a 0.3 offset with round joins. Click OK.

Now you can click on the original “xoxo” in the middle of the offset and see the offset around the edge.

Do you see how we have those awkward white triangles where the offset didn’t fully cover our gaps? We can easily get rid of those. Double click on the offset piece to take it into isolation mode. Then you should be able to click on each triangle and just hit the delete or backspace key to delete it.

Then double click back on your art board to exit the isolation mode. I changed the color of my text to white and the color of my offset to a dark pink.

So cute! You can leave it as is, or you can add another offset, using the same method. I colored my second offset a lighter pink.

Then make your text and each offset its own compound path (Command+8 (Mac) / Control+8 (PC)) so it’s ready to cut!

Creating a Retro Wave Text Effect

Retro files have been all the rage for a few years now and they don’t show any sign of slowing down. Let’s use the Wave tool to make a cute retro design!

Use the text tool (T) to type your phrase. I’m using “good vibes only” in my favorite retro font Nellie. I’m using a single text box for this project, hitting enter after every word. If you remember from the Tips for Using Fonts in SVGs tutorial, I usually use separate text boxes for more than one line of text. But to get the Wave effect to work, you need a single text box.

Notice that out of habit I typed it in all lowercase. Here’s a quick tip for changing it quick. Go to the Menu bar at the top and choose Type > Change Case > UPPERCASE. It’s so much faster than typing it out again with the caps lock on!

Now let’s make each line the same size. With the text tool (T), highlight GOOD and increase the size until it’s the same size as VIBES, using the text sizing box in the Character Panel.

Do the same with ONLY.

Now our lines are too far apart, so we’ll need to change the leading (which is the designer word for line spacing). Leading is also found in the Character panel. First, using the text tool (T), highlight the word VIBES and decrease the leading until it’s closer to GOOD.

The highlight the word ONLY and decrease the leading until it’s closer to VIBES.

Looking good! Now select (V) the text and in the Menu bar, go to Effects > Warp > Wave. This will open up the Warp Options window.

Again, you can play around here and see what you’re doing if you keep that Preview box checked. Don’t warp your text so far as to make it unreadable or uncuttable. Just a bit of a groovy wave will do. Click OK.

Perfect. Let’s outline our font (Shift+Command+O (Mac) / Shift+Control+O (PC)). Now it’s a cuttable file instead of a font.

You could make this whole thing a compound path, but if you want to have different colored lines, for instance, you’d want to select the letters and ungroup (Shift+Command+G (Mac) / Shift+Control+G (PC)). Then you can select each word and make them each a different color.

Make each word a compound path (Command+8 (Mac) / Control+8 (PC)) and your SVG is done! This is one of my favorite Adobe Illustrator text effects, and once you get comfortable making these retro SVGs they are SO quick!

Creating a 3D Retro Drop Shadow Text Effect

Finally, let’s create a fun 3D retro drop shadow effect. I feel like this is the type of effect you’d see on vintage baseball tees, for example.

Let’s start out by typing our word (T) in a sort of retro font—I find a bolder script font works well. I used Selphia.

Outline your font (Shift+Command+O (Mac) / Shift+Control+O (PC)).

Then unite your font using Unite in the Pathfinder panel (we add this step because the letters overlap).

Now let’s use that offset again. Go to the Menu bar and choose Object > Path > Offset Path.

Here I’m going to choose a smaller offset than we used above, and a round join.

Recolor your artwork. I choose white for my word and teal for my offset.

Now select just the offset and copy it (Command+C (Mac) / Control+C (PC)) and paste it (Command+V (Mac) / Control+V (PC)). Then move it so it’s a bit to the right and below the first word you made.

Now let’s send it to the back. You can go to the Menu bar and choose Object > Arrange > Send to Back or use the keyboard shortcut (Shift+Command+[ (Mac) / Shift+Control+[ (PC)). This is a regular drop shadow and can be used for a lot of designs!

But now we’re going to use the Blend tool to make this shadow smooth so it looks more 3D. In the Menu bar, go to Object > Blend > Make. This will add basically one extra offset in between the two offsets we have.

Now go to Object > Blend > Blend Options.

Change the dropdown from Smooth to Specified Steps and add 10 steps. Then click OK.

Now you can see that our shadow looks 3D because it smoothly projects from the back of our word!

Select the blended offset and go to the Menu bar and click Object > Expand.

This will expand the blend so each step is an individual shape.

Now unite all the blend pieces into a single piece using the Unite in the Pathfinder panel.

This looks good, but we have a lot of extra anchor points, particularly where we have diagonal lines.

So go to the Menu and go to Object > Path > Simplify.

This will open up the Simplify slider. You can use this to simplify the number of anchor points, making your file much more cuttable.

Then make the word and the shadow each a compound path (Command+8 (Mac) / Control+8 (PC)) and your retro 3D SVG is done!

I hope you enjoyed this tutorial for using text effects in Adobe Illustrator! Stay tuned next week when we’re going to learn how to create a vector from a sketch and a photo!

The post Adobe Illustrator: Text Effects appeared first on Hey, Let's Make Stuff.

Welcome back to my tutorial series on Adobe Illustrator for folks who want to design their own SVG files! We’re learning everything you need to know to design beautiful SVG files that are easy to cut on a Cricut, Silhouette, laser, or other cutting machine.

These tutorials build off one another, so if you got to this post but haven’t read through the others, I’d head to the beginning and start there. There will be concepts in this post that are explained in more detail in earlier posts!

• Workspace Overview (video)
• Paths, Anchor Points, and Handles (video)
• Make an SVG from a Font (video)
• Tips for Using Fonts in SVGs (video)
• Color Basics (video)
• Using Shapes and Lines to Make Illustrations (video)
• Using the Pen Tool (video)
• Creating Fun Text Effects (video)
• Image Trace (video)
• 10 Quick Tricks for SVG Design (video)

Today we’re tackling one of the most robust and capable tools in Adobe Illustrator: the Pen tool. This tool gives you the ability to create just about anything you can dream up, but it’s definitely on the more intimidating end of the spectrum. To start to get comfortable using this tool, we’ll be making some simple illustrations that you can use in your SVG files. These are illustrations that are harder to make than just using the shape tools alone.

This lesson will dive heavily into what we discussed in the Paths, Anchor Points, and Handles lesson, so make sure you are familiar with all of that terminology.

Then you can combine what you learned in this post and last week’s post about making illustrations using shapes to create a world of unique illustrations for your cut files!

As always, I encourage you to use keyboard shortcuts. They will speed up your workflow and you’ll be much faster at creating your SVG designs. I use shortcuts in this lesson in parentheses. You can also download a keyboard shortcut printable below to help you remember the most popular shortcuts for SVG design.

Watch the Video

A lot of this tutorial is much better explained in video! Just click play below. Or read on for a written tutorial!

How to Make Simple Illustrations with the Adobe Illustrator Pen Tool

There are two ways to create curvature to your paths and corners when using the Pen tool. The first is to create a shape with the Pen tool (P) with no curves, and then add them using the Anchor Point tool (C). I think this method is easier for beginners and it’s generally how I use the Pen tool, so that’s the process we’ll use here.

You can also click AND drag as you are using the Pen tool (P) and that will create curves as you go. I’ll be honest—I just have not gotten the knack for drawing this way. You’ll see other tutorials out there that use this technique and if you want to try it, go for it! I’m sure it works really well for some folks, I just don’t happen to be one of them!

Heart

Hearts are a great way to get a feel for how the Adobe Illustrator Pen tool works. I make them all the time for different SVG files and each one is a little different!

Select the Pen tool (P). Click to make anchor points and draw this type of shape, making sure to enclose your path (meaning that your path ends in the same place you started).

Select the Anchor Point tool (Shift+C). Click and drag one of the top points of your shape to the left until you have half a heart. Do the same with the other top point. If you don’t like what you’ve done, simply click on that anchor point to return it to where you started. You can even curve that bottom point slightly if you’d like.

Easiest heart ever! You can make all sorts of heart shapes depending on where you put your points and how much you drag to create the curves in your anchor points. Use the Color Basics lesson to change the color of your image.

To export your heart image, make your heart a compound path (Command+8 (Mac) / Control+8 (PC)) and export!

Cactus

Next let’s draw a Cactus. I’m going to keep my lines black and white until the end to make it easier to see the shapes I am creating.

Select the Pen tool (P). Draw a very tall triangle shape, making sure to enclose your path.

Select the Anchor Point tool (Shift+C). Click and drag the top point on the triangle toward the left until it’s rounded.

That’s our basic cactus body shape. Now let’s do the arms. Select the Pen tool (P) and we’re going to basically draw a cactus arm as we think it would look without the curves. Make sure to enclose the shape.

Select the Anchor Point tool (Shift+C) and click and drag on the anchor points to round out the corners of your cactus arm. You don’t need to worry about the ones that are overlapping the bigger piece, but you can adjust those if they help you get the shape you’d like.

Now let’s duplicate that arm with copy (Command+C (Mac) / Control+C (PC)) and paste (Command+V (Mac) / Control+V (PC)). Select the new arm (V) and use the keyboard shortcut O+Enter to open the Reflect Tool. Make sure “Vertical” is selected under Axis and press OK.

Drag your duplicated arm to the other side of the cactus. If you’d like, choose the Direct Select tool (A) and click and drag on the top anchor point in that arm to make it a bit taller than the other.

Now let’s make this into a single cut piece. Select all of the pieces of your cactus (drag over all the pieces or use Shift+A) Open the Pathfinder Panel on the left (go to Window > Pathfinder if you don’t see it). Then Select the first icon in the top left to unite all the pieces into a single shape.

Then you can recolor your image, make it a compound path (Command+8 (Mac) / Control+8 (PC)) and export it!

Flower

Let’s take it up a bit and create a multi-layer SVG using the Pen tool and some of the other tools and techniques I’ve covered in the other tutorials so far. I’m going to keep my lines black and white until the end to make it easier to see the shapes I am creating.

Start by drawing a circle (L).

Make sure the circle is not selected (click off of it). Select the Pen tool (P). Click to create an anchor point at the top of the circle, then one an inch or two above the circle, and then back on the first point you made. You’re basically making a closed 2D path.

Select the Anchor Point tool (Shift+C). Click and drag the bottom anchor point toward the right to create a petal shape.

Now let’s duplicate that petal shape and rotate it around the circle (we did this with the sun in the last lesson). Select the petal (V).

Hit “R” on your keyboard to activate the Rotate tool, and then use your mouse to click in the direct center of your circle. There should be a guide that says “center” when you hover over it. This will tell the Rotate tool to rotate our petal around the center of the circle.

The Rotate window will open when you click.

You can use whatever angle you’d like here, just make it nicely divisible by 360°. I chose 30°. Then click Copy (not OK!).

This will copy the petal at the specified rotation angle.

Then comes my favorite part. Use Duplicate (Command+D (Mac) / Control+D (PC)) to fill in all of the petals around the circle. As long as you clicked right in the center of the circle and you used a rotation degree divisible by 360°, it should work perfectly!

Now let’s select that center circle (V) and make it a bit bigger. You just want it to cover the “holes” between the petals and the circle.

Then open the Pathfinder Panel and choose the first option to unite the entire shape. This gives us a starburst but with nicely curved petals for our flower.

Now draw a second circle (L) in the middle of the flower. This will be the actual center of our flower.

Now let’s draw the stem. You can do this using the Line tool (\) or using the Pen tool (P).

Use the Anchor Point tool (Shift+C) and click and drag on the center of the stem to bow it a little bit.

Now we’re going to draw that 2D closed shape again. Click off of the stem and choose the Pen tool (P). Click and add an anchor point on the stem, then one up and to the right, and then one back on top of where you started.

Now to create a leaf shape, use the Anchor Point tool (Shift+C) and click and drag from the center of the path (vs. at either end) to create half a leaf shape. Then do the same on the other side.

Now let’s color the closed paths of the artwork—the flower, the center of the flower, and the leaf.

Now select the stem (V) and do a few things. First we’ll increase the stroke so it’s nice and chunky. Then change the end point to round in the Stroke Panel (again, we did this in the last lesson). Then change your stroke to green to match your leaf. I also made my stem a bit shorter using the Direct Selection tool (A).

This is still a line, so we need to expand it into a shape so it will upload to the cutting software correctly. Select the stem (V) and then go to Object > Expand. This will open the Expand window.

Make sure both Fill and Stroke are checked and click OK. You’ll now see an outline around your stem vs. the line inside the stem.

Now select both the stem and the leaf (V) and choose Unite in the Pathfinder Panel to make it a single shape.

Now let’s move that stem to the back behind the flower. Select the stem and go to Object > Arrange > Send to Back, or use the keyboard shortcut Command+[ (Mac) / Control+[ (PC).

Our flower is just about done! Make each layer a compound path (Command+8 (Mac) / Control+8 (PC)). Double check your Layers Panel to make sure you don’t have any stray points. You should have a single layer with three compound paths below it. Then export!

Apple

Finally, let’s look at loosely tracing a photo to create an SVG. You can also do this with other images like PNGs and SVGs, but PLEASE do not copy people! That’s called stealing. Sometimes I will use another piece of artwork as a reference and then I will make changes as I go along so that it ends up being very different than my reference. Use what you’ve learned in this series to make your artwork your very own!

Start by finding an image of an apple you like. I found this one just in a Google search and saved it to my desktop. Go to File > Place ((Shift+Command+P (Mac) / Shift+Control+P (PC)) and place the apple photo on your artboard. Resize to be large enough to work with.

To make outlining easier, let’s change the opacity of the apple. Select the apple image (V). Open the Transparency Panel (Window > Transparency if you don’t see it) and change the opacity to about 30%.

Now select the Pen tool (P). Loosely trace around the apple shape. I changed a few things as I went. I only wanted two “feet” on my apple, not three, and I wanted the apple to dip down at the top so I traced along the front contour instead of the back. When I first started doing this, I thought the more anchor points, the better. But I’ve found after doing this for years, that you actually don’t need a ton. You can always add more if you need using the Add Anchor Point tool.

Now use the Anchor Point tool (Shift+C) to curve your anchor points. You can choose to click and drag on each path or each anchor point (I often use the anchor points but not always). Try to mimic the shape of the apple as you drag.

Now let’s do a separate shape for the stem using the Pen tool (P). I started with my rough outline.

And then used the Anchor Point tool (Shift+C) to curve two vertical paths.

Finally, I made a leaf shape using the same technique as the flower above. I didn’t want it off the center of the stem so I nestled it right by the bottom corner of the stem. You could make it more like the real apple if you’d like!

Then I deleted the apple photo, leaving me with the outline of my shapes!

Now re-color each piece. Like with the flower stem above, I sent my stem and leaf to the back, behind the apple.

You could do refinements with all of the tools as well, if you’d like! I often do this after I see it in color. I made my leaf a bit bigger and moved some of my anchor points and handles a bit to reshape the apple until I was happy!

Our apple is just about done! Make each layer a compound path (Command+8 (Mac) / Control+8 (PC)). Double check your Layers Panel to make sure you don’t have any stray points. You should have a single layer with three compound paths below it. Then export!

This tutorial is just dipping our toes into the deep waters of the Adobe Illustrator pen tool! If you’d like some homework, find some shapes to make or trace and get used to how the pen tool works. It’s really the best tool for creating unique illustrations for your SVG files!

The post Adobe Illustrator: the Pen Tool for Beginners appeared first on Hey, Let's Make Stuff.

Welcome back to my series on Adobe Illustrator for crafters and SVG designers! My hope is that this series gives you an accessible way to start using Adobe Illustrator specifically for designing cut files and other crafting files. We’re learning everything you need to know about designing SVGs…and nothing you don’t!

I highly recommend you work through the tutorials in order, since they build on one another and you may be confused with this tutorial if you haven’t read through the others in this series:

• Workspace Overview (video)
• Paths, Anchor Points, and Handles (video)
• Make an SVG from a Font (video)
• Tips for Using Fonts in SVGs (video)
• Color Basics (video)
• Using Shapes and Lines to Make Illustrations (video)
• Using the Pen Tool (video)
• Creating Fun Text Effects (video)
• Image Trace (video)
• 10 Quick Tricks for SVG Design (video)

Today we’re starting to look at making easy illustrations using the different shapes and line tools in Adobe Illustrator. Even if you’re not at all artistic, you can use these tools to make simple illustrations that will take those text SVGs we’ve been working on and make them into something even more special!

I felt like the easiest way to do this would be to make a bunch of different illustrations using these tools, and in each showing you how you can change settings and use different tools to make your illustrations look even better. This is designed to be fun—your illustrations don’t need to match mine perfectly. The idea is more to learn how to use these different shape and line tools to create whatever you can dream up!

Next week we’ll be going into illustrations with the Adobe Illustrator pen tool, which is more advanced. Get these basics down first because we’ll be using some of them in conjunction with next week’s tutorial!

As always, I encourage you to use keyboard shortcuts. They will speed up your workflow and you’ll be much faster at creating your SVG designs. I use shortcuts in this lesson in parentheses. You can also download a keyboard shortcut printable below to help you remember the most popular shortcuts for SVG design.

Watch the Video

Want a video tutorial for shapes in SVGs? I walk you through all the important ways to use color in this video! Just click play below. Or read on for a written tutorial!

How to Make Illustrations with Adobe Illustrator Shapes and Lines

Chocolate Chip Cookie

A lot of these lessons have started out with a circle, so let’s make an easy chocolate chip cookie SVG using circles!

Start by creating a circle on your artboard (L). Hold down that shift key while you draw to make a perfect circle.

Change the fill color of your circle to a cookie brown with an empty stroke. See my post on Adobe Illustrator Colors and Swatches for more information on changing colors.

Add some smaller circles to your cookie and color them dark brown.

Make your light brown cookie shape a compound path (Command+8 (Mac) / Control+8 (PC)) and select all of your chocolate chips (V) and make them a compound path. In the Layers Panel, you should have a single Layer with two compound paths:

Here are a few examples of how you might use cookie illustrations:

Ruler

Rulers are great for all sorts of school and kid-themed SVG files! And they’re easy to make in Adobe Illustrator.

Start by creating a long rectangle (M).

Recolor the rectangle’s fill to be yellow with an empty stroke.

Then we’ll use a little trick in Illustrator to round the corners of our ruler: Live Corners. Choose the Direct Selection Tool (A). If you hover inside a corner of your rectangle, you should see a small circle (if you don’t see it, go to View > Show Corner Widget to make sure Live Corners are turned on). Click on the little circle and drag toward the center of your rectangle. This will change any corners in your artwork evenly, so your ruler has rounded corners.

You can also click a second time on a single Live Corner and adjust the radius of the corner independently as well. Love this little tool!

Next, use the line tool (\) to draw a line on your ruler. You may need to increase the stroke thickness to be able to see it (next to the Stroke dropdown in the Control Panel at the top).

Then add more lines with copy (Command+C (Mac) / Control+C (PC)) and paste (Command+V (Mac) / Control+V (PC)). You can also use the Align tool “Horizontal Distribute Center” to make sure your lines are equally spaced.

Because our lines are currently stroked lines and not shapes, we need to “expand” them into shapes (basically tall skinny rectangles). Select (V) all of the black lines and go to Object > Expand. In that window, make sure both fill and stroke is selected.

Now your lines are actually shapes. Select all of the black lines and make them a single compound path (Command+8 (Mac) / Control+8 (PC)) as well as the ruler piece and make it its own compound path.

In the Layers Panel, you should have a single Layer with two compound paths:

Here are a few examples of how you might use ruler illustrations (apparently I think rulers are particularly applicable to teachers…not sure what that says about me, ha!):

Sun

Let’s combine the circle and rectangle tools to make a sun! We’ll also use the rotate tool which is one of my faves.

Create a yellow circle (L) in the center of your artboard.

Draw a thin yellow rectangle (M) right above the circle. Use Horizontal Align Center to make sure they are aligned.

Select the rectangle (V). Hit “R” on your keyboard to activate the Rotate tool, and then use your mouse to click in the direct center of your circle. There should be a guide that says “center” when you hover over it. This will tell the Rotate tool to rotate our rectangle around the center of the circle. Hold down the Option (Mac) / Alt (PC) key and click the center of the circle.

The Rotate window will open when you click.

You can use whatever angle you’d like here, just make it nicely divisible by 360°. I chose 18°. Then click Copy (not OK!).

This will copy the rectangle at the specified rotation angle.

Then comes my favorite part. Use Duplicate (Command+D (Mac) / Control+D (PC)) to fill in all of the rays of the sun around the circle. As long as you clicked right in the center of the circle and you used a rotation degree divisible by 360°, it should work perfectly!

Select your entire sun and make it a compound path (Command+8 (Mac) / Control+8 (PC)). In the Layers Panel, you should have a single layer with a single compound path.

Here are a few examples of how you might use sun illustrations (I’ll teach you how to use the Eraser tool to make half a sun in an upcoming tutorial!):

Boho Rainbow

Let’s use that line tool to make a boho rainbow!

Start by creating a line (\) that goes most of the way across your artboard. Give it a substantial stroke (I did 50pt) and an empty fill.

Using the Anchor Point Tool (Shift+C), click and drag the middle of the line toward the top of the artboard. (Confused here? Read my Paths, Anchor Points, and Handles tutorial!).

Use the handles come off the line to make the shape more of an arc.

Let’s round those bottom corners by using a tool inside the Stroke Panel on the right, which looks like three different lines stacked on top of one another. (If you don’t see this panel, go to Window > Stroke to open it).

Select the arc (V) and here we can change the “Cap” to a round cap, giving us a prettier round bottom to our arc.

Make a second arc underneath the first, using the same method. I lowered the stroke to 40pt and colored it a darker pink.

Now let’s make this second arc a dotted line. Select the arc (V) and open that stroke panel again.

Click on the box that says “Dashed Line” and change your settings. To create a perfect circle, you’ll wan to make sure your “dash” is zero and your “gap” is larger than the weight of the stroke at the top. So I have a 40pt stroke, a 0pt dash, and a 70pt gap and I get this:

If the bottoms of the arc are uneven, change this dash setting in the the Stroke Panel to even out the bottoms:

Now finish your rainbow using a variety of stroke widths and dotted lines.

Now we need to turn our lines into shapes so we can save them as an SVG. Select all the parts of your rainbow (V) and go to Object > Expand Appearance. It won’t look like anything happened, but I promise that step is necessary—you won’t be able to do the regular expand without it.

Then go to Object > Expand. Now you’ll see that all of your lines are outlined.

Now make each arc its own compound path (Command+8 (Mac) / Control+8 (PC)). You may notice that your image “disappears” when you make that compound path. Click the empty shape and give it a color again.

Once you’re done, you should have a single layer with five compound shapes (or more or less, depending on your rainbow’s arcs!):

Here are a few examples of how you might use rainbow illustrations:

Firecracker

There are more than just circles, rectangles, and lines! Let’s learn how to make a triangle so we can make a firecracker SVG.

Start by creating a rectangle and color it pink or red.

To make the triangle cone of our firecracker, we’re going to use the Star tool. Click and hold on the Rectangle tool in the Toolbar on the left. You’ll see some other shape tools. Select the Star tool.

Now you’re probably thinking…how do I make a triangle out of a star? Well, a three-point star IS a triangle! So click anyway on your artboard (do not click and drag) and it will open up the Star tool. Input “3” into the points (don’t worry about the radii because it doesn’t matter on a triangle) and click OK.

Then resize, rotate, and re-color your triangle to make the cone of our firecracker.

With that same star tool, go back into the star tool and create a five-pointed star. Add three of these to your firecracker, resizing them and making them white.

Now I don’t love all the hard corners we have going here, so let’s use those Live Corners again. Select everything on your artboard (V) and then choose the Direct Selection Tool (A). Hover over one of the corners and then use that small dot to change the radius of ALL of the corners in your image, including the stars.

Cute! Now let’s draw the trail behind the rocket. For that, let’s use the Brush tool (B). Make sure you have a stroke color selected with an empty fill. You can change your stroke size as well (mine is 3pt). Then double click the Brush tool in the Toolbar on the left.

This will open up the Brush settings. To make it easier on yourself, slide that Fidelity slider all the way too smooth. Illustrator will help smooth out any brush lines you draw, which is great if you don’t have a steady hand or your just not good with drawing in general.

Then draw a trail coming out of the back of the firecracker. It doesn’t need to be perfect! I drew mine a few times before I really liked the one I got.

Now like with other lines, we need to expand this brush stroke. Go to Object > Expand in the toolbar at the top. Make sure both Fill and Stroke are selected.

I have found that when expanding a brush stroke that it often leaves me with a LOT of anchor points. And if you’ll remember from the first Fonts tutorial, lots of anchor points can be a nightmare for a cutting machine. To see the anchor points, select the image with the Direct Selection Tool (A).

So let’s simplify it. With the image selected (V), go to Object > Path > Simplify.

Then you can play with the slider to lower the number of anchor points while remaining true to the original shape.

Much better! Go ahead and create compound paths for this image. I created one that had the blue nose cone and the trail in one, a red compound path, and a white compound path.

Here are a few examples of how you might use firecracker illustrations:

Tag Shape

Let’s look at the rectangle tool to make a tag shape. This looks like a lot of steps, but as you get more comfortable with Illustrator, they’ll become second nature.

Start by drawing a rectangle (M). Place it a bit to the left on your artboard.

Then create a smaller rectangle (M) and rotate it. Place it over the top right corner of your rectangle.

Select the smaller rectangle (V) and copy (Command+C (Mac) / Control+C (PC)) and paste (Command+V (Mac) / Control+V (PC)). You should have two small rectangles.

Select the new small rectangle and use the keyboard shortcut O+Enter to open the Reflect Tool. Make sure “Vertical” is selected under Axis and press OK.

This will flip that second rectangle to reflect the first. Place it at the bottom right corner of your larger rectangle.

You can use the Align tools to make sure that the two smaller rectangles are aligned vertically.

Now select (V) both small rectangles and make them a compound path (Command+8 (Mac) / Control+8 (PC)). This means these two rectangles will now function as a single shape.

Select both the large rectangle and the two smaller rectangles and open the Pathfinder Panel. Choose the Minus Front tool.

This will subtract the smaller rectangles out of the larger rectangle, leaving you with a basic tag shape.

Now add a small circle (L) for the hole in the tag.

Select the small circle and the tag shape and make them a compound path (Command+8 (Mac) / Control+8 (PC)). This means that a cutting machine will cut the hole out of the tag, vs. having it separate.

Then change the fill color of your tag, making sure to have an empty stroke.

In the Layers Panel, you should have a single Layer with a single compound path:

Here are a few examples of how you might use a tag shape:

Whew! Let me tell you, it takes a lot of screenshots to explain things in Illustrator! Make sure you watch the video above to get a video explanation of everything here! Next week we’ll be talking more about the Pen tool—stay tuned!

The post Adobe Illustrator: Simple SVGs with Shapes and Lines appeared first on Hey, Let's Make Stuff.

Welcome back to my weekly series on using Adobe Illustrator for SVG designers and crafters! In this series, I’m breaking down Illustrator into easy-to-digest content specifically for creating cut files for your Cricut, Silhouette, or other crafting machine. I highly recommend you work through the tutorials in order, since they build on one another.

• Workspace Overview (video)
• Paths, Anchor Points, and Handles (video)
• Make an SVG from a Font (video)
• Tips for Using Fonts in SVGs (video)
• Color Basics (video)
• Using Shapes and Lines to Make Illustrations (video)
• Using the Pen Tool (video)
• Creating Fun Text Effects (video)
• Image Trace (video)
• 10 Quick Tricks for SVG Design (video)

Today we’re talking color! Color is so much more than just making your SVGs prettier. Color can help delineate the layers of your file and how they will be cut by your cutting machine. We’ll go through the basics of color and creating a color palette, and then talk about how colors relate to cutting when it comes to your SVG files.

As always, I encourage you to use keyboard shortcuts. They will speed up your workflow and you’ll be much faster at creating your SVG designs. I use shortcuts in this lesson in parentheses. You can also download a keyboard shortcut printable below to help you remember the most popular shortcuts for SVG design.

Watch the Video

Want a video tutorial for using color in SVGs? I walk you through all the important ways to use color in this video! Just click play below. Or read on for a written tutorial!

Basic Adobe Illustrator Color

Like with so many things in Adobe Illustrator, there are many ways to work with color. My preference is to use a combination of the color tools in the Control Panel at the top and the Toolbar on the left. You can also work with color in the Swatches Panel, which is similar to the dropdown menus in the Control Panel.

Colors in Illustrator are called “swatches” and each colored box represents a color swatch. If you want to do additional learning beyond this tutorial, I would recommend searching “Adobe Illustrator color swatches” vs. just “Adobe Illustrator color” to get the best search results.

Let’s draw a circle on our artboard (L). The default coloring is a white fill (the color inside your shape) with a 1pt black stroke (the outline around your shape).

You can see this both the fill and the stroke swatches in the upper left of the control panel, as well as in the toolbar on the left side. The left color swatch is the fill and the right color swatch is the stroke.

Generally, for SVG files I recommend using an “empty” stroke swatch, especially for beginners. This means that there is no stroke at all. So let’s change the color of both our fill and our stroke. Select your circle (V), and using the dropdowns in the upper right, change the fill to a color (I chose the teal swatch) and change the stroke to empty by selecting the white swatch with the red line through it.

Now you can see we have a teal circle with no stroke around the outside.

At its most basic, that’s how to change color in Illustrator!

You can also double click the swatches at the bottom of the Toolbar on the left and it will open the Color Picker.

Here you have some more options. You can use your mouse to select a color using the gradient picker on the right. If you have specific Hex, HSB, RBG, or CMYK colors you want to use, you can enter those values on the right in the corresponding boxes. This allows you to pick specific colors, which is great if you have brand or other colors you want to use.

Default Swatches in Adobe Illustrator

If you use the Control Panel dropdown or the Swatches Panel, you’ll see Adobe Illustrator’s default swatch library. There is a wide range of color swatches here and if you’d like to stick to just those, that’s totally fine.

You can also click the Swatch Library icon at the bottom of the panel to see some of Adobe Illustrator’s other default swatch libraries.

So for example, let’s say I navigated to Color Properties and chose Bright. A new swatch library would open with coordinating bright colors.

This is another way to find good color combinations without having to create your own color palette.

Creating and Saving a Color Palette

Now if you want to create your own color palette, that’s easy too! I won’t go into actually picking a color palette here, but I have a few resources:

• My course Crafting Your Signature Style. This course goes through the visual branding for a small craft business and includes picking a color palette as well as a bunch of color palette examples.
• Canva’s Color Palette Generator
• Coolors Color Palette Generator

You can also just click around with the color tools above to create a color palette you like. This is how I created my color palette, by picking colors that I thought might go well together and then going into the Color Picker to adjust them until I got something I really liked.

I suggest making a small circle (L) for each of your colors. So my color palette looks like this:

You can have as many or as few colors as you’d like. I find that this works for about 80% of the SVGs I make. I do pull in a few other colors occasionally, like orange for Halloween or shades of brown for fall, but generally I stick to this palette. This means that my entire SVG shop looks nice and cohesive.

This doesn’t matter as much if you’re just designing for yourself, but if you do want to start a shop I suggest coming up with a color palette that feels cohesive.

Once you have your color palette on your artboard in circles like these, let’s go back up to the color swatch dropdown and delete all of the swatches we don’t need. Don’t worry about deleting them permanently—they’ll appear again the next time you open Illustrator. Using your mouse, select all of the swatches you want to delete. I usually keep black and white to make them easy to access from my new palette.

Then click the trash can icon in the bottom right to delete the swatches.

Then use the Selection Tool (V) to drag and select all of your circles on your artboard. Go back to the color dropdown in the Content Panel up in the top left corner, and choose the little folder icon to create a new color group.

This will create a new color group with your particular colors. Name your color swatch group and click OK.

Then go to the color dropdown again and you’ll see that there’s now a row for your new colors.

To be able to access this palette even after you close Illustrator, you’ll need to save it. Click on the Swatches Library icon at the bottom left of the dropdown and choose Save Swatches.

Give you swatches a name and then you’ll be able to open your swatches any time you want by going to that same dropdown > User Defined and then selecting your palette. Your normal swatches will go back to normal in the dropdown but you’ll always have access to your new palette! I’ll be using this palette as we color our SVGs.

Using Colors to Delineate Cut Layers

Back in the How to Make an SVG from a Font tutorial, I taught you how to make a compound path (Shift+Command+8 (Mac) / Shift+Control+8 (PC)) so your image would cut correctly in your cutting machine software. We’re going to expand on that in this tutorial.

When you are creating an SVG, I want you think about the best way to cut it. Many SVG designers will just make a single-color SVG with a single compound path, usually black. Here’s an example. It’s designed properly and it’s kinda cute. But that black sun is just…depressing.

You can see in the Layers Panel on the right that the entire SVG is one compound path in a single layer.

This means that the entire file will cut as a single piece on a cutting machine mat. Yes, you could use the cutting machine’s software to copy and contour this file to make it more than one layer, but that can be a pain and is just more work to do.

For some SVGs, a single layer totally works. Like this kitchen monogram file is all a single piece (it’s designed for the buyer to add their own name in the blank in the cutting software). I could have designed it so the utensils had different colors, but this is just a simple example of a single-color, single-cut SVG that’s perfect for a simple project.

But let’s go back to the sun SVG. This SVG is so much more successful if I designed it with the sun as a separate yellow compound path.

And again, a close up of the layers panel showing two compound paths. This will show up as two layers in cutting software.

This gives the crafter so much more flexibility when cutting their file. Perhaps they want to cut the words out of black and the sun out of a gold glitter. Or the words in pink and the sun in a shimmery yellow.

You could even design this file using three separate compound paths to give people even more flexibility.

You can see the three compound paths in the Layers Panel, too.

You, of course, can design your files however you’d like. If you’re designing them for personal use, then definitely just design them with the materials you have in mind. But if you’re designing to sell your files, always keep in mind how your buyers may want to cut their files. I think providing some flexibility is a good idea.

Technically you could make all the compound paths the same color, but I have found that not only does it help to delineate the layers visually, coloring your SVG files just makes them cuter overall and they stand out better in a sea of black images.

Separating Images by Layer for Laser Cutters

While the above instructions should work for cutting machine software, if you’re planning to use your files on a laser, you may want to take an extra step. I have found that Glowforge in particular has issues with separating out the different layers so you can set them to cut, score, or engrave.

So for laser machines in particular, I like to make each of my compound paths its own layer. This is easy to do. In the Layers panel, click the small plus sign at the bottom. This will create a new layer.

You can see Layer 2 has been added to the Layers panel.

Now click and drag one of the compound paths for your image onto that layer. You may need to click the little arrow to the left of the layer name to see your compound path is now on Layer 2.

Continue creating new layers and dragging your compound paths until they are all on their own layer.

Then when you bring this file into a laser software, it will have an easier time letting you select the linetype (cut, score, or engrave) for each layer.

Layered Images

Now let’s talk about layered images. In the example above, none of the words or images overlapped. But maybe you’ve designed this cut file. We’ll go into how to create a cut file just like this in a future tutorial!

How do you want people to make this file? Should that black compound path be one entire piece?

Or should that black compound path have “Raise Them Kind” cut out of it so perhaps there won’t be as many layers of vinyl or HTV?

Personally, I think keeping that solid black option is better because it offers more flexibility. You can easily use it with cardstock, you can layer your vinyl or HTV, or it’s easy for the user to the Slice and Set method in their cutting software to create that cut out so you don’t need to layer.

When it doubt, think about the flexibility of your file. That will allow people to use your files more easily for their particular project.

Other Adboe Illustrator Color Elements

There are other “appearance” ways to use colors in Adobe Illustrator, including gradients, patterns, opacity, and more. However, if you use these tool in cut files, your cutting software will strip away the special appearance and you’ll be left with a solid color for your image. So while these tools are cool and I do use them for sublimation images, printables, and more, I won’t be covering them in this series of tutorials that focuses on SVG files.

I hope you found this Adobe Illustrator colors tutorial helpful! Next week we’re going to dive into creating images using shapes. We’ve done a lot with fonts so far, but if you want to start creating other elements to your SVGs, you’ll want to stay tuned for that tutorial!

The post Adobe Illustrator: Colors and Swatches for Beginners appeared first on Hey, Let's Make Stuff.