User Tools

Site Tools


uploading_your_logo

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
uploading_your_logo [2018/05/02 18:07]
brittany
uploading_your_logo [2018/05/02 18:07] (current)
brittany
Line 1: Line 1:
 +This doc details how to upload your logo to your website from the backend as well as how to crop or resize your image using Pixlr Express. ​
 +
 +=====Using Pixlr Express=====
 +
 +Navigate to pixlr.com/​express to use this free tool. 
 +
 +
 +
 +Click **Browse** on the far left. This will open your local drive from which you can select your logo to upload. Click your logo and then click **Open**. ​
 +
 +You should then see your logo uploaded into the Pixlr Express tool as seen below.
 +
 +{{::​2_1_.png?​400|}}
 +
 +
 +To change the size of your image, first click the **Adjustment** button on the far left of the bottom toolbar.
 +
 +{{::​3_-_do.png?​400|}}
 +
 +This will open a variety of functions you can use to edit your image. You’ll see the **Crop** and **Resize** buttons on the far left of the opened toolbar. You can use these to change the size of your image.
 +
 +{{:​4_-_do.png?​300|}}
 +
 +If you’d like to crop out part of your image, scroll past this section and navigate to **Cropping** Your Image.
 +
 +=====Resizing your image=====
 +
 +To resize your image, go back to "​Adjustment"​.
 +
 +{{::​3_-_do.png?​400|}}
 +
 +Click **Resize**. ​
 +
 +This will open a box with dimensions you can edit to fit your Real Geeks site. Please keep your image within the following dimensions for best display on your website:
 +
 +
 +Width: 200 x Height: 43
 +Or
 +Width: 400  x Height: 86
 +
 +{{::​5_-_do.png?​400|}}
 +
 +Change the numbers to adjust the size of your logo and click **Apply**.
 +
 +Once you click **Apply**, your image will become smaller. ​
 +
 +{{::​6_-_do.png?​400|}}
 +
 +Make sure to click **Save** in the top left-hand corner to save the image and download to your computer.
 +
 +{{::​7.png?​400|}}
 +
 +After you click **Save**, type in the name you want for your new file and select Save again.
 +
 +{{::​8.png?​300|}}
 +
 +Select where you want to save your new logo on your computer and click **Save**.
 + 
 +If you want to use this resized logo on your website, scroll past this next section about cropping and go straight to **Uploading** to your website.
 +
 +=====Cropping Your Image=====
 +
 +To crop your image, go back to **Adjustment** and select **Crop**.
 +
 +{{::​3_-_do.png?​400|}}
 +
 +
 +This will open the cropping tool over your image as seen below.
 +
 +{{::​9.png?​400|}}
 +
 +Use the cropping tool to crop the parts of the image you want removed. You can see the example below of cropping out the Real Geeks professor.
 +
 +{{::​10.png?​400|}}
 +
 +Once you’ve selected the area you want to remove, click the **Apply** button on the bottom toolbar. This will successfully crop your logo.
 +
 +
 +After cropping your image, select **Save** in the top left-hand corner to save the image and download to your computer.
 +
 +{{::​11.png?​700|}}
 +
 +After you click **Save**, type in the name you want for your new file and select **Save** again.
 +
 +{{::​12.png?​300|}}
 +
 +Select where you want to save your new logo on your computer and click **Save**.
 +
 +=====Uploading to Your Website=====
 +Navigate to the backend of your website to get started. You'll see the site administration backend menu as seen below. Go to the **Content** subsection on this page and click **Footers**. ​
 +
 +{{::​13.png?​400|}} ​
 +
 +Then click **Default Footer**.
 +
 +{{::​15.png?​200|}}
 +
 +To upload your image, first place your cursor in the text box where you want your logo to be. 
 +
 +Next, upload your image. To upload your image, click the small box with the mountain and the sun in your text box toolbar.
 +
 +{{::​16.png?​400|}}
 +
 +Once the new box opens, click the blue box with the folder and magnifying glass. ​
 +
 +{{::​17.png?​400|}}
 +
 +In the new box that opens, click the green Upload button at the top right-hand corner. ​
 +
 +{{::​18.png?​400|}}
 +
 +Click the blue **Select Files** button in the center.
 +
 +{{::​19.png?​400|}}
 +
 +Navigate to your logo saved on your computer. Click the image you want to upload and then click **OK**.
 +
 +Your logo should now appear in your list of images. ​
 +
 +{{::​20.png?​400|}}
 +
 +To upload your image into the footer, click the green **Insert** button to the right of your logo.
 +
 +{{::​21.png?​400|}}
 +
 +Click the blue **Ok** button.
 +
 +{{::​22.png?​400|}}
 +
 +Your image will now appear in the footer where you placed your cursor. ​
 +
 +{{::​23.png?​400|}}
 +
 +You can also adjust the size of your logo using the white boxes around your logo.
 +
 +{{::​24.png?​400|}}
 +
 +An example of a resized logo below.
 +
 +{{::​25.png?​400|}}
 +
 +When you’re finished resizing or moving your logo, click the blue **Save** button at the bottom right-hand corner.
 +
 +{{::​26.png?​400|}}
 +
 +Congratulations! You’ve successfully edited and uploaded your logo to your website.
  
uploading_your_logo.txt · Last modified: 2018/05/02 18:07 by brittany