Help – Photoshop Layout Becomes Horribly Pixelated When Saving For The Web

[chovel]

Hey guys, I am having a serious problem with photoshop right now and can’t figure out what is causing it. Everytime I try to save my layout for the web, the images become highly pixelated. I am saving them as JPEG 100% quality so they shouldn’t come out looking horrible like they do. I have the resolution set to screen 72dpi RGB so that is all fine. I also have all text on the page set to sharp aliasing.

It is really bad looking and my client who expects it to be done in a couple of days is not happy. All of my buttons and images look perfect in photoshop. But the second I try to save it, they all end up with speckles on all the pictures and around the text and all the colors become pixelated.

A good example of the problem is the one in this picture. I zoomed in to really show how bad it is, but it comes out pixelated even when not zoomed in at regular size. This looks horrible. Does anyone know of any settings I can change or something I am doing wrong? Thanks guys!

Note: I’m using Photoshop CS3 On Windows Vista if it matters.

http://www.instantimagehosting.com/storage/pixelated.jpg

[Trevor Somers]

You have a strange problem here because photoshop save for web is saying at maximum setting is set at 18.4 K where as your original image is 1.85 M??? THAT DOES NOT make any sense??? Try changing the setting to 4 up. that way you can see what the lowest setting is and how it will look like. Try right clicking on the highest image within the 4-up, maybe photoshop will reset it's self to that? Got me baffled??? Unless your image is all text then you should be using a vector based program like illustrator to design your document.

[chovel]

Yeah I tried the 4-UP. And the smallest one was like 3.7k. Which is rediculous because its an entire site layout with pictures and everything. And it obviously looked even worse at that size. Tried right clicking and it didnt change anything. I've been using photoshop to design websites and graphics for 3+ years and this problem is stumping me. Thanks for the advice though Trevor. I appreciate it.

[Andrei Doubrovski]

Chovel,
Why use JPEG for this kind of graphic? GIF must work better for you

[chovel]

There is something completely wrong with my photoshop. I changed the settings to GIF, PNG, JPG and placed all at highest quality and I keep coming up with the same pixelated results. If I flatten the layout and import it into Illustrator and export it from Illustrator it works just fine. But if I do it in Photoshop it gives me pixelated junk no matter what settings I use. And the file sizes are extremely tiny for an entire website layout with many photos it is trying to compress it to 10k in PNG highest resolution. It should be much larger than that. Its almost like its over compressing it no matter what settings I use.

[Andrei Doubrovski]

Chovel,
Perhaps, "4-Up" view confuses you. Switch to "Optimized" tab to preview only current optimization settings.

Also, make sure the correct slice is selected (use the Slice Select tool in the dialog).

Keep in mind that auto-slices are cross-linked, so by changing settings for one of those you affect all auto-slices.

[chovel]

I understand how the slice tool works. Its fairly simple. It has worked for the last 3 years I've used it and now all of a sudden it doesnt. The one in illustrator does work for me still and I've just been using it.