{"id":16677,"date":"2018-09-04T17:11:15","date_gmt":"2018-09-04T21:11:15","guid":{"rendered":"https:\/\/fcit.usf.edu\/matrix\/?p=16677"},"modified":"2020-10-29T08:42:04","modified_gmt":"2020-10-29T12:42:04","slug":"custom-banners-for-your-tim-tools-instance","status":"publish","type":"post","link":"https:\/\/fcit.usf.edu\/matrix\/custom-banners-for-your-tim-tools-instance\/","title":{"rendered":"Custom Banners for Your TIM Tools Instance"},"content":{"rendered":"

[et_pb_section bb_built=”1″ inner_width=”auto” inner_max_width=”1080px”][et_pb_row][et_pb_column type=”4_4″ custom_padding__hover=”|||” custom_padding=”|||”][et_pb_image admin_label=”Wolves Header Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Wolves-Header.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

While most TIM Tools clients use one of the 100 or so built-in page header images for their site, some clients prefer to make a custom banner to match their other websites or sometimes just their school colors. With just a few minutes effort you can create a custom header image that personalizes your TIM Tools site and assures your teachers and other users that they are at the right website.<\/p>\n

Any PNG, JPEG, or GIF image can be used as your header. Simply resize your image to 100 pixels high and place it on any publicly-accessible web server. If your image is greater than 100 pixels tall, then only the top 100 pixels will display. The image can be any width. We suggest a minimum of 1600 pixels wide since the image will “tile” (repeat itself) if the visitor’s browser is wider than the image.<\/p>\n

 <\/p>\n

Setting Your TIM Tools Header Image<\/h3>\n

Once you’ve created your image and placed in on a web server someplace, log into the Admin Center of your TIM Tools account. On the left, you will see an expanding menu for “Customization.” Click this and then click the “Site Banner” sub-menu item.<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/SelectBanner.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ header_3_line_height=”1.6em” text_orientation=”left”]<\/p>\n

Above: The Site Banner customization window.<\/em><\/p>\n

Simply enter the URL of your custom image in the text box, click the “Use Custom Banner” button, and your banner is instantly applied across your TIM Tools instance.<\/p>\n

But what if the image you want to use isn’t very wide or doesn’t tile well? Keep reading!<\/p>\n

 <\/p>\n

Making Images that Tile Properly in Four Easy Steps:
\nPhotoshop Offset Filter to the Rescue<\/h3>\n

1. Open your image in Photoshop.<\/strong> If it isn’t already 100 pixel high, resize it so that it is.<\/p>\n

2. Offset it.<\/strong> Many experienced Photoshop users really aren’t aware of this filter, but it’s going to make the process very simple for us. You’ll find in the “Other” sub-menu under Filters:<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Offset-1.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

Above: Finding the Offset filter in Photoshop.<\/em><\/p>\n

When the Offset filter opens, enter a number equal to half the width of the image for the Horizontal setting and select the “Wrap Around” option at the bottom. (You could use any convenient number for the horizontal offset, but if you use exactly half, repeating the filter will get you exactly back to your original, and I like to make things easy.)<\/p>\n

For an image 400 pixels wide, the settings should look like these:<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”Offset dialogue boxImage” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Offset-2.png” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

3. Disguise the seam.<\/strong> The offset filter has now put the seam right in the middle of your image making it easy to see what needs to be done to make the image tile well. Sometimes, just using the blur tool will be enough to disguise the seam. Usually, you’ll need to use the clone tool to copy areas from one side of the seam to the other. Occasionally, either the smudge tool or the healing tool will be the fastest fix. See examples in the next section.<\/p>\n

4. Repeat the offset filter.<\/strong> Running the filter again will return your image to its original orientation, but now the left and right sides will match when the image repeats. And you’re done!<\/p>\n

 <\/p>\n

Examples<\/h3>\n

I’ve intentionally selected images that aren’t very wide so the seams will be a problem. You’ll want to start with an image that is much wider if possible.<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Grad-1original.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Original Image Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

1. Original image.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”offset grad Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Grad-2.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

2. Offset. Notice the slight seam in the center.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”fixed Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Grad-2b.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Blur Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

3. Five seconds using the blur tool hid the seam completely.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”offset 2 Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Grad-3.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

4. Offset a second time to return image to original view.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”Grad TT Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Grad-TT.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

Live on TIM Tools instance with no obvious seams.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”Smiles original Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Smiles-1-1.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Original Image Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

1. Original image.<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Smiles-1-offset.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Offset 1 Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

2. Offset. Obvious seam in the center.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”cloned Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Smiles-1c.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Cloning Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

3. Using the clone tool to copy content from the right side of the seam over to the left side took about 15 seconds.<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Smiles-1d-1.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Offset 2 Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

4. Offset a second time to return image to original view.<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Smiles-TT.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Live Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

Live on TIM Tools instance with no obvious seams.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”sports original Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Sportsoriginal.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

1. Original image.<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Sports2-b.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

2. Offset. Very obvious seam to hide here.<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/2-c.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

3. This one was more difficult to fix. It took about a minute of cloning areas from one side of the seam to the other. It helps to zoom in when doing this.<\/p>\n

[\/et_pb_text][et_pb_image admin_label=”fixed sports Image” _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Sports-2-c-1.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Offset 2 Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

4. Offset a second time to return image to original view.<\/p>\n

[\/et_pb_text][et_pb_image _builder_version=”3.12.2″ src=”https:\/\/fcit.usf.edu\/matrix\/wp-content\/uploads\/2018\/09\/Sports-Fin.jpg” align_last_edited=”on|desktop” align_tablet=”center” \/][et_pb_text admin_label=”Live Text” _builder_version=”3.12.2″ text_orientation=”left”]<\/p>\n

Live on TIM Tools instance with no obvious seams.<\/p>\n

[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row][et_pb_column type=”4_4″ custom_padding__hover=”|||” custom_padding=”|||”][et_pb_text admin_label=”Graphics Posts Text” _builder_version=”4.6.6″ saved_tabs=”all” text_text_shadow_horizontal_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length=”text_text_shadow_style,%91object Object%93″ text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength=”text_text_shadow_style,%91object Object%93″ text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length=”link_text_shadow_style,%91object Object%93″ link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength=”link_text_shadow_style,%91object Object%93″ link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength=”ul_text_shadow_style,%91object Object%93″ ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength=”ol_text_shadow_style,%91object Object%93″ ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength=”quote_text_shadow_style,%91object Object%93″ quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length=”header_text_shadow_style,%91object Object%93″ header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength=”header_text_shadow_style,%91object Object%93″ header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength=”header_2_text_shadow_style,%91object Object%93″ header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength=”header_3_text_shadow_style,%91object Object%93″ header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength=”header_4_text_shadow_style,%91object Object%93″ header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength=”header_5_text_shadow_style,%91object Object%93″ header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength=”header_6_text_shadow_style,%91object Object%93″ header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px” vertical_offset_tablet=”0″ horizontal_offset_tablet=”0″ z_index_tablet=”0″ global_module=”20484″]<\/p>\n

 <\/p>\n

Additional Graphics Posts<\/h3>\n