Adobe Photoshop is one of the more popular image processing applications available. It is an extremely complex and powerful tool. This lab is only a brief introduction to using computers to create original images.
Getting Started
If necessary, log in to the computer using the User Name (login name) and password printed on the sticker at the bottom of the monitor.
Create your personal folder
We will first create a folder on the computer to store our files for this lab. Each student will have their own folder.
From the screen desktop, find the icon (picture) labeledCS Classes Winter 2001 (upper right). Double-click on this icon to browse the files available on that hard disk. Open the folder for your CS16 section. Finally, open the StudentBackup folder.
From this browsing window, select the File menu and select NewFolder. Use your name as the name of the new folder simply by typing it in when the new folder appears. You now have a personal folder where you can keep your files without bothering anyone else’s files. Keep your personal folder’s window visible for right now.
Double-click on the CS Classes Winter 2001 icon to open another window and select your CS16 section folder. Open the Out folder within your section. This folder location will hold all class files for this lab and subsequent labs. Drag the file button.psd into your personal folder WHILE HOLDING THE CTRL (control) KEY--this makes a copy for you to work with.
Photoshop
This lab will use Adobe Photoshop to create 6 different “button” images that will be used, later, on your web page. Everyone has seen web pages that have buttons that you can select and push – often these buttons have labels that change as your mouse pointer goes over them.
From the Windows Start button (bottom left of the screen desktop) use the menus to find the Photoshop program and start it.
From the Photoshop File menu, select Open and navigate to the file button.psd in your personal folder. Hint: Navigate to the Desktop from the Open dialog window.
You now have a window with a blank button. You may also have several other windows with various information or icons in them. The most important of these other windows is the Tool Palette – a selection of tools for painting, editing, erasing, and coloring your images. This lab will only use a few tools and options of Photoshop. (You’ll see more in a later lab.)
Changing Button Colors
Begin by changing the color of the button image.
From the Image menu, select Adjust and Hue/Saturation. (Hue is another term for color)
Use the Hue adjustment to change the buttons from purple to something else.
When you get it looking the way you want, click OK.SAVE THIS FILE NOW.
Move the cursor to the button and click in the middle to place text onto the image.
A dialog window will be presented with several options. Select 24 pt font and a Yellow color, before typing in your first name. If the colors and spelling look correct, click OK.
You may now use the Move Tool (arrow in upper right) to center the text over the button.
Use the Layer >> Effects >> Outer Glow dialog box to remove the glow temporarily: Un-check the Apply box and the glow will disappear. Click OK when done.
The words (text) that you entered before are kept on a Photoshop “Layer” – think of it as a clear sheet of plastic over the button image underneath. To change the text on a layer, you simply need to double-click on the text layer in the Layers window. (If you do not see a layers window, use the Window menu and select Show Layers.)
Double-click the text layer, then change the text to read: Interests
Interest Buttons
Repeat the above steps to save two more images (one normal, one glowing) as interest.gif and interest1.gif
