A Quick Tutorial On

Introduction

Welcome to my documentation on how to use Photoshop. The reason why I chose to do a documentation on Photoshop is because I've had a lot of experience with the software and I often use it to help me build graphics on my web pages. Oftentimes I've wondered how to perform a certain task or how to create some effect in Photoshop that I know that I've done before. That's why I wanted to develop this quick reference on how to use Photoshop because I'm always trying to figure out how to do certain things.

Many of the things covered in this tutorial will be basics, but in knowing these small tricks, your life will become much easier. Please let me know if my explanations are not clear enough or if you just have a question on how to do some neat effect by e-mailing me at tgattis@leland.stanford.edu. Thanks! and I hope that this documentation will make things easier for designing your web pages.

Part I: Getting Used To The Tools

When you first start up Adobe Photoshop, you may end up with your screen looking like the following.

If any of these floating windows are missing, you can make them appear by going up to the window menu, going down to the word Palettes, and then going to the items on the menu that branches off from the word Palettes. The different windows that you can use are the Brushes/Options window, the Layers/Channels/Paths window, the Picker/Swatches/Search window, the Info window, and most importantly, the tools window.

The Tools window allows you to change your tools, to change your foreground and background colors, to change from a colors to their corresponding greys, and to change the look of the running application, ie: whether there are windows in the background, whether the current window covers the whole screen, and whether a completely black window fills the entire screen with the picture inside. In the remaining four windows, you can click on "tabs" that stick up in order to change between the different controls in the window. For example, if the Brushes tab is white, then it is currently on top. If you were to click on the grey Options tab, then that "sheet" would come forward and you will be able to change the Options. The Layers/Channels/Paths window I'm not going to get into. The Picker/Swatches/Scratch window allows you to play with colors, and the Info window tells you the angle of things, the positions, sizes, and colors of the items on the drawing window.

This is the tool palette. I'll briefly describe the tools. The Firs two are the Marquee tools. They allow you to "box" a region or "lasso" a region. They are for selection certain areas. The next tool that the arrow is on is the "Magic wand." Try it sometime. It will select complete regions that have (roughly) the same color. The next tool will take the graphic and will move it around in the window. The Hand tool will scroll through the window by clicking and dragging. The magnifying glass will make the picture larger with one click and will make the picture smaller if you hold option and click. The Crop tool will crop an image. Just make a box, drag the corners to where you want them, and click inside. The image will be cropped. If you want to rotate the box, hold Option and pull one of the corners. The next tool is for typing out text. If you want to make the text look good, make sure you make it anti-aliased. The next tool is the paint bucket and will fill an area with the foreground color (in this case red). The next tool is the gradient tool. It will cause a gradual fade from the foreground color to the background color. Just select a region, click, drag, and where the line that you created begins will be the foreground color, and where it ends will be the background color. The next is the line tool. GREAT TIP: If you click on this tool and change it's width to 0 in the Line Tool Options window (the window with the brushes in it as well), then you can use it to measure the angles of things that you've scanned in or are just trying to line up. Which points you want to make horizontal or vertical, click on the first, drag to the second, and read what's in the Info window.

If you look at the second box from the bottom, you'll see a little angle picture. The value next to the "A:" is the angle. Right now, the angle is 0.0 degrees. if it were off by anything, what you can do is (if for instance the angle said -5.4 degrees), you could line up the picture by going up to the Image menu, going to Rotate, and go to Arbitrary... Put the rotation on Clockwise and rotate it the degree that the info window said. NOTE: Make sure you make your start point on the left and you make you end point on the right. Otherwise, the angle will be backwards.

The next tools briefly are the eyedropper (for selecting a color as the foreground color), the eraser, the pencil, the airbrush (which is a great tool!), the paint brush, the stamp (which can duplicate the region that you option-click onto), the smudge tool (which is like running your finger through paint), the water tool for blurring (like dripping water on your painting), and the tone tool for affecting the picture in various ways.

Part II: Now On To The Good Stuff

What I really wanted to do with this documentation is to teach how to get around Photoshop 3.0 in working on building graphics for a web page. Oftentimes I've designed something in Photoshop, and then when I go to put it on the web, I can't figure out why I can't save the picture as a JPEG or as a GIF and I'm stuck with a really nice picture that I can only save as a Photoshop 3.0 file. These next few sections will teach how to go from a Photoshop 3.0, to a JPEG to a GIF to a GIF with a transparent background to a GIF that is interpolated that loads up like the picture on my homepage and like ones on many pages.

Getting Started

Everyone probably knows how to start up Photoshop and create a new window but I'll explain it anyway will add some things that you ought to know. First of all, after you've launched Photoshop, go up to the file menu and select "New...". The following window will appear. The things that you want to pay attention to are the Image Size, the Resolution, the Mode, and the Contents. Image Size is important because you never want to put a big picture up on your web page because it will slow down the loading of your page and you will frustrate people who have slow connections and who are trying to look at your page. A rule of thumb is to keep all graphics smaller than 150K. Anything bigger than that starts to become a pain in the butt. If you figure a good connection is maybe 20K-40K a second, then that's 4 to 8 seconds to load that one picture. When browsing on the web, not many people want to wait longer than that. The resolution never needs to be greater than 72 pixels per inch. Why? The reason is that computer monitors are 72 pixels/inch in their resolution. If you made your picture any greater resolution than that, you would just be wasting disk space and loading time. The mode is always important because if you are going to be working with a greyscale, you can make your work much smaller in file size if you use Greyscale rather than RGB. Finally Contents is important because you will only b to save a picture as a JPEG or thing else other than a Photoshop 3.0 only if the background is not transparent. You can still eventually save your document as a form other than Photoshop 3.0, but you have to take an extra step and you will still have to choose a background color when you convert the document.

Saving As A JPEG

After you have drawn your picture or have pasted in something from another program and you are ready to turn it into a JPEG, make sure that your document does not have several layers. If it does, it will not be able to be saved as a JPEG or any other file type other than Photoshop 3.0. If this is the case, then you must make sure that you flatten out the layers onto one layer. You can do this by going to the Channels/Paths/Layers Palette, clicking on the right turned arrow at the top right of the palette, and scrolling down to "Flatten Image." This will cause all the layers to be flattened on top of each other and the "transparent" regions (the regions with the grey and white checkers--but only if you chose transparent on the New... window) will be given the background color.

Now it will be possible to go up to the "Save..." item under the file menu and save your document as a JPEG. As you can see, not only is it possible to save as a JPEG, but you can also save your document as a Photoshop 2.0, an EPS (encapsulated postscript), a PICT file, a PICT resource, Raw, as a Scitex CT, or as a TIFF.

Saving As A GIF

Now that you've flattened out your graphic, there are only a few more things that you must do in order to convert your picture to a GIF (aka Compuserve GIF).

The main thing that you must do in order to change your graphic is to go up to the MODE menu and select "Indexed Color...". In selecting this item, a window like the one below will come up with many different options:

The options that you want to choose are "Other" for the Resolution, and either Adaptive or Exact for the Palette. Depending on how many colors are actually in your graphic, you might even be able to choose 8 bits/pixel for the resolution. When you choose 8 bits/pixel for the resolution, the word "Uniform" changes to "System" in the Palette section. This is what you would like to aim for. Once you've chosen the right settings, click "OK" and make sure to watch your picture as the window closes. Sometimes, if you choose 8 bits/pixel and when your graphic has more colors than this allows, it will change the quality of your picture. If this happens, go ahead and hit "Undo Mode Change" in the "Edit" menu and try doing "Indexed Color..." again. This time choose "Other" under the Resolution section and hit "OK" again. If your picture didn"t change in any way, then you are in good shape. Now, when you go to do "Save As..." the file format will already be selected as Compuserve GIF. Now you have your GIF format.

Other Helper Applications For GIFs

Two applications that I use often to help me do some additional things to my gifs is the application GIF Converter and the application Transparency. GIF Converter is great because it's shareware and it allows you to create a GIF that will load up on the web every four lines at a time or so. This creates a neat effect of having a blurry picture that slowly comes into focus. If you ever get a copy of GIF Converter, it is easy to "interlace" your GIF.

Here's what GIFConverter looks like. It's really simple and is easy to use. First go under the "File" menu and go to the "Open..." command. Open up the GIF that you already have and your picture will be displayed with a few tools at the top of the picture window. Then select "Save As..." under the "File" menu. The following window will appear.

Next click on the "Options..." button at the bottom right hand side of this window. This is what you will need to select in order to make your GIF an interlaced gif (one that will load up alternate lines at a time). The following window will appear.

Make sure that you select the file type to be GIF and that you check the two boxes "Interlaced" and "87a Compatibility." I'm not sure exactly what 87a Compatibility does, but I have been informed that I really ought to select that option as well. You will not need to select the number of colors because for a GIF, there will always be a maximum of 256 colors. Finally, just hit "Save" and you will have your new interlaced GIF.

But What If You Would Like To Make The Background Transparent?

Well, with the program Transparency, that's no problem. Just launch the application, go to the "Open..." feature under the "File" menu, and open up your interlaced GIF. You'll see a window with your picture in it. Next, click on the color that you want to be transparent. If you hold the mouse button down, you'll see the palette of that GIF pop up. The color that you selected (in this case the blue) will be the color that is turned transparent. You have to be careful, though, that you have definite color changes in your picture, or else the "cutting out of the background" will not look as good as you want it to.

As you can see, the new smile has the original blue background greyed out, yet there is still some blue right next to the eyes. This is what I mean by having a definite boundary or change in color between the background that you want to remove and the foreground.

That's It!!

Well I hope this little tutorial helped you avoid some of the trouble that I've run into as I began working on putting stuff on the web. Good luck, and if you find any mistakes in my stuff, please let me know so that I can change it!


Back