CSC 102

Laboratory: Photoshop Manipulation

 

This lab will give you some practice using Photoshop to manipulate and edit images for web pages. Many other photo editing programs exist and may be used instead of Photoshop, but these instructions are written with Photoshop in mind. (In particular, Paint.NET is a free photo editing program with capabilities similar to Photoshop.)

You will be editing the image of a USB flash drive found on the wikimedia site. Note that the file information at the bottom of the page states that this image has been released to the public domain. That means we may do whatever we please with it.

  1. Right-click on the image and Save Image As... to make a copy on your H: drive.
  2. Open the image in Photoshop. (Either right-click on the file icon and Open With..., or open Photoshop through the Start menu and then do File | Open.)
  3. Get rid of the rule marks on the right side. (Use the dotted rectangle tool to select the region you want to keep. Then choose Image | Crop.)
  4. Select the background using the Magic Wand tool. If your luck is the same as mine, you get the main drive cleanly but not the cap. Add the cap to the selection by holding the Shift key while using the dotted rectangle tool to select it. Then choose Select | Inverse to get the USB drive. (If you want to get the drive plus its cap, you can use the Lasso tool to add the part that the Magic Wand missed.)
  5. Cut the USB drive out of the picture with Edit | Cut.
  6. Start a new image, with File | New. The background in the information box should be set to Transparent. The dimensions should already be just right for the piece you just cut out.
  7. Paste the selection into the new image with Edit | Paste.
  8. Just for fun, try Image | Rotate Canvas... | 90o CW.
  9. Use File | Save For Web to save it as a PNG-24 with transparency, under a new file name.

When you have saved your edited file, the last step is to test it in a web page. Create a new page, and make a table with two cells. Set the background color to something different (and non-white) in each cell. (Check the tables lab for a review of this if necessary.) Then include the image in each cell using an <img> tag somewhat like the following.

<img src="usbdrive.png" alt="USB drive with transparent background" />