The Save for Web feature
As of version 5 and later, Photoshop includes a very helpful "Save for Web" command. This element enables you to save a copy of your image that is optimized for internet use. "Optimized" means that the image file will be as small as possible, and that the image will use only Web-safe colors. The "Save for Web" option can save images in GIF, JPEG, or PNG format.
Using Save for Web When you're ready to put your image in your web page, select Save for Web... from the File menu. The "Save for Web" dialog appears:
This is where you tell Photoshop how you'd like to optimise your image for the Web. You can select the file format to produce (GIF, JPEG or PNG), what size palette you'd like to use, how to cut down the colours to fit the chosen palette size, how much to dither the optimised image (if at all) and how much to sacrifice image quality to produce a smaller file size.
Image views The four tabs above the image view pane on the left allow you to view the original image, the optimised version (this is the default), the original and optimised versions side-by-side ("2-Up") and the original, optimised and two variations on the optimisation all together ("4-Up"). You can also use the Hand tool top-left to move the view around (if the image is bigger than the view), the Zoom tool to zoom in and out of the image, and the Eyedropper tool to select a colour from the image, to be used by various colour options on the right of the dialog.
Presets There are many options in the Save for Web dialog, and the choices here can be quite bewildering! Fortunately, there are lists of presets you can choose from to make it easier. Select the Settings: drop-down list, which is located just below the Cancel button, to bring up the list of presets:
Three basic image formats exists in the presets - GIF, JPEG and PNG. The rule of thumb is to use JPEG's for photos and GIF's for all else. For a full guide on choosing the right image format, see Understanding image formats.
Optimising GIFs If you're making a GIF, start off with a preset such as GIF 32 Dithered, which should work well for most GIFs. You can then fine-tune the optimisation to suit your needs. Some of the important optimisation options are discussed below.
Colour reduction method This is the drop-down box below the Image Format box. The commonly used options here are:
Perceptual: Generates the reduced color palette which favors colors that the human eye is more sensitive to. Selective: Like Perceptual, but much better for Web work. The preferred option. Adaptive: Produces the palette by using an even sampling of colors from the image's color spectrum. By and large not quite as good as Selective. Web: Use this option if you need a complete Web-safe color palette (Netscape 216-colour palette). This usually isn't that important as most computer screens support at least 16 million colors. Dithering method This drop-down box is located below the "color reduction method" box. Dithering involves adding patterned or random dots to the image which make it look to have more colors than are actually in the palette, which allows you to use a smaller palette size. The options are:
No Dither: No dithering is applied to the image. This option is good if the dithering effect looks bad, but can produce harsh "banding" of colors. Diffusion: This looks similar to Noise dithering as it uses error diffusion dithering, which produces a random-looking pattern of dots. Note that this can produce seams when using ImageReady slices. Pattern: Uses a pattern for dithering, rather than random dots. Can work well for some images, but often produces a rather false look. Noise: Similar to Diffusion however does not produce seams at the edges of slices in ImageReady. Transparency This checkbox is available only if your image does not have its Background layer turned on. It specifies that you wish to have parts of the saved GIF to be transparent. If you uncheck this box, the see-through areas will instead be filled with the Matte color (or white if no matte is selected).
Interlaced This controls GIF Interlacing. If enabled, the GIF will appear gradually as interlaced horizontal lines as it is loaded onto the Web page. This gives viewers something to look at while the full image appears. It does increase the file size, however.
Lossy This slider allows you to remove some detail from the image, in order to reduce the file size further. Use only if you don't mind reducing the image quality quite severely! A value of 0 will not remove any detail; a value of 100 will remove the maximum amount of detail.
Colors This is where you choose the size of your GIF palette. A palette of 32 colours is often sufficient for web images, but if your image has a lot of detail and looks too fuzzy/blurry/banded with 32, up it to 64, 128 or 256. If your image has very few colours in to start with, or doesn't look too bad with fewer colours, select 16, 8, 4 or even 2! This will make the GIF file size smaller.
Dither If you have selected a dithering method, this option will allow you to control how much the image is dithered - 0 means no dithering, 100 means lots of dithering.
Matte The matte is the background color you want to use for your image. If you've enabled Transparency then the foreground image will be faded at the edges to blend in with the matte color. If you choose the Matte setting of None, the GIF will have a "hard transparency" with no fading; this is great if you want to be able to use the image on any color background.
If you've disabled Transparency, the transparent areas of your image will be filled in with the matte color.
Web Snap If you want to use web-safe colours, increase the Web Snap slider. Photoshop will bias your colour palette more and more towards web-safe colours the higher the value of Web Snap.
Optimizing JPEGs If you're creating a JPEG you want to start off with a preset such as JPEG Medium, which works well for most JPEGs. Then you can fine-tune the optimization to suit your needs. Some of the important optimization choices are discussed below.
Quality There are two ways to modify the quality of the compression: the Low/Medium/High/Maximum list, and the Quality slider (for fine control). The lower the quality setting, the more blurry and bitty the JPEG will appear, but the smaller the resulting file size.
Progressive A progressive JPEG is similar to an interlaced GIF. The image loads gradually on the Web page - a low res image first and then the full, high-resolution image. Again, this is great for keeping your viewers on slow modems from getting bored, but it does mean a slightly larger file size. Please note that older browsers don't support progressive JPEGs.
Matte If your Photoshop image has transparent areas, you can fill them with a specified matte color with this drop-down box.
Optimizing PNGs Your options for optimizing a PNG-24 are much the same as those for optimizing a JPEG. Similarly, the options for optimizing a PNG-8 are very similar to those for optimizing a GIF. See the GIF and JPEG sections above for details.
If you really can't be bothered... ...you can always allow Photoshop to optimize your image for you! Select the little arrow just to the right of the Settings... box and select Optimize to File Size...:
In the dialog that pops up, select Auto Select GIF/JPEG then enter your desired file size. Click OK and Photoshop does the rest for you! If you're not happy with the results, tweak the settings as described in the sections above, or just choose a slightly larger file size and try again.
Saving the image Once you're satisfied with your optimized image, click OK to save it to disk. The file saved will be a copy of your original image, unless you specifically overwrite the original with the optimized file. - 2361
Using Save for Web When you're ready to put your image in your web page, select Save for Web... from the File menu. The "Save for Web" dialog appears:
This is where you tell Photoshop how you'd like to optimise your image for the Web. You can select the file format to produce (GIF, JPEG or PNG), what size palette you'd like to use, how to cut down the colours to fit the chosen palette size, how much to dither the optimised image (if at all) and how much to sacrifice image quality to produce a smaller file size.
Image views The four tabs above the image view pane on the left allow you to view the original image, the optimised version (this is the default), the original and optimised versions side-by-side ("2-Up") and the original, optimised and two variations on the optimisation all together ("4-Up"). You can also use the Hand tool top-left to move the view around (if the image is bigger than the view), the Zoom tool to zoom in and out of the image, and the Eyedropper tool to select a colour from the image, to be used by various colour options on the right of the dialog.
Presets There are many options in the Save for Web dialog, and the choices here can be quite bewildering! Fortunately, there are lists of presets you can choose from to make it easier. Select the Settings: drop-down list, which is located just below the Cancel button, to bring up the list of presets:
Three basic image formats exists in the presets - GIF, JPEG and PNG. The rule of thumb is to use JPEG's for photos and GIF's for all else. For a full guide on choosing the right image format, see Understanding image formats.
Optimising GIFs If you're making a GIF, start off with a preset such as GIF 32 Dithered, which should work well for most GIFs. You can then fine-tune the optimisation to suit your needs. Some of the important optimisation options are discussed below.
Colour reduction method This is the drop-down box below the Image Format box. The commonly used options here are:
Perceptual: Generates the reduced color palette which favors colors that the human eye is more sensitive to. Selective: Like Perceptual, but much better for Web work. The preferred option. Adaptive: Produces the palette by using an even sampling of colors from the image's color spectrum. By and large not quite as good as Selective. Web: Use this option if you need a complete Web-safe color palette (Netscape 216-colour palette). This usually isn't that important as most computer screens support at least 16 million colors. Dithering method This drop-down box is located below the "color reduction method" box. Dithering involves adding patterned or random dots to the image which make it look to have more colors than are actually in the palette, which allows you to use a smaller palette size. The options are:
No Dither: No dithering is applied to the image. This option is good if the dithering effect looks bad, but can produce harsh "banding" of colors. Diffusion: This looks similar to Noise dithering as it uses error diffusion dithering, which produces a random-looking pattern of dots. Note that this can produce seams when using ImageReady slices. Pattern: Uses a pattern for dithering, rather than random dots. Can work well for some images, but often produces a rather false look. Noise: Similar to Diffusion however does not produce seams at the edges of slices in ImageReady. Transparency This checkbox is available only if your image does not have its Background layer turned on. It specifies that you wish to have parts of the saved GIF to be transparent. If you uncheck this box, the see-through areas will instead be filled with the Matte color (or white if no matte is selected).
Interlaced This controls GIF Interlacing. If enabled, the GIF will appear gradually as interlaced horizontal lines as it is loaded onto the Web page. This gives viewers something to look at while the full image appears. It does increase the file size, however.
Lossy This slider allows you to remove some detail from the image, in order to reduce the file size further. Use only if you don't mind reducing the image quality quite severely! A value of 0 will not remove any detail; a value of 100 will remove the maximum amount of detail.
Colors This is where you choose the size of your GIF palette. A palette of 32 colours is often sufficient for web images, but if your image has a lot of detail and looks too fuzzy/blurry/banded with 32, up it to 64, 128 or 256. If your image has very few colours in to start with, or doesn't look too bad with fewer colours, select 16, 8, 4 or even 2! This will make the GIF file size smaller.
Dither If you have selected a dithering method, this option will allow you to control how much the image is dithered - 0 means no dithering, 100 means lots of dithering.
Matte The matte is the background color you want to use for your image. If you've enabled Transparency then the foreground image will be faded at the edges to blend in with the matte color. If you choose the Matte setting of None, the GIF will have a "hard transparency" with no fading; this is great if you want to be able to use the image on any color background.
If you've disabled Transparency, the transparent areas of your image will be filled in with the matte color.
Web Snap If you want to use web-safe colours, increase the Web Snap slider. Photoshop will bias your colour palette more and more towards web-safe colours the higher the value of Web Snap.
Optimizing JPEGs If you're creating a JPEG you want to start off with a preset such as JPEG Medium, which works well for most JPEGs. Then you can fine-tune the optimization to suit your needs. Some of the important optimization choices are discussed below.
Quality There are two ways to modify the quality of the compression: the Low/Medium/High/Maximum list, and the Quality slider (for fine control). The lower the quality setting, the more blurry and bitty the JPEG will appear, but the smaller the resulting file size.
Progressive A progressive JPEG is similar to an interlaced GIF. The image loads gradually on the Web page - a low res image first and then the full, high-resolution image. Again, this is great for keeping your viewers on slow modems from getting bored, but it does mean a slightly larger file size. Please note that older browsers don't support progressive JPEGs.
Matte If your Photoshop image has transparent areas, you can fill them with a specified matte color with this drop-down box.
Optimizing PNGs Your options for optimizing a PNG-24 are much the same as those for optimizing a JPEG. Similarly, the options for optimizing a PNG-8 are very similar to those for optimizing a GIF. See the GIF and JPEG sections above for details.
If you really can't be bothered... ...you can always allow Photoshop to optimize your image for you! Select the little arrow just to the right of the Settings... box and select Optimize to File Size...:
In the dialog that pops up, select Auto Select GIF/JPEG then enter your desired file size. Click OK and Photoshop does the rest for you! If you're not happy with the results, tweak the settings as described in the sections above, or just choose a slightly larger file size and try again.
Saving the image Once you're satisfied with your optimized image, click OK to save it to disk. The file saved will be a copy of your original image, unless you specifically overwrite the original with the optimized file. - 2361
About the Author:
Did you like this article? Curious about learning photoshop fast? Well now you can by getting this free Guide...what are you waiting for?
posted by Marcondes Allen at 1:02 AM
0 Comments:
Post a Comment
<< Home