2.4 Vintage Title
Time to go old school with a vintage text style. You'll learn how to create extrusions and pure SVG noise textures.
2.4 Vintage Title
Welcome back to 5 SVG Text Projects. In this project, we're gonna be creating this vintage style title that you can see right now. We're gonna be using some of the techniques that we've already been using in our previous projects, but we're also gonna add a couple of extra techniques into the mix. So the live preview you want this time is for the starter file vintagetitle.html. And you're also gonna wanna open that same file in your code editor. All right, so the first thing that we're gonna do before we even start working in the text is to create that background texture that you saw. We're not using any images to create this, we're putting it all together from scratch just using SVG filters. We have a rectangle in the background like we did with some of our other projects. We're gonna fill it with the radial gradient so that it looks like we have some lighting in the center of the wall, and then we're gonna create and apply a texture to it. So we'll set the fill, For this rectangle to be the id Wall and for that fill, we're just gonna use a radialGradient. Once again, this is just like the other gradients we've done so far where we have radialGradient specified here on the red element. And then we have our stops for the inside and outside, so we'll save that. And there we go. Now you can see we've got a lighter effect on the center. And once that's all added in with everything else that we're gonna do, that's gonna make it look like there's a slight bit of illumination in the middle there. Now, we're gonna start working up the texture that we're gonna apply to the back wall. For that we're going to need a filter, so we're gonna add a filter on to the back wall. And we're gonna give it the id Roughen, so that we can roughen up that wall. Start a filter, just like we have with each of our other filters so far. And now, we're gonna start creating our texture. And the way we're gonna create a texture is with a primitive called feTurbulence. This lets us create different kinds of random noise. So we're gonna put in our first feTurbulence primitive. Here, we've specified the type. There are two different types that you can use with this turbulence primitive. You can set it to Turbulence or you can set it to fractalNoise. And you'll see fractalNoise in just a moment. And then we have these two parameters here. We have baseFrequency and numOctaves, or what number of octaves. And basically by increasing and decreasing these two numbers, you can change how regular or irregular the turbulence pattern that you generate is gonna be. So let's just save what we've already got. So you can see what this turbulence primitive is outputting. So we'll save, and now you can see there's quite a bit of information in that image. I'm gonna tweak a couple of the numbers here so you can see what's happening. Let me change numOctaves from 2 to 5. Now you can see that change. I'll put it back down to 1. You'll see the variance that you get there. So you can experiment around with that numOctaves parameter to get what you're looking for, or change baseFrequency, it's currently 0.05. I'll change that up to 0.5. Now you can see it's a much tighter noise texture if we go that way and I'll change it down lower to 0.01. Now you can see we've got much bigger shapes that are in here. So there's quite a lot of variance with what you can achieve here. Next up, we're going to add another one of these turbulence primitives. This one instead of being a turbulence type, it's gonna be a fractalNoise type. We've got the same two parameters here, baseFrequency and numOctaves. So let's see what that gives us. We'll save, now that gives us a fairly different sort of a texture. And what we want to create with our texture is kind of just a little bit of a grungy look in a way, something a little bit like paper. So we're gonna achieve that by combining the two turbulence primitives that we just created. We're gonna do that with a composite node. You've used this before so I take the two images and mix them together. So we've got our turbulence primitive, we're plugging that into our first input. Our fractal primitive, we're plugging into our second input and this time, we're using the xor operator. Perhaps you're supposed to pronounce that xor, nobody knows. And then we're gonna get the kind of a noise output that we want. So let's check that out. All right, so now we've got a nice blend of the two. And that's starting to get that sort of soft muffed look that we'd like to achieve. And we want to be able to take this texture that we're creating and mix it in with the background radialGradient. But we don't want all of these colors that we've got here, all of these greens and blues and purples. So now we need to convert our noise into grayscale. We're gonna convert it into grayscale with a primitive called feColorMatrix. Now this feColorMatrix can do a whole bunch of different things to convert one lot of colors into another. In this case, all we wanna do is change the level of saturation. So we wanna completely desaturate our image so that all the color is gone. So we're plugging in the noise that we just created. We're setting the type of this color metrics to saturate and then we're setting the values to zero. So we're setting the value of saturation down to zero, removing all the color. So we'll save that. Now there we go. We have got our grayscale noise texture. Now, if we were to mix that noise texture with the background radialGradient. Right now, a lot of that black would come through and it would look a bit dirty and icky so we're gonna tint this texture light brown before we actually mix it in with our radial film. We're gonna use the same coloring technique that we have in the other projects. So we're creating an feFlood primitive and specifying the color that we wanna work with. Now we're using a composite primitive to blend the noisecolor with our graynoise that we just generated. If we save, here we go, now, we've got a brown tinted noise. Now, we're ready to blend that texture with a radial filled background. We're gonna do that with the blend node again, with the blending mode set to multiply. So here's our blend node. We're gonna take the SourceGraphic, which is gonna give us that rectangle that we filled with the radialGradient. We're also gonna take our colorednoise that we just created. And we're gonna blend them with the blending mode multiplied. So let's check that out. We'll save again. There you go, and now you can see that our texture is starting to come together. At the moment though, there's still not quite enough variation in the color. It's a little bit too subtle in how the textures changing from point-to-point. So what we're gonna do is use some lighting filters to make it look like there's a spotlight hidden in the center of this rectangle, darkening it around the corners and lightening it in the center. To do that, we're gonna add a DiffuseLighting primitive. So this is a little bit like the SpecularLighting primitive that we used before. It just gives a slightly different type of lighting effect. So we're plugging in the text that we just created. We're setting the lighting color to white and we're setting the strength of the lighting here. And I said inside this primitive, we have a PointLight. Again, this is like we had before where the x, y, and z coordinates allow you to simulate positioning of light in 3D space. So let's see what that gives us. We're just gonna save. And so, now you can see that we've created that lighting effect. It gives us that strong illumination in the center and darkening around the outside. But obviously, it's now obscuring the texture that we just created. So now, we need to combine this lighting in with our wall texture. So once again, we're gonna be using a composite primitive. We're fitting in the texture that we created as well as the light that we just created. We're setting the mode to arithmetic and we're using this full parameters to control exactly how the two are blended. So now we'll save. And all right, there we go, that is our background image. So that's darkened off around the corners. It's brightened it up in the middle. And now we've got a really nice texture that gives us enough variation of color to look good. Now, we're ready to start working on the text itself. The first thing that we're gonna do is create this diagonal line filter that you see in the completed project. If you remember in the last lesson, we used a pattern to repeat an image in both directions. We're gonna use a pattern to create diagonal lines here too. What we're gonna do is create two rectangles. So I'd go back down to our text. Right now, the fill is just set to a white color. We're gonna change that to a URL. And we're gonna change it to the ID diagonal lines, so DiagLines. Now in definitions, gonna create a pattern element. Give it the ID that we just set, DiagLines. Give it a width of 4 pixels, a height. Of 4 pixels, set patternUnits to equal userSpaceOnUse. And now inside here, we're gonna add a rectangle. Gonna set its width. To be 2 pixels. Its height to also be 2 pixels. And its fill. To be rgb(209, 199, 175), and then we'll close off the rectangle. Now, to make that easy to see, what we're actually gonna do is temporarily come into our text. And we're going to add a temporary wall that we can use. We're gonna apply. Our diagonal lines filled to it, so we can better see the pattern that we're creating. So let's save that. Actually, I have made a small error. I set the height of the first rectangle to 2. The height of the first rectangle should actually be 4. All right, so then, now you can see, we've got these long lines running up and down on our rectangle. So there, just make sure that that height is changed to 4. Now we need another rectangle. Just the same, only we're going to give it a different RGB fill color. Gonna change that to 224, 217, 201. And now we want to offset this line by 2 pixels. So that we have these two rectangles alternating with one another over and over again every two pixels. So we do that by adding transform. Equals translate. Use translate whenever you wanna move something. And we're gonna translate it by 2 pixels on the x-axis and 0 pixels on the y-axis. So let's save that. And then now you can see that our line pattern is a lot more subtle, because we've got those two colors alternating one to the next. Now obviously we want this to be a diagonal line pattern. So, in a pattern element, we're gonna add patternTransform. And we're gonna set rotate to -45. So we get a -45 degree rotation. Now, let's save that. And there we have our diagonal line pattern. Now we can get rid of the temporary rectangle that we had in there to test with. We can show our text again. And when we save, now we've got our text filled in with the diagonal line pattern. Now we're gonna create the filter that needs to be applied to the text to turn it from this into this. So we kinda add a filter to our text. The url, and we're going to target the filter with the ID Vintage. Now, in our definitions, let's create that filter. And the first thing that we're gonna do inside our filter is create an outline. We're gonna create the outline in the same way that we did in previous lessons. First we're gonna use a morphology primitive. So we're taking our source alpha and using it as an input, and we are dilating it by 2 pixels. Then we're gonna cut the center out of that dilated shape so that we are only left with an outline. To do that, we're going to use a composite primitive. So we're gonna fit in the result that we just created by dilating our source alpha. Our second input is going to be that source alpha itself and we're using the operator mode out. So let's save that and see what we get. So there we go, there is our outline. And you'll notice that took away our diagonal fill. To remedy that, we're going to add in an feMerge primitive. Inside it, we'll create an feMerge node with the input SourceGraphic. And when we finish with that outline, we'll create a merge node for that too. Before we do put the outline into the merge node there, we're gonna recolor it so that it has a brown color instead of black. We've seen this recoloring method a couple of times now. We just add in a flood primitive specifying the color that we want. And then we'll use a composite primitive to take the shape that we wanna use and apply it like a cookie cutter to our flood fill. So that's gonna give us the result colored outline. We want the outline to be on top of the SourceGraphic. So we'll plug it in here. We'll save our changes. And there we go. Now we've got a nice soft brown outline around our diagonal line fill. The next thing we wanna do is create this big, chunky extrude that we have that makes the letters look nice and thick. And we're gonna do that with something called an feConvolveMatrix. Now at first this really doesn't look like it makes a whole heap of sense. But basically, what's happening here is we're feeding an input into this convolved matrix. So that's the outer that we created earlier, which is our source alpha dilated or fend by 2 pixels. And then, this kernelMatrix that you see here that just looks like a bunch of weird numbers will apply a pixel by pixel modification to the input that you feed into this matrix. What we have here is a matrix of numbers that's eight columns wide by eight columns high. And to put this all in a nutshell, all this is actually going to do is create an 8-pixel extrusion. So you can see that we've also specified up here in this order parameter, 8,8. So that let's the system know to expect an 8 by 8 matrix in this kernelMatrix property here. So if you want an 8-pixel extrusion, then set this property here to 8, 8, make a grid of eight columns by eight rows. And then you'll see that we have the number 1 first in the first row, second in the second row, third in the third row, and so on. Now, let's put in a merge note, so that we can check out what we have from this extrusion so far. We'll save and now, you can see that we have this chunky black showing behind our text. What we need to do to make that look like a proper extrusion, though, is to offset it down into the right. So we're gonna add in an offset primitive. Right now, our 8-pixel extrusion is centered, so that means that we wanna offset it by half of the number that we've specified here, which is 4. So we're going to set the x and the y offset values here both to 4. So now, we'll put that offset extruded in here, and we'll save. And now, we have our extrusion in the correct position. And the only thing that we have left to do to complete that extrusion is to recolor it. We'll do that with the same process once again. We create a flat primitive, set our color, and then use a composite node to apply it to our offsetextrude. So now, we'll just plug that into our merge primitive, we'll save. And now, we have a nice brown extrusion. The next thing that we need to do is a drop shadow, but with this drop shadow we don't want a soft-edged shadow like we had in previous projects. With this, we want a really crisp-edge shadow. So instead of using a blur, we're going to use another convolve matrix. So I'm gonna add in a few primitives once here because you've seen each of these types of primitives before. So we're adding in another eight by eight convolve matrix which is gonna us another extrude the same size of the one we just created. Only this time, we're gonna offset it further instead of only offsetting it by 4 pixels, we're going to offset it by 14 pixels, so it's further down into the right than our extrusion is. Now, we want this drop shadow to be a transparent black. So we've set the rgba value for a flood color that we're using here to black with 40% opacity. And then we're using another composite primitive to apply that transparent black color to the drop shadow that we just created. So we want that drop shadow to sit behind our colored extrusion. So we're gonna grab our coloredshadow result here and we're gonna add it to this merge note. We'll save our changes. And then we have a nice subtle shadow to help make the thick chunky letters more believable and give it a little bit more realism. There's just one more step that we need to do to complete this vintage title effect and that is to add an inner shadow. First up, we're going to add a Gaussian blur. And what we're gonna be blurring is just the outline that we've created earlier. Now, we need to offset that blurred outline down into the right so that it's visible in the correct location. We want it to be showing just inside the left and top edges of our outline. So let's make another node in here to check out what we've got. So just underneath the colored outline, add that node in. Save our changes. And now, you can see that we've got this softly blurred outline. It is showing on the inside of our outline but it's also showing on the outside. So we're gonna need to clip off that excess part. And as usual, we're gonna do that with a composite primitive. So we're taking the blurred offset outline that we just created and we're using our SourceAlpha to clip it so that it's only showing inside our outline. So now, we'll take this result name and replace the one that we had in there before. Save our changes. And now, you can see that that overflowing blur is gone. However, at the moment, even though we do have our blur showing in here, it's very light and it's very hard to see. So what we're gonna do is a bit of trickiness with an feBlend primitive. We're gonna set both input one and input two to be the clipped inner shadow that we just created. And we're gonna set the blending mode to multiply. So that way we get a duplicate, we get two of these shadows. They're gonna multiply each other, thereby, making that same shape darker. So here's our blend primitive. We've got both inputs set to clippedinnershadow. And we're setting the mode to multiply. And we'll grab that result, plug it in here, save our changes, and there we go. Now, you can see that that inner shadow has darkened. It's still subtle but it has the desired effect. All right, so that's it for our vintage title effect. So you can see as we're going along, you're able to use the same filter primitives in a bunch of different ways to create all kinds of different effects. And we added in using your own texture creation, pattern creation, and extrusion into the mix there. So now, we have just one more project to complete and that is our chunky metal project. This is gonna bring together all of the things that we've been working with so far into this snazzy looking metal effect. We're gonna be using images, gradients, color modification. And through combining those things, we're gonna make it look like this has the kind of lighting that you would expect from a metal surface. So we're gonna go through all of that in the next lesson. I'll see you there.