Text only

Heading Image: Side Bar Graphic


To create a side bar graphic, you will create a long image that will fill the screen horizontally and tile vertically.

Step One 

Open Photoshop and create a new image with the following dimensions:

Width: 1500 pixels
Height: 50 pixels
Resolution: 72 pixels per inch
Color: RGB
Contents: White

New Image Box

Step Two

Photoshop automatically sizes the graphic to 33% so you can see the whole graphic on the screen.  You want to view the graphic at actual pixels, so select the actual pixels from the the view menu.  Make sure that the horizontal scroll bar is to the far left side.

Step Three 

Create a new layer using the button on the layers box that looks like a page turned up, or use the layers menu and new and new layers options.

Layers Palette

Layers Menu

Step Four

To create the side bar, use the square marquee tool to create a a rectangle at the far left hand corner of the graphic.

Creating a Sidebar graphic

Step Five

The next step is to fill the selection with the color you would like to make the bar.  First, select the color in the foreground color box by selecting a color on the swatches palate.

Foreground/background boxes

swatches palatte

Next, use the paint bucket tool to fill the selection with the color in the foreground color box.

Fill Sidebar graphic

Step Six

Create a new layer.  Then fill the new layer with black.  This will temporarily hide your color layer created in step five.  Deselect the new layer using the select menu and the deselect option.

Step Seven

Use the filters menu and the blur and gaussian blur options.  In the gaussian blur dialogue box, select a radius of 5.0 pixels.

Gaussian Blur Box

Gaussian blur effect

Step Eight

Switch the order of the layers by clicking on layer one and dragging it above layer two.

Move layers

sidebar graphic

Step Nine

Flatten the layers by using the layer menu and flatten layers option.  Save the image as a JPEG image using a small file size option.

JPEG Options Box

You're Done!
The next step is to place this image on your web page using FrontPage.

Creating Web Graphics Home Lesson Objectives Backgrounds Navigational Maps Graphics in FrontPage Graphics & Web Accessibility