Transcripts
1. From Flat To Stacked - Introduction: I love layered paper cuts, and I've certainly
purchased a few. But I also have a lot of single layer SVG files that I think would look beautiful
as layered paper cuts. I figured out how to
separate a single layer SVG into multiple layers to create beautiful
stacked paper cuts. And in this class, I'm going
to show you how to do it. By the end of the class, you
should be able to transform any SVG illustration
from flat to stacked, opening up a whole new world of possibilities for
your SVG library.
2. Tools and supplies: Hello, and welcome to class. I'm so glad that you
decided to enroll. So in order to
complete this class, you're going to need access
to a graphics program. I'm using Affinity Designer too, but you could also use
Affinity Photo or Photoshop, inscape or something similar. As long as the software that
you want to use is able to handle vector files and can
deal with groups and layers, you should be able
to follow along. Once you've created your various
paper cut layers, you might want to test them out. And if you do, you'll need access to a digital
cutting machine. For example, a cricket or
scanned cut, silhouette. Or Glow Forge or other
laser cutting machine. Bear in mind that if
you're using a silhouette, SVGs are only compatible with
silhouette designer dition. You'll obviously need
material to cut, for example, paper card or plywood
and you'll need glue to stick all the layers together and assemble
the finished design.
3. Prepare the SVG: The first thing we need to do is to create a new document. I'm going to file new,
and then in here, I'm going to choose
inches 12 by 12, and I'm going to
create an artboard. I'm choosing 12 by 12
because that's the size of my cutting mat of
my cutting machine. Obviously, if you have
a different sized mat, then you can adjust the
dimensions accordingly. Color is not so important for this because we're not printing. But I will select transparent background and
then everything else off, margins off, no bleed
and don't change anything to do with
the scale and create. Here we have our artboard. One of the reasons
that I like an artboard is because when you move things off this canvas, this working space, you
can still see them. If you don't have an artboard. All of this area becomes blacked out and you can't see
what you move off. It's a personal preference and I think it just makes things easier when working
with multiple files. Now, we need to
open our butterfly. Let's just pick number one. That's nice. Now if I
edit copy and paste, and I'll just resize it. Let's have a look in
the layers panel. For some reason, it's been nested in these
multiple groups. Let's just get rid
of those. Right. And here, the critical
thing is you can see that this is a single shape. So the SVG is being
treated as a single shape. We need to separate all
these areas to layers. So if you click on the note, or you can see all the
nodes are highlighted, which means that it's
acting as a single shape. So to divide the shape, let me just change the
size a little bit. Right. To divide the
shape, highlight it. Right click Select geometry. You can either choose
divide or separate curves. It all ends up with
the same result. Once that happens, you'll see now that in the layers panel, all these extra layers
have turned up. Let's just go over here
to the fill and make it transparent and then click on the stroke and add a stroke. I'm going to increase that to 0.5 just to make it visible. Now we have If I click on these, you can see all of these
things are now individual. That makes it so much easier to create our separate cut layers.
4. Colour the image: So the next step then
is to add color. At this stage, the colors that you choose are very unimportant. What matters here is the distribution of color so that you have a good balance. And it also will help us to visualize the layers much
more easily if there's color. Step one is to isolate the base. Make sure that this shape here is always right at the bottom. Otherwise you won't be able
to access the shapes on top. You can do that by checking
in the layers panel, make sure that it's the
last thing in the list. And if it isn't, just highlight it and then come up here to your alignment tool and
you can hit move to back or you can right click and do range and move to back. Now we add some color. Make sure that your fill is
selected and not your stroke. Now when I come to fill this in, I'm going to just
do a black outline. You can see that these areas disappear and that's because
they're transparent. In order to make sure that we can actually just
see what's going on, they won't be a layer. We won't be including
them in a layer. This is purely for
visual purposes. I'm going to cloud them
in white so that we can still see everything
that's happening. As I said, don't worry
about the color scheme. The important thing is to
see if there's a balance. Good distribution
of color across the shape in a way
that you like. You know what, actually. I don't like that being on
the same layer as that, I want to make that different. Okay, I think I prefer
the way that looks.
5. Create the layers: To separate these into
layers for cutting. Click on a shape or in the layers panel,
click on a shape. Go to select select fill color, and it will select same
fill color in that shape, and then we can group that
and I'll call that blue. Now, be careful when
you're doing this. If you've replicated
this, for example, you've got two copies
of this butterfly colored in and you
do select same, it will select the same
color in the whole document. If that happens,
if you do happen to or multiple shapes
with the same color in. Just go into the layers panel and hide the ones that
you're not interested in temporarily so that you can play around with the
shape that you're working on. Just do that again,
select same fill color, group it, and I'm
calling it purple. You're going to do the
same with the green, select same fill color, group it and call it green. Work your way through all
the different colors that you've selected
that you've chosen. Okay. Then the only shapes
left are these and the base. We're going to grip those
together because we will need to cut them at the same time. And I'm going to call that base. Now we have our
separated layers. What we can do here is
group this whole thing, and this is going to
be our final layer, did I say we had one, two, three, four, five, six, seven layers in total. This is actually going
to be our layer seven. We're going to move
this over here. Duplicate that. I'm pressing Control and then click and drag. You can do Control C, Control V, you can do edit copy and paste, or you can press Control
J to duplicate the layer. Whichever one you're more
comfortable with it. The first thing we're
going to do then is delete everything
that isn't the base. All the layers aren't the base. And then you're going
to call that layer one. Then again, duplicate
that layer. So think about when you're separating your
colors into layers, think about how you want the order that you want
the layers to come in. The things that
you cut first will appear closer to the bottom. The things that you cut last will appear
closer to the top. For a butterfly shape like this, it's not necessarily
that important, because it's a
random arrangement. But if, for example, you're doing a bouquet of
flowers and you had some leaf shapes towards
behind the flowers, you would want to
cut those first and then cut the flowers to give the sort um give an accurate
representation of the depth. Back to the separation. I think I'm going to work with these layers being towards the bottom and then these
layers being closer to the top. My first layer is going
to be the purple. Here, just label this layer two. I'm going to delete
everything that isn't the base and purple. Then what we have here
is the purple layer. If you imagine this
layer would be purple, then you put this layer
on top and cut out these elements and that
reveals the purple underneath. That's the way
that it's working. Then go back to our original
shape, make a copy. This time, I'm going to
do the next layer out, which I think I'm
going to do green, so I will delete everything that isn't the base
or purple or green. Then we keep doing this until we've gone
through all the layers. Remember to rename your layers as you go so that you can
keep track of what's what. I've done the purple on the green and next layer I think I'm going to
reveal is the pink, so I will delete
everything that isn't. Base, purple, green, or pink. And again, I will do gold next. Just read that layer five. I'm going to do gold. Next, I'm going to
delete the yellow, the blue, leave the gold, the pink, the purple,
the green at the base. Then for the last
second to last layer, just do this one more time. I call this layer six. I'm going to delete the yellow. In the final cut Layer seven, I'll expose the yellow and that will be our
cut file complete. I can't put them all on
the artboard as they are. It's not so critical
because we're going to be exporting
them one by one. But if you did want to have
everything on the artboard, then obviously it would just
be a matter of resizing. Make sure you
highlight everything at the same time so that you can resize and fit everything
onto the artboard. For shift to maintain
the aspect ratio.
6. Dealing with isolated elements: Okay, so I just wanted to
show you how to create layered paper cut when you
have free standing elements. So for example, this
is the butterfly two from the butterfly set,
and this is how it comes. Now I've just added in
these additional elements. You can see they are not
attached to the main paper cut. If I was to cut just this, it would come out as
one piece and then I'll have all of these are separate. How do I make these visible? In order to do that, you
follow the same technique. First of all, the first
step is to isolate all of these elements as
we did previously, which I've done here already. Then go ahead and
color in your design. Okay, now the butterfly
is colored in, you need to group the colors in the same way
as we did before. Except this time, even
though, for example, in this example, these
isolated areas and these larger areas
that are part of the main design are
the same color. I'm going to group
them separately. I've grouped up all my pieces. Now I'm going to group the
whole of the butterfly. And take this over here and
then duplicate the layer and start separating the
shape into separate layers. For layer one, leave everything. Making sure that these shapes are the same size each time. When it comes to where you have these shapes within shapes, they need
to be cut first. It's not possible. If I cut
this out a pink shape first, I can't then cut
in a green shape. I can't then add
in a green layer. Anytime you have
shapes within shapes, the smaller shapes
have to be cut first. I'm going to set that
up on this next layer. Then in the next layer,
this layer three. I'm going to then cut out
the pink layer. Okay. So now that we've cut
out those initial areas, we don't have to
include these in any further layers that
we cut from now on. As soon as we cut
this larger layer, it will automatically
expose the green. As soon as we cut this larger
green layer down here, it will automatically
expose the pink. There's no need to add cut
lines for these areas now. There's no harm in it. It's not going to ruin anything. It's just it'll save time if you don't have to do that because
it's unnecessary. As soon as I cut this pink, it's going to expose the
green, so I can delete that. I'm not cutting
the outer layer of these bottom pinks just yet, so I'm going to leave them here. Now that I'm going
to cut the green, I can delete the inner pink. From now on, I can
just completely ignore these two layers as long
as these ones are exposed. There we have all our layers. I'm going to go and
cut these out and then I'll show you the results
in just a moment.
7. Export the layers : Now that you have
your separate layers, it's time to export. Click on the relevant
layer group. Then go to File, Export, select SVG from the drop
down list at the top, and choose selection only
from the area field. Click on Export and save the file the file name and
location of your choice. Repeat the process
for all the layers. You can also export all
of the layers at once. If they all fit on an artboard, go to File Export and select Artboard
from the area field. If all of the layers are not on a single artboard,
highlight them all, then go to File, Export and select selection only
from the area field.
8. Export the layers using the Export Persona (Affinity Designer Only): So now. In order to export,
we can do this easily all in one go by
going to the Export persona. If you go up to this
top left corner, click on Export Persona, or you can do File
personas and go to Export. What you can do here now is
to export this as an SVG. You can export the
whole thing at once, or you can export
each one separately. In order to export
them separately, just go to here,
this slice tool, which is already sort
of a default selection. Draw a slice around your shape. Try to do this in
the order that you have created the layers because it will automatically
call that slice one. Slice two, it will name them in the order
that you do them. So if you did that one first,
it would be slice one. In actual fact,
it's the last one. It might just get confusing. So for the sake of Clarity, try to do them in the order
that you want to cut them. Slice one, slice two. Now you see here as
you make the slice, it says what format it's
going to export in. I don't want that to be a PNG. I want it to be an SVG and
the same goes for slice one. You can see here how that
one is going to overlap. So what I'm going to do is
just try and get that in. If you find that it's
still overlapping, you can always just
go back into your designer persona and
move this around a bit. I'm just going to
move this down a bit. If I go back into Export, it shouldn't be a problem, then I'll make the one last slice. Now you can see that
everything apart from one and two are PNGs. I'm just going to
select these slide two, three to seven and make
sure that the file format is SVG if you wanted to
export the artboard, make sure that's also an SVG, and then you can
export the slices. It will ask you to
create a folder. I'm in the file, I've created a folder
called multi layer. This is butterfly one. I'm going to create
a new folder called one and then export
everything into that. Then when you come here, you'll see all your
slices are available. Now, you can take them into whatever software program you have for your cutting machine.
9. Test your layers: Okay, now that you've
created your layers, you can import them into whatever software you're using
for your cutting machine. I'm using Brother
Canvas Workspace. Just click on the SVG icon on the left and import the file. Now, for some reason, when it imports into Canvas workspace, it's really quite small. And also, it has not It has
ungrouped all the layers. So the first thing to
do is to group it. You can do that by
pressing Control G or go into layer and then group and then I'm going to resize it so that it's to the size
that I want to cut, which I'm going to
do 150 millimeters. So make sure that
when you import your shapes into whatever
program you're using, if you resize one, make
sure you resize them all with exactly the
same proportions. Group this and set
the size to 180. You can remove the fill if you
want to because that's not important so that you've just got the outline the cut lines. If you superimpose
that, you can see. Then you can keep
on doing that for each layer and then send them to your
machine file to cut. In Canvas, you would file export or transfer and also
it's worth noting that, um, if you now exported
these shapes as an FCM file, which is the proprietary
file format for brother, next time you come to use it, it will come in already grouped and obviously whatever
size you export it as. So I'm going to keep
doing that and then send the files to
my cutting machine, and then I'll assemble the pieces and show you
the finished result. To import your file, you click on New Project, and then in the bottom
left corner, click Upload. And then upload image, and then you can
select your file. So we're going to use
the SVG that we created. Then click on Continue,
then click on Upload. You can also adjust add image details and things if you want to at this point, but
I'm not going to bother. When it's loaded onto the mat, it might be quite small, in which case, you'll
need to resize it. So it's already pre grouped, so you can manually use
the handles to increase the size or you can
input the dimensions. So cricket automatically groups all the colors into layers. So you'll see here on the right, if you click on one
layer, you've got, for example, all the yellows
are groups together. And then all the blues
are grouped together. So what this means is
that you don't have to do all the previous
steps in affinity designer. All you have to do
is separate the SVG and color in the
finished version, if you like, and export
just that final layer. You don't have to
manually export all the layers separately because you can do it here
in cricket design space. So first, you'd cut
your base layer by turning off all of the other layers and
just leaving the base, then you'd cut then
you'd cut layer one, layer two, layer three, in whichever order that
you've decided you want to cut them in by, you know, using the eye symbol
to manage the visibility. And then that way, you
can create the layers, but you don't have to export. You don't have to have like
six or seven different files. You can do it all
with the one file as long as you've
colored it before you import it into
cricket design space. Oh here is the finished butterfly. You can see all the layers. I've gone for a completely
different color scheme to the one that I used to color my butterfly inside
the affinity designer, just to show that it's all about the distribution
and the grouping of the colors as opposed
to the colors themselves. If you didn't like the way that the colors played with one another, then you
could change that. So here are all the layers. You can see that all these
internal floating bits have been preserved.
In this version. I haven't glued it
together because I wanted to show you the
last example I did, I didn't show you the layers, just to show you
the various layers. In this example, I
used pink twice, but because I've done
them separately, this second pink layer
could be any color. I think it's a really nice
example of how you can go from that. To this.
10. Class project and inspiration: Okay, so, finally, I
just wanted to show you some examples of other
single layer SVGs that I have modified and turned
into layered paper cuts. This was the very first
attempt I ever had at making a layered paper cut from
a single layer file. It's been sitting on
a shelf or, you know, inside a box somewhere, which is why it's a bit beat up, but it's just it's so cute. And then there was this example. So I've initially
tried it like this, but found that I used a
dark color on the bottom. So the leaves didn't really pop, and some of the stuff
was quite small. So then I increased
the size of it and also just changed like the whole and I've used this gorgeous gorgeous
glitter paint on the various layers, and that just really just pops a lot and used
white instead of black. I love that. And then these are a pair of earrings that I made using
the same principle. So it's just three layers. I've painted each layer
in this glitter paint and then added an earring
hoop. They're really cute. I love these earrings. I
wear them all the time. This was much more of an ambitious project
because there were lots of elements that weren't attached
to the main design like these isolated
face bits here and also there were some
that were attached to the main bit but not
attached to others. I did have to do a
bit of modification. But I think it turned
out really lovely. I love this. I think
it's really dramatic. It's probably one of my
favorite things that I've done. Again, you can see the layers in there and how dimensional it is. Then finally, one of the other
butterflies from the set that we're working with. This is actually the same
sort of design as this one. I wonder if I've inadvertently grouped all the colors
the same. Not quite. I think I've split these
areas. So there you go. I just shows you can arrange the colors differently,
however you choose. All right. Well, there you go. We're at the end. I hope this has inspired you to
go out and give it a try, dig up some of those
old single layer SVGs, and give them a
brand new lease of life as beautiful colored
layered paper cuts. So that's what your project is. You can use one of
the butterflies from the set that I've used. Or you can find something from your
own existing stash or from the website
that you really like. Have it go, take it into
your graphics program. Like I said before, I've
used a phonetic designer, but as long as you can work
with vectors and as long as the program recognizes the SVG and you can work in layers, you can use the process that I showed you to create
your individual layers and your bespoke
layered paper cut. Please do post your projects. I would love to see what
people are coming up with and how you're
interpreting the task. Thank you very much for joining me and hopefully I'll
see you again soon.
Lilian Barker, Papercrafter & Surface Pattern Designer
