Creating a 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

Open the background template in Adobe Photoshop and insert the photographs you would like to use. You can do this by simply pasting (Ctrl+V or Cmd+V) the images or dragging them into the open Photoshop document.

At this point, make some adjustments to the photograph so that any important elements are on the left, top, or right part of the template, and make sure that all of the black parts of the template are hidden by the images.

If there is more than one image, use the Eraser and Blur tools to smooth the edges where the images meet. It is much easier to do if they overlap each other.

Merge Layers

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 all of the image 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), "Mask", and "White background filler".

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

Your image should now use the overlay shape:

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.

Uploading the background image to your site

See the Adding or changing the background image guide.