YouTube Partner Image Map Banner Tutorial

Michael

I Love YTtalk
This tutorial is to help YouTube partners have a banner at the top of their channel, the process can be complicated for newcomers to HTML and Photoshop so there is a small learning curve but I will explain things as easily and in depth as possible.

Okay first off you will want to have created your partner background, something similar to the ones on PimpMyChannel are the most fitting for the current YouTube layout but if you fancy creating your own from scratch you can use Photoshop and edit around those on PimpMyChannel, we currently dont have a free layout PSD for partners at the time of writing this:

http://pimpmychannel.com/partners/

Okay for our example I will be using this one here:

http://pimpmychannel.com/partners/modern-warfare-3-partner-background/

Download it and open it in your image editor, preferably Photoshop.

1. Using the Crop tool as pictured below, crop the top section like so (click thumbnails to make bigger):

View attachment 664

You will want the width to be 970 pixels, if you cant get it perfect it doesn't have to be pixel perfect although the image map hotspots will be slightly off. Re-crop until your banner is 970px wide and you shouldnt have any issues. I believe the height of the banner is around 150px although I am sure I heard you can make it less in your options on YouTube.

2. Now save your banner, it can be any type of image file.

3. Now visit here http://www.maschek.hu/imagemap/imgmap

4. Once there, click the first browse button, then select your banner to upload and then click the accept link, your banner will appear:

uploading-banner.jpg

5. Once upload draw where you would like an area that links to somewhere, the website by default uses a rectangle but you can change it by clicking where it says Rectangle. In my example I want the Facebook icon linking to Facebook and the Twitter icon linking to Twitter, I drew my first square around the Facebook icon and I can edit where it links to where it says HREF, this is where you put in the URL you would like the hotspot to link to. I then drew another over the Twitter icon, which is the second row down and I set the HREF to our forum Twitter profile.

The alt you may leave blank, if you choose to fill it in, put something that describes the image it is for, in the example I could use Follow Us for the Twitter icons alt text, this only appears when hovering the icon.

Where it says target you can leave that as default or opt to open in a new browser window when clicked by choosing target New Window.

Here is a screenshot of what mine looks like:

hotspots.jpg

I have drawn arrows to show where to click if you become confused over which one is which if you have multiple links in your image map.

6. When you are finished adding all the links/HREFs you can then click the small blue HTML icon shown below which generates the code you need for your image map/banner.

View attachment 667

7. Now your code is at the bottom of the page, select it all, right click, copy and then paste into the image map/banner code area on YouTube and then save your changes. (I am not a partner so I cannot show you this step fully)

Your image map and banner should now link correctly, if the hotspots are slightly off you can adjust them quite easily. If you have issues with the maschek.hu website here are some more image map generators that are online so there is no need for software:

http://www.image-maps.com/

http://www.mobilefish.com/services/image_map/image_map.php

http://www.pangloss.com/seidel/ClrHlpr/imagemap.html

A live demo of this tutorial can be seen here:

http://www.youtube.com/user/iChatApps

If you need any help with this either post in here or make a new thread and I am sure you will get any help that is needed. I hope that this is complete enough for anyone reading.
 
Hopefully we will all be able to eventually, even I cant try this out 100% which makes the tutorial a bit harder to make/explain :D
 
Back
Top