{{youtube>9RKYHIdat5o?large}}

===== 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:

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


{{ :screencasts:search_and_tagline_example.jpg?500 |}}

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

===== Using Pixlr Express =====

Navigate to http://pixlr.com/express to get started.  This will work on both .  You'll be presented with a splash page like the one below.

{{ :screencasts:pixlr_splash.png?500 |}}

Click on "Browse" in the bottom 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 (determined in the "Getting Started" section above).  For the purposes of this tutorial, we're going to make an image of size 960x365 px (NR Template w/ Tag Line).

{{ :screencasts:pixlr_base.png?500 |}}

You'll start off with a window, like the one above.  By clicking on the "Adjustment" button at the bottom, you'll be presented with a number of tools you can use to modify your image.  You'll only need "Crop" and "Resize" for the purposes of this tutorial, though.

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


==== Resize ====

{{ :screencasts:resize_select.png?nolink |}}

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.

{{ :screencasts:resizing_example.png?500 |}}

You likely won't be able to __just__ resize the image to the size you need.  You can make it smaller, but you will probably have to crop it as well.  To resize, simply adjust the width **OR** height (not both) in the boxes below the image.  **Don't touch any of the other buttons!**  When you adjust one or the other, you must make sure that the corresponding sizes are not smaller than the required dimensions.  Once you're done, click apply and then proceed to crop the image to the exact dimensions you need.

{{ :screencasts:good_resize.png?nolink |}}

This is an example of a "good resize".  We've adjusted the width, such that it is smaller than the original.  When we changed the width, the height also got adjusted.  Because the height is still bigger than our required height (365 pixels), however, it is okay.

{{ :screencasts:bad_resize.png?nolink |}}

In this example, we adjusted the height to 436 pixels (smaller than the original image).  When we did that, it also adjusted the width to be 656 pixels which is smaller than our required pixel width of 960 pixels; thus, it is a bad image resize and will NOT work.

==== Crop ====

{{ :screencasts:crop_select.png?nolink |}}

Cropping is like taking scissors to your picture.  You're effectively just getting a piece of the image instead of the whole thing.  This is useful if you want to snip out a person from a group photo, change the focus of an image to a house instead of the trees around it, or hide some cars in the driveway of a property.

{{ :screencasts:cropping_example.png?500 |}}

To crop an image to the landscape image size, input the width and height in the boxes below the image.  **Don't touch the other buttons.  The selected button should be "X:Y"!**  Once you've adjusted the size, just move the box around by dragging-and-dropping it to the image you would like.  When you're happy with the result, click on "Apply" in the bottom-right.

==== Saving the Image ====

Once you've resized your image to the correct size, click on "Save" in the top-left of your window.  You'll be taken to a screen like the one below.

{{ :screencasts:save_image.png?nolink |}}

Enter a filename into the box above.  In this case, we've named our file "victoria_resized".  Click on "Save" and you're done!


===== Uploading the Landscape Image =====

{{ :screencasts:login.png?nolink |}}

Navigate to your administration page which is at **<nowiki>http://yourdomain.com/admin</nowiki>** (ie. <nowiki>http://www.adrhi.com/admin</nowiki>) and login.

{{ :screencasts:site_settings.png?nolink |}}

Under the "Site Settings" heading click on "Site Settings", then click on the "Template Options" tab.

{{ :screencasts:header_image_setting.png?nolink |}}

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!


===== Uploading the Logo =====

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.

{{ :screencasts:header_logo.png?nolink |}}