Tips & Tricks View Video Tutorial iconopen in new window
Photoshop File Optimization Tutorial

When using Photoshop to create images that will be viewed on a web page (Blackboard) there are ways to optimize the file for small file size and browser compatibility. The smaller file size will make it easier for someone to view the file online so that the file can be viewed right in the browser.

Creating a Course Banner
Image Size
Adjust Color Levels (whiten gray background)
Save as jpg/gif

Creating a Course Banner

With Photoshop you may create a graphic that can be saved (jpg or gif) and uploaded into Blackboard as a banner on the Announcements page. Although Blackboard doesn't list an image size, I recommend that the image is no larger than 100 x 540 pixels. Depending on your student’s computer monitor size (800x600 - 16in) you may want to make the image size no larger than 100 x 540 pixels to prevent vertical scrolling in the browser (e.g., banner is larger than the window).

New File/ Save for Web
From Photoshop:

  1. File > New.
  2. Width = 540, Height = 100, Resolution = 72, Color Mode = RGB, Click the OK button.
  3. After creating your Banner, File > Save for Web.
  4. Choose either JPG or GIF, Click on the Save button.

Add Banner to Blackboard
From the Control Panel:

  1. Click on the Settings link in the Course Options section.
  2. Click on the Course Design link.
  3. Click on the Course Banner link.
  4. Click on the Browse button to find your banner.
    Note: You must create and save a banner in .gif or .jpg format before browsing for it.
  5. Scroll down to the bottom of the screen and click on the Submit button.

Image Size

When placing an image on a web page your image should be only as large as it needs to be to display correctly on the page. If your image is too large (800 x 600) and you resize it on the web page editor(using something like Dreamweaver), the file size is not reduced, just the image size. If you reduce the image size in Photoshop to display the correct size on the web page you can save file space/size and allow the viewers to view the image quicker.

Note: Before reducing the image size, save the file (Save As) as another name. That way you will always have the original image that can be used later if needed.

From Photoshop:

  1. From the Image menu, choose Image Size.
  2. Change the Document Size Width and Height to the size needed on the web page. Set the Resolution to 72 dpi. Click the OK button.

Note: When changing the Width and Height, make sure the Constrain Proportions box is checked to keep the image size proportional.

More Information

Q: Why should I use 72 dpi for the Resolution?
A: A web page is only displayed from a computer monitor at 72 (96 PC monitor) dpi. It is recommended that images are saved at 72 dpi for web viewing.

Q: Why can't I just leave the image size large and resize it in Dreamweaver?
A: A image sized at 800 x 600 could be a 2MB file. If that file was reduced in size to the size needed on the page 360 x 413, the file size can be brought down to 436k. This file is easier for someone to view on a web page through their network connection and saves space on the server.

Adjust Color Levels

After scanning an image most images with white backgrounds will have a dull gray or pink color hue. To enhance the background (white) use the Levels tool. This can also be used to darken the black ink within the image.

From Photoshop:

  1. From the Image menu > Adjustments, choose Levels.
  2. Move the white arrow to the left to increase the white in the image. Move the black arrow to the right to increase the black in the image.
  3. Click the OK button.

More Information

Q: Why should I use Levels and not the Auto Level tool?
A: If you choose Levels you have more control over what amount of white or black is added to your image. I find that Levels gives better results.

Q: Why not use the Brightness/Contrast tool?
A: The Brightness/Contrast tool affects the whole image whereas the Levels only affects the white or black in the image (depending on whether you adjust the black or white arrow).

Q: What is the middle gray arrow for and should I use it?
A: The middle gray arrow is for shadows. I find that when I use this it doesn't given me a beneficial result; it is best to only use the black or white arrow.

Save as jpg/gif

To save a file for the web it is best to use the Save for Web tool in Photoshop. This will allow you to save a jpg or a gif file that is optimized for the web and your viewers.

From Photoshop:

  1. From the File menu, choose Save for Web.
  2. Choose the file format.
    Note: jpg for photographs (shadows, people, etc.) and gif for solid colors (logos, flat art, cartoons, drawings, etc.).

  3. Click on the Save button.
More Information

Q: How can I view the difference between gif and jpg or even quality?
A: If you notice on the Save for Web window, there is a 2-up tab. This will allow you to see two images side by side. There you can make one (select by clicking on it) a gif and the other a jpg. Play with the Quality. You may not need a 100% jpg; it may look just as good at 60% (smaller file size). Gif files can be brought down from 256 colors to 64 colors. Play with the settings and find one that works for you.