2.2 Inset Wood
In the last project, we made our text appear to come out of the page. In this project we’ll do the opposite, creating an inset effect with our text pushed backward into a wood texture.
2.2 Inset Wood
Hey, welcome back to five SVG text projects. In the last lesson, we created a bevel effect. We made text look like it's coming off the page. And in this project, we're gonna do the opposite of that. We're gonna insert some text so it looks like it's going into the page. We're gonna be reusing some of the techniques that we used in the last lesson. We'll be using fills and filters and we'll be using a bunch a different filter primitives. And we're gonna be adding something new in that, we're gonna be working with images, as well. So in the local server that you have Atom running for you, go to the insetwood starter file. Open up that same starter file in Atom, and we'll get started. So the first thing that we're gonna do is we're gonna get that wood image to tile its way all across the background of our SVG. The way that we're gonna achieve that is by creating a rectangle that's gonna fill up that whole background. So, above text element and below our definitions, we're gonna add a rectangle. And we can do that just by saying rect. That's all it takes to add a rectangle to an SVG. Now, we just need to size and position it. So on the x-axis, we're gonna position it at 0. We're also gonna position it at y=0, so x is horizontal, y is vertical. We could give it a width of 100% and a height, also 100%. Right now, that's just gonna give us a big black rectangle. Now, we wanna fill that rectangle with our wood texture. The way that we're gonna do that is with a filter. So we're gonna add a filter to our rectangle but the same filter =, and we're doing this just like we did in the last session by specifying a url. We haven't set up the filter yet, but when we do, we're gonna give it the ID WoodTile. Now let's set up our WoodTile filter. We're gonna do that with the same opening filter tag that we used in the last lesson. So we'll just specify the ID and add this lot of code to control the size of the filter and then we'll just close that filter off. Now, we're gonna pull in our image. Remember before that we downloaded three images into our project folder, we're gonna be working with this image here, this wood image. And the way that we're gonna bring that image into our filter is with an feImage primitive. So just like with our other primitives, we add in the element and close it off, and then we can start adding in properties. To specify which image we want to pull in, we use href, and then we're just gonna add in the name of the image. Now we need to position the image. So we're gonna say, it should be at an x position of 0, a y position of 0, and we're gonna give it a width and a height. So let's set the width to 1024 and the height to 1024. And now, we'll just add a result name, so that we can use this image for tiling. So we'll just call it woodimg. Now we're gonna add in another primitive that's gonna take this image, and it's gonna tile it in both directions. This one is feTile. So now all we need to do is just specify the input, and that is the result name that we just got from the image that we added in above. And now when we save, there we go, we can see that we've got our wood image tiling in both directions and filling up that rectangle that we have in the background. And what we're gonna do is apply that same filter that we just created to our text. So if you look at our finished project, you can see that we've got this wood texture still showing in the background of the letters itself. So the way we're gonna create this effect is by filling the text with that same wood and then darkening it off and adding a shadow and a highlight around it. So go back down to our text, we'll grab the code that applies the WoodTile filter and we'll add it to our text as well. We're just gonna hide the rectangle that we just created, so that we can see the effect on our text and we'll save. Okay, so now, what happened there? We know that we've hidden the rectangle in the background we're only showing the text. The reason that we don't see the actual text shape is because when we add that tiling, it's just filling up the entire SVG. So, we need that WoodTile filter to cut out those letters from the shape. So we're gonna make that happen by adding an feComposite primitive. I'm just gonna paste this one in, so we'll need to give our tile a result name. Which we'll call it WoodTile. Then we have the WoodTile result plugged in as the first input in our composite here and the second input is our SourceGraphic. When we apply this filter to the text, the SourceGraphic is going to be just that text, the shape of the text. When we apply the filter to the background rectangle, it's just gonna take the whole rectangle so it won't actually make any difference. But on the text, this is going to cause just the text shape itself to be filled with the WoodTile. So we'll save and there we go. There's our wood filled text with the background portion cut out. Now we're gonna move on to creating the inset effect that allows us to differentiate between our text and the wood color in the background. Now, we already have a filter applied to our text here, but we want to apply another filter so that we can create our inset effect. You can only apply one filter at a time on an individual element. The way we're gonna get around this and apply a second filter, is by adding a group that is wrapped around our text element and then applying a filter to that group. We do that by indenting our text element and then we're just gonna add a opening g tag. And underneath, we'll add a closing g tag. Now, inside this group element, we can add another filter. So we're gonna say filter=url. And this time, we're going to use a filter with the id Inset. So what will happen here is first, this WoodTile filter is gonna be applied to the text. Then, the Inset filter that we're about to make gets applied to the whole lot. So let's go ahead and make our Inset filter. Just using the same type of code that we did before to create our other filter, but we're changing the id to Inset. And the first thing that we're gonna do inside this filter is darken our text, so that we can differentiate it from the background. We're gonna do this in the same sort of way that we darkened our outline in our last project. Where we created bubble bevel text. So the first thing that we're gonna do is create a flood fill. So with this one, we've set the flood-color to be a slightly a slightly transparent and darker brown and we're outputting the result text color. Now, we wanna blend that darker color with our SourceGraphic. We're gonna use the blending mode multiply. So when we take that dark color, we blend it over the top of our wood filled text, it's gonna darken it off. So we do that with a blend primitive. We've got our text color that we just set up here as our first input and our SourceGraphic as our second input. Multiply it as the blend mode and then we're naming the result recolored. And then to make sure we don't have that dark brown color flood filling the whole background again, we're gonna need another composite node. We're plugging in our recolored text. Our second input is the SourceAlpha and our operator is in. So this is like we did before. We're using that SourceAlpha, which is just a black version of our existing text, like a cookie cutter, so that we just get our darkened text showing through. Now, we're going to add an feMerge primitive. And inside that, we'll add feMergeNode. And we're gonna plug in our coloredtext result. Now let's see what we get. All right, so there you go. That's done a nice darkening off of our text. Makes it look like it's a bit shadowed, maybe even possibly a little bit burned. And now we can show our rectangle again in the background by uncommenting the rectangle. And there's now sufficient contrast between those two colors that we can see what we're doing. Next up, we're gonna add an inner shadow, that goes around the inside of the texts, like we see in our final result here, you can see the shadow that we have. First up, we're gonna need to set a color for our shadow, which we'll do with another flood primitive. So once again, a slightly transparent brown color. Now, we actually wanna cut our text shape out of this brown flood that we just added in. We want a hollow shape on the inside of the fill that doesn't have any color. We're gonna do that with a composite node. So we just add in this composite node. And this time, you notice that our operator is out. If we used in, we would have brown text with nothing around it. But by using out, we're gonna have brown around our text with nothing on the inside. So, let's take a quick look and see how that appears so far. So if we put our shadow cut out here and then we save. All right, so there you go. You can see how now how we've just got the text portion missing from the inside of this dark bound flood fill. Because what we wanna do is blur around the inside here and then move this whole shape down and to the right a little bit. And that is how we're gonna this blur that you see here. So let's blur the shape that we just created. Same thing as before, we just have a standard deviation of 3, so it's gonna blur it by 3 pixels. Now we want to offset that blurred shape by 4 pixels down and to the right using that feOffset primitive. So let's see how that looks so far, we'll save. So now you can see that we've got this softness around the edge and you can see where that shadow is starting to overlay the letters. And up here, you can see how much we've offset the shape by. Obviously, we don't want all of this brown around here, we just want this little shadow portion inside the letters. So we're going to use a composite primitive. Once again, we're using the SourceAlpha to cut out our shape. We're passing in our shadow cut out shape here, I'm using the operator in. So, let's grab that shadow, plug it into our feMergeNode here and we'll save. Now I've got the shadow shape that makes it look like our text is inset. Now there's still just one more element. In our text effect here, we are creating it so that it looks like there's light coming from the top left. So that creates this shadow here, but that light is also going to hit these edges along here, which we can see in our completed version. We've got this highlight hitting the edges of the wood here. So we're gonna create a highlight in almost the same way that we created our shadow. First up, we're going to add a Gaussian blur. We're gonna take our SourceAlpha and we're gonna blur it by just 1 pixel, because what we wanna do is take a blurred version of our text, recolor it, offset it down and to the right and then cut out the portion that's overlaying the text. So now we'll add the color for our highlight with a feFlood primitive. So there's our flood-color and now we'll cut a shape out of that flood-color with a Composite primitive. Here, we're taking the highlight color that we just created and the blurredtext that we just created. And we're going to add another node, so that we can see what we've got so far. We'll save and then you can see that we've got a highlight with a slightly blurred outline. So we'll offset our coloredhighlight and we're just offsetting by 2 pixels. And then we're gonna use a Composite node to cut out every part of what we've created so far that's overlaying the letters. So let's plug that result in to our node here. And then when we save, there we go. Now, we've got our highlight effect, just subtly around the edges here. Now that is just about done, looking at that though, it still looks like the shadow color and the highlight color are just a little bit stark. We're gonna make them a little bit more subtle. So I'll show you how useful it can be to work with RGBA values when you're setting your colors. So if we go up to our shadow, this is our shadow color here. We're gonna tone that down to 0.65 opacity instead of 0.85. With our highlightcolor, we're gonna turn this down to 0.4 opacity instead of 0.65. Now we'll save. And there you go, that's just toned that down a little bit, made it a little bit more subtle. And that's one of the things that you could do when you're working with this type of process. You can make your colors a bit brighter, so that it's a bit easier to see what you're doing as you work. And then tone it down once you have everything with the right blur level and right position and so on. So that wraps up our inset wood effect. In the next lesson, we're gonna move on to our Neon light effect. So once again, we're gonna be using background images, blurring, just like we did before. But we're applying it all in a different way to give us this slightly cyberpunk-looking Neon light sign. So I will see you in the next lesson.