Adobe ImageReady is the software use to make animation, image compression optimization, adding rollover effects, and HTML generation, image slicing. Both Photoshop and Imageready use for making bitmapped files, including JPEG, JPG, TIFF But Photoshop can’t create GIF file. Photoshop can build vector images, illution. Adobe Photoshop and Adobe ImageReady include a variety of tools and commands for improving the quality of a photographic image. This lesson steps you through the process of acquiring, resizing, and retouching a photo intended for a print layout. The same workflow applies to Web images.
Replacing colors in an image
With the Replace Color command, you can create temporary masks based on specific colors and then replace these colors. (A mask isolates an area of an image, so that changes affect just the selected area and not the rest of the image.) The Replace Color dialog box contains options for adjusting the hue, saturation, and lightness components of the selection: Hue is color, saturation is the purity of the color, and lightness is how much white or black is in the image.
You’ll use the Replace Color command to change the color of the wall at the top of the image. The Replace Color command is not available in ImageReady.
- Select the Rectangular Marquee tool (<), and draw a selection border around the blue wall at the top of the image. Don’t worry about making a perfect selection, but be sure to include all of the blue wall.
- Choose Image > Adjustments > Replace Color to open the Replace Color dialog box.
By default, the Selection area of the Replace Color dialog box displays a black rectangle, representing the current selection.
Notice the three Eyedropper tools in the Replace Color dialog box. One selects a single color; another selects additional colors and adds them to the color selection; the third selects colors and removes them from a color selection.
A. Single-color Eyedropper tool
B. Eyedropper Plus tool
C. Eyedropper Minus tool - Using the first (single-color) Eyedropper tool () in the Replace Color dialog box, click anywhere in the blue-wall area of the image window to select all of the area with that color.
- In the Replace Color dialog box, select the Eyedropper Plus tool (), and use it to select other areas of the blue wall until the entire wall shape is highlighted in white in the dialog box.
- Adjust the tolerance level by scrubbing, dragging the Fuzziness slider, or typing 80.
Fuzziness controls the degree to which related colors are included in the mask.
- If there are any white areas of the mask display in the dialog box that are not part of the wall and therefore should not be included, fix those now: Select the Eyedropper Minus tool () and click those areas in either the image window or the Replace Color dialog box to remove most of the white. (It’s OK if a few pixels in the shadowed window inset remain in the selection.)
- In the Replacement area of the Replace Color dialog box, drag the Hue slider to –40, the Saturation slider to –45, and leave the Lightness slider at 0.
As you change the values, the color of the wall changes in hue, saturation, and lightness, so that the wall is now a slaty green color.
- Click OK to apply the changes.
- Choose Select > Deselect, and then choose File > Save.
Before You Save
There are a few things that you should check before you save your images. The first is the checking your documents Image Mode and the second is adjusting the Image Size. Here’s how to do both:
Image Mode
To check your image mode in Photoshop, go to Image > Mode. Simply put, if you plan on using your images for the web, your image should be in RGB mode. If you plan on printing your document on paper, your image should be in CMYK mode. Setting the image mode for your image’s intended end-use will help ensure that the colors for your image are displayed to their fullest color capabilities.
Image Resolution
To adjust the resolution of your image in Photoshop, go to Image > Image size. Other than adjusting the image to your desired image size, you should also check to make sure that the resolution is appropriate for its final output (which in this case, is on the web). Generally, high-quality images saved for the web are 72 pixels per inch. Anything more or less than that will make the image way too big, or low-quality. You can also adjust the image size in the “Save for Web” window in Photoshop (see below).
The “Save for Web” Window in Photoshop
How To Add Images In Photoshop
Once you’re ready to save your images for the web in Photoshop CC, go to File > Export > Save For Web (Legacy). This will open up the “Save For Web” window. Understanding the different files types that you’re able to save your images as will put you that much closer to saving high-quality images for the web. To make things easy, I’m going to go through all the file types that you can save your images in (and best practices for each) in the table below:
After weighing the pros and cons of each file type in the table above, you’ll be able to select which file type you would like to save your final image as. As you can see, there are several pros and cons for each file type. But, there’s also recommended use suggestions for each file type. This will help narrow down your options. Choosing the right file type for your final image will ensure that you’ll be using a high-quality image on the web.
Image Quality & Image Size
Once you’ve chosen the image file you wish to save your image as, you can now select the various image quality options that are unique to each file type. The JPEG image quality selection is pretty straightforward. For the highest quality image, you would either select “Maximum” or set “Quality” to 100. For PNG images, as stated in the table above, the more colors that you choose (up to 256), the higher quality the image will be. Lastly, when saving a GIF image, similar to PNG, the more colors you choose, the higher the image quality. Just keep in mind that the more colors you choose to keep in the image, the larger the file size. The fewer colors you choose, the smaller the file size. You just can’t have it all!
When saving images for the web, it’s also important that they’re saved as the final image size of the image you plan on using on the web. Images that are saved much larger than their final use will increase page loading time which is something that you should avoid.
Saving the image
Image Ready In Photoshop Free
Once you’ve completed all the steps above, it’s time to save your image. All you need to do is hit “Save” at the bottom right-hand side of the window. Easy!
Conclusion
Saving high-quality images for the web, in Adobe Photoshop is easy. By implementing the tips and information discussed above, you’ll be able to save high-quality images for your website. There’s certainly more in-depth ways that you can save images for the web in Photoshop, however, for most web images, everything I’ve covered above is certainly enough.
Leave a comment below!
How do you normally save your images for the web? Are there any special methods or programs that you use to save your images? Let’s chat in the comments below!