Catch News
Photoshop–underlines from hell
If only I could have $1 for every time I’ve had to manually draw underlines in Photoshop—I’d have a real reason to change my name to Mr N D Rockefeller.
My challenge for Adobe (if they wish to accept) is to fix this for CS4—surely an aliased underline isn’t rocket science? Or perhaps someone can write a nice little action to do just this—unless of course no one notices this pitfall apart from me…
Tags: Web Design
Nick, maybe it’s just that we never learnt that PS trick when we were at Massey studying for our design PHDs…?
Posted at 1:35 pm on May 12th, 2008.Get over it fullas, I don’t believe I’ve ever drawn an underline by hand in Photoshop – the default text underlines are fine.
Yes, on some fonts they are blurry, and possibly not positioned how they would be in the browser, but come on, it’s not like you try to match the normal font anti-aliasing between photoshop and the browser.
We should be educating our clients away from pixel perfect mock-ups to templates, and this is just another way of doing that…
Posted at 1:49 pm on May 12th, 2008.yea could have been, what was your thesis on again?
Mine was on “alternative structures for typographic design based on dance forms.”
Posted at 1:53 pm on May 12th, 2008.Fireworks does text underlines nicely ; )
Posted at 3:30 pm on May 12th, 2008.Cam: then why in all your designs (well, the ones that I am coding up) are the vast majority of underlines separate paths? Hmm?
It was going to be ALL underlines, but I just did a quick check and I see you have used underline occasionally…
Posted at 4:04 pm on May 12th, 2008.Hey Nick,
Instead of manually drawing underlines, there’s a trick you can use to get crisp underlines in Photoshop. (That is, until Adobe provides a better means.)
Set your type, underline it. Then, if the underline isn’t crisp, invoke the Free Transform tool (under the Edit menu or Command-T on a Mac). If you zoom in a bit (400 or 500%), you can use the up/down arrow keys to nudge the text by sub-pixel values. You’ll usually be able to nudge it just enough to make the underline go crisp.
Doesn’t work for all sizes or fonts. But works for the primary web families (Verdana, Arial, Georgia, Lucida Grande…) at fairly small sizes like 11 through 15px.
I think the more you’re zoomed in, the smaller increments you’ll be able to nudge the text.
Can also work well if you don’t like the anti-aliasing you get with text, because you can also nudge text horizontally using the left/right arrow keys to get slightly different results.
Hope that helps.
Posted at 9:34 am on June 7th, 2008.Some underlines I change the colour on (blue link/light blue underline) and you can’t do that with the uderline tool – its gotta be manual
Posted at 11:34 am on June 9th, 2008.Doug, great tip there, thanks!
Posted at 7:33 am on October 1st, 2009.Thanks Doug, that’s a great tip!
So what we’re really doing is moving the text by less than a pixel which slightly affects the rendering of the text?
Posted at 9:46 pm on February 15th, 2010.BIG THANKS to Doug Bowman !
Posted at 11:55 pm on March 17th, 2010.The problem is not solved totally, but we really can make lines looks more like 1px height, not 2-3.
One more trick without “Free transform”:
“When the underline is too close to the text: highlight the text and zoom way in on it. Then hold down the Control key, and drag the text (slightly) up or down. The text will move one pixel away from the underline.”
Posted at 11:59 pm on March 17th, 2010.by Kurt Hughes
You can do the same thing with subpixel baseline shift.
Posted at 10:00 am on March 31st, 2010.