Develop a Custom Logotype: Tweaking Existing Typefaces

1. Trailer / Intro: Hello and welcome to my second skill share class called develop a custom logotype, tweaking existing typefaces. My name is Scott Biersack, I'm a freelance illustrator and a designer with a large focus in lettering and type design. Within this class, you're going to be creating your very own custom logo type beginning with already existing typefaces that you probably have on your computer, and then next we will discuss the ins and outs of Adobe Illustrator techniques to create shadows and inlines, beveled letter forms, altering baselines, textures, and more. Additionally, we will understand how to select and pair your logo type with a secondary typeface, and then finally, we will discuss the creation of secondary brand elements to utilize across various brand materials. This class is an addition to my first-class titled drawing, custom lettering concept to final vector and beyond. Feel free to check that out if you feel so inclined as well. In the next video, we'll discuss the materials and supplies that you'll need, as well as the overall project goals. I'll see you there. 2. Project Description / Supplies: Now, we are ready to get started. Let's discuss the three deliverables that you'll have at the end of the class. By the end of the class, you're going to have one finalized vector logo type lock-up, like you see here, a secondary brand asset, and then lastly, you're going to have a final mock-up or a method to present your logo type. Throughout this class, we'll be doing just about everything on the computer. We're going to be utilizing Adobe Illustrator and, of course, Adobe Photoshop as well. All you need is a copy of both of those: CS6, Creative Cloud, whatever version doesn't matter, and that's it. Get your Adobe programs up and running, and I will see you in the next video. 3. Surfing the Web / Watching Netflix: Welcome to the research portion of this class. This is the most important part of the project in my opinion, because it will really allow you to understand what you're about to create. At this point, I would figure out who or what you're creating a logo for. For me, I'm going to be creating a logo type for a whiskey. This whiskey brand isn't a real client. It's definitely a passion project I created to help get me a job, but it doesn't have to be real. You can totally make something up. In my case, I'm a little obsessed with the show Hell on Wheels. It's definitely on Netflix. I wanted to drive this brand around the 1860s time period that this show is based in. Naturally, I began my research by watching every season of Hell on Wheels multiple times, and I wrote down words or phrases, places, things, etc, anything and everything that I thought I might need later on. The show is based on historical events, which is great but then I continued my research reading through various websites or even going to the Union Pacific Railroad website, which has a wonderful amount of inspiration and tons of quality stuff too, like this is legit, historical information I could utilize for this project. Another great thing to do is just obviously do a quick Google search of the 1860s, maybe advertising. Anything that might have some types, some illustrations, just some inspiration to get you started in the right direction. What I would do is gather all of those resources and put them into a mood board folder. You can see what I've done here is gathered all my stuff and even taken screenshots of episodes from the Hell on Wheels show. Just things to possibly guide you when you're going through this design process. But with a time period such as the late 1800s, it's also a good idea to physically go to an antique store to find the maps and the signage, and all that stuff from that time period because those things still exist. You just have to obviously go searching for them. I went to many stores, but sadly, that thing can be expensive. It depends on what you're looking for. If it is and you don't want to buy it, no worries. Just take a photo of it and you can probably reference it later on. Another great resource that I utilize all the time is Lettering Library by Jason Carne. He collects a ton of really old books that are definitely out of print, and it's just another great source of inspiration. I would definitely look into that as well. Gather all of those images to create a mood board and put them all into a folder. Even if you think you might not use it, it's always good to have more than enough because you can reference little things such as this border on the stamp or the stars and how these things are laid out on these coins, just those little details. Once you have all your research completed, we're going to begin working in Illustrator. So I will see you in the next video when we begin concepting after we take all these sources of inspiration and comprise it into a final logo type. 4. Concepting Within Illustrator: Now, we're ready to begin this logo type process within Illustrator, so open up a document. You could do 8 ½ by 11. It doesn't really matter what size the document is, but you should be aware of the final outcome of this logo type so if you're placing it on something relatively small like a website, then you probably want to work at that size. That way you understand what your letter forms look like at that scale because you could create something really huge and then it won't be as readable when you scale it down to something meant for a website. Work in whatever size that you think might be best for the end result. For me, it's going to be on a bottle so a relatively larger size is necessary. I will begin with just this, let's say 3 by 10. It doesn't really matter because I will be scaling it a little bit, not so much from this size. From here, I generally, start by typing out whatever word this logo type may say. For this brand, it will be called Outlaw Whiskey. I'm trying to play off the Hell on Wheels references here. I generally, start by typing out the word and then selecting the drop-down for all your typefaces and then just using the arrow keys on your keyboard, you can quickly go through all your typefaces and see what might be ideal. I ended up landing on Bourbon which is a typeface by Mattox Shuler, great, great quality from Mattox all the time, highly recommend his typefaces. Bourbon was perfect for this look and feel that I was going for. If we reference some of the mood board, you can see a lot of the slab serifs in the reference material. With that said, I generally start with finding the perfect typeface. If you don't have that perfect typeface, one thing I recommend is going to myfonts.com/WhatTheFont, which is essentially a great way to find typefaces in a style that you may be looking for. For example, let's say you're looking for this proprietor-looking typeface in the stamp. What I would generally do is you can open up your reference image in Photoshop, and the way that WhatTheFont works is you have to get rid of all the other clutter. Obviously, this stamp has tons of things going on, so I'm going to crop it to the word that we want to select, then we're just going to save it, save it for web, sure, save it to the desktop. Once you have that cropped you can then choose that file to upload to WhatTheFont. If it is clear enough, WhatTheFont will be able to detect those letter forms. It looks like it's detecting just about everything. That is an O, not a zero. P-R-I, sometimes you have to type in your letters because sometimes it doesn't recognize it, and then press "Continue". Then MyFonts will spit out a bunch of typefaces that they have for sale on their website that are relatively close to the image that you uploaded. It's a really great resource to try and find something along the lines of what you're looking for. This one from Turnpike looks pretty close to what we uploaded. The only main difference I see is there's a shorter crossbar in this E. This one's relatively long. That's about it. Everything looks pretty good. Then you can click on it. If that's what you're looking for, you could just buy and then use it for your project. I highly recommend it. I use this all the time. Sometimes it doesn't work and that's okay. You just have to find the right image to upload. For me, this was just a little two angular. I went through this process. I will show you exactly the little details that I changed from the existing typeface to make it more custom, more unique, more appropriate for my project. I really wanted to include some gravestone looking feature within the typeface. I was also trying out a stencil look just to see what it would look like. Obviously, it was not working here. It was not looking too good. You can see throughout this process that I'm trying to close up this giant negative space that the LA is creating. I was nudging that over, lifting up the stem of the A by trying to bring that closer, but then this gravestone look was creating more negative space. Through this trial and error, I keep copying over the art boards by pressing "Option" and dragging over. You can copy your art board. That way, I have a process, I have my history of the steps I took to get from point A to point B. But this took a good amount of steps just to get to the end goal. But I will show you exactly everything that I did to get to that end goal. I'm still trying to make this work. I'm really trying to force it. It still is not working because this positive space is just consuming everything, and then there's a massive amount of negative space there, so it's just a giant hole. Ended up going all the way back up, trying to fill up that negative space still with a base to this gravestone, and then even connecting the L and A to create a ligature. It is working a little bit better. I even began just tracking out the entire logo type to allow more space within each of these letter forms so that it's not as tight as it used to be, and that one negative space isn't as apparent when everything else is spaced out. I'm still trying to make this work throughout this entire process by extending it up, extending it down, making it bold, increasing the weight, decreasing the weight. I am even including some of these features of the typeface within this gravestone, trying to make everything a little bit more cohesive. I even tried to just bringing the entire T above everything. It was working somewhat but it doesn't read as a gravestone anymore as well as the shorter arms do. Then through this process, I felt it was necessary to equalize everything a little bit more. I wanted everything to feel very similar with no diagonals, everything just straight up and down. What I did was, I took the shape of the U or the O and essentially flipped it upside down. I did a lot more than just flipping it upside down because you need to make everything feel cohesive along with everything else. But that is essentially the start of it. By utilizing this similar shape, I was able to create the A. You can see how it's relatively similar created a crossbar, and then even did the exact same thing to create the W. But this is, obviously, not the final because I still had a lot of spacing to do and I was still trying to figure out. This W felt too condensed. Everything wasn't still working but it was working much better than it was before with a diagonal A and W letter forms. I was definitely liking where it was going, still trying more of these. I'm just iterating after iteration after iteration to try and find what is working best. I think slowly I was starting to get it with these new letter forms that I was developing. Through this entire process, I even tried rounding off some of these corners but that wasn't working too well because there's no other rounds taking place within this logo type, so it just wouldn't make sense to round everything. Then long story short, I'll speed this up for you guys. I'm still trying to make this thing work. This looks more like a sword in the stone thing so it wasn't working too well. Continued with that process until we finally ended up with where we are here. Overall, I think it's definitely working so much better than what I was starting with at the very beginning. I can compare and bring this over. It's just like a night and day difference. This took me a good amount of time to totally find out how to make this work. But at the end of the day, it's totally worth going through all this iteration to find that final end goal. 5. Illustrator Techniques: Now we have our logo type complete. I just wanted to show you guys a couple Illustrator techniques that you might find useful. We're not going to spend too much time on this but I do want to show you just a couple little things to bring your logo type to that next stage. For example, if we want to create some drop shadow like I have right here, for something such as that, my process is to select your logo type Option click, and drag into the direction that you want to create your drop shadow, then next you will change the color because it'll be easier to see this, and then we're going to press Command D to do that one more time, change the color again, and then we're going to send those two new layers to the back by pressing Command and the left bracket. Do that once more, and the easiest part about this is to select the middle layer, make sure it's a compound path by pressing Command 8, and then select the back layer. Have them both selected at the same time, and you're going to use your Pathfinder, subtract the front, and there you have it, you have your drop shadow. That's exactly how I produced the one that you saw before, and then you can change the value, so it's a little bit push back. Something quick, something fast, and there's a million ways to do one thing, but I find that this method is the easiest for me. There will be some minor cleanup, you might have to go in and see how there's thin lines scattered around. You might need to break those lines and then clean up your drop shadow in the process, but I find that to be the cleanest and easiest way to create something like that. Next would be some inline, something along the lines of what I did here in this piece, these cutting edges into the letter forms. How I do that would be to draw a thin line, any color will do, but you can tell with this white background it's easy to see where that subtraction will take place, and then you're going to change the variable width profile. I'm using CS6 so you can't see the variable width profiles that I have here, but I have memorized that the top one is the option we are going to want to go for, and your versions, I'm sure you'll be able to see what the lines will end up looking like. I think I need to update my CS6 or something because that's obviously something that should not be happening. But that will create the effect you're going for. Then you're going to Option click and drag and apply that to the rest of your logo type. This definitely isn't working for this logo type here, but who knows? Maybe it'll be useful for your logo type in the future. Another technique to show you is some beveling effect that you might want to achieve. I'm going to do this real quickly so you aren't bored out of your mind watching this, but essentially what I'm doing here is creating an inline, essentially the same shape that we have in this O, but the center of the letter form. I mean, what we're doing here is creating the beveling effect manually. I don't know if there's a better way to do this, if there is, please let me know because this does take a bit of time, it's not an easy process. But once you do complete this beveling effect, it does look pretty good. You're going to select all your strokes, with all of them selected, you're going to want to make sure that you have no fill, no stroke on them. With all of those selected and the letter forms selected as well, you're going to use your Pathfinder again, and you're going to click the Divide option, and that will divide all those strokes from your letter form below. Now you can go in and change the values or the colors, it just depends on how you want to go about creating this beveled effect, but you just need to obviously make sure your light sources consistent, so if the light source is coming in from the top left, then this would be the same color and this would be the same color. Then this might be just a bit darker, a bit darker than what we have up above, something such as that maybe. From here it's just a matter of selecting the colors you want to use. Then obviously you could go along the rest of the logo type and do the exact same process. Next thing I want to quickly talk about is altering your baselines. Real quick easy way to alter your baseline would be to use your Effects panel. Definitely like warping stuff can be useful, but if you warp it too much things just look a little wonky. For example, if you go too far into this spectrum, it's just going to distort your letter form and you don't want to do that. I think you can get away with it if you stick around. Anything below 20 percent is looking good in my eyes, stuff like this could be useful for your logotype lockup. Another way to achieve that would be to maybe you draw a circle or a giant oval and then you can type on a path. You'll use your type tool, type on a path tool, you can click, and then type in corn liquor, whatever that wording may be. I see this is upside down and it's not the right typeface, let's select the right typeface there, and that's still upside down so you go into your Type menu, Type on a Path, you're going to go to your Type on a Path options. I always turn on the previous so you can see exactly what you're doing. You're going to flip it, so now it's on the inside, then it's just a matter of selecting these movement points, I guess you could call them, and opening that up. Same effect but it looks a bit cleaner because it's on a path and you're not warping the type. Altering your baseline is one of those things that's incredibly useful especially if you're trying to put type on into some weird-looking positioning. For example, if you have a let's say you warp this to a zigzag line, you can preview it. Maybe it's something crazy like that. Then let's say I expand it, and use the same Type on a Path tool, click on it, type in whiskey corn liquor, something you probably don't want to do with your logo type, but I'm just trying to show you guys that you can literally put type on almost anything. Real quickly, I want to show you guys texture for something such as this. Let's say I want to subtract this texture from my logo type so that the texture shows through. You can see it quickly, if I change the texture to a white color and then bring it to the front so you can see what it would look like and that's not looking too bad. I don't know if it's perfect for this project, but I just want to show you guys how I would go about applying a texture. With your texture selected, press Command 8 to make it a compound path, have your logo type selected, press Command 8 as well to make that a compound path. Then with both of them selected now, we're going to use our Pathfinder again minus the front, and it'll take that texture and subtract it from our logo type. You can see that if I put a rectangle behind it and then I change the color, that texture shows through. All right. Hopefully, those techniques were certainly helpful for your logo type process, some of them are going to work, some of them aren't going to work for your logo type, it just depends on the look and feel that you are going for. I know that was done pretty quickly, so if you guys have any questions at all, feel free to reach out in the community section and I will get back to you. 6. Understanding Type Pairing: Understanding how to pair your type is definitely a difficult process. No matter what your skill level is, it's understanding a large variety of things, but ultimately going with your gut decision at times, I still have troubles pairing type. It's just a lengthy process, especially when you don't have that one perfect typeface that would suit your project better than what you already have downloaded on your computer. Things you should be aware of when you're pairing your type is the time period. Knowing when the typeface was made and the time period it's trying to be in. The next thing would be history. That goes along with time period, but understanding where that typeface might have been used in our past. Maybe it's like 1970's Germany or maybe it's 1800's Mexico. Next one would be proportions. Comparing the X heights or the cap heights, the ascenders and descenders, all those little characteristics about the type. If the proportions are similar, the typefaces will generally pair well together. Next is weight. Do the typefaces you're pairing have the same thick to thin ratio? Do they have the same color? By color, I mean the balance between the positive and the negative space. Form, would be next. Knowing how the letter forms might have been constructed. Do they originate from a pointed pen, maybe a brush or does it have calligraphic roots? If the typefaces were created in the same manner, they would probably pair well together. Next, an obvious thing might be serifs. But does the typeface have serifs or no serifs? Are they pointed? Are they squared? Are they concave? Just look into those details to make sure your type pairings have similar serif characteristics as well. The last thing to pay attention to is the scale. The size of the word, or words you're pairing together. Sometimes a small variation in scale can allow your type to work better together. In web design, you have your H1, your H2, H3, whatever, which is essentially the hierarchy of headings sizes. Hierarchy allows your type two pair well together as well. Taking a look at the type pairings that I already have. I started out with a script but realized it wasn't really readable. Also, when zoomed in, you can see these lines that are being stretched across. I assume that is from the designer of the typeface, something is wrong with the file and how some of these letter forms might have been constructed or some of them might not be closed off, which are creating these like streaks. That was just another thing I didn't want to deal with. Even though I was trying to go for this handwritten feel, which is definitely appearing in a lot of the mood board things that I was piecing together. It just wasn't working for this brand. I ended up going with a more condensed face. Has similar way and a similar form, has no serifs, which is great because then it doesn't compete with the logo type, up top, and then the words corn liquor pair pretty well because of the time period and the proportions, the weight, the serifs. Everything feels like it's working together, as compared to the script that I had below. This took some time to find the right typefaces. Again, I use the WhatTheFont feature on fonts.com. If you're not finding that perfect type pairing, it's just a matter of finding the perfect typeface. It's going to take some time no matter what. It's all a balance. You'll get the hang of it with some practice, and you'll get faster each time. But if you have any questions regarding sparing type, I know it's always difficult, feel free to ask. I'm more than happy to help you guys out with that. Now let's move on to the next section where we will be creating our secondary brand element. 7. Creating Secondary Brand Elements: Welcome to the next section. In this video we will be discussing the secondary brand elements. The next step to developing this brand even further would be to create some secondary element or a mark. Maybe it's a crest or an icon set, a pattern, a monogram, an illustration. It just depends on what your end goal is and what your brand is currently. The list goes on and on, maybe it's all the above. Whatever you decide, just make sure it coincides with your existing logo type that you created. In my case, I'm going to develop a crest to be utilized on business cards and signage and coasters, and wherever else the crest could go. Begin by referencing that mood board that you piece together. Finding the typefaces or styling of maybe it's the lines that we have going on in these borders. I really like to have this, crest looking thing was actually made out of a belt it appears. It broke that normal tradition of just like a regular circular crest. It's still an oval, but it's made out of a belt rather than just a plain old circle. Just little details like that can come along way and make your brand stand out. With the crest that I designed, I knew I wanted to incorporate the time period, of course. Things like the railroad track which I have going on here, and a bullet chamber, which you can see through this process, it just has those subtle cues that relate back to the show and hell on wheels as a whole. This crest definitely took me days to develop in it. It's not a very easy process because it's a lot of trial and error, just like everything else. But I can show you the general process that this went through. It began with obviously just a circle and laying out my type. This is the secondary type that I utilized with the logo type. I knew that would pair well with this crest because it has that 1860s time period to it. Through this process, I began adding the details. Started out without all this stuff. It started out with this and it felt too like sheriff's badge. I added in some more details to the inside of the crest as well as the outside. But it still had that sort of Western feel. Moving forward, trying to break the space with these flourishes, but that wasn't really working the way I wanted it to. Through this process, I bolded up the lines within the bullet chamber. I was even suggested by my friend Jason to change it to a six bullet chamber rather than a five to be more true to the time period, which totally makes sense. You can see this process down here. This is how I was building it out, utilizing shapes, subtracting it to get this sort of gun barrel shape. This took a good deal of time just to piece together just the chamber itself. Then I was suggested to swap out the values. See how I have the white on the train tracks and the white for the bullet chamber, but it just made sense to make the type stand out more. I inverse those having a gray so that the railroad in the chamber could be pushed back and have the type be pushed forward. Then through this process, I began breaking the traditional boundaries of this circle, adding in some more bullet holes, adding in a little bit more detail until we finally ended up with what we have here. The final crest design, which would be the secondary mark to add to wherever you may want to put that sort of thing. Again, lots and lots of trial and error, lots and lots of time involved in this sort of thing. It's not going to just come easy, especially if you put a lot of thought and time into it. Staying true to your references is obviously a plus, but keep your secondary brand element handy because we will utilize it later in the class when we mock it up on the final product. From here, we will move into the presentation and the mock-up portion of the class, so I'll see you there. 8. Packaging Process: Hello and welcome to the Packaging Process Chapter. I just want to take this time to share a bit about how I produced the packaging of this whiskey. So here's just a bit of the process utilizing those same typefaces that we came up with earlier in the class, altering the baselines as well, just referencing the mood boards and everything that we piece together earlier in the class until we finally ended up with what we have down below. Here's a final label, all vectored out with the neck label to the right. I pieced together this illustration utilizing some of the images of the trains and stuff that we gathered in the mood board earlier. I just wanted to show you the final product. This is what we have here. I got this photographed because I produced a real world mockup, not something that you buy from a creative market or find online or something. But I wanted to break it down from top to bottom so you can understand how to produce something such as this for only about 30 bucks. So the top of the bottle was sealed with a cork, just as it would have been back in the mid-1800s. So it just made sense to try and re-enact that sort of feel. I tied it off with a string as well to ensure that the cork isn't removed. Also, it's a way to tell if the bottle has been opened or not. Next was the neck label and the bottle label. I got these both printed by Alpha Graphics on like £100 textured paper. You can see the texture in this lighting, and the unique label shaped too. I wanted to stay away from something squared. It just felt boring. I cut that by hand using a utility knife. So there's no need for a special die-cut template. Our next up is the bottle itself. It's a stock 750 milliliter bottle, which you can purchase for only like three bucks. To top it all off, I filled it up with apple juice just to save some more money. Because why spend a ton of money on some real whiskey when you could spend five bucks on apple juice and then color-correct in Photoshop. So what I'm trying to share with you guys is that you don't need a ton of money to create a killer project. It's all about thinking outside the box and using your head and your hands to create something such as this. Piecing things together on your own is probably going to be a much better outcome than finding a template or a Photoshop document online that you downloaded or bought from somebody else. With your project, begin brainstorming ways to mock up and present your work. Maybe it's printing a letterhead or a business card yourself. Maybe it's using a laser cutter to etch something at wood, like I did down below here. Maybe you 3D print something. I don't know, the possibilities are endless. I'll see you in the next video where I will show you the complete and final product. 9. Present Your Creation: As I described in the previous video, this project was put together by hand instead of marking it up with a template I found online. I'm not saying this is not the right thing to do, but there's definitely a time and a place, but with this project, everything needed to be a bit more accustomed than a mock-up I found online, so to enhance the presentation, I purchased a cheap plastic pocket watch that you can see here. I mean in this photo, in my opinion, it doesn't really look like a plastic pocket watch. I laser cut this coaster up here with a laser cutter. I bought these coins which you can see closer up in this photo here. These coins are from 1864. Some of them are a little bit older, but it still gives off that time period that I was going for. I found them at an antique store, so it just made sense to just purchase those for the overall shot. Lastly, I downloaded this high real map that you see in the background here. You can see right here that it was split from normal wear and tear of opening it and folding it, and it was all marked up, but it was totally perfect for what I was going for with this project, so I printed that out, and threw some dirt on it, splashed it with water a little bit, tried to make it feel a little bit older because once I printed it out, it still felt relatively new. I needed to make it look a little bit more worn down. Then I print it out these handwritten letters which through my Moodboard searching process, I found props and things to utilize. So I found these old letters from that time period of that perfect handwriting, threw some water on those, wrinkled them up, and I threw those into the background, so it just felt is that extra touch of making this bottle and this whiskey brand feel like it was from that 1860 time period. I'm sure some might think that purchasing the real vintage coins and a pocket watch and all that stuff might be a bit much, but I think the authenticity and the realness of the brand is what makes it more unique and it brings character. So I say go the extra mile and do those things, and it'll make all the difference. I even went through and with the cork I photoshopped on the bullet chamber, so it adds that extra touch of the brand being customized a bit more. That piece down at the bottom like I mentioned earlier was laser cut. You can see it again in this photo as well. That is essentially that secondary brand mark that you can utilize in your project. It just depends on where you want to place those things. Some more shots of close-up so you can see the texture of the paper which is really nice, and just different angles and things to describe and show the brand in better detail. If you have any questions regarding your projects or things you could do to push it one step further, feel free to reach out in the community section or post your project and I will get back to you. 10. Thank You!: All right guys, that concludes the end of the class. Thank you very much for signing up this class with me. I sure hope you learned a thing or two. If you have any questions at all regarding anything, please post them within the community section of the class. Upload your project to the project gallery so I can provide you guys with some thoughts and feedback. I'm looking forward to seeing you guys create. Thanks again.