Making the text in your Photoshop layouts look like it does in Firefox

Does anyone know how to do this? Whatever antialias settings I choose in Photoshop, the text in my layouts never looks like it will when I slice the layouts for a browser.

Nor should it. The web isnt Photoshop, it’s not supposed to be all pretty super pixel perfect antialiased, it’s not a flat image and is more accessible because of this fact.

I feel your pain but like Soul said its not possible.

It’s a pain isn’t it.

I sometimes make an HTML page with the text, screen shot it and paste it into my photoshop design so it looks nice and crisp like it will when it’s real webpage.

Photoshop is used to create images. Web pages are not images, but more like readable, accessible documents. They are two different things and one shouldn’t want them to look exactly the same.

Thanks for the suggestion. I’ve done this but it’s very time-consuming if the client requests changes. I might go ahead and do it anyway though.

Yeah thats probably the best solution. I often do that for large text such as headings which look very poor in photoshop without aa.

Right, I know that the web is more accessible because it’s not a flat image. I think you are missing my point.

Yes, the purpose of Photoshop is to create images. A web layout is usually an image, initially. I want my layout to look exactly the way it will look in the browser (at least FF). Why “shouldn’t” I want that? My clients definitely do. Should I be using another app for my layouts in your opinion?

Oh cool, I found a plugin that handled this:

http://sharptype.graphest.com/

Here’s where I found it:

Ooof, this is crap. The user interface is horrendous. I’m going to use the browser/screengrab method.

Well then this is an exception to your rule, because I need them to look exactly the same. When I do it it’s because I’m making a photoshop concept design for a website. I build the design in photoshop and get it signed off before I touch any code. It needs to look exactly like the webpage will and photoshop text always looks a bit fuzzy, so to give a better representation of what their website will loook like I use that technique for the text, sometimes, not always.

I can agree with that sentiment - clients get a Photoshop design, they sign off on it, and then the web page you deliver never quite looks the same, and the clients get grumpy. :frowning:

I just turn the anti-aliasing off for the purpose of mock-up acceptance and it works pretty well.

What you “need” isn’t important to the visitor. In my opinion your approach to “design” is completely backwards and will result in bad web pages. You are trying to treat the web like paper. It is not paper and nothing you can do will make it paper.

That there are so many people who think this is the right approach out there just makes me sad.

eh? I don’t understand where you’re coming from.

I build a design in photoshop, they say whether they like it or not, we make any required changes, they sign off on it, then I build it in HTML/CSS so it looks exactly the same. Needing the mockup and the actual webpage to look the same isn’t a deficiency on my part, how can it be, it’s part of being a professional and delivering what the client needs and expected to see. I can’t get a mockup signed off then deliver a real page that looks different, that would be unprofessional.

How do you do it?

Clearly. Not surprising since to me your whole process is totally backward and a setup for a virtually guaranteed failed and broken web page.

I build a design in photoshop, they say whether they like it or not, we make any required changes, they sign off on it, then I build it in HTML/CSS so it looks exactly the same.

No you don’t. You build it so it looks the same on a certain small subset of browsers and systems. But it won’t look the same in all sets because it can’t. The web is designed so it can’t.

Some people browse the web with browsers that talk to them, because they can’t see. How do you suppose it “looks” to them? Yet in some countries there are laws that say it must be completely available to these people.

Needing the mockup and the actual webpage to look the same isn’t a deficiency on my part, how can it be, it’s part of being a professional and delivering what the client needs and expected to see. I can’t get a mockup signed off then deliver a real page that looks different, that would be unprofessional.

On a paper that would be right. On the web it’s totally wrong because the web is not paper and never will be.

How do you do it?

I get the content, which is the number one most important part of a web site and what people are actually looking for. I then mark it up semantically with valid html in a strict document type, without any concern for how it is going to look. Then I apply CSS to make it accessible and easy to use on every browser. I dont’ mind at all if it looks different from browser to browser, only that it is useable on all browsers. Then I will style and position elements to give it a decent look.

Of course, being human I will not always follow this procedure exactly and I have to admit that I do often have a general idea of how it is going to “look” when I’m finished. But I don’t let that prevent me from marking it up semantically first, before I style it to look good and, more importantly, to work well even for someone who vists the site with an aural browser.

I usually end up with a page that is useable and looks about the same in most common browsers. But I have no desire to make it look identical across all browser because, for one thing, that’s impossible.

Even if you turn off anti-aliasing in Photoshop, or you use a sharper font, or another method, to attempt to make the text appear the same, you still have to face the fact that each browser renders text slightly differently anyway. Text rendering on a browser will also differ depending on the operating system. It seems a bit of a no-win situation if you ask me.

:agree: I’ve always treated the non-anti-aliased text I used for mock-ups as a sort of a dummy placeholder - just like lorem ipsum for text contents but for text appearance.

Sounds like you don’t do work for clients, then. :wink:

Many clients want to know what the thing is going to look like sometime near the start of the project. They won’t wait to see how it turns out weeks down the line. The OP, by preparing a Photoshop mockup, is doing something completely normal and eminently sensible. It’s common practice and it’s done for sound business reasons. It’s common sense to try and make the Photoshop ‘sketch’ as realistic as possible, and that’s what he’s asking about.

Your ‘political’ objections and dogmatic assertions in earlier posts are not relevant to the OP’s situation.

Paul

You beat me to the punch…