Web Services

Fireworks Photo Editing

Photo editing in fireworks for photo gallery see deminsions below for faculty-staff photos. For a quick summary of photo dimentions view the photo summary page.

Photo Gallery

• Open photo
• Modify, canvas, image size to make size width of 143 x height 114 pixels.
  • If you need to change the size,
    • make the size so that neither of the two sizes are smaller than indicated.
    • you may have to edit only one of the sizes, leaving the other larger than desired.
    • Be sure resolution is 72 pixels/inch on this screen.
    • To make a change to the one that is not correct,
      • go to modify, canvas, canvas size and make the incorrect one, match the above dimensions.
      • Be sure to look at the anchor area before you press OK so when cutting the photo to make it be correct you position the image so that the cutting takes place where you want it. (see anchor image below)
        • If you want to keep the bottom but cut the canvas at the top, move the anchor area to the middle bottom.
        • If you want to keep the top but cut from the bottom, move the anchor area to the top.
        • If you want to keep cut off the top and bottom, keep the anchor area in the middle.

Example: Original image size is 640 x 480

• Modify, canvas, image size shows the image size and it is changed to width of 143 x height of 107 - which is too small -- 107 being less than the desired 114. So, change the height to 114 and the width will be 152 -- which is larger than the desired 143.
• Modify, canvas, canvas size to trim the image.
  • Move the Canvas Size Window title bar to move the window so you can see the image.
  • Determine where you want pixels cut from your image. In this example, we want to trim both sided equally. Since it is the width that we are trimming, as long as the anchor is in the middle, it will trim off both sides. Should you need to trip from the top and leave the bottom - putting the anchor on the bottom as shown in the following image, will keep the bottom intact and trim from the top.
  • Changing the width from 152 to 143, keeping the anchor in the middle, will cut on both sides, leaving the image 143 x 114.

Note: should the image not look right – ctrl-z or undo will allow you to undo changes and try it again.

Creating the drop shadow for PhotoGal (similar for Fac-Staff Photo)

• Select your image and copy it to the clipboard so the size will already be set for 143 x 114
• Go to File, new and make a new image that is 143 x 114 – you will see a white background. ( for faculty/staff photo size should be 105 x 105)
• Click on the original image so you can prepare it for the drop shadow.
• Click on modify, canvas, image size and change the width to 136 (the height will automatically go to 108). (for faculty/staff photo size width should be 100)
• Click on the image and copy it to your clipboard.
• Click on the other window with the new, white background image and paste the image onto the blank white background. This will put the image on top of the white background. Use your arrow keys to put it in the top left corner of the white background.
• With the image you pasted still highlighted, look at the bottom of the Fireworks program to an area called “Properties” On the right of that area is an “effects” area. Press the +. From the menu, select Shadow and Glow, Drop Shadow. You may need to point your mouse at each area to have it tell you what area it is. Make the following changes:
  • Distance = 5
  • Opacity = 75%
  • Softness = 5
  • Angle= 315
  • Color = #00000 (shouldn't need to change)
• To see how it will look and save, go to File, Export Preview.
  • On the left format select jpg. On the top right pull down area select jpeg - Better Quality.
  • Click on the export button to export and save the file if it is for the photo gallery in the photogal/images folder.
  • naming the file with a username-t.jpg using the -t to indicate thumbnail image can be used.
  • Use the usrname.jpg original image to link from the thumbnail username-t.jpg image.
• Close the image windows and fireworks.

You are now ready to use the image in your website.

Summary of Images for Photogal

Faculty - Staff Photos

• Open photo - example of original photo
• Use the above instructions, except have the dimentions be 105 x 105.

Below is image at 105 x 105.

• To create the drop shadow, follow above but make the image smaller to 100 (the height will automatically go to 100).
• follow the other changes above for drop shadow effects.

Below is image with drop shadow.

• Save image with username-t.jpg using the -t for thumbnail. Link to the original photo with username.jpg

Summary of Images for Fac-Staff Photos

Trimming images for thumbnail

• Open photo
• To obtain a square, you may need to trim a little at a time till you get the image to 105 x 105.

Below is image at 105 x 105.