ITRC Using Adobe Photoshop

mySaintMary's ➤

Using Adobe Photoshop

When designing a web page, one of the most important things to know how to do is to make graphics. The program that we use most often for this at Saint Mary's is Adobe Photoshop. Photoshop is installed on all of the school-owned computers here on campus for your use. Photoshop is useful for many different things. This handout will guide you through a few of the uses for Photoshop.

 

Page Titles and Other Text Graphics

When you use special fonts as text on your web page, these fonts will only be displayed if the person who is viewing your web page has that particular font installed on their machine, which quite often they will not. To get around this, you will need to make text graphics using Photoshop.

  1. From the main Photoshop menu, click File -> New.
  2. Choose how big you want your image to be and click OK. (You can always change the size later.)
  3. In the blue bar at the top of your new blank image, you will see a number as a percent. In order to see exactly how your image is going to look on your web page, make sure that this number reads 100%. If not, click on View -> Actual Pixels.
  4. To add text to your graphic, click the "T" button in the toolbox. When you come over to your blank graphic, click wherever you would like the text to go.
  5. The Type Tool box will come up and you can type your text into there. You can also change the font, style, size, and color within this box. When your text is how you want it, click "OK".
  6. One feature that makes text graphics look professional is a shadow behind the text. To achieve this, click Layer -> Effects -> Drop Shadow. The "Effects" window will come up, and you can play with the different options to achieve a shadow that you like. When you are finished, click OK.
  7. To add more text to your graphic, you can follow the same procedure of steps 4-6. Each time you add more text, it will be added to it's own layer. If you would like to edit text after you have added it, Photoshop makes that very simple. In the layer menu (which should be located at the right side of your screen), double click on the layer you would like to edit. The type toolbox will be launched again, and you can edit this text.
  8. To crop your graphic to a smaller size, click the dotted rectangle in the main toolbox. Next, drag a rectangle around the part of the graphic that you want to keep. Now go to Image -> Crop, and the unwanted part of the graphic will be deleted.
  9. Save your graphic as a .gif file is a bit different saving other things. When you are ready to save, go to File -> Export -> GIF89a Export. Click OK when the next menu appears, and then save your image as image.gif. (Replacing "image" with the name you would like to call it, of course.) If this graphic is going on your web page, always remember that it must be saved in the WWW directory of your network space. After you have saved the image in your WWW directory, close the image. A Photoshop prompt displays "Do you want to save Untitled-1?" Select no and continue. Your image is safely saved in your WWW directory as long as you follow the above steps.

 

Scanning and Editing Photographs

  1. When you make a web page, one of the things you will certainly want to include are photographs. In Trumper Computer Center, you will find two different scanners that are available for student use. Detailed instructions on how to use these scanners are attached to the scanner. If you need additional help, the consultant on duty will be able to assist you.
  2. Once you have your image scanned and saved, there are a few enhancements you may want to make.
  3. One thing that you will almost always need to do is to adjust the size of the picture. It will usually scan in at a size that is much too large to fit on your web page. To adjust the image size, so to Image -> Image Size. Make sure that the Constrain Proportions box at the bottom of the screen is checked. This will ensure that your image will remain proportionate. You can adjust the size of the image by percent or pixels. Percents are often easier to understand. This way, you can reduce the size by 50% or however small you would like it to be, and click OK.
  4. Another thing that you may want to do is crop your picture. There is often a lot of unnecessary background included on the picture. In order to do this, click the dotted rectangle in the main toolbox. Next, drag a rectangle around the part of the image that you want to keep. Now go to Image -> Crop, and the unwanted part of the picture will be deleted.
  5. Many times, photographs are developed too darkly to show up web page. Photoshop works very well to lighten up these images. Click on Image -> Adjust -> Brightness / Contrast. From here, you can adjust the brightness and contrast of the image until it looks satisfactory.