Help! with Saving Images for a Web Site

[Cathy]

Quick question for all you web people - you know who you are /emoticons/worshippy.gif

I am creating my first web site and am currently constructing the images (menus, bars, etc.) in Photoshop. I understand that .jpgs and .gifs work best for web viewing - and, upon saving I went to the 'save for web option' and messed around with the compression/quality options. I saved my images on the high quality side (jpg), but when I place them in Dreamweaver the text in the images appear fuzzy already. I expect that from jpgs when you try to download them off the net, but not right after I create them.

Is there something that I am doing wrong? Should I be using Illustrator? (I am aware of the differences between the two programs - vector/rastor issue, but I've always heard that it is pretty safe to design with Photoshop as long as the use is primarily for the web.) Much rather use Photoshop if I can.

Thx!

[3howards]

cathy, you could try using your guides in your psd and using the jump to option in photoshop to imageready. use those guides in imageready to create your slices. from there compress your images, slice by slice. you can select certain slices to compress as jpgs while others as gifs.

illustrator really doesn't come into play with web design because graphic files used on the web cannot be created with illustrator. fireworks and photoshop are the 2 main graphics programs used for the web. your text problem is probably do to too much compression or wrong file settings.

good luck.

[Cathy]

Well, I figured out that if I save as a JPG that I need to really pump up the quality of the image even more, when saving under 'save for web, to get the fuzzyness to go away. Or, if I save as a GIF then I need to change the lossy to O% to get a clean finish. However, if I go with the GIF it is telling me that it will save at about 11K, as opposed to 46K when saving as a JPG. So, it looks like that helps to clear one issue up.

However, the text in my Photoshop files is still very hard to read. It is really showing the pixel breakdown and it looks awful (I considered taking out all of the text and just creating actual hotspots in Dreamweaver, but I would really like to be able to skip that step, use Photoshop & ImageReady to slice up my images and be done.

Can anyone tell me if there is a way to avoid having the text pixelate in Photoshop? Or is that unavoidable b/c it's a raster based program? (3howards mentioned the wrong file settings? what could I be change about the layout of my file to help improve this?)

[Ryan8720]

For you Web, you will use a raster based program for everything (except logos). If you can, post the settings you are using for the bad images.

For Web use, JPGs are really only good for photographs and very large files such as desktops (but even then, PNG can be better).

As a side note, it is much better to use actual text on web sites instead of images. Search engine spiders/bots can read images.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

[Trudy]

Hi Cathy. Can you post the URL of your website containing the uploaded fuzzy graphics? It might help if we can see your compressed images.


If the text looks heavily pixelated, you are compressing files too much. With the rightchoice ofeither .gif or .jpg, and the right compressions settings, your text should look fine.


It would be easier to help you out if you posted either the url of the website, or attached some images to your post. http://graphicdesignforum.com/emoticons/smile.gifIt also kinda sounds like you might be saving one huge image for your website. Are you slicing your .psd file up, or saving the whole .psd as one image file?

[3howards]

yeah, it is difficult to narrow down what you require without seeing it, after all we work visually ....

[Cathy]

Here is an example of what I am talking about. The fuzzy texture is gone, but the jaggedness of the text still remains.

[casedsgn]

No reason to be saving that as a jpeg...you could shave off some file size by saving it as a gif. In Photoshop, when saving for web, bump it all the way up to the max number of colors (256) and come down from there until you start to see some degredation. Based on the attachment, you could probably get away clean with under 128 colors and still have a nice shadow.

[3howards]

i agree, gif would be best in that situation ...

[Cathy]

Here it is again... this time as a gif. I agree, it does cut down quite a lot on the file size, but the text is still jagged. Is this b/c it was designed in Photoshop & there's just no way around it?

[3howards]

is that going to be the final size? that's quite big for a menu link. let me see ....

[3howards]

cathy, could you send me the flattened version, not the compressed image? info@3howards.com

[Ryan8720]

Looks like an anti-aliasing problem. Do you have the anti-alias box checked? If you can, upload the PSD.

http://edgewebdesign.org/ryan2.gif (http://www.edgewebdesign.org)

C:\DOS
C:\DOS\RUN
RUN DOS RUN

[Trudy]

Cathy, it sure does look like anti-aliasing. Try setting the anti-aliasing method to Crisp. This is located is different places in different versions of Photoshop, but will be next to main text editing options.

[3howards]

good suggestion guys ... that's probably it.

[Cathy]

Yep, looks like that was my problem. Thanks for the help - I had no idea what aliasing was for. Now I know! :)