Guides
Guides

Changing the background image

Your background image shows on all the pages of your website. It's a great way to add personality, feature a recent event, or just showcase a nice part of your school.

All background images need to be created using our template, which we provide in .psd format. It's a simple three-step process to create and use a new background image.

👍

PBJ provides assistance.

Our national team is happy to help create a background image for you, particularly if your computer is not equipped with Adobe Photoshop. Send us images you would like us to composite and a graphic designer on our team will help you get the new background up.

Download the template

📘

Adobe Photoshop required.

Creating your own background image requires a computer installed with Adobe Photoshop.

You can download the template, in .psd format, from Dropbox here:
Background template.psd

Insert your images

Insert the photographs or graphics you would like to use. You can do this by simply pasting (Ctrl+V or Cmd+V) the images so that they are on the very top.

At this point, make some adjustments to the photograph so that any important elements are on the left, top, or right part of the image. If you have more than one photograph, use the Eraser or Brush tool to smooth edges where the graphics meet.

If there is more than one image, when you're ready to continue to the next step you'll need to first merge the layers containing your images. To do this, select the layers, right click, and select "Merge layers".

Set your image as a clipping mask

🚧

One layer of images only.

At this stage, you should have merged all your image layers so that there are in a single layer. In other words, there should be three layers total-- your image(s), "Template overlay", and "Base layer".

Now you're ready to add the overlay shape! Right-click the layer image and click "Create clipping mask".

306

Use "Create clipping mask" to add the overlay shape.

Your image should now use the overlay shape:

1755

Save your background as a .png file

Do not adjust the size of the image. Go to File > Save for Web, and save the background image as a .png file.

Upload your background to your website

On your website dashboard, visit PBJ Options > Background options, and upload the image.