#1. Open up Photoshop. Open up the above image. It should already be in your Firstname.LastName.exiea folder if you followed the directions at the beginning. Go File...Save for Web and stop. Make sure the file type is set to JPG(JPEG) on the pulldown to the right. Experiment by changing the low, medium, high, and maximum quality pulldown and watch the image change and the file size in the lower left hand corner change. I generally do not use that pulldown option but use the Quality slider to the right of the pulldown. It does the same thing. Experiment with that and watch the picture change and the file size change. It depends on your starting picture, but generally a quality number in the high 40's works well for web. The nice thing about Photoshop is you can adjust the slider and watch what you will get in file size and image quality before you save it. Do not save this. Click Cancel.
#2. Use the Crop tool to remove about 100 pixels off of the bottom of the picture. If you can't remember how to do it, review Selecting a Portion of the Image. Go File...Save for Web and call it river.jpg. This will replace the old image with the cropped image. Make sure you change the height and width attributes! Reload your browser to check.
#3. The image in #1 is too large for your page. Let's make the image fit better. In Photoshop, go Image... Image Size. Change the width to 500 pixels. Notice that the height automatically changes to be proportional. Make sure the resolution is set to 72 pixels/inch. Higher resolution than that can't be seen on a monitor anyway and increases your file size. Higher resolutions are used for printed projects. Go File...Save for Web and save again keeping the name the same. Remember to adjust the height and width attributes in your code.
#4. Let's try to bring out the green of the trees a little more. Use the Magic Wand and set your tolerance to about 30 and uncheck the Contiguous box. This will let you, with one click of your magic wand select all of the greens on the page. Click with the Magic Wand into the middle of one of the greener trees. Go Image...Adjustments...Color Balance. Change the Magenta-Green slider to more Green. Experiment with the other sliders until you get just the right tones. Save for Web again so that it again replaces the river.jpg image.
#5. This may have turned your river water a little green. Let's turn the river more blue. Use the Lasso tool and set the Feather to 10. The feather will make sure that any changes we make to the river will not leave sharp lines of change. Remember if you miss a spot with the Lasso tool you can always use the Alt or the Shift key to subtract or add to the selected area. Go Image...Adjustments...Color Balance and set the color to as natural looking blue as you can experimenting with the sliders. Then Save for Web again to replace the river.jpg image.
#6. Lets bring out the yellow, reds and oranges in the trees. Choose the Sponge tool. Set the Mode to Saturate. Pick a brush size that is the right size for the colored area of the trees you are saturating and is faded(feathered). Mouse the sponge over the areas that are colored to bring out the reds, yellows and oranges. Then Save for Web again to replace the river.jpg image.
#7. Now let's turn it into a gif. This is a photo so
it should be a JPG file, but let's Save for Web as a GIF. Play with the number of colors(on the right) to see the file size change and image chnge. Choose 256 colors
and click OK and save it to your exercise folder on your harddrive as your badchoice.gif. Write the code in the html document to make it appear under this paragragh. It should be slightly grainy and of very large file size.
#7. Open up the river.jpg image again(it is the one at the top of this page). Click the magnifying tool and enlarge until the image appears grainy. Use the free hand trace tool(Lasso) to exactly trace the outline of the river, eliminating all sky and trees. You can hold down the Alt or Shift keys to adjust your selection when you are done. See Selecting a Portion of the Image. Once you have selected the river only, go Select...Inverse. This will select everything but the river. Change your background color to white, which is the same color of the background of this webpage. Hit the Delete key. Change the image size so that the width=400. Save for Web again, calling it riveronly.jpg. Code it into this page so that it appears under this step. Your image of the riveronly should now blend into the white background of the page.