Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Productivity Tips for Web Designers is the weekly series for web designers who want to enhance their design, software, and freelance business skills and streamline their workflow. Whether you're new to web design or working professionally as a seasoned designer, you'll discover techniques that can help you become more proficient at your craft. Tune in every Thursday for a new tip on topics including typography; SEO; design software like Illustrator, Photoshop, and Dreamweaver; and web coding in HTML and CSS.
- Hi, everyone, this is Sue Jenkins with productivity tips for Web designers. In this week's lesson, you'll discover how making fine-tuned adjustments to type shapes in Illustrator can help make your logos and graphics more unique and memorable than using straight fonts alone. There are two ways to edit the text characters in Illustrator, one is with the Touch Type Tool, which is new in Creative Cloud, and the other is by converting your fonts to outlines. So we'll start with me showing you how to use the Touch Type Tool. First you'll select your text, and then you need the Touch Type Tool, which you can get through the toolbar by clicking and holding down the "T" and scrolling all the way to the bottom of the fly-out menu.
Then you'll click on the letter that you want to manipulate, you'll notice that there are four hollow circles on the letter. If you click on the top-left circle, you can scale vertically, if you click on the bottom-right you can scale horizontally. And if you click on the top-right, you can scale both uniformly, horizontally and vertically at the same time. There's also a circle up at the top, which would allow you to rotate the letter shape. So you can do some really awesome things with this tool. And the best part is that all of your text is still editable, so if I wanted to go back and change this to something else, like "HAM," it will retain the transformations I did with the text tool, so I'm just going to undo with my keyboard shortcut and put my "BACON" back where it was.
By contrast, when you convert your fonts to outlines, the conversion process turns your letters into editable shapes, and once that happens, the text can't be converted back into usable, editable type. But you can completely customize the look of each shape. If you're interested in learning more about building your own custom fonts, check out these two courses in the Lynda.com library. Font Management Essential Training with Mike Rankin and Creating Icon Fonts for the Web with James Williamson. Let's take a look now at converting fonts to outlines.
You can convert your fonts to outlines through the Type, Create Outlines option, or you can right-click and choose Create Outlines from your context menu. From here you can ungroup, so right-click and choose Ungroup, and then you can modify your individual shapes one at a time. For instance, you can flip a letter, play with punctuation. So let's play around with this, maybe I want to scale and rotate a little bit. There's no dot on this "I" so I could even add a special shape.
It doesn't even have to be aligned if this is something special that I'm doing. I could rotate every other letter slightly, I could skew, I could do whatever I want. I could change the spacing, so I'm really just trying to make this unique. But again, once you convert to outlines, you can't go back to editable type. So let's say you've made a typo, you'd actually have to physically reposition the letters to fix that or start over from scratch. To really push the shapes of your typography, you want to use the Direct Selection Tool.
So let's convert "BACON" into outlines, and then we'll use the Direct Selection Tool to manipulate some of the paths. If you were to select the entire letter, all of the anchor points on your shape would be activated, but let's say you really only wanted to manipulate the two. So I'm isolating those two end points, and then I could actually drag the path and manipulate the shape this way. So if you wanted to just adjust one corner, for instance, of a letter shape, you have that option.
If your letter shape has any direction handles on it, you can adjust those as well. So you're really manipulating the shape individually. This really gives it a customized feel. If you're looking for fine-tuned precision, you could also Shift-click to select multiple points, and then use your up, down, left, right arrows to manipulate the shapes using uniform units of measure. Another thing you can do with your letter shapes is you can use the Pencil Tool to manipulate individual letter forms.
So let's say, I'll ungroup these, and I want to modify my "B," if I grab my Pencil I can redraw on the letter, and as long as I sort of start and stop on the path, I can revise the actual path between any two anchor points. That one didn't work, so let me try again. Any time you make a mistake, just simply undo and try again, there we go. If needed, you can also smooth out the lines on your letter shape with the Smooth Tool, which is underneath your Pencil, like this.
Just dragging along a path with the Smooth Tool will reduce the number of points on the path and give you a nice, smoother edge. If you like the hand-lettered look, you can always start by drawing out your letter shapes with the Pencil Tool, as I've done here with the word "Coffee." You can then use the Width Tool to modify the thickness of the line, like I've done in this example below. So with the Width Tool, you just click and drag on the path, and then it'll modify the thickness of the line.
What I find works best is if you zoom in so you don't go quite as thick, and then you can get a little more fine-tuning with that tool. You can add as many points on the path as you're adjusting it, so that you can go thick or thin, and you can always go back in and modify if you make something too thick, or not thick enough. We'll zoom back out using the keyboard shortcut Command minus on a Mac or Ctrl minus on a PC. Another thing that you can do is work with the Free Transform Tool, so let's go back up to our "Eggs" here, we'll convert to outlines, maybe make them a little bit bigger.
And then we can ungroup the individual letters so we can manipulate them one at a time. With the Free Transform Tool, select it on the toolbar first, and then this little fly-out menu appears. If you hover over each of the little icons, you'll see what it can do, so by default it's set to Free Transform, which means that I can manipulate the shape just by clicking and dragging on any of the four corners, I can rotate, I can do any basic transformations. Let me try to put this back upright and nudge it over.
You could also do Perspective Distort, so you click on that button first and then you can start to click and drag. You can get some really unusual perspectives, which would be super suitable for a logo. You could also do this one, which is a Free Distort, just clicking and dragging. I find that just playing around is the easiest way to get where I want to go, rather than trying to go in a particular direction, when I'm in creative mode trying to come up with a logo design. Sometimes the best things happen accidentally when you're playing around. You can also manipulate your letter shapes using the Warp Tool, so let me select all of the "Eggs" here.
Go up to the Object menu and choose Envelope Distort, Make with Warp. This brings up the Warp Options dialog box, we'll turn the preview on, and then you can choose any of these options from the Style menu. Arc, Lower and Upper, Arch, Bulge, Flag, I like the Flag. And then once you make a selection, you can play around with the bend and the horizontal and vertical distortions until you get it the way you like it, and then click OK. If you'd like to morph individual letter shapes, and we'll go down to "Porridge," let's convert that to outlines again, and right-clicking to ungroup so we have the individual letter shapes.
You can try using the Warp Tool, which you'll likely find hiding under the Width Tool, so let's grab the Width Tool and hold down and choose Warp. And what you do with this one is, you just kind of click and drag, and it just pulls the letter shapes in whatever direction you drag in. This is a really interesting way to create unique letter shapes, especially suitable for working with logos or doing some kind of editorial design. No one's going to come up with that kind of font shape on their own, and it really gives it a personal touch that looks a little more hand manipulated than computer generated.
For even more customized results, you can use any of these techniques not only on letters but on existing drawings and other objects that you create in Illustrator. The main take-away here is that when you work with the Touch Type Tool or convert your fonts to outline, you really open up a whole world of possibilities for your font customization. Make the most of your work by trying some of these custom shape techniques.
There are currently no FAQs about Productivity Tips for Web Designers.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.