I'm not suggesting replicating the look of each browser, since many browsers use proprietary engines or tap into the font smoothing of the OS. I just haven't been able to get good results using the anti-aliasing modes available, and I thought maybe it would be possible to create something like a "web layer" that actually shows the text using a browser rendering engine, or even the engine used by the panels to display web content.
The advantage of being able to display web content in a PS layer would actually go far beyond being able to see how text would render. Maybe it's not possible. I just thought I'd suggest it.
The problem is just that the anti-aliasing options don't really come close to any of the browsers. We have customers who get frustrated when the sites we make don't look like the mockups they approve, and it's hard for them to understand that Photoshop doesn't render text the same way browsers do. It also makes it difficult at times to make typographical choices, since I'll have text look great in PS, but then terrible in most browsers, even with font smoothing.
If text rendering was just close to Webkit, it would cover many of the browsers out there. Since AIR uses Webkit for its HTML rendering, and the same is used for custom panels in Photoshop, I thought perhaps it could be integrated into a text layer within the editing window. Apparently that is not the case.
When I compare the text rendering in photoshop with firefox I see differences. The font in photoshop is more bold. No matter what rendering type I choose, I cannot get it like in Firefox. This is bad for web designing. Because I don't see what I will get...
On the image you see photoshop at the top and Firefox at the bottom.
On behalf of the web design community, please add options to render text as it would in browsers. Its lack of accuracy is a key argument for devs to switch to prototyping in code.
Sometimes I think Adobe needs to split off a version of Photoshop for UI/Web Design, like the way they created Lightroom for photographers. On the other hand, I'm afraid of what might be lost in the new product if they ever did that. There is a lot that Fireworks has going for it, and yet it falls so short. Photoshop is simply the best.
I do UI design for OS X and iOS, and the rendering of fonts at 11, 12, and 13 px size can really affect the feel of the interface. People always tell me that the text looks "off" in a mockup I've made, even though I'm using 13 px Lucida Grande, the default OS X font. This is because the crisp and sharp antialiasing options in Photoshop just look too rough around the edges.
It would be great if the text anti-aliasing drop down in Photoshop had options for different operating systems (and browsers too), so you could create UI and website mockups that look authentic.
For one thing, the browsers and OSes change their type rendering too often.
And they render in a way that makes sense for final form (you're never going to edit the pixels from a browser, and it knows exactly what display it's on), but doesn't work for an editable document (like Photoshop).
Try using the type in Photoshop CS6 - it's closer to the browsers and OS, even though we can't be bug compatible with every browser version on every OS version.
I have been using the CS6 beta for a week now, and the font rendering of computer screen fonts is still not great. This is basically the difference between Photoshop and the browser rendering: http://www.quora.com/Tyson-Rosage/Pos...
If I understand this article correctly, it seems to suggest that sub pixel hinting can improve rendering, but this can depend on the screen you are viewing text with, and might not be possible in Photoshop: http://thomasmaier.me/blog/2010/03/17...
Still, if you take a screenshot of text rendered in a browser, it seems to look better on any screen than an saved image from Photoshop, so I think the rendering could be improved.
I think most users need something that is close to the Cleartype for Windows designs and something that is close to OS X/iOS rendering.
The argument that Microsoft and Apple change their text rendering too often is IMHO invalid. Text rendering is the same in Vista/7 and 8. And Apple has changed anything since years. There may be subtile changes but nothing that changes the appearance too much.
Hello, I have been wondering this for while. When I open a font, I have few anti aliasing methods for it, like "none" "sharp" "crisp" etc. So what I would need as an additional at there is "web".
Because if you take a screenshot from webpage, zoom to it, you see that every browser has an unique anti aliasing method for the fonts. In photoshop the fonts are in only one color, but in web browser there is few colors that makes the font looking like more crisp than in the photoshop. I would like to use this method for the web design I do at work. It's a small thing, but it would make the design look for more realistic. Thanks 🙂
17
Replies
AdChoices
