Web Design 12: Transparent Backgrounds

You will often work with graphics when you design websites. Stock images from the Internet often have solid-colored backgrounds, usually white. Using them directly on your website will yield an unwanted contrast between your image and your page backgrounds (see left figure).

coke

To create a transparent background (see right figure), follow these step-by-step instructions:

  1. Save the image onto your computer and then open in Photoshop.
  2. Once opened in Photoshop, select the entire image (Ctrl + A).
  3. Copy the image (Ctrl + C) and create a new image (Ctrl + N).
  4. In the next prompt, make sure to set the Background Contents to Transparent before you click OK. You will notice a blank image with light grey checkers, which signify transparency.
  5. Paste the original image onto the transparent background (Ctrl + V).
  6. Select the Magic Wand Tool by holding down the fourth tool on the left panel. The MWT selects an entire region that is similar in color to the pixel you selected.
  7. Select the backgrounds with similar solid colors. If too much is selected, reduce the tolerance (i.e. 4-16). If not enough is selected, increase the tolerance (i.e. 48-64). The default value is 32.
  8. Press Del on the keyboard to remove the similar solid colors. Once removed, the background will display light grey checkers. If it does not, check step 4.
  9. Repeat Step 7 and 8 to remove smaller pieces of the background.
  10. Save the file using a PNG format (Shift + Ctrl + S). This format allows transparency and is supported by all modern web browsers. If you use JPG, it will convert the transparency back to white.