Your Customers are Mobile, you will be too …

In this tutorial we will show you how to create your own Youtube Theme (or template what ever you prefer to call them)in Fireworks CS5.5. First we will show you the best way to set up your background image and then we will go into putting it in on your YouTube account and adding the final touches that have to be done actually in YouTube.

Remember we do not have access to CSS in a YouTube theme so we are limited in a lot of ways when it comes to our custom themes however with a little imagination you will still be able to create amazing profiles.

As an example I have put one up on my YouTube for you. Feel free to take a look and comment.

Fireworks CS5.5: Creating a YouTube Theme

First thing we need before we start is a copy of the YouTube Template PNG I have listed in the resources section at the bottom of the page. This template gives you an idea of where each element within the content section will sit in relation to your design. First thing you should do with it when you download it is change the file width to 2000px but keep the template itself centered. Then re-save it to keep as a template for use further down the track. It was saved at the smaller size to keep the bandwidth down. But you will want it at this width whenever you are using it.

Apart from changing the width of your work area the template itself is perfect and ready to go so open it in fireworks and lets get started.

First thing we want to do is lock that template layer so we don’t accidentally muck it up. From here on in everything needs to pretty much be underneath this. Everything for our design that is. Anything else you bring in to make your content section more like YouTube like mock-ups of video or other content that will go above this layer.

So create a new layer for your artwork and move it under your template layer. Create a rectangle in this layer 2000 by 2500px. Want want this to be a solid rectangle with no transparency. Transparency will boost our file size considerably so avoid it if you can. Set this rectangle to the background color you want for your theme. If you want to have a gradient through it now is the best time to put that in. Make sure that you make note somewhere (yes even on paper) of the color you used at the bottom of your gradient if you used one. You will need this down the track to make your template look seamless.

Now create another rectangle 960 by 2440px and position it underneath the template in the center. This is the background for your content area in YouTube. Remember this can be set to transparent in YouTube and even have a different background color to the main background. That is why we just put this rectangle in. It will now play the role of the contents background color. Set it to 50% transparent if you want to work with transparency on your theme.

Now it is time to work on your images. Remember if you don’t set your image to tile (which if your reading this you shouldn’t be) YouTube will automatically center your background image. So if you put an image hard up against the template that is where it will appear when you upload it to Youtube. This is regardless of what size monitor is being used to view your profile.

Remember to keep all your image work on layers that are below your template. and when you are ready save it so that we can move onto the next step. Keep your file size under 256kb as this is the maximum file size YouTube will accept for a background.

Uploading your YouTube theme to YouTube

Putting your theme into place is actually quite easy. Naturally we start by logging in. When you are logged in go to your channel and up the top of your channel page you will see a button “Themes and Colors” click that and then click “new theme”.

Remember the color code I said we needed to keep handy earlier put that in the background color. Beside background image hit browse and locate your background image and upload it. If you wanted to have transparency change your transparency levels. Once you have all your color, transparency and typography settings done hit Save changes and you now have a new YouTube Theme.

Hope you found this helpful and see you again next time.

Important Notes

  • If you do not specify your YouTube background to tile it will automatically center itself
  • The content on a YouTube page is 960px wide and is centered
  • Maximum File size is 256k. Smaller files will help your load times however.
  • To account for wider screens make your images 2000px wide and fade the edges to a solid color you can match in your profile options.


PNG template for Youtube themes

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: