Photoshop for Backgrounds

Part 1

In this activity you will edit the image below. When you are finished, submit your new image to the shared folder. This assignment is due Friday, August 27.

sample background
(Used under the Creative Commons License from http://www.noqta.it/dromoscopio/)

Complete the steps below.

  1. To get started, highlight the image and use Ctrl+C to copy it.
  2. Open Photoshop and choose "File" and then "New"
  3. The "New" dialog box already has the dimensions of the file. Click OK and use Ctrl+V to paste the image into the work area.
  4. Save the file in your "Web" folder as "loginname_psbg.png"
  5. Open your template and add the style code below to the <head> section of your template.
    6. <style type="text/css">
        body {
            background-image: url("loginname_psbg.png");
        }
    </style>
  6. Save the template and view it in a Web browser. Make sure the image shows up in the background.
  7. This tiling looks awful! Crop the image so that it looks like the one below.
    8. cropped background
  8. Save the image and view the template in the Web browser again. Much better!
  9. But it is still probably hard to read. Let's wash out that color so it is very light.
  10. There are lots of ways, but one is to create a new layer ("Layer" and "New"), draw a white box over the whole image, and adjust the opacity in the "Blending Options" of the Layer Style.
    11. shows how to get to the blending options shows where the opacity slider is
  11. Save and view your changes in the Web browser.
  12. In the Filter menu there are lots of filters to try. Select the original image layer and apply some filters until you get a look you like.
  13. Save and view in a Web browser.
  14. Submit the image file to the shared folder.

Part 2

Complete this part ONLY if you are ON SCHEDULE or AHEAD for this week. Two more helpful techniques use the following photo:

sample background 2

  1. Copy the image into a new Photoshop workspace.
  2. Photoshop has a lovely background eraser tool, but most other photo editors don't. Many have a magic wand tool, so With them you can do the following:
  3. Select the magic wand tool and click in the sky portion of the photo. It probably does not perfectly select all of the sky and none of the foreground. You may need to delete portions of the sky at a time, or adjust the tolerance (some editors call it "threshold").
  4. If you need to select more of the background, turn up the tolerance. If you need to select less, turn it down.
  5. Adjust the tolerance and delete portions of the sky until you get an appropriate photo. If you copied the image into the workspace you will automatically have a transparent background where you make deletions.
  6. To save transparencies you must save the file as a png or gif. PNG files are generally better quality than GIF although sometimes they may be slightly larger files.
  7. In addition to the transparent background at the top, let's say we want to make the rest of the background of our Web site the same color as some part of the photo. For this, use the eyedropper tool.
  8. Select the eyedropper and click on the part of the picture you want to match. Notice that the foreground color is now that color. If you open the color options, you can see the hexadecimal code for that color.