Fuzzy text using VSD, or my...

User 367884 Photo


Registered User
65 posts

Hi. This ranks as maybe a fairly trivial issue, but it has bothered me since using coffeecup VSD. Has anyone ever noticed some text is blurry when using VSD? For example, on my website, at http://noxlife.com/Nox%20Rocks.html, the blue "Double Protein" and red "Acai & Pomegranate" letters are "fuzzy" when compared to the green "Wheat Germ & Flaxseed" letters. I don't think it's merely a contrast issue related to the different colors. It seems that the text should be sharper. Anybody else notice this, or is it my imagination?

Thanks,

Tom
User 367884 Photo


Registered User
65 posts

I think that link got messed up. I'll try again:

http://noxlife.com/Nox%20Rocks.html

Sorry,

Tom
User 37670 Photo


Registered User
2,138 posts

Hi Tom,

I had a look. The text that you mention as being blurry, is really an image. You chose a colorfull background around your text and it either was an image, or vsd made it into an image, not sure which. Either way, images of text always risk being blurry, or not as sharp as actual text on a web page. Images are often "compressed" to save on file size. This does not hurt the average image, but can cause problems with text shapes as images.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 367884 Photo


Registered User
65 posts

Thanks, Cliff. Interesting. The words "Double Protein," "Wheat Germ & Flaxseed," and "Acai & Pomegranate" were all created as text using VSD, but then I applied the shadows to the text using VSD. Am I correct that when you add effects to text, the text is converted into an image? Still, many of the other words (the text on the buttons on the left and at the top of the page) also have effects added to them, and they seem crisper. Even the green "Wheat Germ & Flaxseed" seem a lot sharper than the blue "Double Protein," yet they both have the same 2% offset shadow effect added. Even though the contrast between the blue lettering and the purple background "box" could affect "contrast," it doesn't seem like it should affect the sharpness of the lettering.

But, I suspect that you're correct about the fact that the text was converted to an image has affected the clarity.

Thanks,

Tom
User 37670 Photo


Registered User
2,138 posts

tws3 wrote:
I applied the shadows to the text using VSD. Am I correct that when you add effects to text, the text is converted into an image? Still, many of the other words (the text on the buttons on the left and at the top of the page) also have effects added to them, and they seem crisper.
But, I suspect that you're correct about the fact that the text was converted to an image has affected the clarity.

Thanks,

Tom

I don't think it's the drop shadow as the reason for being converted to an image. I would say it's the puple background area that did it. As for the contrast, blue and red tones can be found in the background you chose for those areas, but green is a better contrast. That could make the edges that don't have shadows blend into the background color, giving it an unintentional blurry effect.
The buttons on the left are also images. The contrast of the font and background is better, so the letters look sharper.

Fonts can also be distorted by their size. Some fonts look great, until they are made bigger. Rough edges and pixels can come into play much more in an image than it does in a font. Try changing the blue "Double Protein" to white, and you will see that it will look sharper (in theory). Also, if you want to test this out, put the same size font for double protein in white on your black background. I'd bet it will look sharp because it won't be an image.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 367884 Photo


Registered User
65 posts

Alright, Cliff. Thanks for taking the time to answer my question. I'll trust you, as I am pretty much a website moron.

Tom
User 37670 Photo


Registered User
2,138 posts

Yikes, I did not mean to imply anything like that at all. Your site works well, looks nice and you should be proud of it. If my tips help, great. I did suggest that you test first, in case I am wrong.

I do have a suggestion that might help out with naming web pages. I can see that you left spaces between the words in your web page names. This forces the web browser to replace those spaces with code so that your page works. If that process fails for any reason, your web page would not display. Here is an example:
http://noxlife.com/Science%20and%20Nutr … 0Info.html
On that page name, the %20 part is placed there by the web browser. The page name of "Science and Nutritional Info.html has spaces. Removing the spaces, or replacing them with an underscore _ makes the job of the web browser easier and can help load the page faster and more accurately.
Also, the names are CaSE SenSITIve. A good habbit is to keep page names simple, in lower case withnospaces.
These are just tips to help you out.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 367884 Photo


Registered User
65 posts

Thanks, Cliff. But, truly, I am a techie moron. I don't know any sort of code or programming stuff. I basically let CoffeeCup programs do all the work for me, and what they serve up, I accept.

Thanks for the tips, Cliff. I'll incorporate the changes regarding the spacing and the lowercase.

Thanks again!

tom
User 37670 Photo


Registered User
2,138 posts

2 questions.

1 - Did you resize the box with the text in it after creating it?
2 - Have you compared the file size for that same object on your computer and on the Internet? (Right click, choose properties, size)

The reason I ask is that it could be possible that the upload compresses the files to save room on the server. I am not saying that CC ftp does this, but I have seen strange things happen with ftp programs.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.
User 37670 Photo


Registered User
2,138 posts

FF and IE almost never do exactly the same thing. The text line height has been an issue in almost every version of VSD, but it is getting soooo close now! This is the best it's been, and getting it right has been a challenge.
Look into style sheets for controling line height. FF and IE both accept style sheets (again, not exactly the same) but it can help to manage this line height difference. Be carefull, because one wrong number and the whole page takes a fit.

For VSD users who do not want to modify all their pages with extra code, I always reccomend 2 things...
1 - Leave a little extra room in your text boxes to allow for these slight differences
2- In your text box, hit "return" one extra time at the end of your last sentence. Don't just stop typing and leave it at that. That one carriage return could be all that is needed to make up for small differences in browser display and leave the room/space you needed.

Did you check the file sizes from your hard drive compared with the on-line image? If you use filezilla to upload, and there is a file size differrence, then it is filezilla that compresses the image, and not VSD.

Last note:
The "Preview" in VSD is not an exact match to what will be displayed on the Internet, and never count on IE and FF or Opera to display exactly the same. Always a good step to check them out yourself, before problems are reported.

Best of luck, and good job on your sites.
PS. I would try to change the fuzzy text for now to something easier on the eyes, until a solution or cause is found.
E-Learning Specialist
www.mainsites.ca is my website, and yes, some of it is crappy.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.