Welcome, Guest. Please login or register.

Login with username, password and session length
 

Author Topic: Lettering: A Guide to Adobe Illustrator  (Read 7450 times)

Jim_Campbell

  • 2000AD Creator
  • Bionic Fingers
  • *****
  • Posts: 7048
  • Letterer to the Stars! (and PJ)
    • View Profile
    • deviantArt Gallery
Re: Lettering: A Guide to Adobe Illustrator
« Reply #30 on: 11 September, 2009, 10:25:49 AM »
Step Five: Sound Effects

Ironically, there's not actually that much to say about SFX, because the letterer has a great deal of leeway here.

I'm not one for apologetic sound effects -- I like 'em big and bold, but if you're doing paying work you should probably check with your editor to see how they feel!

The first thing you need -- obviously -- is a good, all purpose SFX font. In each job, I try to have a default font that I use for all 'standard' FX, to maintain a certain amount of consistency. It's not uncommon to see FX-heavy pages where there half a dozen or more fonts. I think that would be bad design anywhere else, and I think it's bad design here.

Consequently, I have one font that I use by default for all normal FX in a particular job -- all your KABOOM, BDAM and AAARGHs -- a sharper or harder font for harsher sounds, and a softer one for, you guessed, softer FX. For example ...



I've spent a lot of money on fonts I thought would make a good 'standard' FX font, but ironically Blambot's free Badaboom is as good as any.

I have discovered literally this morning that Tom Orzechowski draws rough SFX onto the artwork with the pencil tool to make sure he gets an attractive arrangement of letters that fits the space available, and then makes a font effect fit the rough. This is brilliant and I wish I'd thought of it! Going forward, I can't wait to try this.

To take one effect as an example, here are some (hopefully) useful tips on SFX creation.

There are two basic approaches to creating a sound effect.

Either way, you're going to need to type or paste your basic text.



You can then either use the typographic controls - point size, tracking and baseline shift - to work on the editable text to make the letters look more like a sound effect:







When you're happy with the result, go to the Type Menu and Create Outlines:



Alternatively, you can type your text and go straight to Create Outlines. Either way, the next thing you need to do is go to the Object Menu and select Ungroup:



If you haven't already formatted the text, you can now manipulate the individual letters as shapes using the Selection tool:



Either way, you will end up with a SFX that you like the look of. At this point, our old friend Pathfinder -> Add Shape makes another appearance:



If you apply a stroke and fill, you will probably find that the results are not pleasing, particularly if you want to apply a heavy stroke:



There is a very quick fix to this. Go to the Appearance palette:



And drag the Fill so that it appears above the stroke:



The result will be much more pleasing to the eye!



Note that if you don't want the letters to appear as part of one shape, but as separate letters:



Then simply don't use the Pathfinder function, but Group the shapes instead.

SFX can quickly be spruced up with a Gradient Fill:




Don't forget that you can change the angle of the Fill:




You can spiff it up still further by adding an inline:



This is also fairly easy:

With your sound effect selected and the Selection tool (V) active, hit RETURN and this dialogue should appear:



Set the movements to zero, as shown above and hit 'Copy'.

Initially, you won't be able to see anything, because you've created an exact copy on top of the original.

Change the Fill to 'None' and the result will not be attractive:




However, if you change the Stroke colour to something that compliments the Fill, and reduce the stroke weight to something significantly lower than the original ...




... Then you should get the desired result:



Longer SFX can be quickly livened up by running the text along a path.

Draw a curved path the fits on the artwork with the Pen tool:



Select the Type on Path tool:



Click on the path and type or paste the SFX:



Liven it up a bit by closing up the spacing with the tracking, and changing the point size and/or baseline shift values of individual characters:



Once you're happy, you can change to Outlines and tart up however you wish:



Hollow SFX are relatively straightforward, but are very useful when space is tight, since they do not completely obscure the artwork beneath.

At their most basic, you can just create the SFX, turn to outlines, and give it a Stroke but no Fill:



However, this is not always very readable. Expand the Pathfinder group so that it is one path:



Then select 'Outline Stroke' from the Path menu:



This will turn the stroke -- at whatever value you have it set to -- into a filled shape:



You can then apply a Stroke to this new shape:



'Breakout' balloons, might well have gone in yesterday's post, but they're as much SFX as they are balloons, so they're here.

These are balloons that look like this:



You're going to start with a double outline balloon (see yesterday's post - if you've grouped the balloon, you need to ungroup it so that you can select the black & white inner balloon separately later on in this process) and put your text on top of it:



It's important that you have changed the text to Outlines, and that you have Ungrouped the text, and then recombined them using Pathfinder -> Add Shape. Note that the characters don't have to touch in order for Add Shape to turn them into one object.

The process below gets a couple of fiddly extra steps added to it if you don't do this.

Then go to the Path menu and select Offset Path:



By default, this dialogue displays the offset amount in mm, but you can enter values in points, which I find more helpful. You need to manually change 'Joins' to 'Round':



The result looks like a scary mess:



However, if you look carefully, you can see the outline of your original lettering inside this mess. Using the Selection tool, SHIFT-click on one of the letters and all the original lettering should deselect, leaving you only your new, expanded shape:



Unsurprisingly, our next step is Pathfinder -> Add Shape



Now, change the stroke and fill of the combined shape to match your balloon:



Select the inner balloon as well as the expanded text outline:



Pathfinder -> Add Shape again:



And you're done:



And that's about it for today!

Tomorrow, I'll deal with miscellaneous odds 'n' sods like trapping, stuff that should have been in earlier posts but which I forgot, plus the Five Lettering Mistakes That Will Betray You For A Clueless Noob.

Cheers!

Jim
Eagle Award Nominated Letterer: Samples.
Less-Awesome-Artist: Scribbles.
World's Best Online Comic: Fractal Friction

Dog Deever

  • Member
  • Evil Cyborg
  • ****
  • Posts: 2087
  • FULL MENTAL
    • View Profile
    • If you like music, DON'T click here...
Re: Lettering: A Guide to Adobe Illustrator
« Reply #31 on: 11 September, 2009, 06:32:00 PM »
Jinkys!
I'm still stuck on making curved balloon tails!
What a fucking mess I've been making with that! I'm about ready to stick with straight ones for now so I can move on as I'm getting further and further behind. If I get too far behind I'll end up getting shouted at for chatting in class and be forced to sit at the back of class pinging rubbers at the swots and drawing nasty caricatures of oor teacher on the margins of my page!
Just a little rough an' tumble, Judge man!                                                                             I'm too dumb and too mean to be afraid!

Jim_Campbell

  • 2000AD Creator
  • Bionic Fingers
  • *****
  • Posts: 7048
  • Letterer to the Stars! (and PJ)
    • View Profile
    • deviantArt Gallery
Re: Lettering: A Guide to Adobe Illustrator
« Reply #32 on: 12 September, 2009, 10:44:02 AM »
I'm still stuck on making curved balloon tails!

Illustrator can be horribly unintuitive until you 'get' it -- I've been using it for fifteen years, and I reckon I use about 25% of its functionality, even when doing more complicated things than lettering. Don't get too frustrated if it's tripping you up at first!

What part of the tail is causing you the grief, DD?








If one of these stages isn't behaving as described, let me know which one, and what's going wrong, and I'll try to figure it out!

Cheers

Jim
Eagle Award Nominated Letterer: Samples.
Less-Awesome-Artist: Scribbles.
World's Best Online Comic: Fractal Friction

Jim_Campbell

  • 2000AD Creator
  • Bionic Fingers
  • *****
  • Posts: 7048
  • Letterer to the Stars! (and PJ)
    • View Profile
    • deviantArt Gallery
Re: Lettering: A Guide to Adobe Illustrator
« Reply #33 on: 12 September, 2009, 11:50:22 AM »
Part Six* - Odds & Sods

Miscellany

Transparency effects: AI has a number of fancy transparency effects, including soft drop shadows, that it's very tempting to start slinging around. In practise, every time I use one, it fails to print reliably, or otherwise behaves in an unexpected manner despite looking fine on-screen.

As a result, I don't use them at all. It makes life much easier!

Trapping: unless your lettered pages are going to end up in the hands of a professional printer, you can pretty much ignore this bit. If the pages are going to end up on a press, this is vitally important.

Firstly, make sure that your document colour mode is CMYK. It sounds obvious, but I've been sent publisher templates that were RGB.



Lettering does not use Rich Black -- it uses straight K100. Check repeatedly that AI has not pulled its most annoying trick, which is to default back to a faux-black (usually C75M68Y67K90). Lettering Black also overprints, which means that where it is laid over a colour, it does NOT 'knockout' a hole in the colour plates, but prints over the top.



If you have a speech balloon or caption with a white stroke, make sure you turn Overprint off or it won't print at all.

Obviously, most of your text will be black on a white bg, so you don't have to worry about trapping for that. Where your text sits on a coloured bg, it should also Overprint. Gradient fills on narrative captions are very common in US comics:




Trapping is one of the more arcane parts of the printer's art. I'll leave it at this -- which is probably enough -- and you can ask if anything else comes up!

Stuff I Forgot

Only one thing leaps out that I forgot to mention as a handy hint ...

When shaping your text blocks for speech balloons, balance the first and last lines first and then worry about what's in the middle. It makes life a lot easier.

I'm sure there's loads of other stuff, but I'll come back as and when I remember!

And finally:

The Top Five Lettering Errors That Will Give You Away As A Clueless Newbie

FIVE - Clumsy Balloon Tails




FOUR - Bad Balloon Placement



THREE - Tangents





TWO - Crossbar Letter I




ONE - Inappropriate Fonts!



Seriously. It's not a joke. I've seen people come onto lettering forums and ask for critiques of pages they've lettered in Comic Sans, or Markerfelt, or in one recent case, fucking Times.

Pick up one of Nate's free fonts from Blambot, or treat yourself to a pay one from Blambot or Comicraft, but please, please, use a decent dialogue font!
_________________________________________________________


And that's about it, notwithstanding anything I've forgotten, which I'll come back to as and when I remember stuff.

As noted upthread, please use this thread for any queries or, indeed, alternative methods of doing any of this stuff. All I can claim is that what I've described is a way of achieving these effects. I'm certainly not claiming it's the only way, or even the easiest.

Cheers!

Jim

*Because they're not really steps, are they?
Eagle Award Nominated Letterer: Samples.
Less-Awesome-Artist: Scribbles.
World's Best Online Comic: Fractal Friction

Dog Deever

  • Member
  • Evil Cyborg
  • ****
  • Posts: 2087
  • FULL MENTAL
    • View Profile
    • If you like music, DON'T click here...
Re: Lettering: A Guide to Adobe Illustrator
« Reply #34 on: 12 September, 2009, 01:56:52 PM »
Quote
What part of the tail is causing you the grief, DD?

My sausage fingers and idiocracy, I'm afraid.
I spent a loooong time at it last night and got it sussed out, cheers.
Managed to get right along to all the SFX stuff, and then couldn't get a coloured gradient onto the letters- I managed a black and white one but just couldn't find the control system for setting up a custom coloured gradient. I found the basic swatches with various B&W and a rainbow one.
Here's my n00b attempts at some basic balloons(using Action Manfree font):
http://www.urbanfonts.com/fonts/Action_Man.htm
Feel free to mercilessly rip the pish...
« Last Edit: 12 September, 2009, 01:59:00 PM by Dog Deever »
Just a little rough an' tumble, Judge man!                                                                             I'm too dumb and too mean to be afraid!

Jim_Campbell

  • 2000AD Creator
  • Bionic Fingers
  • *****
  • Posts: 7048
  • Letterer to the Stars! (and PJ)
    • View Profile
    • deviantArt Gallery
Re: Lettering: A Guide to Adobe Illustrator
« Reply #35 on: 12 September, 2009, 02:47:59 PM »
Quote
What part of the tail is causing you the grief, DD?

Managed to get right along to all the SFX stuff, and then couldn't get a coloured gradient onto the letters- I managed a black and white one but just couldn't find the control system for setting up a custom coloured gradient. I found the basic swatches with various B&W and a rainbow one.

Ah. Yeah ... the gradient controls aren't blindingly obvious ...

Start with your SFX selected ...



Apply the basic gradient from the Gradient palette:



Click on one of the colour pointers on the Gradient spectrum:



Now, the values that you enter into the normal colour palette will affect the colour of the gradient:






You can add extra colours to the Gradient spectrum just by clicking under the bar.

Here's a radial two-colour gradient:




Clicking anywhere under the colour bar at the bottom of the palette will add an extra pointer:



By default, this will show whatever colour that part of the spectrum is, but you can change it:




Which will then immediately update in the object, as long as you still have it selected:



(No ... I know it's not a thing of beauty, but you see what I mean.)

Quote
Feel free to mercilessly rip the pish...

I like the asymmetric balloons, although I think the stroke is a little heavy for my taste. I'd take the leading down a touch to close  up the line spacing, but otherwise that's a good start, DD!

Cheers

Jim
Eagle Award Nominated Letterer: Samples.
Less-Awesome-Artist: Scribbles.
World's Best Online Comic: Fractal Friction

Dog Deever

  • Member
  • Evil Cyborg
  • ****
  • Posts: 2087
  • FULL MENTAL
    • View Profile
    • If you like music, DON'T click here...
Re: Lettering: A Guide to Adobe Illustrator
« Reply #36 on: 12 September, 2009, 04:08:06 PM »
Cheers, Jim.
Tried clicking on the colour pointers, but wasn't getting any joy that way. When I entered values into the palette nothing happened at all. If I selected a colour it just filled all the text with solid colour.
However, out of curiosity, I tried dragging colour from the swatches and dropping onto the colour pointers with the left mouse button and hey presto- that did the trick. I can now enter colour values too.

I thought I'd set the balloon outlines to 0.75 as you advised- I'll check that out. More than likely, I just fucked it up!
Thanks for taking the time.
Just a little rough an' tumble, Judge man!                                                                             I'm too dumb and too mean to be afraid!

SuperSurfer

  • Member
  • Posting Machine
  • ***
  • Posts: 1712
    • View Profile
    • Blog of the Surfer
Re: Lettering: A Guide to Adobe Illustrator
« Reply #37 on: 12 September, 2009, 10:02:09 PM »
Sterling stuff. I need to take my time and read through all of that in detail as there is plenty there I hadn't considered. (Must say, I never found Adobe Illustrator intuitive and I preferred Freehand but it lost the arms race with Illustrator and was gobbled up by Adobe anyway – but I digress.)
"Not without a good vintage port, you lackey."

http://blogofthesurfer.blogspot.com

Jim_Campbell

  • 2000AD Creator
  • Bionic Fingers
  • *****
  • Posts: 7048
  • Letterer to the Stars! (and PJ)
    • View Profile
    • deviantArt Gallery
Re: Lettering: A Guide to Adobe Illustrator
« Reply #38 on: 12 September, 2009, 10:35:00 PM »
(Must say, I never found Adobe Illustrator intuitive and I preferred Freehand but it lost the arms race with Illustrator and was gobbled up by Adobe anyway – but I digress.)

It's weird -- I never came across another pair of programs that were so totally an either/or proposition. I learned graphic design in an Illustrator based studio, but after about four years we got bought out and the parent IT Dept trashed all the Macs, replaced them with PCs, and had a bulk license for Freehand so that was the software I got. I spent a year grappling with it daily and could never, ever get on with it -- God knows, I tried!

By the same token,  when I moved back to an Illustrator shop, I met people who came in who couldn't fathom stage one of Illustrator despite being hugely proficient in Freehand. Very, very odd.

Cheers

Jim
Eagle Award Nominated Letterer: Samples.
Less-Awesome-Artist: Scribbles.
World's Best Online Comic: Fractal Friction

SuperSurfer

  • Member
  • Posting Machine
  • ***
  • Posts: 1712
    • View Profile
    • Blog of the Surfer
Re: Lettering: A Guide to Adobe Illustrator
« Reply #39 on: 12 September, 2009, 10:51:49 PM »
Blame the PCs I say.
"Not without a good vintage port, you lackey."

http://blogofthesurfer.blogspot.com

Jim_Campbell

  • 2000AD Creator
  • Bionic Fingers
  • *****
  • Posts: 7048
  • Letterer to the Stars! (and PJ)
    • View Profile
    • deviantArt Gallery
Re: Lettering: A Guide to Adobe Illustrator
« Reply #40 on: 12 September, 2009, 10:52:56 PM »
I thought I'd set the balloon outlines to 0.75 as you advised- I'll check that out. More than likely, I just fucked it up!

Nah ... I reckon you've got 'Scale Strokes' selected by default.

Double click the Scale tool and see if it's enabled under the Tool Preference:



If not, try going to the Preferences Menu, and looking under the General section:



Cheers!

Jim
Eagle Award Nominated Letterer: Samples.
Less-Awesome-Artist: Scribbles.
World's Best Online Comic: Fractal Friction

Dog Deever

  • Member
  • Evil Cyborg
  • ****
  • Posts: 2087
  • FULL MENTAL
    • View Profile
    • If you like music, DON'T click here...
Re: Lettering: A Guide to Adobe Illustrator
« Reply #41 on: 13 September, 2009, 12:26:55 AM »
I'll keep that in mind- but this time it was definitely me- the stroke was 1pt for some reason- probably been doing it for too long without a break! I reduced them to 0.75 and switched the fill/ stroke order (like you showed on the spiky balloon IIRC) which thinned it down again. Much better.
I wasn't keen on the grand canyons between each line either but lacked the know-how to change it until I went on and started the SFX section. I've fixed that now too, and it's all looking a lot tidier.

I still have thought balloons and breakout balloons to cover, as they looked a bit complex til I learned a bit more about AI. I will jump back and cover those now, as I'm itching to have a go at them.

I liked the graded transparent edges on the all the 'fuck off' you did (pic with the comic sans lettering)- they look really effective- though they did make me spit coffee on my monitor screen!

Thanks again- I've really been enjoying this tutorial- just need to practice it til I can do it without too much thought. Luckily I have some time right now (well, until the Bolt01 and RAC droids come hunting me for artwork!)
Just a little rough an' tumble, Judge man!                                                                             I'm too dumb and too mean to be afraid!

Jim_Campbell

  • 2000AD Creator
  • Bionic Fingers
  • *****
  • Posts: 7048
  • Letterer to the Stars! (and PJ)
    • View Profile
    • deviantArt Gallery
Re: Lettering: A Guide to Adobe Illustrator
« Reply #42 on: 13 September, 2009, 12:34:45 AM »

I liked the graded transparent edges on the all the 'fuck off' you did (pic with the comic sans lettering)- they look really effective- though they did make me spit coffee on my monitor screen!


Bastard! I did them in fucking Photoshop!

You can do them in AI using Effect -> Stylize -> Outer Glow, but I would refer you to my previous remark about any Illustrator effect that involves transparency.

Cheers

Jim
Eagle Award Nominated Letterer: Samples.
Less-Awesome-Artist: Scribbles.
World's Best Online Comic: Fractal Friction

Emperor

  • Administrator
  • Bionic Fingers
  • *****
  • Posts: 6815
  • Divine Wind
    • View Profile
    • Me at Tumblr
Re: Lettering: A Guide to Adobe Illustrator
« Reply #43 on: 13 September, 2009, 03:51:08 PM »
TWO - Crossbar Letter I



This is one I'd never thought about but will presumably be now keep stumbling across it from now on. Do fonts come with both types of "i" as I thought it was more of a serif/san serif font thing, so do you need two fonts or have I never looked closely enough for this?
if I went 'round saying I was an Emperor just because some moistened bint had lobbed a scimitar at me, they'd put me away!

Fractal Friction | Tumblr | Google+

Jim_Campbell

  • 2000AD Creator
  • Bionic Fingers
  • *****
  • Posts: 7048
  • Letterer to the Stars! (and PJ)
    • View Profile
    • deviantArt Gallery
Re: Lettering: A Guide to Adobe Illustrator
« Reply #44 on: 13 September, 2009, 04:14:21 PM »
This is one I'd never thought about but will presumably be now keep stumbling across it from now on. Do fonts come with both types of "i" as I thought it was more of a serif/san serif font thing, so do you need two fonts or have I never looked closely enough for this?

If it's a 'proper' lettering font, then upper and lower will be variants of capital letters -- lowercase lettering fonts are usually a separate font entirely (eg - Tim Sale, and Tim Sale Lower). The uppercase 'I' will always have the crossbar, and the lowercase version will be a non-crossbar version.

In a lowercase font, like Tim Sale Lower, the normal uppercase 'I' is a capital without crossbars, and ALT-SHIFT-\ produces a crossbar 'I' ...

Edit to add: This is peculiar to comic book lettering. No-one else uses this convention. Neither did Tom Frame, if memory serves!

Cheers!

Jim
« Last Edit: 13 September, 2009, 04:15:56 PM by Jim_Campbell »
Eagle Award Nominated Letterer: Samples.
Less-Awesome-Artist: Scribbles.
World's Best Online Comic: Fractal Friction