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.

Photoshop's Character palette, with the Underline button location highlighted.

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.

Illustrator's Character Style Options dialogue, showing the type attributes I already applied. 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:

The General pane of the Character Style Options dialogue, showing no additional character attributes as a part of this character style. 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 | 29 Comments

Thursday | 13 May 2004

I’m Just Sayin’…

This year is certainly my “coming out of the office” year in terms of public speaking. With three events down, and four more on the schedule so far, the year holds lots of opportunities to meet new people.

A big, huge thanks goes to the Sonoma County Web Developers SIG for hosting me on Tuesday night for a talk titled, Beautiful Interfaces with CSS. Except for getting out of the office late that afternoon, and getting stuck in over 2 hours of traffic on the drive up from San Francisco, it was really an enjoyable evening with a lively crowd. The smaller setting provided lots of opportunity for interaction and a good amount of questions mixed in throughout from the audience. The talk was scheduled for about two hours, we went over by 20 minutes, and I still only got through about two-thirds of the presentation I had prepared. Tried to bite off too much, I guess; but there were lots of good questions. Little did they realize that the advanced topics I didn’t get to cover included a lot of thinking in how to rework their own table-based site using CSS for layout and presentation. I’m realizing I have a lot more to say about design and the use of CSS than I ever thought I did. When I start talking about the things I love to do, it flows naturally. I think almost everyone left, pretty excited to dive further into the topics we discussed.

That said, if you haven’t seen one of my talks yet, or are curious about other upcoming engagements, see if this short list contains any cities near you — or even cities you’d like to visit:

Portland, OR
WebVisions 2004 | 16 July
A one-day conference focusing on the future of the Web and how we interact with it. I’ve got two talks lined up for WebVisions: one about where we go once we’ve converted to valid, tableless designs, and another on finding sources of inspiration. Will also feature Anil Dash, Matt Owens, Kelly Goto, Scott Hirsch, Jason Fried, Matt Haughey, Armin Vit, Christina Wodtke, and more. Register before 1 July for the discounts.
Seattle, WA
Digital Design World, Seattle | 21-23 July
A three-day conference with tracks on Web Design, Photoshop, and Digital Workflow. If you missed the last event held in San Francisco in February, Seattle is a chance to hear two more sessions from me: one solo talk about design and CSS, and a second talk on design and accessibility, co-presented with Andrew Kirkpatrick from the WGBH National Center for Accessible Media. Register before 9 June to get the discount.
Washington, D.C.
Adaptive Path’s User Experience Week 2004 | 16-19 August
A four-day jam-packed week of knowledge-sharing from the wise folks of Adaptive Path, including guest speakers, Christina Wodtke and Douglas Bowman (must be some other guy named… oh wait, that’s me). If you haven’t attended a workshop put on by AP yet, you should. They put on a good show, and share a lot of valuable information. (I speak from experience of attending past workshops.) Plus, they asked me to join them this time around, so you get an even wider range of material that will be covered. Register before 20 May to save US$300.
Sydney, Australia
Web Essentials 04 | 30 September - 1 October
A two-day conference embracing web standards for those new to standards-based design and the seasoned professional. This one promises to be a bit different than other conferences, in that each session will be co-presented by a tag team of two to three people. The event is organized by the Web Standards Group and the helpful folks at Westciv. I’ll be sharing the stage a few times with Dave Shea, Joe Clark, John Allsopp, Russ Weakley, and a host of other brilliant Aussies. Register before 1 July to save AUD$100.

And for Pete’s sake — he’s a friend of mine too — if you plan on coming to one of these shindigs, please let me know in advance in case we can arrange something while we’re in the same city. Or at least come up and say hi and introduce yourself. I’m a friendly chap, really. Ask anyone who knows me. I double-dog dare you to.

5:00pm in Events, Locations

Monday | 10 May 2004

The New mp3.com

This must be the week — if not the day — to launch new designs of products and services under new ownership. Good friend, and former colleague at Wired, Stephen Blake played a large role in today’s launch of the new CNET-owned mp3.com redesign. XHTML, CSS, Sliding Doors, and rounded corners… oh my. <sarcasm>Apparently, they have no problem going head-to-head with the redesign of Blogger. Figures. I work at Wired, try to teach Stephen everything I know, then he leaves Wired not long after me, joins CNET, and tries to steal our thunder with a redesign of his own.</sarcasm> Although he’s probably secretly cursing us for the same thing.

In all seriousness, congratulations to Stephen, Tim Mitchell (another friend/former colleague), and the entire CNET music team on getting mp3.com to beta stage. To those who click over to mp3.com expecting the same service from 1998, think again. You won’t find the abundance of downloads of local garage bands from Santa Monica or Duluth. Instead, you’ll find categorizations, artist info, audio streams, and summaries on music-related technology. The download service was transitioned to a subdomain of download.com.

3:24pm in CSS, Entertainment

Sunday | 9 May 2004

The New Blogger

The latest Stopdesign project: Blogger. For those of us involved in the project, we’ve been waiting months for this day to come. At long last, I’m proud to announce the launch of a project representing the latest collaboration between Stopdesign and Adaptive Path: the redesign of Blogger.com. Congratulations to the entire Blogger team on completing hundreds of hours, and expending tremendous effort to fit so much into this launch. This is Blogger’s first major overhaul since getting acquired by Google in February 2003, and it’s a biggie.

The new Blogger home page The redesign includes a major reworking of Blogger’s home page and sign up process, and a new dashboard for logged in users. With this redesign, we focused on making the Blogger brand and interface much more friendly and approachable. The design features rounded corners, large icons, direct concepts, and helpful directions. Adaptive Path and Stopdesign worked with Google to pare down the sign up process (account creation), making it short, intuitive, and effortless for first-time visitors. We aimed at creating a structure and design that has as wide a range of appeal as possible. From the large base of Blogger’s existing users, to the multitudes arriving from Google on a regular basis who have no idea what the word blog means.

The Blogger home page now promotes the simplicity of creating a new blog by highlighting the short 3-step process. The page also presents a simplified definition of the word “blog” right up front, and directs new users into a short tour if they want to learn more. In addition to the site redesign, Google ups the ante for this relaunch by adding a slew of new features for their users: comments, user profiles, individual post pages, and conditional template tags. On top of that, they’ve significantly revamped the application interface to mirror the new look and feel of the site.

A few additional notes about the redesign:

New Set of Blog Templates

One of the new enhancements Stopdesign worked with Google to complete and include in this launch is the creation of a whole new set of user templates available for immediate use. Rather than have all templates created by Stopdesign, I thought it would be fun to expand the team involved. What if I asked other talented individuals I respected and wanted to work with to join me in designing brand new templates? I wanted to share in the responsibility of template design and creation, providing even more variety to Google and Blogger’s user base. You may know most (or all) of the names of those who graciously accepted to help me create these new templates:

A peek at a few of the new blog templates:

The full selection of templates (along with their full-size previews) are visible inside the Blogger application. You may see more from the individual template designer on their respective sites about the design choices and techniques each of them used. As for the impact of this part of the project, not only will thousands (millions?) of blog templates now be generated with more flexible, scannable, indexable, and standards-compliant code, but anyone throughout the world can now create an account, start a blog, and have a personal site designed by any of the talented gentleman listed above, all for free.

The Evolved Identity

The old square logo, compared with the rounded corners and refined proportions of the new logo.

The old typeface, in all caps, and the new typeface, set in title casing. Sharp-eyed party-goers at the Blogger party in Austin during SxSW may have noticed the signage and multitude of free t-shirts they handed out which featured a new identity with rounded corners and a new type treatment to match. When we set out to establish the new visual identity of the site, we kept running up against the hard corners of the old Blogger logo, and the somewhat impersonal type treatment which limited the friendly qualities we were trying to inject into the brand. We didn’t want to push the logo far from what everyone knows — after all, the big orange B is widely known and loved by many a folk. Instead, we chose to evolve the logo, so it could take on a few new attributes. We sanded down some of the sharp edges and refined a few of the proportions, then carefully selected a typeface more suited to a product targeting the masses.

Home Page

Visitors without Blogger accounts, or users currently logged out will see a different home page at blogger.com than users logged into the system. The logged out page provides answers to the question, “What’s a blog?” and highlights how short and simple the new account/blog creation process is. The logged in page presents a new Dashboard view. The Dashboard acts as an enhanced intermediary between the site and the application interface. It provides a customized view of the Blogger home page by displaying a quick overview of the user’s blogs, related profile information, updated blog content, and Blogger news. Can’t say what else is in the pipeline for additions to the dashboard, but users can most likely expect many more changes and new features in the near future.

Blogger's new mobile icon The new icons and buttons produced for Blogger (visible on the logged out home page and throughout the site and application) are intended to complement the amiable nature of the new brand. They pick up where I left off on a style I started using about six years ago for the Webmonkey Kids design. Some of the icons were sketched on pen an paper (ahem, numerous times). After finalizing an approximate look, the icons were drawn in Illustrator using a pressure-sensitive Wacom tablet and pen to create the base artwork, then cleaned up by manipulating paths and Bézier curves within Illustrator.

Design Execution

As true to the Design Process article, this project started with discovery and competitive analysis phases, led by the Adaptive Path team. I’ll let them go into as much detail as they want about the early process for this project.

Freeform exploration and brainstorming produced descriptive words, qualities, and elements to be used in the design. This was followed by tiny thumbnail sketches exploring loose layout and composition ideas. A few rough ideas sketched on paper made use of bold lines and thick rounded corners, which eventually led to the final design.

I’m using Adobe Illustrator more and more often for comping designs, and the Blogger design was no exception. It allows for easy object creation, manipulation, and resizing since everything is in vector format. I can easily move whole sets of objects, guides, and paths. The recent addition of the Effects menu allows me to apply a rounded corner appearance to each block without actually rounding those corners, as seen below:

Working in vector allows for easy manipulation of objects and paths.

(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.)

A few clickable prototypes, several days of user testing, more tweaks and changes, and the down-and-dirty CSS work began. (Note: CSS didn’t really even enter the process until this final stage.)

Technical Insight

I won’t go into much detail here on technical details. But I will confess that this project is what finally prompted me to write about the IE Factor. The frustration of building a design in CSS and getting it to work across all browsers is certainly more apparent when you’re trying things you’ve never seen done or explained before. IE was the main culprit. Both Windows and Mac versions proved exceptionally difficult to bring into submission, but at least the Mac version had known workarounds and filters. Some of the features of the design (like the subtle background changes when hovering over the icons on the home page) were completely disabled for IE because they produced unintended and unacceptable results.

The rounded corners seen throughout the Blogger redesign (and in several of the user templates) make use of an expansion of the Sliding Doors technique written for A List Apart last year. The Blogger design is a fixed width, which means most of the modules of the site exist at pre-defined widths. Since the width of each module is known, one image is used for the top-left and top-right corners of a module, and another image is used for the bottom-left and bottom-right corners. The images are called in as background images for two nested elements. Since these two elements contain all the text of the module, they expand infinitely as the module grows in height. Think of it as Sliding Doors turned on their sides.

For modules requiring a border, the two images are modified to include top and bottom borders connecting the two corners. A third element gets nested in the HTML that uses left and right borders which connect top and bottom corners.

This design posed many other challenges when building it out, specifically because we wanted to allow the text and each of the design elements (header, modules) to be as flexible and scalable as possible. The markup construction was tricky and required compromises in several places. As is evident with the rounded corner modules, extra divs were necessary for each background image called in. In CSS3, border images will certainly help eliminate the need for extra elements. And I’ve been pressuring Tantek to get the CSS Working Group to consider allowing us to set multiple background images on one HTML element.

Wrap Up

As I have the habit of doing on product launch day, I’ve provided more than enough information for anyone to digest. I’ll close it off by saying that it was an incredibly fun project to work on. From the pleasure of partnering with incredibly smart folks at Adaptive Path, to the fun-spirited team at Google we got to work with, to the designers who agreed to help participate in a template project with little knowledge of the entire picture and, initially, not knowing who the client was.

This launch is a huge deal for Blogger. They may not have gotten everything right out of the gate, so I’ll cut them plenty of slack, and I would hope others do the same based on the number of improvements and enhancements they’ve made all at once. For instance, those who know my style and promotion of web standards may immediately try to validate the home page. I’ll save you the time and tell you it won’t validate right now. (If you’ve already visited Blogger and hit your Validate HTML favelet within a minute of seeing the new design, shame on you. Don’t you have better things to do? Aren’t there other things more interesting than making sure a new site launches with valid code the very same day?) A few simple omissions of closing brackets, and use of the target tag within a XHTML 1.0 Strict doctype is preventing the front page from validating right now. They’ll get to it eventually. Bear with them as they try to make sure everything else is working correctly for all the users who depend on the service to publish their thoughts and experiences to the world. Fixes and new features will most likely continue to roll out in the weeks ahead, so expect changes over time.

Overall, what a great project. Despite the frustration with browser rendering consistency that plagued us on the tail end of this project, it was still fun. Good client, good team, good product. What more could you ask for?

For the rest of the story on new features and changes, check out The Great Blogger Relaunch, which tells the story from their perspective.

8:23pm in Business, Design

Tuesday | 4 May 2004

Props to the Old School

As we approach the 6-year anniversary of the original CSS2 Specification that reached W3C Recommendation status on 12 May 1998, and as the major undertaking of CSS 2.1 rapidly nears Proposed Recommendation status, John Allsopp writes a very appropriately-timed post. Message To The Messengers - Props to the old school reminds us of those to whom our gratitude belongs for their early work and evangelism of CSS.

Most of those names are familiar to me. I’m even lucky enough to consider a few of them my friends. If they look like foreign names to you, take some time to follow a few of the links scattered throughout the post. There may be a few more names that will quickly be added in his comments. Nevermind that my name is mentioned somewhere in the middle of John’s post. I came way too late to the game to be mentioned (even in passing) in the same breath as these folks.

So hats off to all who have contributed over the years. You have my profound gratitude for advancing the web tools and technology with which I work on a daily basis.

7:30pm in CSS

More Recent Entries

See more in the Log Archive »


About Stopdesign

* As a design consultancy, Stopdesign specializes in collaborative problem solving, and in producing simple, clean, cost-effective results. read more »

Recent Links

View all Links »

Upcoming Speaking Dates

11 May 2004
Beautiful Interfaces with CSS

Sonoma County Web Developers SIG Event Sonoma, CA

View all Speaking Dates »

Most Recent Article

Sliding Doors of CSS, Part II
| 30 Oct 2003 A follow-up to the popular “Sliding Doors of CSS” (Part I, published at A List Apart) which fills in a few gaps of missing information, and covers additions and variations on the technique introduced in the original article.

View all Articles »

Frequented Sites

View all Sites »

More info

Feeds