2.5 Chunky Metal
In our fifth project we’ll create a chunky metal style, complete with lighting effects to enhance the metallic look.
2.5 Chunky Metal
Hey, welcome back to five SVG text project. This is the last of our five projects and we're gonna be creating this chunky metal style. So in your previews, find the chunkymetal.html file and open up the preview. And open up that same file for editing in your code editor. Great, now the first thing that we're going to do is style up that backdrop that we have in. It's going to make it a bit easier to see the metallic effect as we create it if we've got a good background for it to be contrasted against. So the first thing we're going to do towards making that happen is we're going to take our rectangle that we have here, and we're going to fill it with a tiling metal texture. So let's add a fill. Set it to url. And we're gonna tag it a fill with the id metal.tile. So we're doing the same thing we did before, we're just setting the width and height of both the pattern and the image to 512. And then we're putting your image inside the pattern. This is that metal texture we downloaded earlier, and then that pattern is going to make sure that that image is tiled in both directions. So let's see what we've got from saving our changes. All right, so now we've got a seamlessly tiling metal texture in the background. And right now it's far too shiny and bright. So what we're gonna do is create a flood fill that's a darker color. And we're gonna use a blend primitive to multiply that blue color over our existing texture. We're gonna do that by applying a filter to the rectangle that we just created. Just make it a space there, left that out before. We're gonna say filter=url, and this time we're gonna use the ID wall. And we'll set up our filter. And inside there, this is the same as you've done before. We're just gonna add a flood primitive with a darker blue and a blend primitive. So that applied over our metal, we'll save. And there we go, now we've got a nice cool blue metal in the background. Now we're going to do what we did with the neon light, and we're going to add a vignette so that we have a soft circle around here instead of these hard edges. So we're not changing anything. This is the exact same vignette that we used before. So we'll just add in another rectangle in front of the wall that we just created that's going to use that vignette film. So let's save. There we go, now we've got a nice, soft circle and no more hard edges. Now, we're ready to start adding a metal effect to the text. Even though we are going to be filling in our text with this tiling metal, we can't actually use the tiling metal that we just set up here. And the reason is because we want to create these lines around the outside of our text that have these variations in color. You can see how it goes from light to dark. The variation in lighting is what gives a metallic effect, and we're just trying to apply that lighting variation to the outline. We want to do that by creating a linear gradient that has these fluctuations of lighter and darker greys. However, as far as I'm aware, there's no way to incorporate a linear gradient that you've created inside your definitions as part of a filter. So we can't create an outline and fill that with a linear gradient. So what we're going to do instead is fill the whole letters with this linear gradient, and then we're going to apply our image inside, because you can use an image inside a filter and make it a tile. So we'll fill our letters with a linear gradient, and then we'll put the metal effect on the inside. So let's go to our text and we'll change the fill to a URL, and we're going to make it light gradient. So this is the gradient that's going to give us our lighting effect, and we're going to add our new gradient in under our radial gradient. So we have a liner gradient and we've got several stops, so we start with a lighter grey and then we go down, then we go up to a lighter color, down to a darker color. So we've just got a few of these to give us that undulation of lighting reflecting off the surface. And then to make it seem a little bit more irregular once it's applied, we are rotating this gradient by 65 degrees, so it's gonna be on a diagonal. So let's save that and see how it looks. All right, so there you go, we've got our linear gradient. You can see how we've got these undulating highs and lows of color. Right now that doesn't look very metallic. But when this is just applying to the edge, that's when that effect is going to come out. So now, let's create the filter that we're going to use to apply this metallic effect to our text. So we're going to say filter=url, and we'll go with the ID metal and then we're going to set up that filter. And the first thing we're gonna do is set up an fe merge primitive. And we're gonna do that because we need to get that linear gradient filled text into our end result. So we're gonna add that in right away. So add an feMergeNode and we'll set the in to be, The SourceGraphic. Now we're ready to start adding in the tiling metal texture. So we're able to get that metal texture in by using an image primitive. So we have fe image. Here we are specifying the image that we want to bring in. We have its x and y position set, and it's with width and height, which were set to 128, and now we want to set that image so that it tiles in both directions. And we can do that with an fe tile primitive. So we say fetile, finish it off. And we're going to give it an input. So we gave our image the result name metal image. So we'll just plug that in there, and we'll give this result name metal tile. So let's put that in now, and we'll see what we end up with. So we'll save, and right there we can see that we've got a metal tiling image in. Now, of course, we need to properly apply it to our text. And what we've done previously, we want to use a text shape like a cookie cutter to just use the source alpha. But in this case, we don't actually want the metal texture to completely fill up the text. We only want to fill it out to a couple of pixels from the outside so that our linear gradient is still showing all the way around the outside, making it look like an outline. So we're gonna use a morphology primitive. We're gonna plug in the source alpha and we're going to use the erode operator so that we can shrink our source alpha by two pixels. And that's gonna give us the inner area of our text. So now, we can use that inner area to cut the shape out of our middle tile that we want. And we'll do that, just like we have before with a composite primitive. So taking the metal tile that we just created, which last time I think it was filling the whole page, plug it in here, take out inner area, which is a thin version of our text. Plug that in as our second input. We're using the operator in and we're naming our result inner. So now, we're gonna stick that here in the second node, we'll save, and there we go. So now, we've got a metal texture filling up the inside of the letters, but we can still see the linear gradient that we filled that text with. So that makes it look like we've got smoothed off or chiseled off edges. And we have that fluctuation in lighting and color that makes it look properly metallic. The next thing that we wanna do is add that chunkiness that makes this look like a big strong piece of metal. And we're gonna do that by adding some drop shadows. It's just gonna make this look like it's coming out of the page. We're just going to reuse the exact same technique that we used with our other dropshadows. So we've taken our source alpha and we're using a Gaussian Blur to blur by 15 pixels. Then we're moving it, we have an offset primitive. In this case we're leaving in the same exposition as it already is. We're just moving it on the Y axis, that's vertically, down by the 15 pixels. So now we can input, That drop shadow behind our source graphic. We'll save, and there we go, we've got a cool shadow showing up there. It's not quite strong enough though, it still looks a little bit soft. So to make that effect looks stronger, I'm just gonna copy that node and just paste it in. So we've got two instances of this dropshadow, one over the other. And we'll save that. And there we go, now we've got a nice dark shadow that makes this metal looks like it has a whole lot more depth. The next thing that we gonna work on is adding this border that we have around our metal text. We're gonna do that by adding another rectangle in here. We're gonna place it in front of a vignette, but behind our text. We have it shrunk down to a little over half the width of the overall SVG and a little under half the height. And then we've offset its X and Y position down into the right. So I'll just show you where that's positioned. Save, and there's our black rectangle. And what we're gonna do is run a filter on this black rectangle that's going to cut the center out and make it appropriately shaped for a border. So we're going to add a filter, With the name BackgroundBorder. So this is gonna be the border that sits in the background. There's nothing you haven't seen yet in this filter, so I'm just gonna add the whole thing in at once. So we've created our filter with the correct ID, BackgroundBorder. Then we're using an feMorphology primitive to take our SourceGraphic and shrink it down, erode it by 46 pixels. So this gives us a rectangle, same as the one we started with, just smaller. Now, we're going to offset that rectangle so that we center it. We know that we shrank our original rectangle by 46 pixels so that means we're gonna need to offset it down into the right by half that amount in order to center it. So we have it move by 23 pixels in both directions. Then we're using a composite primitive to take that in area and cut it out of our SourceGraphic. So we'll save once again, and now that's turned our rectangle into the kind of border that we need. And this is where we come to the ability to reuse filters and fills. We already have a fill and a filter set up to create this metal effect here. So now all we need to do is apply that same fill and filter to the border that we just set up and it's gonna give it that same metallic effect. Now, we already have a filter on this rectangle here, but you recall that we mentioned in a previous lesson that if you need to apply two filters to the same shape, then what you can do is nest that shape in a group, which is just a G element. Now, we can grab the fill and the filter that we have applied to our text and apply it to this group. Save our changes. And there we go just like that, one quick step and we have the same metallic effect applied to the border around the outside as we do to our text here. Now, what we're gonna do is put another rectangle behind both this border and this text that's gonna have a different color. We're gonna make it look like the text and the border are connected to one another rather than just connected to the back wall. So we're gonna make a copy of the rectangle that we're using to create our vignette effect. And here we're actually gonna reuse the metal tile fill that we applied to the back wall. So if we save, you can see that's just filled up this whole space again. So we're gonna clip this shape off and change it to a different color. And we're gonna do that by adding another filter. So we'll set this filter to use the ID BackgroundFill. So we set up our background border before, now we're setting up our background fill. We're going to recolor the rectangle that we just added in the same way that we did with our blue colored background. So we have a flood fill here. This time we're using a purplish sort of color, and we're blending that in with our SourceGraphic using the multiply mode. Our SourceGraphic in this case is the rectangle that we just set up. Now, obviously we don't want this rectangle to be the full size of the SVG. We just want it to be small enough to fit in behind the middle text and behind the border. So what we're actually doing here is just changing the x and y position of this filer and width and height. So that alone is going to shrink down this rectangle to the appropriate size. So let's save our changes, and there we go. Now, we've got a purple tinted background. It's got the same metal tiling texture in the background, but because it has a different color, it gives us that sense of connectedness between these three elements. Now, we're just gonna add a couple little extra polishing steps. Creating a metallic effect is all about trying to simulate the way light works as best as you can. One of the ways that you can do that, other than the light variation that we put around the edges is by adding little glints, like this. So we have a glint here and here and here. So we're gonna create one of these glints and then we're gonna place it a second and third time. Now, because we wanna make one glint that is reusable, we're going to set up our glint inside our definitions rather than down here in the main area of the SVG. So we're gonna set up a group. And we're gonna give it the ID glint. That ID is what's gonna allow us to use this group multiple times. Now, inside here we're gonna setup a rectangle and we're gonna fill it with a radial gradient. So I'm just gonna paste one in. So here's our rectangle, it's 80 pixels wide, 60 pixels high. And we're gonna use this radial gradient to make it look like a little burst of light. So it's going to be a brighter white in the center fading all the way out to transparency on the outside. So we'll add in our radialGradient. So here we have our very last stop is completely transparent white. And it's gradually moving out, becoming less transparent so that it's brightest in the center. And we're gonna be stacking a couple of these rectangles on top of one another. And with each one that's stacked on that's gonna make it look brighter and brighter. So for that reason these radialGradients stops are not very bright individually. So let's just place this glint into the SVG as it is now so that we can see it coming together as we add in our extra rectangles. To do that We are gonna go down and we are gonna add them in so that they are in front of our text. And the way we are gonna place this group down here is with the use element. So here, all we have to do is say, href =, and then we just provide the id of the group that we just defined up here. Now, in a lot of places online, you're gonna see xLink: used instead of just href, that's actually been deprecated in SVG 2. So now you only need to use href. Now we're gonna need to position this glint so that it is on top of the h of our border. So we're gonna give it an x position of 875 and a y position of 156. Unfortunately, there's no shortcut to figure out exactly what x and y position, you need to input so that your glint looks like it's in the right place, it's pretty much just a matter of trial and error. So let's save that. And right now, even so softly, you can just see that we've got this little ball of light here. So now we can add in some more rectangles that also use that same radio gradient and we're gonna build them up to create our glint effect. So, first up, we're just gonna create an exact duplicate of the rectangle that we already have, this is just gonna brighten up the shape that's already there. So, first, lets create the rectangle that's long and thin and runs horizontally. We're using almost the same code but the difference is we've made it much wide, 420 pixels instead of 80, and we've made it a lot shorter and there is 16 pixels high instead of 60. And then we've had to shift the x position. So we've dragged it over to the left by 180 pixels and then we've had to move it down by 20 pixels. Now we'll add in our fourth rectangle, and this is gonna be the one that's rotated on a diagonal. So it's the same thing once again, it's wider and shorter than the first two rectangles. And we have offset its position to keep it centered and then we've used transform to rotate it about 35 degrees so that it's on a diagonal. Save, once again. And now, there you can see we have a diagonal line, a horizontal line and a little burst of light in the center. Now, you can see how we only really needed light colors on our radial gradient, because by the time you lay these over the top of each other, it's just bright enough. Now we want to add another two glints into our layout. And this is where these reuseable items become very handy. So we're going to copy and paste this use element that we added in before. And we're actually going to flip it horizontally so that you get a bit of variety in how the glint is being used, we can do that by adding transform. And then we're gonna use scale. This is a good trick you can use in all kinds of different scenarios wherever you have access to some kind of scaling modifier. If you modify a scale by -1, it will actually flip along that axis. So we're gonna flip it horizontally by setting -1 on the x-axis, which is this first number. And we're just gonna leave it as 1 on the y-axis. Now we're going to reposition to -338 on the x-axis and 208 on the y-axis. So we'll save that. And there is our second glint there. We're gonna do the same thing again to add in a third glint. And we're gonna move it again so that we have -650 on the x-axis and 384 on the y-axis. Save once again and there's our third glint. Now, there's just one more thing that we're going to do as a final polish pass. And that is we're going to change the opacity of these two glints, so that the glints are not so overbearing. So, both of these last two glints we could say opacity equals. And then in the first one we'll set that to 0.8, which makes it 80% opacity, and the next one we'll set to 0.4. We'll save the changes. And that has just faded those two off a little bit. This is almost as bright but not quite as bright as the glint up the top and we have this one down the bottom that's just very subtle. So now we've got all three are in place. But they're not all full force. So that is the final step of our chunky metal project. So that brings the fifth of our five projects to a close. We'll just have one more video for the course. And that is a quick recap of everything we've covered and a quick summary. So I hope you'll join me in the final video. I'll see you there.