Line25

How To Design a Custom YouTube Background

Read the full post

Have a YouTube channel? Want to customise it with your own background design? Follow this guide to find out how to create a cool theme for a gaming channel, then download the free template for use in your own projects.

Custom YouTube design

The design we’ll be creating is a dark military theme for my new gaming channel. Subtle camouflage patterns, grungy background textures and an array of awesome weaponry all combine to form an eye catching background design to entice viewers and subscribers.

View the final YouTube background design

YouTube background template

Like many social websites, YouTube allows the cusomisation of your personal profile through the uploading of a background image and the modification of the profile’s colour scheme. In order to make sure our design fits well with the YouTube website and its various palettes we need to base it on a template. Here’s a YouTube design template I made earlier, download it and feel free to use it in all your future projects. The template highlights where each palette is located and shows how much of the page is seen by common monitor resultions.

Download the YouTube PSD template

The first step towards our dark gaming channel design is a camo pattern background. Here I’m using my free repeating camo patterns I posted on Blog.SpoonGraphics, with a slight colour adjustment.

Next, draw a large selection around the main YouTube container from the template and fill it with black on a new layer.

Download a grungy texture like this one from LostandTaken and scale it into position over the black area in the design. Reduce the opacity to tone down the grungy effect.

Toggle on the template and CMD+click the palettes layer thumbnail to load the selection. Fill these palettes with a black background and reduce the opacity so the texture can be seen through them.

Create a new layer then right click the selection and choose Stroke. Enter 1px with the color White. Change this layer to Soft Light.

Use the Eraser tool with a soft brush setting at 50% opacity to grunge up these borders by erasing out random areas.

Being a military themed gaming channel means we need guns, lots of guns! Scour the stock photo websites for various weaponry. I originally developed this design for an Expendables Movie poster tutorial, check out that post for more details!

Open up each weapon photo into Photoshop and desaturate, then use the Magic Wand to quickly make a selection of the object.

Go to Select > Modify > Contract and enter 2px in the settings. This helps clip out any unwanted white area that the Magic Wand might have included in the selection.

Clip out every weapon image you find and compile the selections in a new document. Aim to find a range of weapons of various sizes, including knives.

The images won’t be in proportion with each other, so scale and order each weapon according to their actual size.

Starting with the largest weapon and moving down, rotate and position the guns so they flare out in a kind of wing shape.

If the tones of some weapons don’t match, quickly adjust the Levels to clip their shadows and highlights.

The smaller weapons may need duplicating to fill out their area of the wing. Stack these weapons to give the impression of layered feathers.

Finally arrange the knives until the rotation of elements reaches the 180 degrees mark. Again stack and layer these objects to fill in any gaps.

When all the weapons have made up a complete wing shape, group them together and paste them into the main YouTube design document.

Scale and position the wing behind the content panel. Take into consideration the common monitor resolution guides to ensure the weapons will fit within the screen area of most viewers.

Paint in a blue overlay over the weapons to add a cool colour cast. This blue will also be sampled for use as the link colour to tie the design together.

Duplicate the group of wings, right click and selection flip horizontally, then position the duplicate in the same place on the opposite side.

Toggle on the design template to double check the scale of the design and its elements. This design will fit into 1440px resolutions, but the tips of the larger guns will be cropped off on anything smaller.

We also need to take into consideration larger monitor resolutions and browser window scrolling, so add a black fill to fade out the edges of the design to a solid colour.

Crop the design as tightly as possible, then save the image. Compress the JPEG settings as far as you can while keeping an acceptable image quality. The max filesize YouTube accepts is 256kb.

Log into your YouTube profile and edit your channel. Upload the background image and deselect the repeat option. Then go through and edit the design background, text and link colours. Also remember to set the transparency of the YouTube wrapper and palettes to 100% so the underlying background can be seen.

Custom YouTube design

Check out the final design over at my gaming channel on YouTube. Notice how the palettes sit nicely against the containers of the background. If you’re gaming fan, particularly of the Call of Duty series, why not consider subscribing? ;-)

View the final YouTube background design

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

22 Comments

  1. Red says:

    Nice background, it kinda reminds me of that recent all-in-one indian movie trailer: Robot! :)

  2. webdesdev says:

    Mind blowing, super theme for utube nice work Chris.

  3. paul says:

    thanks for this detailed tutorial, Chris! your youtube profile pic is hilarious. I can sense the rage :D

  4. Edson says:

    Amazing tuto! Very creative! I'll try some variations for the background boxes of the youtube elements! Tks for share!

  5. raym says:

    Chris – Great design and great tutorial. The "gun-wing" is a nice element.

  6. The 'gun-wing' is a really creative idea that doesn't oversaturate the background with excessive objects. It makes the background look like one coherent image, not just a seemingly random selection of somewhat related items.

  7. Hi Chris i came across your blog your tutorial is very nice ans easy to understand by all

  8. ZK says:

    Very nice tutorial. Your youtube avatar is quite funny and creative. Just get yourself some shades and some old school tobacco to make it more badass then proceed fraggin'. :D

  9. Great Tutorial. The images also look great. Good stuff I would have to say Chris

  10. This is what I was looking for….Great Tutorial for youtube backround and I will recommend others to read this post…..Thanks for sharing

  11. This is a great tutorial – I especially like the background around the menu containers :)

  12. ABDUL JANOO says:

    good one!…………chris

  13. Caio says:

    Good chris. thanks

  14. Man, you sure do know how to 3d model.

  15. Nice tutorial, this could be very helpful, thanks.

  16. Sean says:

    This tutorial is sick mate

  17. Rakesh says:

    Hi Chris

    Nice pattern thanks for the tutorial..

    Rakesh

  18. Thank you. This was really helpful and the final Design was awesome.

  19. Qaiserm says:

    A Fatal theme :-) you just need two things to make a nice background. good images and photoshop expertise

  20. Ahmed Abbouh says:

    thanks for sharing this, nice job Chris

  21. good work and different presentation as compare other background which i saw before.

  22. wow. Great article. Thanks very much.

Sorry, comments are now closed