Non-Destructive Type, Textures, and Drawing Techniques in Illustrator

[Music] [Nathan Goldman] Hey, everyone. Hello. Hello.

I said this last year, oh, my gosh, this is the biggest room we've ever spoken to, and now that's true again. Thank you for coming. Yeah, thanks for spending your final moments of MAX with us. We're going to be talking about the way we work and some recent work. We're going to try to go quickly because we have a lot of ground to cover. Everything in this presentation can be found at our website, dkngstudios.com/max. We'll also have time for Q&A at the end.

But if you haven't seen us before, this is the part of the story where we embarrass ourselves a little bit. I'm Nathan Goldman. [Dan Kuhlken] I'm the guy with the dreadlocks. That's me, Dan. We're DKNG. NG, DK. We met in high school. We played in the band together. That was kind of our first creative collaboration.

And at that point, I was interested in graphic design. Dan was more of a fine artist. And this is what our collaboration looked like. We put our artwork side by side, but we didn't really start collaborating until we started working together more and more just really for fun making flyers and posters for our band. Our band name was Moss Macho, embarrassingly.

So these posters right here are not us. This is an artist named Scrojo and we're bringing it up because it was my first impression of this reality I didn't know existed that gig poster artists, that's a career that you can choose, like that's a job. My mom shared an article about his work and he exclusively made posters for one venue in Encinitas called The Belly Up, and I just kept that in the back of my head, I'm like, "If an opportunity arises, anything near that, let's go as far into that as we can." And that opportunity did arise. Nathan knew somebody at the Troubadour in LA and they gave us the lowdown that they had an artist that was making posters for them, but that person is now leaving and we're like, "Oh, okay. So what we should do, probably, is make some posters without their permission and just show them what we can do." It's a super small venue, but it brings in some really, really big talent. And so we looked at their roster and just looked at the week and just made three posters. And this is the three first posters we really ever made. Again, we're like figuring out our rhythm here. I fully drew the one on the left, Nathan fully designed the one on the right, and then we realized that we can combine our efforts and combine illustration and graphic design, with the one in the center. And that led to us making lots and lots of posters for the Troubadour. I think we made over 100 over the course of five years, and this was in our college days. Yeah, and that kind of led to what we still do today. Those were all digital posters for the Troubadour that we got printed at the local copy shop. But now a lot of what we do is screen printed posters, and even the digital work we do is inspired by this print medium. Here's a recent poster that we did for Dave Matthews Band. We're going to talk today about some work we've done for them. We've also gotten into the world of film and television and doing collector's edition stuff for movies, including this is our most recent one for Beetlejuice, which is coming out later this month.

And then we also get hired a lot for corporate and commercial work, so branding, packaging, brand guidelines, things like that. A couple of things that we're especially proud of that we've been able to do recently are postage stamps for USPS. And then we actually met someone today who worked on this campaign with us for Hines last summer. We got to design sauce packets for all 50 states.

We also do just our own self-initiated work when we can, so art prints and things. And then we recently got into the world of digital downloads and making downloadable textures, graphic styles. We're going to explain a bit more about that later.

And one really, really common question that we get a lot, yes, we're just a two-person team and we wear a lot of different hats to make that happen. On the creative side, I'm more illustration and Nathan's more graphic design. We both art direct each other depending on the project, but this goes to show how many things we kind of have to do simultaneously.

And running the business also, there's a lot of boring stuff on the side. So up until maybe like a year ago, I was shipping everything and I decided to finally let that go. I realized that I am not the only one that can put a tube together and send it out in the mail. So now we have that, that's why there's an asterisk, but delegation is what is now helping us move along.

Okay. So that's our backstory. Now we're going to get into the nerdy content for today. So we work primarily in Illustrator, and more and more, we're trying to work in these nondestructive ways. We have clients that can be fickle, like everyone does, and change their mind. And we found that because we're just two people, we need to work as fast as we possibly can.

So to just talk about how we kick off projects, we're going to use this client as a case study, Clean Energy. They're a renewable natural gas company. They use waste from dairy farms to produce natural gas. So it's pretty cool, but also niche and complicated. So, they hired us to basically take the boring photography that they used to use to sell what they do and create an illustration style for them. So here's an explanation of that. [Woman] As a major producer of RNG, Clean Energy works with dairies across the country to capture their own farm methane emissions. Here's how it works. Cow manure is first collected and placed into a large tank called a digester. As the manure decomposes, the digester traps the methane preventing it from entering and damaging the atmosphere. It then gets processed and purified into RNG and drops into the interstate pipeline system for rapid distribution to clean energy fueling stations nationwide.

So boring stuff, but we're trying to bring some life to it in the form of illustration.

And this is an example of where we start. This is a sketch that that we make on the iPad. We used to do all pencil sketches, and then we realized there has to be a better way, especially for clients that can't really visualize something in black and white and how it'll end up in color. We try to get these sketches as tight as possible, and it also allows us to iterate a lot on these projects. So it's like they wanted to have grass in the cow's mouth. They wanted to potentially change the placement of the cow and the farmer. They said that guy looks too young. Maybe we need an older farmer, but we want him to be nose to nose with the cow. So this is like the final sketch that they signed off on and then the final vector illustration. So as you can see, once we got to that stage, not much changed, which was awesome that we could do all that troubleshooting in the sketch phase. But there's also times where we have to do that troubleshooting in the vector file, and that's why we try to keep things live and editable as possible. So this is what they used to do, this 3D, worm's eye view, but they wanted more of a wide view of their fleet to show the different types of vehicles that they service. But in this case, we ended up with this composition where they said, "We don't really want the garbage truck on the road. Maybe it should be at the station, shuffle things around, add elements." So, having all those things live and easily movable is what makes our job doable.

It all starts with our file hygiene and how we use artboards in Illustrator layering so we can draw on top of our sketch. Global colors are a huge time saver for us because we can change colors on the fly for everything in the file and then just getting all our guidelines and everything in there. So Dan's going to walk you through how we typically get our file set up. Yep. So everyone knows this look on Illustrator. It's pretty scary when you're like, okay, I have to start now. But we're going to show you how we get started and it's like getting your-- Everything set up is kind of the best way to feel like you can go as fast as possible once you're ready. So we size our artboards based off the sketch that we create.

Illustrator has the capability of placing linked imagery, so even if you're making changes to that sketch, you can make it and then automatically will update, which is nice. So this is us just placing that sketch in there. And then at this point, we really do want to think about our guidelines and how to measure things correctly. So it sounds counterproductive, but what I'm doing is basically drawing a perfect box over my artboard, using that as my guideline system, and bringing in guidelines with our rulers. Everyone mostly knows this. Another little trick that we do is we'll turn this box into a guideline itself. So you can change its margin and make a buffer for yourself. I'm going to reduce this down by 500 pixels on all sides, and you basically just click Command + 5 and that can turn into a guideline as well. This is super helpful to have something that's a bit more custom than a line. So this is where we start when it comes to getting things aligned, and we name our layers basically based off what's on it, and it's not what you think, it's just art and sketch. Sketch is always on the bottom, art is always on the top, and I'll tell you why we don't really use layers, but that'll be later. Next is basically getting your colors organized. You'll notice in a lot of our process videos, we have all these boxes of colors up top. This is basically how we work. It starts off with eye dropping our sketch just to get a general idea of how we're going to work, and before we just start drawing, we organize those colors into a folder and then we make sure that they're global colors. And this makes our workflow super easy because you can change that color and it will update not only fills but strokes, anything that uses that color, even if it's in a gradient or some sort of raster effect, rather than doing the whole, like, select same, whatever.

And I'll just declutter, make sure that the only thing I'm using is stuff that I need. So take out all the extra swatches. And then when it comes to layering, the sketch will bring down its opacity by targeting the layer, that's a little button next to its name, and the art layer also is going to be targeted in a very specific way. If I were to start drawing right on top of this, in that layer, it would basically just cover it. And you don't really want that, you want your sketch to be your guideline throughout the whole process. So what we do is we target the layer to be on multiply, and that way we can see through and see through to the sketch, but when you draw new elements in this entire layer, they're not multiplying on top of each other. It's just seen through to your sketch. So that's our basic starting point, but we find that's just getting that stuff ready, it makes it so we can hit the ground really smoothly. Yeah. From there, one of the tools we use most often is Pathfinder. As you can tell, a lot of our work is very geometric, and this is a lot of how the work starts chopping things up with Pathfinder. But one thing that's been huge is just the fact that you can now use Pathfinder in this live way and keep it fully editable. So here's a look at that.

A lot of our stuff, I think the best way probably to describe it, is just geometric, and everything we create starts in a very basic geometric shape kind of way, like even this bird, for example, is just a series of circles that have been chopped up, and we use Pathfinder in a very specific way where if I wanted to kind of create that Venn diagram look where I'm trying to get the intersection of these two, before I click that button, I'll hold down Option, and it gives me the option to move around those circles with the white arrow tool, and you can make micro adjustments and get it exactly where you want it to be. That, to be honest, was something that we just learned last year. But it's super helpful to have the flexibility.

So that's one basic thing with Pathfinder. Another thing would be the minus front technique, which is like chopping up shapes with more shapes. So to make that wing, for example, it would be drawing a circle and then turning that square sideways and then minus front that shape, and it basically only shows that wing portion. And again, if you click on Option before doing that, then you have the flexibility of moving things around. So like, a bird is for shapes kind of, but once you get to that point, you have the flexibility of making micro adjustments or whatever. Sometimes we'll just keep it live, but if you are happy with your result, then you can just expand it. So having the option of clicking Option in Pathfinder is a really easy tool to have that flexibility.

We mentioned that we don't use layers a ton, and that's actually because clipping masks are what we use most often as a way of keeping everything organized. A lot of our work is either at the minimalist end of the spectrum or hyper detailed. And for the really detailed work, it's helpful to contain layers of vector shapes, textures, multiple elements in clipping masks. So here is a look at how we use clipping masks.

So this tree is, again, like just a bunch of circles, but it's using clipping masks, which is basically just a bucket, like having shapes inside of shape. And the way we do that, there's a couple ways. The draw inside mode is a quick and easy way to start clipping mask. So this is basically what you would do, you would make a shape, make sure you're in draw inside mode, and as you draw on top of it, it automatically will place it inside that shape.

That is also a technique that we are using as of late. The old school way is to basically create a shape and then create whatever you're going to plan on putting inside that shape, place it behind it, and then grab both right click and make a clipping mask. The only problem is that you don't have a fill for your clipping mask, so one quick way to do that is to get your white arrow tool, click on a node, and then you can colorize that shape, or you can place a larger shape inside and place that in the back, but that's two ways to do the same thing, and you'll find with Illustrator, there's 80 ways to do one thing times 1,000. So, we're learning new techniques every single year, but that's kind of the basics of clipping masks. Yeah, it's always humbling to come to MAX and we show stuff and people are like, "There's a way better way to do what you're doing," and we're like, "Thank you for telling us that." Yeah. We're going to talk about that now. The pen tool is probably the tool in Illustrator that I find to be the most intimidating. It's like the most feeling like freehand drawing, and I'm coming to this more as a graphic designer. So some methods that we've learned with the pen tool is to start simple. I come from the world of font design and wanting perfect curves on everything. So starting with straight lines and then dragging the curves out of it, using orthogonal points, which is just making sure that your nodes are at the far east, west, north, south, of your shape to get the smoothest curves. We'll show a couple different rounded corner modes that we use and then, yeah, just this general idea of starting with basics and then building up from there makes it a little bit more approachable. I'm going to show you how we use the pencil. We don't use a tablet or anything like that. Believe it or not, everything we draw is on a trackpad. It's only because I learned how to draw on a laptop, and then I just made a bigger situation for myself. The way we draw is like stick figures in the beginning, and then it ends up being more finesse. So that tree trunk, for example, is just straight lines that end up being curved in the end. To show you how that looks in the beginning, it's not a pretty process. It's just like getting the pieces ready and then making adjustments from there. So this is like that wonky polygonal look, I'm trying to get some branches in there. I'm not really worried about it looking perfect because I haven't got to have the freedom to finesse it over and over again, and I'll play with different nodes, I'll move things around, maybe I'll make those branches a little lower, a little more realistic, but the rounded corner tool is where things get interesting. The default setting is absolute, which basically makes it look like fingertips, like perfect circles, and that's not really organic looking. There is one more mode called relative, and that is something we use a lot. It makes it more like the edge of a paintbrush, something a little bit more organic looking. And we'll just continue to round stuff until it starts to look a little bit more organic, a little bit less geometric. And this is quick and dirty, but you can see how much it transforms just by playing around with rounding alone. But there's other tools. Again, this is something we just learned, I think, like, last week, or maybe actually in the process of making this video. The curvature tool is super handy. I wanted to make these spots on these cows, and they're not exactly geometric. They're kind of amoebic. They're really flowy, they're really smooth. So I would say my first attempt would be something like this, making that boxy shape and then rounding the corners. But it still has that stiff look, but the curvature tool is pretty awesome because what that does is it curves it based off of its neighboring nodes and what they're doing. So if you get the curvature tool and you double-click on those nodes, it'll automatically decide on how it's going to be rounded based off its neighbors. And if you get all of it, then it's like, "oh, well, that's what I was going for. That was super easy." But then at that point, we can micro adjust and customize and stuff like that. But you can see how something ends up super organic, but it doesn't start that way.

One nice thing about keeping this all very live is that it was easy for us to hand this art off to our animation partner, Down the Street Design. They do a lot of animation work with us, and they're super talented guys. So for one other piece of this project, we handed over a bunch of illustrations to them for them to use as a style guide, and then they ran with our illustration style and put together this video. I think that counts. [Man] Reducing carbon emissions is a critical effort across the globe. One company is leading those efforts, replacing diesel with renewable natural gas or RNG. And fleets from heavy duty trucks to city buses to waste collection vehicles. That company is Clean Energy. RNG isn't fossil fuel. It's made from organic waste sourced from landfills and dairy farms, which account for nearly a quarter of methane emissions in the US. RNG reduces carbon both at the source and on the road, making it one of the only fuels that can achieve a negative carbon intensity rate. That means it avoids more emissions than it generates. As the largest provider of RNG for the transportation industry in North America, Clean Energy has become the category expert. We've built a network of over 600 natural gas fueling stations nationwide to help our customers meet their sustainability goals.

And we continue to develop RNG production facilities at dairy farms across the US, allowing us to create and monetize environmental credits with our ultra-clean, decarbonizing fuel because in the end, renewable natural gas means better business and a healthier planet.

Clean Energy, shifting carbon into reverse.

Okay, we're not going to talk about cow manure anymore. Now for the type part of the presentation. So yeah, we talked a lot about Illustration so far, but a lot of our work is really fusing lettering or type design with Illustration. And we pride ourselves on wanting it to all feel super cohesive. We don't want to feel like text is just tacked on at the end. So we work with lettering and type in a lot of different ways. One is this example where the phish lettering is just custom drawn into the antlers of this deer. Another way we work with fonts is just using fonts right out of the box, but stylizing them in a way that's either three-dimensional or placing them into a scene. And then we also customize them by pushing and pulling and actually outlining the fonts and modifying the lettering for our purpose. So here's a look at a recent Dave Matthews poster that we did for them at Madison Square Garden last year. And this is one that's slightly more destructive, but we did want to show all the different ways that we work in Illustrator. So this custom lettering of the band name started life as a font, as avant garde. And one nice thing about a font like this is it does have a lot of alternate characters available. So before we go into outline mode, I like to see how much customization can I do while the text is still live. So here, just starting to look for alternate characters that are in there that might kind of flow with this particular combination of letters. And another thing we do a lot is just mess with the tracking and sometimes tightening things up quite a bit will reveal some interesting collisions of how the letters are interacting with each other. But from there, we'll make a copy of this just so we always have the original to reference back to and then convert this to outlines. And then from there we can just start working with it as we would with vector illustration. One thing that we did with this poster and this lettering was just to look at the waistline, so the cross bars of letters like H and E and B and A. And for these, 90 degree letters, it's really easy just to move those around. And just by changing that waistline, it gives the font a whole new personality. We also extended those crossbars out in places to help fill in some of the negative space. And again, just like customize this as much as we can. But one area that got a little bit more complex was this intersection of the N and the D, which one way to do this is with the Intertwine tool. But in this case, we also wanted this shadow and highlight depth going on. So yeah, I went against our own rules and did some slightly more destructive design here. So to make this, I just put a stroke on these letters. And by having it the stroke is in white there. You just can't really see it, but it'll make sense as I chop this up, again, using the Pathfinder tool, first expanding this and then using Pathfinder to divide it. And then that gives me all these puzzle pieces to play with. And whether I colorize them dark or light will reveal the shadows and highlights. And depending on which combination you do, you create this intertwined overlapping shadow technique. So a few ways that we try to approach this. And typically when we're working on a gig poster like this, I'll be working on the type while Dan is working on the illustration. We'll keep dropping things into each other's files to collaborate the whole way along the way.

More recently, though, to bring it back to keeping things live and fully editable, we've gotten to do some of these tour posters for the band. And oftentimes, there's maybe 50 or more different tour dates, and they could be all changing up until the tour starts. So we need this to be more editable. And we're always looking for ways to incorporate a bunch of different little signs or stickers or some way to not just put a big block of all the tour dates. So we found a bunch of imagery on Adobe Stock inspired by old fueling stations and our first time dipping our toes into retype, this beta tool in Illustrator. So this is the sketch of where this poster started and then the final, and you can see all the tour dates in there.

So, yeah, I just wanted to show a few ways that we've started to find retype helpful.

So in this case, as far as just like researching what types of fonts we want to use for a project, we started looking at Stock imagery of photos of old signage.

Then retype can be found in the Type menu or the Window menu. And it gives you a couple options to either match fonts the way you would do in a online font matching service. It's kind of cool that now it's just right inside Illustrator, and it'll automatically find the lettering within the image. And one thing that's cool about the fact that this is still beta is that it's only going to get better, because right now, you have the option to pull these fonts from either all of Adobe fonts as well as your system. So the more fonts you have on your system, the more accurate this can get.

So it found some pretty close matches here. And that's funny. I saw you were sending me some Slack messages about this while we were doing it. Yeah. Done yet? But yeah, it'll also once you activate that was an Adobe font that I picked for this one, so it'll activate the fonts and then you can actually get into the editing part of it where you click into this and it'll do its best to match the color as it converts it into the live font. And then once you exit out of the retype tool, that's when you can actually start going in here and typing. So in this case, we weren't actually trying to replace this sign, more just getting a sense of what fonts we might want to use for this project. But there's other ways that we found it helpful too. Of course, we try to keep everything live so we always know what fonts we have used. But obviously, we've made the mistake as well that we outline a font, and then we can't figure out what it is. So this is an example of if we had finished this poster completely and wanted to go back and had to change a tour date, for example, we could use the same thing on text vector text that's already been outlined and figure out what font that is. So here, again, we can select that. It'll figure out all the text elements there, and then we can, again, activate a font to convert this vector outline shape back into a working font. So then once we exit out of the tool again, now we could edit this tour date if we need to. So yeah, that's like how we've messed around with retype so far, and I think we'll continue to explore that. Here's some of the final lettering on that ended up on the actual poster.

We're going to be talking about graphic styles a lot in the next half of this. And for those of you that aren't aware of what a graphic style is, we'll explain it, but they're pretty magical once you figure it out. We did a case study to explain how to do it, and we're using our horizon series to show that. Our horizon series is like dipping of our toes into the world of minimal art. We made a challenge for ourselves to try to make as much as possible with as little as possible. So we're like, okay, if we just want to have a beach scene or a mountain scene or a desert road, can we do that with five shapes or something like that? And we call it horizons because they share the same horizon line and they look really good next to each other, I think. But what we're going to do is we're going to jump into using this art as a case study to show you how graphic styles work. Yeah, so we looked at this idea of what if we turn these into travel posters or postcard style, nostalgic, images and discovering along the way that we can do all this stuff in the Appearance Window in Illustrator. It's a really powerful way to apply a bunch of different looks, including strokes and effects and fixing fonts that have overlap issues and also saving these graphic styles so we can just on one click apply it to everything in a file rather than having to painstakingly go from image to image.

So here's a look at how we did that. For all this lettering in the Appearance Window, you'll see that we just stacked a bunch of different fills and strokes on top of each other. And then you can start using some of the effects in here to have some fun with it. So the reason why we have fills layered on top of each other is we can offset the path, and that'll reveal the fill that's underneath it. And then we can use transform, which is also in the Appearance panel, to move that out off to the side a bit and create this illusion of 3D. And because this is all live, again, we can use Pathfinder. If with the script font, it had some overlap issues, we're able to clean those up, and then you just drag it into the graphic styles window. And now we can select any other, all our other location names on here, click that graphic style, and it's done. So it's a pretty powerful way to work quickly if you're doing a huge suite of signage or something. And here, I'm also just updating that style, and it's going to modify everything in the file as well. So it's super powerful, and we were inspired by it by putting that together for MAX. So then we're like, maybe we can actually just start making our own graphic styles that people can use. So we call this a live because, again, this is all based on live text, and this is basically what this digital download is. It's 12 pages with full instructions and explanation on how these are all created, so you can also modify them and change them on their own.

And you can see it working in action here. Just type in something out. If you have your graphic styles open, you can just click on any of those styles and it just will instantaneously be stylized. And what's cool about all these is that you have the option of editing them to your liking. So it's a starting point for you, and we're going to show you how what this document looks like and how it works. The front page, the first art board is just featuring all nine styles, but it's basically a huge 12-page artboard document and each page is doing a little bit of something different. So the first couple pages are more about instructional stuff to get you started, and then the rest of them are about the individual styles and how you can edit those styles or how you can at least understand them.

This page is more about sizing and getting your settings set up so everything goes really smooth. The next page after that is like the sandbox, where you can have a lot of fun and play. So we have live text here just sitting there waiting to be stylized. You can go ahead and just click on one of them and if you have your Graphic Styles window open, click on the Associated Style to see it like instantaneously turn into that style, which is pretty cool. And I'm just going to go ahead and quickly just go through the neon one and the Kapow one, but just to reemphasize that this is all live, what's cool is that you can change the word if you want and you have all this flexibility.

You can change the font, maybe I want this to look a little bit more blocky, and everything's just completely editable, and it's all living inside the Appearance Window.

What's cool about some of them is that they are meant to grow, so that sunburst thing in the background is actually part of it, and it will grow with the length of your text. And the Appearance Window is where you would see the nuts and bolts. So this is where you can have fun with your own stylization of these, is that it starts this way, but you can have the option of turning on and off the half tone, you can make the dots smaller, bigger, whatever you'd like, and you can change colors. So the fills, the strokes, just to kind of quickly show you all the things that are completely up to you if you want to change it. But you can see if there's an option for it, there's a way to customize it. And then all the other pages we're calling anatomy pages. It's basically just like all the styles with little arrows pointing to this is how you change this part, this is how you change this part. We use the 3D tools in Illustrator to create a couple of them. So float and maze are pretty highly rendered graphic styles. Other ones look photogenic, but they're actually a series of strokes. So, like, neon, for example, is only the outline of a font, but we also added those little breakers to make it look like actual neon.

Rev is fun, everyone wants to know how to make Chrome, and now we can just like click a button, you get the Chrome look. It's essentially a series of gradients, and they're layered in a specific way to make it look that way, but you can also update the gradient. You can see how you would do that by expanding your gradient tool. So that's like a sneak peek of what it looks like, and just to emphasize how live it is. I'm particularly very excited about that sunburst because when I figured it out, I'm like, "Oh, great. It moves with the text." So, yeah. All of it's just completely editable and very easy to use, hopefully. Yeah. So the idea is that you can, like, either use the ones that we've created, but it's also meant to be a learning tool that you can see how powerful the Appearance Window is and just keep adding and adding effects to it, and keep everything live. And on that note, we also work a lot with texture, and we reach the same crossroads of things that are destructive that we can't really edit is just making our life more difficult. So this is an example of an older gig poster that we did for the Black Keys. And as you can see, it just has a bunch of placed imagery in it. In this case, a bunch of transparent TIFF files. And it works. It's like we put them in clipping masks, we layer them in the file, but it gets tedious having so many linked images in there. So these days we've been working a lot more with native textures in Illustrator, and we really love old vintage rock posters. And a lot of them were made with this mezzo tint style rather than just like a really clean half tone dot. It's this wormy, almost sandy texture that we really love. So we created another digital download called Mezzo, which is basically using the raster effects in Illustrator to create live textures. So as you can see here, similar to the graphic styles, this is completely live and editable. You can apply it to live text. It also has transparency so you can layer things in interesting ways. And you can also choose the density level of it. So you could have just super dense texture or just a slight amount. And in addition to flat shapes, you can also use it in gradients, whether those are linear like this or radial gradient, and you can also apply it to strokes. So here, we'll use it as shadows and highlights, to make things look 3D.

So we'll take a quick look at the how we use these live textures in Illustrator. And the biggest real test that we had of these was for this project we just did for Hershey. They created this interactive experience called the Super Sweet Adventure. It actually just opened in Chicago last week, so you can go see this in person now and eventually, they'll be traveling.

But we got to work on the branding for this, created the logo, the key art that you see here, and this whole series of iconography that's used all throughout the installation. So this is the facade of the building in Chicago, and there's tons of texture there. And also basically every surface inside is covered in this texture. So yeah, it was a little nerve-wracking. That was the first time we're really putting this through its paces and seeing if it worked, but it did. So we're proud that it worked out, and this is how we work on that. So this is a look at the final logo and you can see that there's a very subtle sandy texture in its background and we're using our mezzo texture pack to do that. And just to explain what mezzo is, it's a series of settings that live within Illustrator that we customized and turned them into graphic styles. So the way we do this is using the opacity mask. So if you want to texturize, let's say, the background, we copy it a couple times. The one on top is the one that we'll apply this texture to. It turns it into like a black and white look. So this is just a flat texture, just like white and black dots, but then we'll bring that shape on top of the colored shape that we're planning on customizing and make a mask. And that allows us to actually use the color of the shape while also using the texture. So they're in sync with each other and you can also customize your color from there. So once you have it masked, then the real fun happens. You can throw it on top of the original shape and you have this light brown and dark brown look combining. But what's interesting about this is that it is completely live. So you can go back into your opacity mask, that little right window in there, and notice that it's basically just a 50% gray. It's just a shape, it's a vector shape, but you can customize the color of that to be a lighter of gray, if you want to have more like a denser look or you can make it darker to have more of a sparse look. And then you can see all the micro adjustments are there. So you like land somewhere in the middle, like 65%, just be like, that's the perfect amount of sand. So that's flat textures. It gets really interesting when you get into gradient textures because that's when you can do stuff that looks a little bit more three-dimensional. The Jolly Ranchers that we created for them are using gradient textures because Jolly Ranchers have a little bit of rounding to them, and we wanted to have the right shading. So in this demo, it's more about showing how we're going to texturize just the candy portion. This little illustration is a series of clipping masks, so the candy itself is like a little rounded box that's holding the highlights and shadows. So in this case, I'm going to draw the color that I plan on texturizing, and making sure it's a little bit bigger so it can live inside that clipping mask, double it up, have one on top, and then I'm going to apply the mezzo gradient selection, and it turns it into that black and white image that has that nice smooth gradient, and then do the same thing. This is where we turn it into an opacity mask and then you can actually start colorizing. So after this point, you can see that whatever is black disappears, anything that's white is what you've visually seen, hence the pinhole look. Now we have a texture happening here that we have this dark texture on top of this green background, and I'm placing it inside that clipping mask, so it is with the other one that we started there. And again this is all live, so you can go into your transparency window and adjust the gradient itself. So you can change its orientation, you can also change how the gradient is built with its handles. So if you use the gradient tool this way, it's an easy way to show that it completely changes on the fly. So nothing is permanent. It's just you can play around with it and get the look that you're going for all using vector shapes. Luckily, neither of us have much of a sweet tooth because we've just been staring at candy for the last few months, so this would have been torture. Yeah. Lastly, the mezzo toolkit uses gradient strokes, so you can give a gradient to a stroke and we figured, well, that would be really useful for around corners, where you actually need to have a shading kind of do a very specific turn, so you can't really do that with gradients that are just flat or flat textures, you're going to have to do something a little more custom. So this is how we would texturize, let's say, like a corner piece. So we start off with a shape that's going to be the color that we're planning on using, making it larger so it can fit inside this clipping mask, and then we're also going to texturize a stroke. So that's just basically an L shape that we created, so a red stroke, but by clicking the graphic style, it's turning it into a stroke that has these tapered edges. I'm going to square it off just for the sake of getting it in there to look somewhat geometric like the tube, and we do the same thing, make a mask, and then we throw it into our illustration, but you can see how the gradient is being involved here. It's turning into like an L shape right now because it's part of a stroke. So once we get it in there, that's when we can start customizing.

And you can see it's not quite rounding like the tube, so once you go into your opacity mask, you can play around with that stroke that's creating that texture and round it. And this is a quick and easy way to show you how this texture can round around things, but you can do it with the pen tool. Basically, any way you would use a normal brush, this is how this would be customized as well. So you can see I'm adjusting the gradient to kind of get it to where I want it to be. So yeah, that's basically mezzo in a nutshell.

And yeah, if you're in Chicago, go check this out. And with that, we are about done for today.

Thank you.

[Music]

In-Person On-Demand Session

Non-Destructive Type, Textures, and Drawing Techniques in Illustrator - S6330

Sign in
ON DEMAND

Closed captions in English will be added in early November.

Share this page

Speakers

Featured Products

Session Resources

Sign in to download session resources

About the Session

Technical Level: Intermediate

At DKNG Studios, the work of design and illustration duo Dan Kuhlken and Nathan Goldman hinges on the ability to work quickly and efficiently in Illustrator. This applies to both the initial creation of a project and all the iterations and changes along the way — from their own internal revisions to change requests from their clients. 

In this session, Dan and Nathan will explore how they:

  • Keep Illustrator content live and editable through every stage of a project
  • Natively build textures in Illustrator
  • Revise custom, unexpanded type on the fly
  • Intuitively build shape-based illustrations

Technical Level: Intermediate

Category: Inspiration

Track: Graphic Design and Illustration

Audience: Art/Creative Director, Graphic Designer, Print Designer, Web Designer, Illustrator

This content is copyrighted by Adobe Inc. Any recording and posting of this content is strictly prohibited.


By accessing resources linked on this page ("Session Resources"), you agree that 1. Resources are Sample Files per our Terms of Use and 2. you will use Session Resources solely as directed by the applicable speaker.

Not sure which apps are best for you?

Take a minute. We’ll help you figure it out.