Wednesday | 19 May 2004
Underline Text in Adobe Illustrator
Last week, when I announced the Blogger redesign, I mentioned that I’ve been using Adobe Illustrator much more often to comp my designs, instead of Photoshop. The vector-based Illustrator provides more flexibility in shape rendering, and allows me to create and tweak designs faster than the bitmap editing of Photoshop. Once we’ve honed in on a final design, then I move over to Photoshop for a final polish and pixel-level precision for the site’s images. Just after the Illustrator mention in the Blogger entry, I tossed in this little frustration:
One gripe about using Illustrator for web stuff: after 11 versions, there’s still no easy way to simulate underlined text without manually drawing lines with the pen tool, then moving them every time the text reflows.
Before drawing attention to this one missing feature, I should mention that I love Illustrator. I’ve been working with this vector app since it was dubbed Illustrator 88 — the equivalent of version 1 or 2. I briefly switched over to Freehand (when it was still produced by Aldus) because I could edit and preview artwork at the same time. But Adobe quickly caught up with Aldus, and I switched back. Illustrator is invaluable for working in print design and illustration, and I’ve been finding more and more uses for it when designing for the Web.
When creating web comps, it’s not uncommon to underline some of the links on the page. Perhaps it’s a technical limitation of text rendering. Or perhaps the Illustrator team is afraid that users will want much more control over underlines than capability would permit (stroke weight, offset, etc.) opening up a can of worms if they implemented the ability to underline text. Despite the fact that users have been asking how to underline text in Illustrator for several versions now, Adobe somehow manages to exclude this feature in each new release of the software.
Until now, there was no way to create simple underlined text in Illustrator, other than the method I quoted above. Again, that’s until now. Full credit for discovering a handy trick for creating underlined text in Illustrator (or at least for discovering it, reading about my frustration, then letting me know about it) goes to Phil Oye. He documented his discovery just a little over a month ago. I’ll expand on his explanation here.
The short version of it is: create the text in Photoshop, then underline it with the underline feature. (Apparently the Photoshop team listened to requests, and managed to figure this out before the Illustrator team.) The underline button sits in the Character palette in the same line as Faux Bold, Faux Italic, All Caps, Strikethrough, etc.
Once underlined, copy the text with Photoshop’s text tool, then paste it into Illustrator. Voilà! Underlined, editable text in Illustrator. I’m not sure how far back (in versions) the underlined text will transfer over to Illustrator, but it certainly works in CS (v.11).
The rest of the trick is only necessary if repeated instances of underlined text are desired. The description of how to set up a character style gets a little long, but the process is actually very simple once you know what’s involved…
This trick would be a pain the arse if I had to toggle over to Photoshop every time I wanted underlined text in Illustrator. Fortunately for me, Phil also discovered the Character Style palette in Illustrator CS. Once a character style is created for underlined text, the style can be saved to a file in the Presets folder, then imported into other files and reused on any text I desire to be underlined.
Depending on how many text attributes are set before creating the character style, the style will copy other existing attributes in addition to the underline. For instance, I had already changed my text to Verdana, 11pt, and changed it to blue. So when I selected the text and added a new Character Style, those attributes also got sucked into the style, as seen in the Character Style Options dialogue below.
Click for a larger version.
Having those extra attributes in the style may, or may not, be desirable. For instance, if I knew that I was only going to be using the style for links in web comps, and that all my links would always be Verdana, 11pt, and blue, that character style would be fine, I’d save it out, and call it a day. But if a more generic style is desired, those extra attributes need to be removed from the character style. This way, the character style can be applied to any text, no matter its color, font, size, leading, kerning, etc.
Most of the settings in the Character Style Options dialogue allow their values to be deleted, or the pulldown can be set to (Ignore). However, if any of the checkboxes from any dialogue panels are already checked or unchecked, those attributes will either be set to “Yes” or “No” values. A “Null” value is desired, often represented by a dashed checkbox. The simplest way to nix all the attributes for the style is to hit the “Reset Panel” button for every panel of the Character Style Options dialogue. Since Illustrator provides no control over the underline attribute, the underline will remain a hidden part of the style. The goal for a generic underline character style is to get the General panel to not show any style attributes whatsoever, as shown below:
Again, click for a larger version.
Notice how each of the settings summaries (Basic Character Formats, Advanced Character Formats, Character Color, …) show no additional attributes. In the Character Style Options dialogue, rename the style to something appropriate, like “Underline”. Then save the file containing just the Underline character style in a convenient location. I chose to create a new folder within Illustrator’s “Presets” folder called “Styles”, and then saved the file in that folder. Whenever an underline is needed, use the Character palette to load the saved file containing the pre-configured style, select the text to be underlined, and apply the character style. Done.
One note about this technique needs to be mentioned. As the underline is completely hidden in the character style, Illustrator provides absolutely no control over the actual underline. Normally, not an issue. Except for color. If a text object (or block) exists entirely of underlined text, the underline will adopt the same color as the text. If the text is changed to blue, presumably the underline is intended to be blue too. However, if the underlined text appears with other non-underlined text in the same object, and those two pieces of text are different colors, the underline may adopt the color used for text elsewhere within the same object. So while the text may be blue, the underline may be black, (or whatever color the non-underlined text is) with no apparent way to change the underline color. Less than desirable.
To work around this limitation, I discovered that the underline color usually adopts the color of the first character within that text object. Let’s call this the “point of influence”. When this is the case, a space can be inserted before the first real character, so that the space becomes the point of influence. Set the space to be the same color that the underline (appearing later in that text object) should be. Then apply some small horizontal scale value to the space (1%), so that the space becomes unnoticeable in width to the human eye.
I said the point of influence is “usually” the first character’s color, because I’ve found this to not always be true for longer text blocks. Sometimes I’ve narrowed it down to the 5th character, sometimes the 8th character, but it always seems to be a character from the first line of text. In that case, a space needs to be inserted at the point of influence, and treated the same as above.
By explanation, this isn’t the most graceful solution. But once the character style is set up, underlining text in Illustrator involves little more than clicking a style name. Many thanks to Phil for discovering the solution and pointing me to it.
9:40am in Design, Technology
34 comments
Amen! I just finish a number of screens in Illustrator and had the same frustrations with underline and faux bold, etc. Thanks for the tricks, didn’t relize it was possible.
You have to wonder, is the photoshop devolpment team on the other side of the building as the illustrator team. They seem to never collaborate on their development.
Nice set of tricks. My eyes were rolling the day I finally learned how to bump down underlines in Photoshop one pixel from the text baseline, like they are in web browsers. It’s an undocumented technique (or bug), as far as I know. Adobe is sheepish about advanced underlines!
very useful information. now i just need to upgrade to illustrator CS from 10. i knew there were a lot of exciting features, but somehow i missed the character styles options.
Whew! That’s a hell of a trick. I’ve often been frustrated at Illustrator’s lack of “faux” effects. I’ll keep this writeup in mind next time I need to do some underlining in Illustrator. I’ve also been wondering if there’s a way to get underlines in static text areas in Macromedia Flash. I have yet to experiment with the limited CSS support in MX 2004, but that may be a solution, albeit an overly complex one.
My approach is way simpler - I’ve been using Macromedia Fireworks as a main comp workhorse for years since v.1, and guess what - editable underlined text is a no-brainer. I get that plus all the benefits of handling pixel shapes as if they were vectors - a feature seemingly unique to this program. I find Photoshop or even AI overkill for web comps - specially when you’re not dealing with complicated effects, blendings and other image fine-tuning where PS excels. And 99% of my web comps are of a rather simple design.
Unfortunately, FW must be the most underrated, looked-down Macromedia application out there. Noone seems to share my enthusiasm for the software. It works wonders for me though. I couldn’t be without it.
I use fireworks too. I agree that Illustrator and PS are overkill. But it boils down to personal prefference and how comfortable the user is with the application hes using. peace
Beto: I find Photoshop or even AI overkill for web comps…
I think you may be right. Both Adobe apps are way more powerful than what I’m normally using for site design comps. But as mech just stated, it is about preference — and also familiarity. Since I’ve been using Illustrator for 12+ years, I know it like the back of my hand. And when I need to use that power, it’s there. Plus, the two (PS and AI) work really well together as a combination, to the point where I’m switching back and forth seamlessly.
As for Fireworks, whatever floats your boat. I gravitate toward Adobe’s UI design, just because it’s more familiar and intuitive to me. Flash or Dreamweaver users would probably prefer Fireworks or Freehand. I’d compare Fireworks more with Adobes ImageReady. Comparing Fireworks to Illustrator is apples/oranges, even though they can do a few similar things. Although I haven’t touched Fireworks since it was first introduced, so what do I know about it?
beto, I share your enthusiasm for Fireworks. It’s a superb combination pixel/vector app, and criminally underrated. It’s slicing capabilities are particularly intuitive, as is its frames model. My only real gripe with it is its text engine, which feels really clunky compared to the polished finesse of Adobe’s apps, particularly in CS. I tend to mockup in FW, then move to PS for final text rendering.
Doug, what methods do you use for pixel precision rendering in AI? When in pixel preview mode lines and shapes snap to points *between* pixels, thus antialiasing them. This problem is most apparent with 1 pixel lines and shapes with 1 pixel borders. One can apply the rasterize effect to these shapes, and it then re-sharpens the pixel line, but any curves also then get aliased. So there’s no ideal solution. Any suggestions from anyone?
Pixel-level precision is only possible in Illustrator via measurements based in pixels, but visual appearance in Preview mode is another thing. Screen captures of AI files (or AI files saved as PDFs) only approximate the final version for me. As I stated above, I, too, switch over to Photoshop for the final polish and fine tuning. Working in vector mode (AI) is good for fast comping and tweaking, one step beyond sketching on paper, while bitmap mode (PS) is best for creating the final graphical imagery for the site, assuming the final artwork is bitmap. But that’s just my process.
As for slicing up images, I never do that anymore, so that feature wouldn’t be of much use to me. I use as few images as possible, and any images that are used get called in by CSS background images, so image slicing isn’t really a practical thing for me.
Fireworks, espcially for the past two versions, has been without question the best piece of software to enter my life. It is largely bug free, pixel-centric, and usable in a suite of other products (espcially Flash, but also Photoshop). I tend to use Illustrator for illustrations, Photoshop for manipulating photos, and Fireworks & Flash for all my screen design.
Douglas, awesome site. And the new Blogger is sweet.
This is strange: in the Windows version of Illustrator CS you can underline text via the character palette’s menu, or by simply using the Ctrl-Shift-U keyboard shortcut. Weird how this functionality isn’t in the Mac version.
As for slicing images, do you do the final polish on the background elements individually, each in, say, their own PSD file? The reason I find slicing so convenient in FW is in the situations where I have a whole page mocked up and polished. I can then ‘pluck’ out, optimize and preview background elements using slices right there on the page, without having to put each one in an individual file.
Doh, can’t underline in Win AI after all - I was in PS when I tried the underline method I just mentioned! *slaps head*.
Shows how similar and interchangable the apps are tho.
:)
I’d have to echo the comments of the FW backers out there - “pixel centric” is one statement that sums it up nicely. It’s geared just for that. It’s a great combination of vector-based power and pixel-oriented effects and precision. I also love it for icon design in application development, and it’s great if you have to use Director for anything (groan). And hey, ya gotta love PNG! Just preview in a browser.
It is a bit different, and the UI isn’t as polished as Adobe’s, but for web comping it’s the champ (esp. frames and slicing). I would never do image editing there, but the ability to “symbolize” images and then rescale them (losslessly!) repeatedly is very nice. My only gripe is that working with text can be slow sometimes. Try it! You’ll like it.
How funny that such a seemingly “small” thing like underlining text would really make such a difference in the long run. Many a time before reading this post had I experienced frustrations in drawing lines by hand under text. Thanks for the tip!
Underline text is available in Adobe InDesign for a long time. Indeed strange this feature has not moved to Illustrator.
I’ll come clean on this one. You can (partially) blame me for missing underlines.
Let me explain.
I have long been vocal on my views that underlines in web design used for the expression of hypertext links was about as poor a decision that can be thought of in the history of high-tech design. And yes I blame Berners-Lee. 8^) You may or may not disagree with me on that point, but from my point of view, to study typography is to see just how beautiful italics, bold, medium, ultra light, and true ligatures are for various typefaces. Hard, laborious work goes into designing type, and underlines are a remnant of the dark age of typography, also known as the electric typewriter period. (People still have problems breaking the double-space after periods rule that became acceptable during that dark age. Ugh.)
As such, I fought against underlines for both Photoshop and Illustrator. They are a bane on promoting and practicing good typography. But alas due to the web, there are here to stay, and even I am now using underlines (in dotted form, to ease the pain). As such, getting underlines supported was more of a philosophical hurdle, and obviously not a technological hurdle.
Getting over the philosophical hurdle occurred for Photoshop in version 5.5. or 6.0 (I forget which off the top of my head.) Illustrator, aimed more at print design, stayed the course of presenting more “accurate” typography. Around the time it seemed people started using AI for web work, more in the past few years, the engineers went to work on recreating the the entire type engine code library. A huge feat and a technical marvel if I may brag for my coworkers. All the extraordinarily cool features found in InDesign, and some of the high-end type stuff in Illustrator, got combined into one very extensive and comprehensive type code library. That library is now shared amongst all the apps found in the Creative Suite. The type engine in Adobe’s products is quite amazing if you ask me. That engineering feat took some serious time.
So, it’s not that the AI team is not listening. There have just been bigger fish to fry. (InDesign added underlines early on because they wanted to promote ID as a web page mock-up tool. I’m not sure how many people use underlines with ID though, as only web people really seem to need it, and I’m not sure how many ID use it for web creation these days.) AI is not considered as much of a web mock-up tool as Photoshop has been, so the addition of this minor feature — while obviously present in the new type engine as discovered by the copy/paste Photoshop trick — has just been below the red line when it comes to things that had to get done. Things are changing for AI though it seems, as it becomes more and more at the same level as PS for this sort of work.
And yes, my stubbornness on this issues back in 1997 and 1998 probably contributed to the delays in supported underlines. So blame me more than you blame the hard working engineers on the product. I probably deserve the heat more than they do.
But… (You knew that was coming…) That still doesn’t change my opinion on how much I hate underlines for links, even though I’m now using them in my own web site. 8^P
This comment is in no way a representation of my employer, an official answer from Adobe, or the official views of the company. It simply one lowly worker bees’ opinion. Please take it as such.
Thanks for the *personal* response Andrei. But in the spirit with which you’ve been questioning things lately, I’m not entirely convinced that you can just stick your neck out there and claim to be scape goat.
I’ll admit that I’m equally impressed with the type engine in the CS product line. But if underlines were implemented in Illustrator, I would expect tighter control over them. After all, Illustrator is known for its infinite typographic control, and although I’d be a little satisfied to see the same underline feature present for quick use, parts of me would be bummed not to find absolute control over the underline offset, stroke weight, etc. that I mentioned in the post above.
Oh, well. Not tossing blame to anyone. Just raising the heat a little, and asking you not to discount the power in using an app like AI for web-based work…
Thanks again.
…or you could just use InDesign.
A lack of an native underline is just one of the many reasons to NOT USE illustrator for web design. Another is poor pagination — which has only gotten worse, not better in more recent versions. Adobe’s made it painfully clear that they want illustrator to be used for print design and little else. Fortunately, they’ve given web designers (specifically interaction designers and information architects) a wonderful tool with InDesign.
Doing comps…I am a webdesigner with quite a few clients and projects successfully completed, but I have never done one comp for a website in my whole life. I rather do a simple version directly for the browser. I am curious though, how you people do it, and to what detail level you are going in the comp. After all, any interactive or rollover element cannot be in the comp, so how do you sell your design to the client. Having him look at a pretty yet static picture of a website does the trick?
I am really curious, I am not promoting my method over it…
That’s what you get for using a Mac, Lol.
Steve, making a paper design is just doing the thinking work with pen and paper, but more structured, more transferable to colleagues and more understandable for clients.
The client can decide if they agree on the proposal before it is built.
The backend programmers or front end developers can see how much work is coming their way and if plans need adjustments to stay within time and money bounds.
I myself can think more clear when I am in a drawing and erasing mood. The rollovers that are missing are just one minor feature that can be designed too with a few images on a row.
See a simple example that I modified to not disturb my employee.
… bump down underlines in Photoshop one pixel from the text baseline, like they are in web browsers
How is this done? I’d really like to know.
Hi Arthur,
thank you for the example. I can see what you mean. What I see there is a template for the underlying structure of the page, which definitely makes sense to pin down on paper, before starting to code the html (or whatever). I agree with you, you need something like this to exchange thoughts with clients and colleagues.
But - if you are in a pitch, this would hardly be enough to show your client the final “look” of the site. After all, it’s about the neat little things and the prettyness of the design that makes the client choose you as the designer.
Don’t you have, apart from your example, one page of the website that is almost finished, with the actual buttons, logo, background, photos and typography?
Because that’s when I think it makes no sense to have comps at all. For the page / site structure, of course, you’re right, but for the look, I don’t see the use.
Best Regards,
Steve
Lots of talk here about using InDesign… makes sense, but why are pixels not even an option?
Personally I prefer to use Fireworks for comping web stuff, it has a ton of very useful features in this area and it’s dead easy to make a comp look 100% like the final HTMLed item will. :)
Great trick, Doug!
I just wanted to drop a quick note to let you know this post has been picked up by the Design Weblog and the Magazine Design Weblog.
The posts also include a cross-platform downloadable Underline text character style.
Joseph:
… bump down underlines in Photoshop one pixel from the text baseline, like they are in web browsers …
How is this done? I’d really like to know.
* Zoom in at least 300%.
* Select all of the text.
* On the Mac, hold down the Command key and drag the text upward ever so slightly. (Not sure what key to use in Windows.)
Pretty sneaky, huh?
Jeremy:
I tried this technique and it moves the underline directly underneath the text but not further from the text. Is there something sneakier to be done?
More generally, I’m consistently surprised at how little Adobe really listens to (or asks) Web designers about their needs, particularly about the integration of PS and AI.
Beautiful work on Blogger, btw, Douglas.
Yup, I must agree with the fireworks support. It’s vector non-destructive wonderfulness wrapped up in pixel rendering bliss.
It still has some teething issues. Large (8mb+) files cause it to bog down after a while (memory leak?).
It’s JPEG compressions is pretty much the same as Photoshop:
It’s GIF compression has some issues:
and
Fireworks 2004 GIF Export Bug
Sadly, the FW community still has a lot of “deziners” hawking template designs and eye-candy/how-to books. The Macromedia Fireworks Forum/Usenet Group is a frustrating excercise due to over zealous hobbyists who don’t understand photoshop’s strengths.
But I still love it! :)
Andrew:
By default in Photoshop, underlines on text that is not anti-aliased appear physically attached to the text’s baseline. This trick “lifts” the text up off its baseline one pixel, leaving space between it and the underline. It works in Photoshop 7. Not sure about CS.
This little corner of the Web is where I learned the trick.
Hope that helps!
hello.
can you help me with something?
I have a private blog which I’m trying to change the template. and there is something I’ve been trying to do but no avail, and that is to change the part that says posted by…
right now, mine is just a symbol followed by the time. I would like to change it to something like posted by … and the time. something like yours.
and how do I draw a line between two posts? do i do that in my template or something?
and lastly, if i were to post more than once a day, how do i get the dateheader to appear again?
Thanks a lot. If you could answer all these questions, or link me to some one who can, I would be most greatful.
Is it possible to save down in Illustrator CS
This hack works great for text objects that do have the Rasterize effect applied to them. If they do, the underline will always black disregarding the text color.
… that do *not* have the …
Sorry ‘bout that