Recently, one of our customers ordered a YouTube banner for their Partner page. And I decided to prepare a tutorial for our readers on how to make a YT banner with links using Photoshop. Note that you have to be a “partner” to setup a channel banner like this.

In this tutorial, I will focus more on the coding than on graphics, because you will need a little html code to enable links in your banner. You will need only basic knowledge of HTML to insert image mapcode. And you don’t have to be a coder.

Just follow the steps and you will see that it’s not a hard task.

Update (Jun 10,2012): With new YouTube layout, there’re some changes for the banner. Now you can only upload a background with the banner merged in it, as one image. So, create your banner with this tutorial (but use 975px as banner width and max 150px as height), follow all the steps here, and then put in on your background image in Photoshop, merge them and upload to YouTube. If you get stuck somewhere, please comment – I will help you out.

Open Photoshop.

Create a New document (Ctrl+N).
We are creating a maximum size banner so set width to 960 px and height to 150 px. Make sure that resolution is 72.

Hit Ok.

Now let’s add some graphics and buttons.

Of course you will want to put your logo there. Import your logo file into Photoshop. If it’s an image file, you can just drag and drop.

Align the logo somewhere you like, I used the classic position – top left corner:

Add some text, describing your field with Text tool (T) just below the logo.

If you wish, change the background color. Add a gradient, or do whatever you like to do, I will just add a gradient.

Use Gradient tool (G) to fill the background with a gradient:

Ok, now we have a simple, almost ready to use banner:

But we need buttons, that’s the main focus of this tutorial. So let’s fetch some icons from Google. Just make a search for rss, twitter, facebook icons (or others if you want), copy and paste them into your working area in Photoshop and align them to the right side of the banner:

To add some depth to our icons let’s add some shadow. To do it, right-click on an icon’s layer and select Blending Options:

In the pop-up dialog box select Drop Shadow:

You can keep the default values and press Ok.

Apply the same effect to other icons:

Add some text like “Stay Tuned:” just above the icons:

Ok, let’s say we got what we needed and now let’s save it for the web. Go to File->Save for Web & Devices, select PNG-8 (for better quality) from the drop down and Save it somewhere:

Now let’s move on to uploading and coding.

Login to your YouTube and go to Branding Options/Banners and Image Maps, click on Choose file and upload your banner:

Put 150 into Channer Banner Height text area:

Now click on Save Changes in the right-bottom corner and go to your YouTube partner page and check your banner.

Ok, now let’s add links.

Go to www.image-maps.com, browse to your banner and click Start Mapping Your Image:

After that you will see a “help image-maps.com” page, wait 10 seconds and click Continue To Next Step.

On the right side, you will see a menu area, click on Rectangle:

Look at your banner, you will see there’s a rectangle with text areas:

Drag/stretch the rectangle to fit the first icon (don’t worry about the text areas for now, we’ll change them in the code) and click Save:

Do the same for the other icons.

After all icons/buttons are mapped, click on Get Your Code in the right panel:

On this page, click HTML Code:

Here comes the tricky part. Don’t close that page for now, just minimize the window and open your favorite text editor [I used Notepad] and copy and paste the following HTML code:

<div style="text-align:center; width:960px; margin-left:auto; margin-right:auto;">
<img src="codearea1" usemap="#somename" border="0">
<map name="somename">
<area shape="rect" coords="" href="" alt="" title="" />
<area shape="rect" coords="" href="" alt="Subscribe to our RSS Feed" title="" />
<area shape="rect" coords="" href="" alt="Become our fan on facebook!" title="">
<area shape="rect" coords="" href="" alt="Follow us on Twitter!" title="">
</map>
</div>

Now open your YouTube page, right-click on your new banner and go to image properties to check the full http address of your banner. Once you get there, copy the full address and paste it instead of the codearea1.

Open HTML Code page (remember, you minimized the window of image-maps.com?), find the coordinates that I’ve highlighted below:

You should copy them and paste into the code I provided above, one by one. It’s easy.

Once you are done with the coordinates, you can close the image-maps.com window and forget about it.

Now you must finish your mapcode.

I will show all of the rest in the following image:

Once you are done with the mapcode, go to your YouTube page again, Branding Options/Banners and Image Maps and copy & paste your ready mapcode into the corresponding area and click Save Changes.

That’s it. Check your links.

Here’s our client’s YouTube Partner page with the banner:

BWONe

by Azamat "Bohed" E.

TrueKolor.net Owner. Professional Graphic Designer.

• Web
|
• More Posts (152)