Working with Images

Pictures can add interest and content to your web page. It is relatively easy to insert and improve the appearance of pictures in FrontPage. However, keep in mind that image files can be large and slow down how fast your web page loads. Also, note that there are some layout considerations unique to controlling how web pages look.

Acquiring pictures is easy. Use a digital camera, scanner, or locate them on the Internet.

Saving Images from a website

  1. Create a folder for saving images
    (Be aware of any copyright issues and give credit or seek permission if necessary)
  2. Browse to website. Place your curser on the image and right click.
  3. Choose “save image as” and browse to your image folder.
  4. Give the picture a name that will identify it for you. And click OK to save it.
  5. To easily view pictures in a folder, choose View >Thumbnails

REMEMBER THE RIGHT CLICK!!!

It lets you see your options!!

USE IT TO EASILY COPY AND PASTE files from one location to another

For example:

To copy a folder or file (document, picture, video, etc.) from one place to another:

  1. Right click on folder (or file) on your desktop. Choose copy.
  2. Go to the Open My Documents. Click the dropdown arrow to find your folder on the server. Open your server folder, and click paste. VOILA!! You have copied it to your folder on the server. This means you easily retrieve that file from any Windows computer in the district. If you want to copy the files/folders to another location it works the same way – open where you want to copy files and paste.

Scanning Pictures:  

Acquiring photographic images may vary somewhat depending on the image editor and scanner or camera you use. However, here are some general guidelines:

Microsoft Photo Editor

  1. Put picture in the scanner. 
  2. Open Microsoft Photo Editor Program (Start>Programs>Microsoft Office Tools>MS Photo Editor)
  3. Choose: File>Import>then locate your scanner from the list of choices
  4. Use the preview or pre-scan choice to get an initial scan.
  5. Then crop or resize and make any orientation adjustments. Scan at the highest possible resolution (1200dpi) – and highest color setting (unless your computer can't handle it). This will be your raw image. You can reduce the file size and change the format for use in applications later using the image editor. If you are scanning from a magazine or other published document  and you are getting print from the reverse side bleeding through, try placing a piece of black paper over the back.
  6. Save the “raw” photo in your “Raw” or “Originals” folder. Give it a name you will recognize.
  7. Edit Photo
  8. Use crop tool to select desired area.
  9. Choose Image>Crop 
  10. Or, Image>resize
  11. Make  adjustments to color, brightness, contrast, etc.
  12. Choose File>File>Save As to save as jpeg and reduce file size. Name the file and Save In your “Edited Photos” folder.  

Adobe Photoshop Elements:

  1. Put picture in the scanner. 
  2. Open Adobe Photoshop Elements Program (Start>Programs>Adobe>Adobe Photoshop Elements)
  3. Choose: File>Import>then locate your scanner from the list of choices
  4. Use the preview or pre-scan choice to get an initial scan.
  5. Then crop or resize and make any orientation adjustments. Scan at the highest possible resolution (1200dpi) – and highest color setting (unless your computer can't handle it). This will be your raw image. You can reduce the file size and change the format for use in applications later using the image editor. If you are scanning from a magazine or other published document  and you are getting print from the reverse side bleeding through, try placing a piece of black paper over the back.
  6. Save the “raw” photo in your “Raw” or “Originals” folder. Give it a name you will recognize.
  7. Edit Photo
  8. Use crop tool to select desired area.
  9. Choose Image>Crop 
  10. Or, Image>resize
  11. Choose Enhance>Quick Fix or make other adjustments to color, brightness, contrast, etc.
  12. Choose File>Save for Web (File>Save As) to save as jpeg and reduce file size. Name the file and Save In your “Edited Photos” folder.

Paint Shop Pro (version 7 or earlier…)

  1. Put picture in the scanner.

  2. Open Paint Shop Pro (Start>Programs>Jasc>Paint Shop Pro

  3. Choose: File>Import>TWAIN>Acquire   (Select scanning source if necessary – find your scanner)

  4. Use preview or pre-scan button to get an initial scan.

  5. Then crop or resize before your final scan and make any orientation adjustments. Scan at the highest possible resolution (1200dpi) – and highest color setting. This will be your raw image. You can reduce the file size and change the format for use in applications later using the image editor. If you are scanning magazine or other published documents and you are getting the print from the back bleeding through, try placing a piece of black paper over the back.

  6. Save “raw” photo in your “Raw” or “Originals” folder. Give it a name you will recognize.

  7. Edit Photo

  8. Use crop tool to select desired area. (In Version 8 you have to make sure the selection tool is chosen in addition to the crop tool while selecting the desired area– then choose Image>Crop to Selection )

  9. Choose Image>Crop 

  10. Or Image>resize

  11. Choose Colors to make adjustments to color, brightness, contrast, etc. Version 8 has added an Enhance Photo>One-step Photo fix feature that is similar to the Adobe Photoshop Elements Quick Fix feature

  12. Choose File>Save As) to save as jpeg and reduce file size. Name the file and Save In your “Edited Photos” folder.

Acquiring Digital Photos from a Camera

How you download your photos to your computer may vary depending on your camera and/or the OS of your computer.

Use the software that came with your camera and follow the procedure provided.

Generally, a USB (or serial) cable is provided. This attaches your camera to the computer enabling you to download the images.

If your camera uses a memory stick, smart media card,  SD (Secure Digital), or other type of memory media, you may want to invest in a multi-card reader. This device attaches to your computer via the USB port enabling you to easily acquire the photo images. Once you have access to the files, you may choose View>Thumbnails to see the images. Select the photos you want and copy and paste them into the appropriate picture folder on your computer. You may use Edit>Select All>Copy (to select all the pictures)>and then Paste them in the appropriate folder on your computer. Or, if you want to select specific photos (hold down the ctrl key and click on each photo you want). Then choose Edit>Copy> and paste them in the appropriate folder on your computer.

* NOTE!!
You may also use the Import feature of your image-editing program to import your digital photos. Otherwise, you can just start the program and use File>Open>and then browse to find the folder where you have saved your pictures, then select the picture you wish to edit.

More Tips:

Refer to the tutorials in your image editing program.

Remember when you change images, do a "save as" to give them a file name that is different than the original file name.

Try to edit your photos before you insert them in documents.

Adding and Formatting Pictures using Front Page

  1. Open web page in design (Normal) view and place your curser where you want to insert the photo.
  2. Click the Insert Picture From File button on the Standard toolbar.
  3. Use the Look in list in the Picture dialog box to locate the folder where your picture is stored.
  4. Click the picture file to select it
  5. Click OK to insert the image
  6. Click save button to save changes to your page. When you do this a dialog box appears to note the pictures are copied to the same folder as the web page file.
  7. Click OK

How to change the size of a picture:

  1. Click on picture to select it
  2. Click and hold on a corner handle and drag toward the picture center to shrink (or away to enlarge).
  3. Release mouse button when picture is the size you want.

Cropping a picture:

  1. Right click and choose Show Pictures Toolbar from shortcut menu
  2. Click the Crop button -- dotted line surrounds picture to show selection with cropping handles.
  3. Click on cropping handle to drag your selection.
  4. Once you have your selection, click Crop button again to crop the picture.

Explore other options on the Pictures Toolbar

  1. Rotating or flipping a picture
  2. Changing contrast or brightness
  3. Changing to grayscale or "washing out"
  4. Giving a picture a transparent background

Aligning Pictures on a page:

  1. Click Center, Right Align, or Left Align button on the Formatting toolbar

Changing position of a picture:

  1. Click on picture and drag to where you want it
  2. Release mouse button

Wrapping Text:

  1. Double click to open Picture Properties dialog box.
  2. On Appearance tab, choose None, Left, Right in the Wrapping style area
  3. Click OK

NOTE:
If you really want control over picture positioning, create a table and insert picture in a table cell. Tables provide one of the best ways for controlling the layout of a web page.