Troy's Beginner Photoshop Tutorial

Welcome. I've written this tutorial using Adobe Photoshop 7.0 as the example. Although other versions may look slightly different, the concepts are the same. Please keep in mind there are several ways to do some of the things I'll show you. I've attempted to keep it simple for this exercise. There are also shortcuts to many of these functions, but we won't cover those here.

Let's start by building a banner. Open Photoshop.

1. Your work area should look something like this:

2. Determine the dimensions of the graphic you'll need. For this example, we'll say we need a banner that's 459 pixels wide by 210 pixels high. In the upper-left corner, click on 'File' and select 'New'.
3. You will get a menu that looks like the one below. Input your dimensions, 459 wide by 210 high. In the 'Name' field, replace "Untitled-1" with any name you like (optional). If the graphic you're doing is for the web, make sure the 'Mode' drop-down has 'RGB Color' selected. In the 'Contents' field, make sure 'Transparent' is selected. Click OK.
4. Note you now have an empty document which is exactly the dimensions you entered in the upper-left. In the lower right, you now have a representation of 'Layer 1' in your Layer Palette.
5. Let's select a color to fill-in Layer 1 of this banner. Click on the little colored square on the left.
6. Click on the color you'd like to fill with. For this example, I'll use a deep blue-green. Select 'OK'.
7. In the Tools Palette on the left, select the Paint Bucket tool. Note: If you right-click on any of the tools buttons, you will presented with other tools--note for the future.
8. Position the Paint Bucket tool in the middle of your transparent layer and click. Your empty layer should flood with the color you've selected.
9. Note you now have a document filled with blue, and your layer in the Palette (lower right) is now blue as well.

10. Let's add another graphic. You can use whatever you like. Search 'Google' images for one you like. Be careful not to infringe copywritten images. Find a picture of something (I'll use a camera), surrounded by white background.

Once you've got the image saved to your computer, go to 'File' in the upper-left corner of your Photoshop software and select 'Open'. Find the picture of the camera in the folder where you saved it and select 'Open'. Now your workspace should look something like this.
11. Now we want to separate the camera from it's white back ground. In the Tool Palette on the left, select the "Magic Wand" tool. If you don't see it, right-click on the button and select it.
12. Now move your Magic Wand to the white area surrounding the camera. Click It. You should see a pulsing dashed line appear around the edges of your object.
13. What you've selected in the previous step is the white area of your image. We want to invert that selection so what you have selected is your object. In the upper-left, under the 'Select' menu, click on 'Inverse'.
14. Now that you've selected the camera (or whatever object you're using), under the 'Edit' menu in the upper-left, select 'Copy'.
15. Now click on the task bar of your banner to bring it back to the front of your workspace.
16. Under the 'Edit' menu in the upper-left, select 'Paste'.
17. You have now pasted the object into your banner. This example is too big, but we'll fix that momentarily. Note how you can grab the blue borders surrounding your document and stretch them out. Do this now to give yourself some room to work. You'll need it shortly.
18. Note your Layer Palette in the lower right now shows two layers for your banner document--the original blue layer, and the object you've just pasted in. Click on that object layer to make sure it's selected, as indicated by the red arrow.
19. Now that you've selected the object layer in the lower-right layer palette, use the 'Edit' menu in the upper-left to select 'Free Transform'
20. Note the sizing frame which has appeared at the edges of your image. Before you re-size, click on the chainlink in the taskbar to the top. This will preserve the aspect ratio of our object and prevent it from looking squished or stretched.
21. Now grab one of the sizing boxes at the corner of your image and size it down so it fits in your banner. When you've got it the size you want it, hit the 'enter' key on your keyboard to commit the change. If your image is in the wrong place or slightly off-screen, don't worry, we'll fix that.
22. Now in the upper left Tool Palette, click on the move tool, indicated by the mouse pointer in the image below.
23. Now click on your object and drag it into desired position.
24. Now let's add a 'Drop Shadow' effect to the camera. In the Layer Palette at lower-right, right-click on the words 'Layer 2' for your object layer. Select 'Blending Options'. You will get a menu that looks like this. Check the box next to 'Drop Shadow'. Click OK.
25. You now have a drop shadow around your object.
26. Click on the Text Tool in the task bar to the left, indicated by the red arrow. Click on your banner in the general area of where you want the text to appear. You will see a text toolbar appear at the top of your workspace. Note how the toolbar shows your font, size, style, and color (indicated by the mouse pointer). Set your desired font and size. Then Click on the box to select a text color.
27. Again, we'll use the color select tool to choose a color. For this example, I'll use a light slate blue-gray. Then click 'OK'.
28. Type your text and it will appear on your banner. Click on any tool or layer to exit the text-edit mode and commit your text. If at anytime your text doesn't look right and you need to edit the size, font, or color, you can re-highlight the entire text-layer by double clicking on the layer in the lower-right layer palette. Let's do that now since I don't like this wimpy font.
29. Double-click on the text layer in the lower-right Layer Palette. Your text will be highlighted. Use the taskbar at the top of your work area to change your font and/or size to something you like. I'm gonna use Arial Black.
30. Now that's a little better. Let's add some Drop Shadow effect to this text.
31. Just like step 24 when we added Drop Shadow to the camera, we'll add some to this text. Right-click on the text layer in the lower-right Layer Palette. Select 'Blending Options', then check the box next to the "Drop Shadow" effect. Click Ok.
32. Now we have drop-shadow on our text. But the camera is bothering me now... let's rotate it clockwise a little bit.
33. In the lower-right Layer Palette, click once on the camera layer to select it.
34. Now that you've selected the camera layer, use the 'Edit' menu in the upper-left to select 'Transform' and then 'Rotate'. You will see rotation controls appear at the corners of your camera image.
35. Grab one of the corner boxes and rotate your object until it looks good. Hit the 'enter' key on your keyboard to commit the change.
36. That looks a little better. Now let's add another layer of text. Under the 'Layer' menu at the top, select 'New' and then 'Layer'.
37. You'll get a menu that looks like the one below. Make sure 'Color' has 'None' selected. Click 'Ok'.
38. Note you now have an empty layer in the lower-right layer palette. Click it once to make sure it's selected.
39. Select the Text Tool indicated by the red arrow and then click on your banner and type your text, just like you did before. In this example, I used the toolbar at the top of the text layer to select a slightly smaller font.
40. Now click on the Move Tool indicated by the red arrow. Click and drag your text into position as indicated by the mouse pointer.
41. Right-click on this new text layer in the lower-right Layer Palette and select 'Blending Options' to add Drop Shadow just like before. Once you've done that, you should have a banner that looks like this.
42. Now, save your file. Under the 'File' menu, select 'Save For Web'.
43. You'll get an option window that looks like this. Make sure JPEG is selected in the 'Settings' area and set quality to '65' for this example. Click 'Save'.
44. You'll get a window that looks like this. Give it a name and save it!
DONE! Now upload your image to your website and you're good to go. The options and techiniques vary slightly for images you intend to print, but I'll cover those in another lesson.