How to add your mascot and banner on your ihigh.com site
One of the nice features of an iHigh.com site is the ability to customize the page with your school mascot and colors. This tutorial will provide a step by step process on how to make the top banner look clean and crisp. The following pages will show details of the following step by step process required to make a nice looking and functional banner on your iHigh.com site.
- Select the mascot graphic you intend to use. This can be obtained directly from your current school or athletic website
- Editing the graphic to add to banner
- Inserting the mascot to banner
- Save and verify
Step 1 – Gathering your mascot graphic
Every school has a mascot. This first step is to find a graphic copy of the mascot. You may locate it on the school's current website or an athletic or booster site. Right click on the graphic to save it to a folder on your computer. You will get something like the examples of graphics below, though the size and colors may differ.
Step 2 – Creating the template for the Mascot
After selecting your graphic, you will need to use a graphic editing software such as Photoshop. If you do not have one available, there is a slick little software package called PhotoFiltre available as a free download on the internet at http://photofiltre.free.fr/utils/pf-setup-en.exe. Note that this software is only available for Windows. If you are using a Mac, iPhoto would work great. For the examples in this tutorial, we will use PhotoFiltre.
Once downloaded and installed. Open PhotoFiltre and select File / New. A new window will open that will allow you to edit the size.
Step 3 – Editing the mascot box size
Once you select New, a window will open that allows for the Width and Height to be adjusted. The drop down menu defaults to pixels. Drop down and select inches. Then add the new Width and Height.
Select “inches” from drop down menu
Select 3.56 for the Width.
Select 1.74 for the Height
Step 4 – Mascot box is created
After selecting OK, a box will be created and show up on the PhotoFiltre workspace as shown below.
Step 5 – Locate your Logo graphic
You will now need to bring in your Logo graphic into the work space. Select File / Open and then select the directory your graphic is in. Highlight the desired graphic and then click on the Open button.
Highlight the Logo, and click on “Open”
Step 6 – Moving Logo to Mascot Box
Once you click on “Open” you will now have two items in the workspace. The next task will be to get the Logo into the Mascot Box. Make sure the Arrow button is clicked in the right hand tool bar.
Step 7 – Capturing the Logo
To “capture” the Logo, drag your mouse pointer from the upper left corner of the Logo across to the upper right corner and then down to the bottom right corner. You will see “marching ants” (a moving dashed line) around the outside border of the Logo.
Step 8 – Copying Logo
With the “marching ants” in place, select Edit / Copy from the menu. This will make a copy of the logo. (Alternatively, you can hit the Ctrl + C keys together to copy)
Step 9 – Pasting Logo to Mascot Box
Place your mouse pointer somewhere inside the Mascot Box and RIGHT click on the mouse. A pop-up menu will appear. Select Paste. This will paste the copy of the Logo into the Mascot Box.
Step 10 – Resizing Logo within the Mascot Box
You will now see a partial version of your Logo in the Mascot Box. It will need to be resized in the box. To resize, put your mouse pointer on the upper left corner of the “marching ants”. You should see a double arrow ( ). While holding the left button of the mouse down, drag it diagonally towards the bottom right corner and you will see the graphic get smaller. You may need to stick the mouse in the middle of the logo to move it back up a bit. Again, use the left button of the mouse to move the graphic. Continue the process until your graphic is reduced to the desired size and then set in the middle of the Mascot Box. Save the Mascot Box graphic with a new file name such as logo.jpg.
Step 11 – Editing Banner & Skin
You are now prepared to edit the Banner & the Skin. This includes adding the Mascot Box to create a Mascot on the skin.
First you will need to return to your iHigh.com site and make sure you are logged on as Administrator. If your header has never been edited, you will then see your state seal and the "Edit Banner & Skin" button on the banner section of the page as shown below.
If your banner or skin has been updated in the past, you will need to click on the "Change site header, colors, and skin" link under Your Website Tools.
Step 13 – Edit Your Header Text and Site Colors, and
You can now edit the School Name, Mascot/Slogan and choose your site's colors. The School Name will be the largest line on your banner.
The Mascot/Slogan will appear just beneath the School Name in your banner, and the font size will be a bit smaller.
You can select your website's colors by either inputting the color codes or by using the scroll at the top of the color bar to scroll down and clicking your mouse in the selected color on the color box. For your convenience, the color codes for most major colors can be found on the following website: http://www.webmonkey.com/reference/Color_Charts.
There are five different options for your website's Left Menu Background Color: Variation of Primary School Color, Variation of Secondary School Color, Light Gray, Dark Gray, and Black.
Step 14 – Choosing Skin Type
iHigh offers two different Skin Types for your banner: HTML and Flash.
Selecting the "Use HTML Banner (settings below)" option allows you to choose your School Name and Mascot/Slogan fonts. Examples of each font are provided in the chooser pane.
If you select "Use Flash Banner 1", the default Flash banner fonts will be used. Your banner will look similar to the one below, except for you will have a continuously moving background instead of a static one.
Step 15 – Uploading your School Logo
Next, choose the School Logo by clicking on the "Browse" button. Find the location with the file name and select Open. The file name will then appear in the box.
Step 14 – Saving all of the changes
After making the color selections, font selections and adding your logo, click on "Save Site Design" and you should see the changes now reflected in the banner.
If there are further changes needed, such as a slight color change or font change, just click on the "Change site header, colors, and skin" link under Your Website Tools.
Step 16 – Useful Tips
- Don't pick a primary school color that is too bright or hard on the eyes. Move the crosshairs to the left to darken the hue
- The primary and secondary colors should be different enough so that they stand clearly apart. You don't have to choose a secondary color if your school doesn't use one.
- Refresh the page if your new images do not appear.
- For a good logo fit, cut the best-looking 256 x 125 rectangle from a picture of your choice using an image editing program.