Anti-Aliasing, TextEdit Style
Monday, January 16th, 2006 by MR
Like most designers, I do my design comps (prototypes) in Photoshop. And also like most designers, I’m a typophile and am obsessed with the best looking type I can achieve in my designs. After all these years, I do believe the one thing that irks me most about Photoshop is the way it renders text — the four different anti-aliasing settings suck because I’m spoiled by the Mac OS X Cocoa text rendering engine which makes text look 10x better.
Because Photoshop anti-aliasing makes me puke, I do all of my type-setting for design prototypes in Apple TextEdit, which uses Cocoa anti-aliasing to make text look amazing. By doing this I keep an .rtf file alongside the PSD design in my folder. To transfer the text from TextEdit to the Photoshop file, I just take a selection screenshot (Apple + Control + Shift + 4 ….. then select a box around what you want) and then paste it into the PSD.
When I’m ready to write the CSS for the design, I just open up the text file and check out the font settings (family, size, etc.) and get to crackin’. Here’s how my text file currently looks for the new 9rules homepage coming this week:
Nothing revolutionary here, just wanted to write about the little quirky things I’ve learned to do in the past few years. If you’re on Mac OS X and hate Photoshop’s anti-aliasing, maybe give TextEdit a shot — it’ll make your prototypes look much better.
Reader Comments
18 Responses to “Anti-Aliasing, TextEdit Style”
I’m on a PC and there isn’t any decent text anti-aliasing. I use Photoshop, Illustrator and Indesign and none of them are very good. Flash has been ok.
I can live with badly aliased site prototypes, I’ve actually considered turning of aliasing altogether for prototyping since many (most?) PC users don’t have it turned on and I like to see what the user sees.
It really becomes a problem when I need to create an image with text. I can’t find anything on the PC that can render the text nicely.
What do you use on the Mac to create a gif or png with nicely aliased text?
January 17th, 2006 at 11:18 am
“What do you use on the Mac to create a gif or png with nicely aliased text?”
Smithee, I use a combination of TextEdit to render the text, then I copy and paste a screenshot of that text into Photoshop.
January 17th, 2006 at 11:34 am
Great tip Mike, cheers.
I’m currently doing some comps using Fireworks and it handles fonts badly, so I’m going to try your idea.
I use Macs and Pacs here and I must say that I get depressed when I see my favourite sites on a PC as the typography looks generally shoddy compared to the Mac.
January 17th, 2006 at 12:03 pm
I wonder if there is a 3rd party windows app that comparable to Cocoa.
January 17th, 2006 at 12:24 pm
http://www.d-type.com/home/index.htm
This looks like a good site for windows rendering.
January 17th, 2006 at 12:38 pm
Yeah I must say that seems like a lot of work when 90% of users see it aliased. Take a look at HTML text on a PC, now that’s reason to puke.
January 17th, 2006 at 12:43 pm
ClearType seems to be of good use for PC users at the moment. HTH
January 17th, 2006 at 3:20 pm
New 9rules design? Goodness you guys redesign an awful lot.
January 18th, 2006 at 12:56 am
Jordan - Thanks for the d-type tip. I’ll give it a try.
January 18th, 2006 at 2:46 am
Smithee - doesn’t seem that you can use it for much except for it’s proprietary editor. It would be cool if they could patch Win XP with that text rendering engine.
January 18th, 2006 at 5:04 pm
Yeah, PCs suck at type, but I guess that as the http://www.arcsoft.com guys are listed clients (of http://www.d-type.com), then ArcSoft’s XP photo software probably has the nice rendering shit built in. It’s piss cheap too.
Worth a look maybe.
January 24th, 2006 at 8:57 am
Gotta give you props for this one — great idea. I *hate* how Photoshop does antialiasing…
Got any ideas for how to mockup form elements like submit buttons with antialiased type? Do I really have to create HTML mockups and Command-Shift-4 them into Photoshop?
January 29th, 2006 at 11:43 pm
For the form elements, I usually mosey into my blog software of choice and write a quick few lines of HTML in the entry, then preview it for screen capture. It’s a bit quicker than writing the full-on HTML file, and doesn’t really exist anywhere so you don’t have two worry about random HTML skeletons all over the place.
Fortunately text fields and textboxes can just be Photoshop-adjusted for height and width, but buttons and dropdowns are the ones you have to write the HTML for :)
January 29th, 2006 at 11:46 pm
One thing that struck me is this…
If your design comps look stunning with the great text effect - what will the client think when they see it rendered on their own PC?
Wouldn’t they fail to see the great text you had shown them in the comp?
It sounds like a great idea if it was for print, high resolution digital art or even an internal intranet (where clear type or some other rendering could be managed) - but this seems like a lot of effort just for a look?
I am a typography nerd too, and I have clear type turned on and managed with all of the PC’s I use - but I would rather spend the time doing other things.
Just my $.02.
February 1st, 2006 at 11:45 pm
Very interesting Mike, but do you not find that the screenshot tool in OS X doesn’t provide a pixel-by-pixel copy, but something that gets mangled by Quartz?
I find the only way to get an accurate screen grab is by using the Grab application…
February 2nd, 2006 at 12:22 pm
Yup you’re right Toby. The main problem I have is that the colors are a bit off, but I figure that the discrepancy is better than Photoshop’s rendering any day ;)
February 2nd, 2006 at 12:24 pm
I think Photoshop anti-aliases *FAR* too much, personally. That’s probably why I’ve modified the anti-aliasing level of my OSes to exactly how I like it.
February 25th, 2006 at 10:36 am
Haha, I’m doing exactly the same for years now, only using my favorite html editor and making screenshots from firefox :P Just wanted to let you guys know… It’s such a shame photoshop doesn’t offer the possibility of rendering text the apple way with one click of a button.
November 29th, 2008 at 8:36 am
Add Your Comment
Comments are moderated because spam's not tolerated.
