How to add your mascot and banner on your site

One of the nice features of an 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 site.
  1. Select the mascot graphic you intend to use. This can be obtained directly from your current school or athletic website
  2. Editing the graphic to add to banner
  3. Inserting the mascot to banner
  4. 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 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
Click OK

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

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.

New iHigh Tutorials

Tutorial Name Date Posted/Updated
AdScore 04-10-2012
Online Forms 08-17-2011
Tagging 08-04-2011
Mobile Video 06-27-2011
Offline Recording 06-27-2011
Streaming Quick Start Guide 06-27-2011
Automatic Updates on Content 12-05-2010
Calendar/Schedule Usage 11-15-2010
iHigh Live Broadcasting with Ad Insertion 11-15-2010
Mailer/Email Lists 10-20-2010
iHigh Widget 12-05-2010
Registration Process 10-15-2010
Dual Audio/Video Broadcast 10-15-2010
Document Upload 10-15-2010
Photo Upload 08-25-2010
Create Sponsors' Ads 08-16-2010
Countdown Widget 08-16-2010
Live Streaming Tool 08-16-2010
Mascot/Banner 08-16-2010
NVU 08-16-2010
Offline Broadcast 08-16-2010
Prism 08-16-2010
Site Quick Start Guide 08-16-2010
School Settings 08-16-2010
Upper Links 08-16-2010

Old iHigh Tutorials

Tutorial Name Date Posted
Mascot/Banner Tutorial 10-16-2009
iHigh Website Overview 10-16-2009
Live Broadcast Quick Start Guide 02-17-2010
Offline Recording Tutorial 02-17-2010
Ad Creation Tutorial 10-15-2009
Live Broadcast Tutorial 10-15-2009
Offline Broadcast Tutorial 10-15-2009
NVU Tutorial 10-16-2009
Prism Tutorial 10-16-2009