Intro to Photoshop

NOTE ON UNDO IN PHOTOSHOP: “Undo” in Photoshop is called “Step Backwards” (Edit > Step Backwards). “Redo” is “Step Forward.”

Lab 2: Creating Web Graphics With Photoshop

Part 1: Creating a Button

1)Create a New Image

  1. File > New
  2. Make it 400 x 200 pixels

2)Make a New Layer

  1. Find the Layers window. (If you don’t see it, go to Window > Layers)
  2. Make a new layer by clicking the New Layer button.
  3. The layers window shows you the various layers your image is made up of. When adding a new part to your image, it’s usually best to place it on its own layer. This way you can move or change pieces later.You can drag layers up and down the list to rearrange them.
  4. Click on a layer to make it the current drawing layer. Make sure the new layer you added is current.
  5. Avoid drawing on the default Background layer.

3)Create a Selection

  1. Select the Rectangular Selection Tool in the tool palette.
  2. If you hold down this button, you can also choose to make an elliptical selection.
  3. Experiment with this tool. To add additional sections to your selection, hold down Shift before making a new selection. To take away sections from your selection, hold down Alt while making a new selection.

  4. Deselect everything by pressing Ctrl+D.

4)Create a 200 x 50px rectangular selection.

  1. At the top of your screen, under the menu bar, there should be a setting called “Style.” Select “Fixed Size” from the drop down. Now you can enter specific dimensions for your selection. Enter 200 for the Width and 50 for the Height.
  2. A 200x50 box will appear when you click anywhere in your drawing layer. Drag until the box is where you want it.

5)Fill your selection with color.

  1. In the tools palette, there are two color swatches. The top square is the primary color. If you use a brush or paint bucket, it will apply this color. The bottom square is the secondary color. It has various purposes, but it's also a good place to store a second color that you're using. Click on the primary color square, and choose a color that you want for your button background.
  2. Click on either square to change its color.
    Click the arrow to swap the two colors.
    Click the little squares to reset the colors to black and white.
  3. Select the paint bucket tool from the Tool Palette.
  4. Click inside of your selection to fill it with the primary color.
  5. To fill your selection with a gradient instead, choose a primary and a secondary color that will blend well together, then select the Gradient tool . Drag from one point within your selection to another to fill it with a blend of colors.

6)Make your button look 3D.

  1. In the Layers window, right click on your button layer and select “Blending Options.” Select some effects to make your box look buttonish:

Drop Shadow
Selecting this option will make your layer cast a shadow on layers below it.

Bevel and Emboss
Makes the layer like a block of gold bullion - raised in the centre, with edges that slope down. (This is a good effect for creating instant buttons.)

Texture
Makes the surface of the layer look like it's made of wood, stone etc. Use the "Overlay" setting.

Stroke
Stroke is just another word for "outline". A Stroke is useful to make an object or text stand out from its background.

7)Add Text to your button.

  1. Create a new layer.
  2. Use the Text tool to add a label to your button. Click wherever you want your text to start. Choose a font, color, and size, and start typing. (Add any text that makes sense for a button – e.g. home, contact me, etc.)
  3. “Blending Options” can be added to this text layer if desired.

8)Add a Photo to your button.

  1. Create another new layer.
  2. Open a photo (you should have received a photo called berkeley.jpg)
  3. Go to Image > Image Size… Make sure “Resample Image” and “Constrain Proportions” are checked.Set the height of your image to 40 pixels, so that it will fit on your button. Hit OK. Your image should resize.
  4. Hit Ctrl+A to select the mini image.
  5. Go back to your button. Make sure the newest layer is selected.
  6. Press Ctrl+C to copy the photo.
  7. Press Ctrl+V to paste the photo.

9)Rearrange the parts of your button if desired.

  1. Use the Move Tool to drag things around. If you have a selection, it will drag the contents of the selection. If not (remember, Ctrl+D removes the selection) it will drag the contents of the currently selected layer.
  2. If “Auto Select Layer” is selected (in the tool options, under the main window’s menu bar), then the layer you click on will automatically be selected.

10)Crop your image to the size of your button.

  1. Using the crop tool, select your button, and double click inside of the box you create.
  2. You can readjust the cropping box by dragging the corners after you have created it.
  3. As with selections, you can set a specific width and height for your crop box if you desire, using the tool options bar at the top.

11)Save your file.

  1. File > Save – by default your file will be saved in the Photoshop (PSD) format (yourfilename.psd). This format preserves all of your layers. Save a copy of your file as a PSD.
  2. To save your file for use on a web page, go to Save As… and change the format to “Compuserve GIF” in the Format drop down. This will save a copy as a GIF.
  3. Generally, photos should be saved as JPEG files, and graphics with primarily solid colors and shapes as GIF files. To find out more about web graphics file types, read:

Now, go back to your PSD file. Using what you’ve learned, create a set of 3 matching buttons for a website. You can use the same graphic or find your own. Use Save As to save each as a new GIF file.

Part 2: Photo Editing With Photoshop (Optional)

If you finish with this assignment early, open up badphoto.jpg and practice photo manipulation using Photoshop.

Experiment with the following tools under Image > Adjustments:

  • Shadows/Highlights
  • Brightness/Contrast
  • Color Balance
  • Variations

You can also experiment with filters under the Filter menu, such as Sharpen and Blur.

See if you can improve this low contrast, overly blue photo.


Example of badphoto.jpg before and after.