User Tools

Site Tools


screencasts:making_a_header_image

This is an old revision of the document!


Getting Started

This is a brief tutorial on how to setup your landscape images and logos with a piece of free online software called “Pixlr Express”. For the majority of this tutorial, we'll be focussed on the landscape images; however, both procedures are nearly identical, so you may simply repeat these steps for the logo. To get started, you'll need two pieces of information:

  1. The name of the template you're using: Miranda, Miranda Thin or Molly. A list of all Real Geeks templates is available at http://www.realgeeks.com/designs/.

Now we simply need to determine the dimensions of our landscape image. Please see Landscape Image Minimum Requirements to find this information specific to the template you are using.

Using Pixlr X

Navigate to http://pixlr.com/x to get started. You'll be presented with a splash page like the one below.

Click on “Open Image” in the top left to upload an image from your computer. Make sure the image you have is at least the size of your required landscape image requirements.

To resize your image, you'll use any combination of these two tools.

Resize

Resizing is like what a photographer does when they give you multiple sizes of the same image. They're proportioned the same, but are bigger or smaller than the original.

Click the cross arrowed symbol in the toolbar.

Click “Resize Image” button.

Here, adjust the width of the image. Depending on the site template you chose, you can change it to the coorelating length. For this example, we will go along with the Miranda dimensions. We change the width to 1100. Then click “Apply”.

After adjusting the width, we now want to change the height without warping the image. We will now move on to cropping.

Crop

Click the crop symbol, which is below the arrow crossed symbol. Change the height to 720, click “Apply” and then “Save”.

Saving the Image

For saving, you will want to keep the image as a JPG, keep the resolution as HIGH. Click “Download”.

Uploading the Landscape Image

Navigate to your site backend, which is at http://yourdomain.com/admin (ie. http://www.adrhi.com/admin) and login.

Scroll down to “Site Settings”.

Go to the “Template Options” tab and scroll down to “Header Image”.

Scroll down until you find the “Header Image” setting and click on the icon to the right of the file-path.

Upload your file, by clicking “Upload” at the top-right of the pop-up window. Select the file by clicking “Browse”, then click on “Upload” in the bottom-right of the pop-up window. When it's finished, simply click on “File Browser” in the top-left of the pop-up. Your new file should appear at the top of the list. Click on the “Select” icon at the far-left of the image. Once you're done, the window should close and you should see a small preview of your image in the settings page. Click “Save” at the bottom of the page and you're done!

Simply repeat the procedure you followed for the landscape image outlined above; however, instead of modifying the “Header Image” setting, modify the “Header Logo” setting.

The logo dimensions are 400 x 86 pixels.

screencasts/making_a_header_image.1560292099.txt.gz · Last modified: 2019/06/11 22:28 by brittany