|
Author |
Message |
latcarf
Joined: 17 Oct 2007
Posts: 6
Location: Michigan, USA
|
Posted: Wed Oct 24, 2007 1:33 pm Post subject: Image/Text issues |
|
|
Hi all... I am fairly new to using PS (CS2) and just recently started using it for web design also.
It seems every time I use text, when I save the image and apply it at the site the text is rough and choppy around the edges (like pixelized).
I searched for an answer to this and the responses seem to indicate the image size and/or dpi is the key. I have redone the images in the sizes needed and increased dpi but this still does not help.
I am thinking I have missed a step (or just don't know!) how to use PS for web text...
thoughts, suggestions!?
example is here http://www.latcarfproductions.com/mls/mlsindex.html on the logo |
|
|
|
 |
doubrovski
Joined: 29 Sep 2007
Posts: 230
|
Posted: Wed Oct 24, 2007 9:02 pm Post subject: |
|
|
Hi,
Play with anti-aliasing menu (try "Smooth", "Sharp", "None", etc.) _________________ Andrei Doubrovski
SimplePhotoshop.com |
|
|
|
 |
latcarf
Joined: 17 Oct 2007
Posts: 6
Location: Michigan, USA
|
Posted: Thu Oct 25, 2007 12:34 pm Post subject: |
|
|
Thanks... So I went in and did some text and saved it 5 times using each of the aa attributes. The aa attribute None was the best but still came out looking basically like what I have already.
I'll just keep plugging away until someone or myself figures it out... |
|
|
|
 |
doubrovski
Joined: 29 Sep 2007
Posts: 230
|
Posted: Thu Oct 25, 2007 9:44 pm Post subject: |
|
|
latcarf,
I've just noticed that pixel dimensions of your image are 2083x1125, while HTML code sets image size to 278x140 (incorrect proportion, into the bargain). It's absolutely wrong approach. Most of the edge jugginess appears when your browser zooms the image out. Resize it in Photoshop as needed (278x150 or 259x140) and then set the same size in HTML code.
Also, in "Save for Web" dialog add "Matte" color matching your page background color. This must smooth the edges even more.
BTW, Do not forget about optimizing images for the Web; 188 KB is certainly too much for a logo
Here is my version (intended for "EEEEFF" bg color)
 _________________ Andrei Doubrovski
SimplePhotoshop.com |
|
|
|
 |
latcarf
Joined: 17 Oct 2007
Posts: 6
Location: Michigan, USA
|
Posted: Sun Oct 28, 2007 8:18 am Post subject: |
|
|
Hello doubrovski,
Thanks for the help! I am/was sure it was something I was doing to include a lack of experience... I was quite sure I was saving the images at the sizes I needed but I will double check my settings.
I had a heart cath friday so I am resting a bit and will look at this in more when I am feeling a little better. I will come back and give you some feedback but I am sure it will be positive. |
|
|
|
 |
Patrick
Administrator

Joined: 14 Feb 2003
Posts: 11945
Location: Harbinger, NC, U.S.A.
|
Posted: Sun Oct 28, 2007 8:27 am Post subject: |
|
|
|
|
|
|
 |
latcarf
Joined: 17 Oct 2007
Posts: 6
Location: Michigan, USA
|
Posted: Tue Oct 30, 2007 7:00 am Post subject: |
|
|
Patrick wrote: | Hope you're feeling better soon, latcarf. | Hello Patrick,
Thanks for the thought, and the welcome in the intro section. They put in 2 stents so the overnight stay in the hospital took more toll on me than the procedure. Hospitals may be able to "fix" but they sure are not an environment for resting and healing!
Lance |
|
|
|
 |
latcarf
Joined: 17 Oct 2007
Posts: 6
Location: Michigan, USA
|
Posted: Tue Oct 30, 2007 7:18 am Post subject: |
|
|
doubrovski wrote: | latcarf,
I've just noticed that pixel dimensions of your image are 2083x1125, while HTML code sets image size to 278x140 (incorrect proportion, into the bargain). It's absolutely wrong approach. Most of the edge jugginess appears when your browser zooms the image out. Resize it in Photoshop as needed (278x150 or 259x140) and then set the same size in HTML code.
Also, in "Save for Web" dialog add "Matte" color matching your page background color. This must smooth the edges even more.
BTW, Do not forget about optimizing images for the Web; 188 KB is certainly too much for a logo
Here is my version (intended for "EEEEFF" bg color) |
Hello doubrovski,
Thanks again for the feedback it surly helped. I think the image you pulled (2083x1125) was an experiment I did trying to work through the problem. I was applying image printing theory to web display by shrinking an image hoping that would make up for the pixeling effect. lol... so much for theory!
I did learn from your feedback. I had no clue about using the Matte function to match the background. That helped tremendously and thanks for providing the example image also. I got a chance to practice also since the site has changed dramatically and the background is now black.
Is there a font that is best for web use? A PS tutorial for using text in web images? I noticed the CS Help has a section for web images but they don't discuss text.
Regards,
Lance |
|
|
|
 |
doubrovski
Joined: 29 Sep 2007
Posts: 230
|
Posted: Tue Oct 30, 2007 9:17 am Post subject: |
|
|
Hello Lance,
Hope you are ok now.
As for the fonts, "sans" seem to be more common on the Web due to (supposedly) better readability. _________________ Andrei Doubrovski
SimplePhotoshop.com |
|
|
|
 |
Patrick
Administrator

Joined: 14 Feb 2003
Posts: 11945
Location: Harbinger, NC, U.S.A.
|
Posted: Tue Oct 30, 2007 11:44 am Post subject: |
|
|
|
|
|
|
 |
|