Jan's Working with the Web

Step-by-Step: Edit Image Background

---

What you will learn:

Paint: to pick existing color from a picture Paint: to create a custom color Paint: to change color in picture Paint: to save image in different formats and test in browser

---

 Start with:   , hector17-Lastname-Firstname.htm, resource files

Pick an Existing Color from a Picture

1. If necessary, open hector17-Lastname-Firstname.htm in your editor.
2. Save As hector18-Lastname-Firstname.htm.
3. Switch to your browser and view this page.
4. Use the key combo ALT + Print Screen to capture a picture of the browser window.

5. Open Paint, if necessary.

6. In the Paint window, use the key combo CTRL + V to paste the screen capture into Paint

   

   Windows XP or Vista
   Windows XP has the color palette at the bottom.

   

   Paint in WinXP or Vista; Paint in Windows 7, 8, or 10

7. Click on the black Foreground color/ Color 1 square to select it.

   WinXP,Vista:

   Win7, Win8, Win8.1, Win10:

8. Click on the Color Picker tool .
   The mouse pointer changes to the eye dropper shape.

   WinXP, Vista:

   Win7, Win8, Win8.1, Win10:

9. Move the mouse pointer over the light blue background in the image of Hector's page and click.
   The square for Foreground/Color 1 changes to match the background color and the pointer changes shape:

   WinXP, Vista:

   Win7, Win8, Win8.1, Win10:

   
   Not that you are going to need to draw anything this time!

   Paint now knows the background color from Hector's page. But, if you load a different picture, the Foreground/Color 1 will change back to black! You have another step to do.

---

Create a Custom Color

You can create one or more custom colors that Paint will remember but only for the current session. Once you close Paint, those custom colors vanish.

1. Open the Edit Colors dialog:

   WinXP, Vista: Menu - Colors > Edit Colors

   Win7, Win8, Win8.1, Win10:  Click the ribbon button Edit Colors .

   The Edit Colors dialog opens.

2. If necessary, click the button Define Custom Colors>> to expand the dialog to the right.
   The light blue color is already showing in the Color|Solid area because it was the selected color.

   Custom Color: You could enter color numbers directly here if you know what you need or drag the crosshairs to pick out a color.

3. Click the button Add to Custom Colors.
   The first square for custom colors is now colored to match your custom color.

   Multiple Custom Colors: If you want to save several custom colors, you will have to pick a white square in the Custom colors rows first, and then pick your color on the right. When you click the Add to Custom Colors button, the selected square gets the new color. Otherwise, the dialog will always put the new color in the first square.
   

4. Click on OK to close the dialog.

   WinXP, Vista: The foreground color is now the custom color instead of black. The palette square for black is now light blue, too.

   Win7, Win8, Win8.1, Win10: The custom color now shows in the palette of colors in the row for custom colors.

---

Change Color in Image

Paint does not have a way to automatically replace all pixels of one color with another color. You will use the Fill tool to change the colors.

1. Open the list of recent files:

   WinXP, Vista: Menu - File > Recent files at the bottom of the menu

   Win7, Win8, Win8.1, Win10:  Open the Paint menu and look at the Recent pictures list.

   
   

2. Click on hchavez.png.

   This is Hector's signature with a white background, which is currently showing on Hector's web page.

   In a previous lesson you also saved a WMF image as a GIF, so both names are probably in the list of recent files. Pick the correct version!

   A dialog opens, asking if you want to save changes to your pasted image, Untitled.

   Problem: File is not in the list
   Either this is not the computer on which you edited this file earlier or enough pictures have been edited since then to move it off the list.
   Solution: Open the Paint menu and select Open. Navigate to your Class disk where you stored the file and select it there and click on the Open button.

3. Click on the button No or Don't Save.
   

   The signature PNG opens but Foreground/Color 1 is back to black. That's why we had to save the color as a custom color.
   

4. If necessary, click on the Foreground/Color 1 box to select it.

   

5. Use a custom color for the Foreground/Color 1.

   WinXP, Vista: Open the Edit colors dialog again. Menu: Colors > Edit Colors Click the custom color and then click on OK to close the dialog.

   Win7, Win8, Win8.1, Win10:  Click on the custom color in the bottom row on the ribbon palette.

   Foreground/Color 1 changes to the custom light blue again. What a lot of work!
   

6. Click on the Fill button.
   
   

7. Move the pointer over the white area of the picture.
   The pointer changes to a paint bucket pouring.
   

8. Click.
   The white area around the signature changes to the color of Foreground/Color 1.
   Some white pixels remain inside some of the letters.

9. Zoom in to 400% to enlarge the image for editing by:

   WinXP,Vista: View > Zoom > Custom >400%

   Win7, Win8, Win8.1, Win10:  Drag the Zoom slide at the bottom right of the window to the right to 400%.

   
   

   

10. Move the Fill pointer so that the tip of the pouring paint is over the white area inside the letter o.

11. Click.
    The white turns light blue.

12. Repeat for each remaining area of white.
    You do not have to change every single white or near white pixel. Remember that this is an enlarged view.

    Problem: Changed the wrong pixels
    Getting the pointer in just the right spot is hard for the narrow areas, inside an e or z. Undo is your friend!
    Solution: Undo and try again.

13. Zoom to 100% and inspect.
    Fix any glaring white spots by zooming again and filling the white spots. A few light spots at the edges will be OK.

---

Save in Different Formats and Test in Browser

1. Save As as PNG file by:

   WinXP, Vista: Menu: File > Save As.

   Win7, Win8, Win8.1, Win10: Open the File/ Paint menu and select Save As > PNG picture

   A Save As dialog opens.

2. Select, if necessary, PNG type.

3. Use the name  hchavez-lightblue.png  to save the changed file to the HTML folder on your Class disk.

4. Repeat the save but choose the JPEG file type.

5. Repeat the save but choose the GIF file type.

   You now have several versions of the same image including hchavez.gif with a white background and hchavez-lightblue in three different formats with a light blue background. The resource files that you copied to this folder also had some other formats, which Paint cannot use.

6. Switch to your editor and edit the SRC for the signature image to the new GIF version, hchavez-lightblue.gif.

7. Save.
   [hector18-Lastname-Firstname.htm]
   

8. Switch back to your browser and Refresh.
   Whoops. The image's background is wrong. GIF format can only show 256 colors. Our custom color was not one of the colors! The exact color varies with the version of Windows. Who knew?

   WinXP shows a lighter blue background color for the  image than the page.
   

   Vista shows a darker blue  background for the image than the page.
   Win7, Win8, Win8.1, and Win10 show a dithered background for the image in GIF format.

   Paint did not do a good job with this file format and this color. GIF images can only have 256 colors. Apparently the one we need is not in the colors that were saved.

   A good graphics program will let you change the number of colors for the image and save again. The colors actually in the image are saved! Unfortunately Paint does not have that feature.

   Let's try again with a different file formats.

9. Switch to your text editor.

10. Change the SRC to hchavez-lightblue.jpg (notice the different file extension!) and Save.
    [hector18-Lastname-Firstname.htm]

11. Switch back to your browser and Refresh.
    

    Better!

12. Use the browser's Zoom to enlarge the page to 500%.

13. Inspect the signature.
    The illustration shows an enlarged view at 500%.

    Background-color: This time the colors match in the outer areas of the signature image.

    Anti-alias: The letters have a bit of fuzziness around them that is normal anti-aliasing to create a smooth curve out of square pixels.

    JPEG Artifacts: There are also ripples of fuzzy color surrounding the signature. These are a result of the way the image is compressed and sharpened in the JPEG format.
    

14. Switch back to the editor.
15. Change the SRC to hchavez-lightblue.png (notice the different file extension!) and Save.
    [hector18-Lastname-Firstname.htm]

16. Switch back to the browser and Refresh.
    The background color matches the page background. The fuzziness from anti-aliasing remains but the JPEG artifacts are gone.

    PNG format turned out better! Of course the difference at 100% zoom is hard to see in this example.