FAQ - Creating a banner from photo using Pixlr

This is an easy step by step tutorial on how to create a banner using images from your camera or from your computer. We will use the awesome online image editor provided by Pixlr.

This tutorial focuses on people using large images from their digital cameras. There are of course issues with people whose images are too small to fit in the banner area properly but that's for another tutorial.

The first thing you will want to do is open the Pixlr online editor - do that by going to here.

You should see this website:
From the dialog box choose "Open image from computer" and navigate to where the image is stored on your PC and upload.
You will now see your image uploaded into the editor. For the sake of this tutorial we are going to make a banner that is 960 pixels wide (this is a common website width). First we will check the pixel size of your newly uploaded image.
Up in the menu bar you will see a button called "Image".  If you click on that you will be presented with a dropdown. Select "Image size...". The dialog box that pops up will tell you the exact size of the image you have just uploaded. This one is telling me my image is 3648 pixels wide by 2736 pixels high, which is far too big for our website! Click on cancel for now and we'll come back to it later.
This image doesn't exactly have the right proportions to be a banner, so we are going to crop it. Over on the left you will see a box labelled "Toole". Select the "Crop Tool". You will notice your cursor change when you hover over your image.

Now for the fun part! Left click and hold from the left hand side of your image and drag the mouse right and down. You will see white lines indicating the crop area so you can visulize what part of the image will be in the banner.

You want to keep it similar to the diagram on the right and and not make it too tall as it won't really work as a banner on a website.

You can fine tune your selection by clicking and dragging any of the four blue boxes on each of the corners of the white outlines.

When you are happy with the position of your crop lines simply double click inside the white lines somewhere to action the crop... and voila!

Now if you are not happy with the crop you can press CTRL + Z at the same time or click undo from under edit in the menu bar.

Nearly there!

Your new banner size is still large. You need to reduce the size to 960 pixels wide for it to fit in your webpage correctly.

In the menu bar click on "Image" and then "Image Size" as you had done earlier.

In the dialog box where it says width, change it to 960. Do not change the height as this will auto-adjust as long as you have "Constrain Proportions" ticked (recommended).

The image will then resize and probably appear much smaller than you imagined, no worries. Click "File" in the menu bar and click "save" and save your new banner. Give it a new name so you don't overwrite your original image!
We're going to put this banner in the "Page Banner" area. You can access that when logged in by clicking on the rename area of any page (Aa) and browsing to your new banner from the "Page banner/image" option. Save and publish your website.
And that's it, next we'll show you how to add text to your banner.
   
 Find out how to add text to your banner

FAQ Topics

Search for help:


>Home >FAQ