WSO title bar

Revision as of 01:52, May 3, 2006 by 07djd (talk | contribs) (added GIMP instructions)

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). If you have GIMP, see below. 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.

Using GIMP

Some people don't have PhotoShop not because they're too lazy to download it, but because their computer runs on a free operating system. For them, there's GIMP, and with GIMP, you can make a fully-operational WSO picture, almost.

1. Find your picture as above and open it in GIMP.

2. Select the rectangular selection tool, and in the dropdown menu, select "Fixed aspect ratio" (as opposed to "Free select" or "Fixed size").

3. Set the width to 134 and the height to 81, and select px as the units (not that it matters).

4. Select the person's face using the tool as described above.

5. Select the bucket tool -- the one that pours paint -- and change the color to white (by double-clicking on the upper of the overlapping squares below the tools, and then selecting white when the menu comes up). This is best done zoomed in all the way, until the person is very grainy and pixellated. Click all over the background (not the person's face) to eliminate as much as possible.

6. Select the eraser tool and make it as big as possible. Eliminate large regions of the background with the eraser, and then make it smaller to get the last bits out of small areas in your photo.

7. Double-click on the upper square again and put 363237 where it says ffffff.

8. Use the paint bucket to pour that color in the blank white background.

9. Go to Image -> Scale image and make your image 134 by 81 pixels.

10. Blow up the image until it is very pixellated again. Select the brush tool with a small brush (since the image is very small now) with color 363237 and click along the edges of the person's face so as to eliminate the lightness that comes from the bucket-erasing technique above.

11. Save your image. This is where, to the best of my knowledge, GIMP fails, because GIMP does not, to the best of my knowledge, have a "Save for web" option. Someone please correct me if I'm wrong. Save it as a jpeg.

12. 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.