screencasts:making_a_header_image
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
screencasts:making_a_header_image [2018/06/26 18:08] brittany [Uploading the Logo] |
screencasts:making_a_header_image [2020/05/28 19:32] (current) michaels |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| + | #redirect https://support.realgeeks.com/hc/en-us/articles/360043154134 | ||
| ===== Getting Started ===== | ===== Getting Started ===== | ||
| Line 5: | Line 6: | ||
| - 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/. | - 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/. | ||
| - | |||
| - | {{ :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. | 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 ===== | + | ===== Using Pixlr X ===== |
| - | Navigate to http://pixlr.com/express to get started. You'll be presented with a splash page like the one below. | + | Navigate to http://pixlr.com/x to get started. You'll be presented with a splash page like the one below. |
| - | {{ :screencasts:pixlr1.jpg?500 |}} | + | {{:screencasts:pxlrxrar1.jpg?700|}} |
| - | 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 [[http://docs.realgeeks.com/image_requirements|image requirements]]. | + | 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 [[http://docs.realgeeks.com/image_requirements|image requirements]]. |
| - | + | ||
| - | {{ :screencasts:pixlr2.jpg?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. | To resize your image, you'll use any combination of these two tools. | ||
| Line 26: | Line 21: | ||
| ==== Resize ==== | ==== 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. | 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:pixlrsize1.jpg?600 |}} | + | Click the cross arrowed symbol in the toolbar. |
| - | 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. | + | {{:undefined:pxlrxrar2-resize.jpg?700|}} |
| + | Click "Resize Image" button. | ||
| - | ==== Crop ==== | + | {{:undefined:pxlrxrar3.jpg?700|}} |
| - | {{ :screencasts:crop.png?200 |}} | + | 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". |
| - | 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:pxlrxrar4.jpg?700|}} |
| - | {{ :screencasts:pixcrop1.jpg?600 |}} | + | After adjusting the width, we now want to change the height without warping the image. We will now move on to cropping. |
| - | 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. | + | ==== Crop ==== |
| + | |||
| + | Click the crop symbol, which is below the arrow crossed symbol. Change the height to 720, click "Apply" and then "Save". | ||
| + | |||
| + | {{:undefined:pxlrxrar5_1_.jpg?700|}} | ||
| ==== Saving the Image ==== | ==== 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. | + | For saving, you will want to keep the image as a JPG, keep the resolution as HIGH. Click "Download". |
| - | {{ :screencasts:save_image.png?nolink |}} | + | {{:undefined:pxlrxrar6.jpg?700|}} |
| - | + | ||
| - | Enter a filename into the box above. In this case, we've named our file "victoria_resized". Click on "Save" and you're done! | + | |
| Line 65: | Line 61: | ||
| Go to the "Template Options" tab and scroll down to "Header Image". | Go to the "Template Options" tab and scroll down to "Header Image". | ||
| - | {{ :screencasts:headerimage1_1.jpg?700 |}} | + | {{:screencasts:screen_shot_2019-06-11_at_5.30.51_pm.png?700|}} |
| Scroll down until you find the "Header Image" setting and click on the icon to the right of the file-path. | Scroll down until you find the "Header Image" setting and click on the icon to the right of the file-path. | ||
| Line 74: | Line 70: | ||
| ===== Uploading the Logo ===== | ===== 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. | + | Click [[http://docs.realgeeks.com/uploading_your_logo|here]] to learn how to create/add a logo. |
| - | + | ||
| - | {{ :screencasts:header_logo.png?nolink |}} | + | |
| - | + | ||
| - | //The logo dimensions are 400 x 86 pixels.// | + | |
screencasts/making_a_header_image.1530036515.txt.gz · Last modified: 2018/06/26 18:08 by brittany
Page Tools
