PI X3 - your initial view points

[sisom]

sjj - your first image is a .png, not a .bmp.

I didn't quite understand what you were referring to - about the images looking as good as my original.

I produced a .bmp because two previous posters have suggested that the problem lies in compression, but it's nothing to do with that.

The problem I have, Reactor, is that sometimes I want to produce a graphic with some text on it already, such as a button with a font that the user won't have on their system (or isn't likely to), and I simply can't rely on PI's anti-aliasing. I suppose you're right - the AA is good for everything but small text - though I have had problems where the vertical sides of boxes, using AA, deviate by one pixel from the top to the bottom, which looks really bad when I use CSS to combine four quarters of a round cornered box into a sort of 'sliding doors' box, which changes size both vertically and horizontally, according to its contents.

I'm a bit confused as to why the experts here can't see the problem I'm seeing. Heinz, can you show me examples of sharp text that you can produce with PI12, and tell me how you did it?

[heinz-oz]

.....I'm surprised that you haven't noticed this problem Heinz.

I'm not surprised because I do as I suggested. I create my images in PI, not my text. If I need text on a web site, I generate the text in HTML not in PI.

Have you tried another image editing program to test this? Why not get a trial of the most expensive program you can find, like Adobe PhotoShop, and try with that. Let us know if you get better results.

[Reactor]

I want to produce a graphic with some text on it already, such as a button with a font that the user won't have on their system (or isn't likely to), and I simply can't rely on PI's anti-aliasing.

Ah okay, I see. Well, I don't think there's that much to worry about. The difference really is so small between the two (both are readable) I wouldn't worry. But, that's just me I've had the thought in the past myself, but for really sharp text you'll need to use another program (there aren't many around which can pull this one off) or turn to vector/flash.

I use CSS to combine four quarters of a round cornered box into a sort of 'sliding doors' box, which changes size both vertically and horizontally, according to its contents.

That kind of thing is always troublesome, even when you're using a more accurate vector editor. In that case I'd just trim the sides... if that looks okay. I'm no master web expert, but when things come down to one pixel you'll find the differences between browsers will cause you issues anyway.

I'm a bit confused as to why the experts here can't see the problem I'm seeing.

I see what you're talking about.

[heinz-oz]

Now I see what you mean but it doesn't change my response. The problem you are seeing is due to the way the browser displays images. It is different to the way it displays text generated in the browser.

That's just the nature of the beast I suppose. I would still try to use a true vector graphics program to achieve a better result. A raster based program, which all image editors are, will always give you the same problem.

Download a trial of Adobe PhotoShop and try it with that one. You might find it is similar. True vector graphics you can get with programs like Corel Draw but, I don't know if you can use vector graphics with your CSS.

Since you said that only small print behaves that way (I doubt it though, it's just more noticeable) make a larger image and scale it in the browser for a trial.

I don't use PI for web page creation at all. I may prepare images to be used in a web page, but that is all. I use a WYSIWYG html generator for my web sites and have never noticed the problem you see, sorry.

[Reactor]

Heinz, I think you're wrong here.

The problem you are seeing is due to the way the browser displays images.

That is incorrect. All modern browsers will display images just as they are in PI (or how they're previewed for export), unless you're using a wysiwyg editor which re-renders the images for you when it exports. The problem is that PI's fine anti-aliasing isn't that well suited to preserving fine detail.

[sisom]

May I ask why my last post (or posts, I can't remember if I made one or two) have been deleted?

[sisom]

Now I see what you mean but it doesn't change my response. The problem you are seeing is due to the way the browser displays images. It is different to the way it displays text generated in the browser.

While this is obviously true, (browsers use the standard Windows ClearType anti aliasing for text, and simply display all images exactly as they appear in any program on any PC or Mac), it doesn't address where the problem lies - in PI.

That's just the nature of the beast I suppose. I would still try to use a true vector graphics program to achieve a better result. A raster based program, which all image editors are, will always give you the same problem.

Can you elaborate a little, Heinz? Do you mean generating text in a vector graphics program?

Download a trial of Adobe PhotoShop and try it with that one. You might find it is similar. True vector graphics you can get with programs like Corel Draw but, I don't know if you can use vector graphics with your CSS.

I can only use either standard text, or bitmap graphics, with CSS, but I'm not sure I understand what you mean by using vector graphics, if it's to generate text.

Since you said that only small print behaves that way (I doubt it though, it's just more noticeable) make a larger image and scale it in the browser for a trial.

Yes, it's only noticeable on small print, the anti-aliasing is no doubt applied the same to any size of text, it's just that it obviously isn't designed to work well with small text. It's great for larger text, and images though.

I don't use PI for web page creation at all. I may prepare images to be used in a web page, but that is all. I use a WYSIWYG html generator for my web sites and have never noticed the problem you see, sorry.

Well, I've done my best to clearly show the difference between the two types of text, with my screengrabs.

Reactor, do you really think the difference between my two examples is quite small? Maybe I'm just really, really fussy! To me the PI version is just unbearable, and when I previously used it to create some buttons for a website, I had to give up in frustration with PI (for the buttons, at least) and generate the text in Webuilder, using HTML, then cut it out, then paste it onto the buttons in PI.

Anyway, tomorrow I'm going to download some demos of other graphics programs and see if any of them do any better - somehow I expect they probably all have their own anti-aliasing settings, none of which are optimised to work with small text (and why should they be, I suppose, since most of the time you'll be generating either images, or larger than 20pt text.)

I've played with PI X3 some more, and I haven't found any reasons to upgrade from PI12 yet, but I'll do some more testing.

[sjj1805]

Perhaps you can achieve what you want using a work round like the above.
notice how small yet clear this text is.

[Reactor]

I'm also very picky, trust me

But, I think the png example is half decent. It's readable- that's the main thing. It's not perfect, but I'd be surprised if many looking from the outside in would mind... so the long and short of what I'm trying to say is, try and improve it if you can, but I wouldn't make it the be-all and end-all of your efforts, unless the rest of your website is award winning (and I mean really award winning) In that case I'd look to another program for your text. You could copy and paste normal text from a notepad or something similar as mentioned above, but you have two issues- you need to find a way after doing this to produce an alpha channel, and cleartype has a certain "ugly" look to it on a non-cleartype monitor. If you're using standard Windows AA, you'll find PI's efforts actually look better...

[GKDantas]

I think that almost everyone here dont work as webdesigner, this is why they dont understand the real problem and give some solutions that dont wok. I dont want to blame anyone here but the antialiasing for small fonts its a real problem in PI what make work for web very hard as profissional.
Look the attached image to see the same text writed in many programs specily PS CS2:

http://www.euqfiz.com.br/imagens/fonts.bmp

[sjj1805]

I think that almost everyone here dont work as webdesigner....

That is not the issue. The issue is that you are trying to use a Photo Editing Suite to create a state of the art website. If you are going to create a state of the art web site you would not do so with a photo editing suite you would use something like

Microsoft Frontpage
Dreamweaver
Macromedia

Please click here

The prime purpose of PhotoImpact is photograph editing.
You would not drink a bowl of soup by using a fork would you.

[sisom]

Well, I have to disagree with you, Reactor. My websites certainly aren't award winning (if only!) but the poor text looks really bad, especially because it's small, and therefore needs to be far more clear than large text.

GKDantas - thanks for your example text images - that's very useful, and it shows the problem is probably universal. I'll just have to work around it, by creating my text in Webuilder, but often times it's nigh on impossible (or a hundred times more time consuming) to do it this way. I can't produce drop shadows, bordered text, etc. with HTML.

SSJ - I don't think you understand how I use PI. I'm not using it to actually create the markup for my websites, just the graphics. DreamWeaver, Frontpage, Webuilder, cannot create images.

Let's say I want to produce a navbar, with six headings, and I want to use a special font, which I know that 99% of my users won't have on their PCs, so I can't use HTML to produce the text, with a background for the headings. The only way to create clear, legible text (that doesn't look smudged and amateurish) is to create it in an HTML editor, cut out the text, and paste it in to PI.

Let's say I want to create a small graphic that says "Sale now on". With PI (and no doubt all the other programs that GKDantas kindly tested this on), the text will look poor, compared to all the rest of the (HTML) text on the page. Perhaps I just have very good eyesight, but I'm not alone here, I very often need to create small text, at an angle, with a border, with a drop shadow, etc. and I cannot do it HTML, and I need it within other objects (i.e. a box, an arrow, etc.) and the text in PI (and presumably all other graphics packages) always lets me down.

Other than this, PI is incredibly powerful, and a joy to use - it's just this one limitation that really prevents me from making my websites look as good as they could.

Reactor - could you recommend a program that might overcome these limitations? (For producing small graphics, such as arrows, boxes, etc. with custom text in them).

[Reactor]

The prime purpose of PhotoImpact is photograph editing.

That's true, but in fairness PI does put itself forward as a webpage editor as well. A professional may edit their webpage together in Dreamweaver or Frontpage (although all the pros I've seen would rather code it all by hand) but as sisom has pointed out those programs aren't image editors. It's fair enough to expect a little more from PI for the editing of (web) graphics.

Reactor - could you recommend a program that might overcome these limitations? (For producing small graphics, such as arrows, boxes, etc. with custom text in them).

I'll do a bit of research, but I'm curious about exactly what it is you're trying to achieve visually. Normally if I had a banner or similar to make I wouldn't use really small text. While another program might produce a great font for you (I have a few programs in mind, but I need to run a test or two) another option might be to change what it is you're making, so you don't need to render your text so small.

Do you have an example of what it is you're doing? (if you don't mind people seeing). Otherwise, feel free to PM me. No worries if you'd rather not.

[Ron P.]

What some of us are trying to explain to you about text in PI when exported as a webpage, is that it is not exported as text. It is converted to an image. Thus you can not make a valid comparison to HTML mark-up text.

For example on this forum, you can select any of the text on the page, and paste it into notepad. If you're using FireFox, you can use the View Page Source, and see the text. If you try to do that with an image, even though it has text on it, all your going to see is an image, not the actual text.

Now for using small fonts, have you entertained using pixel fonts? These are specially developed small fonts. They are used quite extensively with Flash web pages. Fonts for Flash.com is one very good source for these. If used properly they appear very crisp and clear.

Google Search on Pixel Fonts

[sisom]

Vidoman, I don't think you appreciate the level of skill I have in creating webpages using HTML and CSS - I'm well aware that PI doesn't export text as text, that it exports it as an image. Of course I can make a valid comparison to PI's text rendering and Windows' text rendering - obviously PI uses proprietary AA because it works better with graphics and larger text (by 'larger' I mean anything over 20pt approx.)
I know how HTML and CSS works inside out (just about), I don't think you understand the difficulties I'm having, because you don't write your own HTML markup.
I'll try to produce an example of the sort of thing I need to make, and post it up tonight.