An Introduction to Graphic Design

PHOTOSHOP: AN INTRODUCTION TO GRAPHIC DESIGN

TABLE OF CONTENTS

GETTING STARTED WITH PHOTOSHOP 1 Changing Resolutions 1 Starting a New Image 2 Saving Your Work 2

WORKING WITH COLORS 3

ESSENTIAL TOOLS 4

MANIPULATING LAYERS 5

WORKING WITH IMPORTED IMAGES 6 Adding an Image as a Layer 6 Filters 6

SELECTIONS & MASKS 7 Quick Masks 7

TEXT & TEXT EFFECTS 8

PUBLISHING YOUR WORK 9

APPENDIX Acquiring Images A Using FTP B

SEMINAR EVALUATION FORM Introduction to Photoshop The Harvard Computer Society Page 1

GETTING STARTED WITH PHOTOSHOP Adobe Photoshop is a graphics program for dealing with photographs and other images using subtle shades of color. It is not as good for making large, glossy poster designs (use Adobe Illustrator or Corel Draw for that) and it is unable to make the animated graphics which are ubiquitous on the net. Photoshop is best for is making beautiful, static images for the web, for airbrushing and removing the red from photographs, and working on small images for papers. This seminar will cover the use of Photoshop version 4.0 to create images for the web, though most of the skills learned in this seminar can easily be applied to the other uses of Photoshop.

This seminar assumes some basic familiarity with a computer (opening and saving files, using a mouse, etc.) but does not require knowledge of web design, computer programming, or other graphics programs (though knowing about these things certainly won’t hurt!). This program teaches Photoshop by having you make a layered graphic (We’ll explain layers later) using certain important tools Photoshop provides. From an aesthetic standpoint, you could probably make a much better graphic using half as many tools by being more precise with each tool. In other words, this seminar is primarily a seminar on how to use Photoshop, not how to make the most beautiful images possible; planning ahead and a good sense of design are more important than knowing lots of tricks and filters. Despite this caveat, we hope that at the end of this seminar you’ll have an image that is good looking and displays at least some of your design personality.

Changing Resolutions Photoshop is a program that will use every ounce of processing power and memory your computer can give it; it will also allow you to finally use all the room on that 19” monitor you have (or conversely make you really sad that you’re working on a 14” monitor). This is not a program that promotes egalitarianism among computer users.

To get the most out of Photoshop, you should use the highest resolution with the most colors your computer and monitor can support.1 On lab computers especially, often the default resolution and number of colors displayed are not as high as possible. On a Mac, open the Monitors and Sound control panel to change resolutions. On a PC, before opening Photoshop, open the program Quickres (in the accessories menu on the lab PCs) or use the Display control panel. Choose the highest resolution which gives you at least Thousands of colors on a Mac or HiColor (16bit) on a PC. Often the highest resolutions are available only at 256 colors. While 256 colors may be enough to work on your paper with, it really doesn’t cut it for Photoshop. When possible, try to use computers which can display Thousands or Millions of colors at 800x600 or above. This is not possible on all lab computers (even some in Science Center B11C); running Photoshop at 640x480 will make you be a bit creative with organizing (and stacking) all your palette windows. Where better graphics cards are available, only experience or personal preference will enable you to decide between higher resolutions or more colors (i.e., Millions or TrueColor [24 or 32 bit]). Having both is, of course, ideal.

1 Sometimes monitors claim to support higher resolutions than they actually are able to display clearly. These blurry top resolutions should be avoided even when available. Regarding ergonomics: Photoshop requires precise movements with the mouse, so be sure to take stretch breaks often. Making sure the mouse’s rollers are clean will make these movements easier as well. If you suffer from RSI but can still use a pen, or just want to make finer motions than you can with a mouse, consider buying a Wacom ArtPad, starting at around $100 for the “professional” models. 2 Introduction to Photoshop The Harvard Computer Society Page 2

Starting a New Image To begin working on our image, select New from the file menu. A dialog box should now pop up asking you several questions. You can give your document a title now or wait until you save. Below that are boxes for width and height. If you’re working on images for the web (like we are now) make sure the height and width are measured in pixels and not inches, centimeters, points, picas, or parsecs. Select a width of 500 and a height of 300.2 The resolution should be 72 pixels/inch for web images. The mode of the image needs to be RGB Color. Many of the other modes are useful (indexed color (for GIFs) and grayscale in particular), but won’t be covered in this seminar. Finally, choose Contents: White and click OK.

A new, blank, white window should now appear. If your image does not have rulers, you can turn them on by selecting Show Rulers from the View menu; to save screen real estate, you might want to turn off the rulers if you are running at 640x480. Use the View menu also to turn on all of the following windows: Tools, Options, Color, Brushes, and Layers. When you open some of these windows others might disappear (particularly with color and brushes); this is normal and you shouldn’t worry about it.

Before we begin messing around, create a new layer by clicking on the New Layer icon in the layers window. This icon looks like a sheet of paper and is just to the left of the trashcan. You should now have two layers: Background and Layer 1. We’ll talk about layers in a few minutes.

Saving Your Work . . . Often Photoshop images traditionally have the suffix .PSD. Although this suffix is optional on Macs, it is a good idea to use it, so that your files can be read on PCs as well. Although Photoshop 5 now supports multiple- level and arbitrary undo, you are still encouraged to save your work and save it often. It’s very reassuring to know that even if you completely mess up your image, you can simply close and not save changes, and have a recent copy to start fresh from. I’ll keep reminding you to save your work throughout the packet.

2 When making graphics for the Web, a good rule of thumb is too keep most graphics 500x300 or smaller. If you’re running Photoshop on a larger screen, you may be tempted to succumb to the dark side and make bigger graphics. If you’re running at 640x480, making even smaller graphics (maybe 400x250) is encouraged. If you ever need more room, press TAB to temporarily turn off all the palette windows. Introduction to Photoshop The Harvard Computer Society Page 3

WORKING WITH COLORS In this short section, we’ll figure out how to change colors in Photoshop and make our first few doodles.

Photoshop always has two colors active, the foreground and the background color. The foreground color is the color which will be used when you paint, draw a line, enter text, or do just about anything. The background color is used with certain filters and when you expand the canvas of a document. It’s also a convenient place to store a color you are not using right now, but will be using soon. Near the bottom of the tools palette, two squares show the current foreground and background colors (see figure at right). The square in the upper-left shows the current foreground color (here black), while the lower-right square shows the background color. Clicking on the arrow in the upper-right corner swaps the two colors, while clicking on the icon in the lower-left corner switches to black foreground on a white background.

To choose a color, click on either the foreground or background color; a color picker similar to the one on the left should appear. Click somewhere in the square to choose a color. Your new color will appear in the smaller rectangle in the upper-right of the dialog box. The letters HSB in the first column stand for Hue (color), Saturation (intensity), and Brightness (level of grey). When the button next to H is checked, the long rectangular slider controls the hue. If S or B are selected instead, then the slider will control Saturation or Brightness. The letters RGB, also in the first column, tell the amount of Red, Green, and Blue in the current color. These numbers range from 0-255 for each. Click somewhere in the square and click okay.

Select the Paintbrush tool and click and hold the mouse button to draw freeform objects on the “canvas.” If you’re having problems, make sure that a brush is selected (preferably the third or fourth brush in the top or second row) and that in the Paintbrush Options window, the Opacity slider is set to 100%. When you’ve doodled a bit, try switching colors a few times.

Okay, that’s not very exciting. Photoshop 5 now supports “arbitrary undo”, so you can go back to a clean canvas by either clicking the first action in your action list, dragging all the unwanted actions to the trash icon, or (the old way), deleting the entire layer we were working on by dragging it to the trash.

For future reference, the new “arbitrary undo” also as the benefit of being able to delete just one action, or dragging actions around to change the order in which they occurred.

When you get back to a clean canvas, be sure to save your document. 4 Introduction to Photoshop The Harvard Computer Society Page 4

ESSENTIAL TOOLS In this section we’re going to fool around with a few of the tools in the palette on the left side of the screen to create part of the background for our image. Tools that have a small right-facing arrow at the bottom have a pop-out menu from which you can choose a different, but similar tool.

The paintbrush tool is used to create strokes with edges softer than with the pencil tool but not as diffuse as the airbrush.

Experiment with different brushes. The brushes with the numbers (35, 45, 65, 100) indicate brushes of 35-100 pixels each. Both the width of the stroke and the amount of fading at the stroke’s edge can be manipulated by changing brushes. An advanced Photoshop user can actually design her own brushes for specialized projects.

On the Paintbrush Options tab, use the slider to change the opacity. An opacity of 50% will mean that your stroke will appear half as saturated on the canvas as before. Make yourself a grid of a number of different colors, then experiment with the different paintbrush modes found in the drop-down box. You can find more exact descriptions of what each mode does by looking in the online Help.

The next tool to the left of the paintbrush is the airbrush tool. The airbrush works something like a can of spray paint and is most effective with the large, diffuse round brushes. Most of the options found for the paintbrush are also found for the airbrush. Effects created with the airbrush and paintbrush tool will look largely the same, except the concentration of color is more diffuse with the airbrush.

Below the paintbrush is the pencil. The pencil places color on the canvas in a uniform and saturated stroke, without any blending at the edges. It has the same brush options and modes of the airbrush and paintbrush tools. The pencil is mostly used for fine detail editing when you would like to edit one pixel at a time.

If you hold down the pencil button, or OPTION-click, you can choose the line tool from the pop-out menu. This tool will draw straight lines of varying thickness and mode (which you can change through Line Tool Options). Hold down shift when drawing to make the line horizontal, vertical, or 50% diagonal.

Kitty-corner to the line tool is one of the most useful tools in your palette: the eyedropper. The eyedropper is another way of changing the current color. Clicking the eyedropper on any point on the canvas grabs the color at that pixel, and makes it your current foreground color. This is an easy way to match colors from an imported image.

Below the pencil is the blur tool which lets you, as you might expect, blurs an image. As you continue to rub the tool over an image, it will become increasing blurry and faded at the edges.

If you hold down the blur tool button, you can choose the sharpen (the triangle) tool or smudge tool (the hand) from the pop-out menu. The sharpen tool will clean up the edges of a blurry picture, while the smudge tool will let you “push” through an image, creating the effect of a motion blur.

The eraser tool removes marks made in a layer. It is actually four tools in one: the Eraser Options window lets you choose between a paintbrush-shaped eraser, an airbrush-style eraser, a pencil-shaped eraser, or a block eraser. The effects created by the different erasers are analogous to the effects that those tools make in drawing. Use the block and the paintbrush erasers to erase any parts of your Introduction to Photoshop The Harvard Computer Society Page 5 doodling which came near the edge of the canvas. This willl be important for the final product. When you’ve scribbled and erased to your heart’s content, save the file. MANIPULATING LAYERS One of the most useful features of Photoshop is the way it organizes images into different layers. Each picture created in Photoshop can be comprised of one or more layers, which are like sheets of acetate containing bits of the composition, all placed on top of each other.

Only one layer is active at one time, and therefore each layer is edited separately, normally without causing any changes to the other layers. Each layer can have a different level of opacity, and layers can be manipulated to stack in a different order.

I’ll demonstrate the use of layers with some on-the-job training. First, make a new layer by clicking on the icon to the left of the trashcan on the layers window (this icon looks like the “New Document” icon from applications like Microsoft Word). There should now be a “Layer 2” and it should be highlighted. Doodle a bit on the canvas; you’re good at this by now. When you’re done doodling, click on the eye to the left of Layer 1.

Your beautiful doodles from the previous section should’ve disappeared. The eye controls what layers are currently visible and which are hidden. (If you turn off the background layer, you probably noticed some checkered patterns; these indicate transparent places where there is no background). By dragging the label of Layer 2 below Layer 1, the new doodles are placed below the older ones. If you drag something behind the background though, it becomes obstructed from view.

Select Layer 2 and the move tool, in the upper right corner of the tools palette. If you click and drag on the canvas with the move tool, you move the entire layer around (don’t do this with the background layer). With Layer 2 selected, click the space to the right of the eye of Layer 1. A section of chain should appear there indicating the two layers are linked to one another. Now the move tool should move these two layers together. Click the chain to unlink the two layers.

Move the opacity slider on the layers window (not the opacity slider that appears in the options window when paintbrush is selected) to determine how transparent a layer is. Make the two layers somewhat faded by making them less opaque. Eventually we’re going to put text over these doodles and thus we want them not to be too dark.

Rotate one of the layers by selecting Transform:Numeric from the Edit menu. Move the radius of the circle slightly, perhaps 15 degrees and select OK.

Clean up both layers (one at a time) with the eraser tool as above so that they do not touch the edges of the canvas.

You know the routine: save your file. 6 Introduction to Photoshop The Harvard Computer Society Page 6

WORKING WITH IMPORTED IMAGES In this section, we will add a photo to our Photoshop image as a new layer, resize it, apply (and undo) a couple of filters, and adjust the brightness/contrast of this layer.

There are normally two ways to importing other images for use in Photoshop: scanning and downloading. Both of these methods are described in Appendix A.

Adding An Image as a Layer When you have an image on your hard drive, open it in Photoshop. Photoshop handles all of the major graphics formats and quite a few minor ones as well, so it doesn’t matter if your image is a GIF, JPEG, TIFF, PICT, or BMP. For this seminar, we will provide you with a few images that we have placed on the Seminar web page. Select one of these photos to add to this image. If you don’t like one, close that window and open another.

Now you have two windows, one for your Photoshop image and one for the JPEG you opened a second ago. With the JPEG window active, click Select All from the Select menu. Copy the selection (Edit:Copy) and make the Photoshop window active. Select Edit:Paste. There should now be a fourth layer (“Layer 3”) in your Photoshop image. You can show or hide this layer, move it behind or in front of the other layers, etc., just like we learned in the previous section. Move Layer 3 to the front if it isn’t there already, and hide the two layers with scribbles on them. While you’re at it, you can close the window with the JPEG in it.

The image you pasted is probably too big to fit well in the Photoshop window. To fix this, select Edit:Transform:Scale. A box should now appear around the image with 8 handles: one on each corner and one on each side. Resize the image until it fits by dragging these handles. You should also hold down the shift key (to preserve the image proportions) while resizing, so that you don’t distort the picture.

To further define this image, let’s give it a border. Holding down the command key (or control on a PC), click the layer in the layers window; this selects the contents of the entire layer. Change the foreground color to black. Then choose Stroke from the Edit menu. The stroke command is the equivalent of tracing the dotted line that marks the selected area. Select a width of 2 pixels and a location of center (the location isn’t that important). Click OK and deselect the layer by choosing Select None from the Select menu.

Filters Filters alter the way an image looks by applying complex mathematical algorithms guaranteed to increase coolness. Filters are an easy way to make a mediocre graphic look respectable, but they’re a terrible way to create real art. All the filters we apply to this graphic we’re going to undo after looking at them.

Try applying a watercolor filter to the image. Select Filter:Artistic:Watercolor. Try a brush detail of 12- 15, a shadow intensity of 0 or 1, and a texture of 1. After the filter is applied, undo it. Then try Filter:Render:Lens Flare. Select a brightness of ~125% and a 35mm lens. Nifty, isn’t it? Undo that also. Try one of the Stylize filters such as Glowing Edges or Emboss. Undo that when you’re done.

Basically, you can play with filters all day. The average Photoshop book spends a couple of hundred pages explaining all the different filters, though we prefer to learn via experimentation. Not now though. There are also web-sites where you can download additional filters.

Once again, once you’ve found something that you like, save your work. Introduction to Photoshop The Harvard Computer Society Page 7

SELECTIONS AND MASKS When you applied filters to the images in the previous section you were applying the filter to the entire layer. It is possible to affect of parts of a layer by selecting specific sections. The marquee tool in the upper left corner allows you to select a rectangular or elliptical area (or a single, pixel-wide row or column area) to copy, cut, filter, etc. If the region you want to deal with is more irregular, you can use the lasso tool to select that area. You can also use the Magic Wand tool to select areas of similar color. However, neither of these tools gives the precision needed to do fine adjustments to images. In this section, we’ll use the Quick Mask tool to change some of the imported images into grayscale while leaving important parts in color.

Quick Masks Select the layer with the JPEG image in it. Press Q to turn on a Quick Mask. Your foreground color should have switched to black. If not, switch it to black now. When you’re working in a mask mode, your “colors” are all grays.

What you will do now is paint the parts of the image you want to remain in color with the black foreground color using the paintbrush tool (or the airbrush, or whatever. Not the pencil). Try painting something. Surprise! It comes out red and somewhat transparent. The red coloration allows you to see what you’ve painting and what you haven’t. Now use the eraser to erase the red area you just painted. Paint all of the image that you would like to select (using zoom as necessary).

Don’t worry about being too precise, we’re going to shrink the image soon. Hit Q again to turn off Quick Mask. There should now be glowing dashed lines around whatever you painted. You’ve actually selected everything except what it was you’ve painted, which is what you want. Go to Image:Adjust:Desaturate on the menu. It should be easy to see now if you missed any spots. Normally, if you did miss any spots you would now undo the desaturation, hit Q to turn the Quick Mask back on, make whatever changes needed to be made and try desaturating again. However, since this is a short seminar, unless something is completely wrong, let it be, and keep going.

Choose Select None from the select menu, then scale the image like you did earlier (Layer:Transform:Scale), only this time make the image only take up about 1/3 or less of the total length of the image (if you have rulers on, 150 pixels wide is a good approximation). Remember to hold down the shift key while scaling.

Move the layer around with the move tool until it’s in a place you like, though preferably not in the center. Finally, make the layer about 30% lighter by choosing Image:Adjust:Brightness/Contrast. Move the brightness slider to the right until the box reads 30 or so, then click OK.

Save your image. 8 Introduction to Photoshop The Harvard Computer Society Page 8

TEXT AND TEXT EFFECTS The last element we will add to this image will be some text. Choose a color which contrasts well with whatever you have already on the screen. The color should be neither too light nor too dark; pale blue works well, unless you used that to doodle with. Click the text tool (which should look like a solid T) and click somewhere on the canvas. The text dialog box should appear.

The font box, size box, and the first three alignment choices should be familiar to you from other applications. Choose any font you want. Make sure Preview is checked at the side of the dialog box. You probably will want Anti-Aliased checked as well; this option smoothes your text, creating a more print-like appearance. Type a short phrase, and then highlight it and adjust the size, font, color, and other characteristics as needed. Leading determines the distance between lines of text (a leading of 26 is default for 26 point fonts, etc.) while spacing determines by how many pixels to expand or condense the text (default is 0). While you are editing your text, look at your canvas to see how it fits in. Click OK when you’re finished.

Use the move tool (upper right corner) to position the text wherever you would like it to be eventually. Don’t worry if the text is too light; do worry if it’s too dark. Notice that Photoshop creates a new layer for the text you wrote. If you don’t like what you wrote or if the font is too big or too small, you can drag this layer to the trash and choose the text tool again.

Once you’ve got your (possibly too light) text positioned, choose black as a foreground color and select the text tool again. Without changing anything click OK. You should now have a copy of the text from earlier, except in black. Notice that this text also has its own layer, separate from the color text. Drag the black layer’s label in the layer window so that it is just below the color layer. Move the black layer so it is underneath the color layer on the canvas as well. Deselect Preserve Transparency for the black text layer on the layer palette. Now select Filter:Blur:Gaussian Blur... and choose a radius between 1.0 and 1.5 pixels (bigger for bigger text). Move the black layer so it is just slightly below and to the right of the color layer. Click the box next to the eye of the color text layer so that the chain appears. Move the now linked text layers wherever you want them. You can move around the other layers as well at this stage.

And with that, we’ve finished creating our image. All we have left now is to save the image for publishing. Introduction to Photoshop The Harvard Computer Society Page 9

PUBLISHING YOUR WORK Photoshop files allow you to move layers around, turning them off or on as you choose. The only problem with these files (okay, not the only problem) is that other people can’t view Photoshop images unless they have Photoshop themselves. To allow others on the web to see your graphics, you’ll need to convert them to one of the two file formats web browsers can display, GIF or JPEG.

Although there are quite significant differences between JPEG and GIF images, Photoshop tends to produce images that do not necessarily work much better in one than the other. Since saving as a JPEG is easier and more automatic, we’ll do that for now:

 Select from the File menu, Save a Copy.  In the drop-box labeled Save As choose JPEG, and give a filename ending in .JPG.  When it asks for quality, choose between 3 and 6. The lower the number, the lower the quality of the image, but the smaller the file will be (and thus the quicker the image will load, especially for people with modems).

Notice that the image in Photoshop remains a Photoshop file. Save it.

Storing Your Creations Once you have created a Photoshop image (.PSD) or created a GIF or JPEG from a Photoshop file, you must somehow get the images back to another computer. For GIFs and JPEGs, you will want to store the images on the computer housing your website, probably fas.harvard.edu. On the Macintosh, you can accomplish this using the Fetch program. The PC uses a similar program, called WS_FTP. Most people are pretty comfortable with these programs by now, so we’ll leave the details to Appendix B.

Remember that standard Photoshop files can be pretty large, often filling up a whole floppy disk by themselves. Storing these in your FAS account is less of a problem this year with the increased quotas, but you should still keep an eye on how much space you are using by typing quota as the fas% prompt.

If you’re going to be doing a lot of Photoshop work, it might be a good idea to invest in a Zip disk, which are about $15 a piece at the Coop. Many of the Macs and PCs in the Science Center are equipped with Zip disks, but if you wanted to work on images on your home computer, you would have to invest in a drive of your own (lowest prices are approximately $100).

Working with Photoshop At Home As a final note, you might be wondering about how to use Photoshop off of the FAS Network. If you have a Macintosh, you can copy Photoshop 5 off of FAS_SERVER1 : General Software : Multimedia and then run the Photoshop Resources Installer found on Get_Connected : Softmac : Install Resources for General Software.

If you have a PC, Photoshop 3 is available for download from Get_Connected. Go to Start : Programs : Internet Utilities : FAS Applications Installer and then choose “Windows Software,” or, go to Network Neighborhood : Entire Network : Get_connected : FAS Applications Installer and run the installer from there. Intermediate HTML The Harvard Computer Society Appendix A

APPENDIX A: ACQUIRING IMAGES Scanning Images You can scan images using the scanners that are available in several computer labs, including the East Terminal Room (Science Center B14, the room containing the Help Desk), the Mac Classroom (Science Center B11C), the Technology Showcase (across from Science Center 119), and a few of the House labs around campus (particularly those in the Quad).

Locate an available computer that is attached to a scanner, and run the DeskScan II program found on the Apple menu. Place your photo or drawing on the scanner, at the top edge near where the cover hinges. In DeskScan, click the Preview button. This will scan in a preliminary version of your image and display it on screen with a selection rectangle around it.

Use the mouse to move the selection rectangle until it covers only those portions of the image you wish to scan. This allows you to crop out parts you do not want. You can also use the controls on the left side of the DeskScan window to adjust the zoom factor, the brightness, and the contrast of your image. All these settings will appear on the preview image so that you can get some idea of what your scanned image will look like. When you are satisfied with your settings, press the Final button. This will make the final scan and prompt you for where to save the file. You should most likely choose a location on the desktop of the Macintosh you are using. Your image will be scanned and saved to the location you have chosen.

DeskScan saves images in the TIFF file format. Adobe Photoshop can read TIFF images; simply click Open in the File menu and select the TIFF image. If you want to use these scanned images on the web, rather than in a Photoshop image, you will need to convert them to GIF or JPEG images. Instructions for doing this are found in Publishing Your Work, below.

Downloading Images Another way to acquire images is by downloading them from other Web pages. First, you must locate an image on the Web that you would like to download. If you are using a PC, click with the right mouse button on the image and select Save Image or Save Image As…, type a filename, and the image will be saved to your hard disk. On a Macintosh, point to the image and hold down the mouse button until a menu appears. Then, select Save Image or Save Image As…, and enter a filename.

Note: placing an image in a Photoshop document or on your Web page constitutes copying and is illegal for copyrighted images. Many images found on the Internet are copyrighted, as are commercial photographs, including images found in books and magazines. Please check to make sure an image is not copyrighted before placing it on your page. The best place to find images which are legal to copy is through image libraries that are specially designed to provide images you can use. You can find many of these through the Yahoo index. Just go to http://www.yahoo.com/ and then click on World Wide Web, which is found just below Computers and Internet; then select Page Design and Layout, and finally Graphics. Even in these libraries, you should check for copyright information before copying any image. 2 Introduction to Photoshop The Harvard Computer Society Appendix B

APPENDIX B: USING FTP The instructions that follow are for the Macintosh program Fetch. On a PC, you should use the FTP program called WS_FTP, found in Start : Programs : Internet Software. The process for using WS_FTP is largely the same; if you encounter any problems you can consult the online help (press the Help button), get documentation from the Help Desk (or from http://www.fas.harvard.edu/computing/docs/pc/faqs/pc-ftp.html), or ask a User Assistant.

New Connection: • This is the dialog box that appears at the beginning of Fetch. • Under Host, type in the name of the server (e.g. fas.harvard.edu). • Under User ID, type in your user ID (i.e. your email username if logging into fas). • Under Password, type in your password.

Transferring Files: • Remember to go to the proper directory before downloaing or uploading. For transferring images to be used in Web pages, you should go to the public_html directory. To traverse the directory tree, double-click on a directory to enter it, and use the list box at the top of the FTP session window to move up. • When transferring files, set the file type to binary. When uploading files to a Unix or PC server, it is important to transfer binary files as Raw Data. If you are transferring to a Mac, MacBinary II is the preferred method. This method will keep all Mac-specific information about the file intact. (NOTE: You will not have these options when using WS_FTP on a PC machine) • To download files, select the file(s) or directories to download, and then click on Get File… to begin the transfer. Use the option key to select more than one file and/or directory. • To upload files, select the file to upload, and then click on Put File… to begin the transfer. If you are uploading multiple files/directories, then from the Remote menu, select Put Folders and Files… from which you can select the files and folders to upload.

If you are storing images for a web page on fas, remember to run fixwebfiles before trying to view your new images. Intermediate HTML 3 The Harvard Computer Society Seminar Evaluation Form

SEMINAR EVALUATION FORM We would appreciate very much your evaluation of this seminar.

When you have completed this form, please give it to one of the seminar's staff members or leave it by the door as you leave.

Thank you for your time.

Please write the date and time of this seminar:

Please rate this seminar by circling one answer for each category.

 Overall experience: Poor Good Great  Instructor: Poor Good Great  Assistants: Poor Good Great

 Pace: Too slow Just right Too fast  Level: Too basic Just right Too advanced  Detail: Too little detail Just right Too much detail

Do you feel comfortable using with basic HTML now? If not, why not?

What, if anything, should we add to or omit from this seminar?

What can the instructor and assistants improve upon?

What additional seminars would you like us to offer? Would you attend?

Do you have any other comments or suggestions?