Pasadena City College, Home of the PCC Lancers

Style Guide

Banners / Optimization for the Web

Banner images:

Template editable region: bkgd_image

The PCC banners comprises of 2 components:

  1. The left graphic
  2. The table background graphic
banner parts

Left Graphic

Must be 100px high, sliced from the table background image.

Place the graphic to the bkgd_image editable region of the template.

Table Background

Must be 750px wide and 100px high

Set the image as a backgound on the table cell of the bkgd_image region.

Optimization for the Web:

There are different ways to export your files to the web one of which is using Macromedia Fireworks®, Adobe Photoshop® or Adobe Image Ready® to compress the image to be viewable to the web. The file size should not exceed 65k and 72 dpi (dots per inch) resolution on graphic files.

Image Dimensions:

Due to the fact, that the website should work well in an 800X600 monitor environment, the graphic on the page should have limited width as well. Here are some dimensions if used on certain templates:

  • One-Column Template, Popup Template
    no more than 650px wide

  • Two-Column Template, Faculty Template, or any templates that include a right navigation
    no more than 450px wide

Portal News/Events Image Adobe Photoshop Droplets and Actions

Not all images are suitable for the web. In order to keep the image sizes consistent, "droplets" and "actions" for Adobe Photoshop 6.0 (and above) are provided below. These will allow you to drag and drop files into an application that wil take your image and resize it to the appropriate width and height.

The following tutorial will create an image suitable for the web site along with a thumbnail. These are appropriate for use the news and events section of the PCC Portal.

Click here to download the Adobe Photoshop Droplets and Actions


Acrobat PDF logoThis information is in PDF format. The freely available Adobe® Acrobat® Reader is required. To download a free copy click here.