More graphics help I could use

[Wrathchild]

When saving files, there are a buncha options. For instance, in Photoshop when you "Save for the web" and choose to save as a .gif image, you can use 128 bit dithered, 128 bit undithered and a slew of others. A tutorial with a run-down on what all this means would be great.

Another similar option when saving is "baseline optimization", "progressive" and another one I can't remember but that I'm sure some of you know what I mean. A run-down on that would be helpful as well.

One last one is saving files for print vs. saving for the screen. I know that 72 ppi is the best screen resolution you can get ( or at least I think I do ) I usually end up with two separate files for any given graphic. One for things I plan to print and one for things I plan to use online. Some guidance in this area would be very helpful as well.

Sorry, didn't mean to turn this into a question-only-sided FAQ, but those are some things I've never gotten a handle on. In the little research I've ever tried to do I've gotten thoroughly confused pretty quick because there seems to be so much industry-specific terminology.

Thanks

---

Rick Nutter Designs
Residential designs that fit your lifestyle
http://ricknutter.com
designs@ricknutter.com

[DevilsWrath]

I'll surely write a tutorial about it but I'll give you a few pointers before I do that later today hopefully or tomorrow. Having a few issues with the site with hostsnake being such a pain. Am figuring this out and I'll get back to you about this as soon as I can about both the slicing and these few things.

[Wrathchild]

admin Wrote:I'll surely write a tutorial about it but I'll give you a few pointers before I do that later today hopefully or tomorrow. Having a few issues with the site with hostsnake being such a pain. Am figuring this out and I'll get back to you about this as soon as I can about both the slicing and these few things.

Looking forward to it!

[DevilsWrath]

Well lets start with the 'Save for web' option:

When it comes to saving files for the web, you should use JPG's as much as possible and only GIF's when you need transparency in your image or if its an animation, GIF's get heavier with the amount of color in it. Small less detailed images are preferred as GIF as they are smaller in size then JPG's.

The options you have :

Perceptual, Selective, Adaptive, and Restrictive (Web)

Dont get confused with them they are basically just color palletes and settings added into photoshop to help. What you need to do to make sure you dont lose the quality of your image when saving for web you should:

Go for selective, this way you can choose how many colors you want to use and at the same time you can check the results of the image. The more the colors you add the bigger the file size gets. You can cut down on the file size by making your Image just a bit 'lossy' when you put in 10-12 in the 'lossy' it shouldnt show much of a difference in the image at most times.

The Matte, If the image contains transparency, choose a Matte color to simulate the appearance of background transparency. However, getting transparency through the matte is really difficult the best thing to do is, to make the layer of the background transparent on any image and choose transparency before saving it to make sure the background is transparent.

Dither is basically the blending you see in images. Dithering refers to the method of simulating colors not available in the color display system of your computer. Images with primarily solid colors may work well with no dither. Images with continuous tone color (especially color gradients) may require dithering to prevent color banding. For example.. if you had a light blue to dark blue gradient, you would see that its blending from light blue to dark, dither does that by using different color values, if you cut out the dither and decrease the number of colors in a palette, you will see lines of color going from light blue to dark blue, which looks really bad and is because values of those colors are not available, this will mostly occur in high graphics images where you will end up seeing distortion, pixels or blending issues, for these kinds of files JPG is the way to go. Try making an image with a simple gradient going through it and try saving for web, choose the option : Restrictive (Web) and No Dither. you'll see what I mean. However, if you choose Diffusion and 100% Dither, you can see it trying to blend in all the colours as much as possible with the limited colors. When you bring the dither down to 0% you see lines in between. To achieve the best result just use selective, with 128 colors or 256 colors(when needed) with no dither(due to availability of colors) and a No transparency dither with the check on Transparency to make your image's background transparent.

When you choose 'Save as..' and save a file as a jpg it asks you which format option to use, Select Baseline to use a format recognized by most Web browsers, Baseline Optimized for optimized color and a slightly smaller file size, or Progressive to display a series of increasingly detailed scans (you specify how many). Baseline Optimized and Progressive JPEG images are not supported by all Web browsers.

Saving for the web and printing.. Well the thing is when you want to display an image on a web browser you need it to be in RGB format and when you Print an image, it is necessary to have that image in CMYK format so you get the result you are looking for. When working on an image that you will print, go for 300 resolution and CMYK color. The best practice would be to always start a new image with CMYK color and 300 resolution, and you can convert it later to RGB if you need to use it for the web, or just simple 'Save for web' and it'll convert it to RGB and save it as RGB to be viewable on all browsers.

I hope this was helpful!