WSO title bar

Revision as of 19:15, May 2, 2006 by 06emm (talk | contribs) (Save for Web)

The WSO title bar has space for a funny picture, and anyone can upload a photo to go in the rotation.

Example WSO title bar.jpg

Here's how to do it.

1. Choose a good picture. It should depict a Williams student making a funny face. Cruise around your own computer, PhotoShare and Facebook to find some good ones. You can save a photo on the Internet to your hard disk by right-clicking and selecting "Save image as..." (or something like that).

2. Open the picture in PhotoShop. If you don't have PhotoShop installed on your computer, visit the OIT Software Download page and scroll down to PhotoShop CS 2 (or whatever version is current). Once it's installed, open the program, and go to "File -> Open...", and select the picture.

3. Open a new file under File -> New. Make sure that it is 134 pixels wide and 81 pixels tall. The rest of the defaults should work fine.

4. Now, in the empty file, press M to get the marquee tool and go to Select -> All. Now drag this selection area to the other file (the photo) that you want to grab a piece of.

5. The selection area (134 x 81) should be on the photo now, but now you need to shrink the photo so it fits into the area. Right click the select area and click "Transform selection." Hold shift and drag a corner to make a box big enough to capture the portion of the photo you want. Fill up as much of the selection box as possible with the person's face. It's OK if you cut off the person's forehead. You can move the selection area with the arrow keys. When you're finished, click the Check box at the top of the screen.

6. Go to Edit -> Copy

7. Make sure that the color #363237 is selected as the background color. (The background color is the color box in the back.)

8. Go to File -> New. Make sure "Background Contents" is set to "Background Color," then click OK. (This will make a new file the size of what you just copied.)

9. Go to Edit -> Paste. This will put what you selected into the new file.

10. Now we want to shrink it down to size. Go to Image -> Image Size and select a width of 134 pixels and a height of 81 pixels, and click OK.

11. Let's make the background the color we want. This is the trickiest part. Go to "View -> Zoom In" three or four times, until the picture looks grainy. Press "E" to select the eraser tool. You can set the eraser size in the top left of the screen. Wield it until there is only a person on a gray background. Make it perfect! Hundreds of people will see your picture every day.

12. There's a good chance the picture you chose is washed out, so let's touch up the color a bit. Select the layer with the image (NOT the background layer), and then go to Layer -> New Adjustment Layer -> Brightness/Contrast... Make sure that "Use Previous Layer to Create Clipping Mask" is checked. Adjust the sliders to taste. Make it stand out, but not look unnatural.

13. Repeat step #12, but this time select Layer -> New Adjustment Layer -> Color Balance... Adjust the sliders (or not) so the person is looking healthy.

14. Tinker with the contrast and color until it's looking as awesome as you imagined it.

15. When you're done, go to File -> Save for Web (NOT Save As...) and save it as a JPEG.

16. Now you're ready to upload your creation. Visit http://wso.williams.edu/front/upload and fill out the forms, and cross your fingers.