Oct 04

Create a Simple, Stylish Custom Youtube Background

Mon, 10/04/2010 - 17:33 — julie

psdfanmembersbut Create a Simple, Stylish Custom Youtube Background

Create a Simple, Stylish Custom Youtube Background

This tutorial will go through the steps of creating a custom Youtube background. It is an essential part of your channel as it will attract viewers and give them an idea of what your channel contains.

When you are following the tutorial it is quite a good idea to go to your Youtube page and frequently upload a JPG version of your PSD to check that everything is aligned and looking tidy. There’s nothing worse than finding something’s off slightly and you cannot go back to change it!

Final Image

As always, this is the final image that we’ll be creating:

youtubebgfinalsmall Create a Simple, Stylish Custom Youtube Background

Step 1

To start with open up your Internet browser and go to www.youtube.com. Login to your account, go to My Channel and select Themes and Colours. From here select the Grey Theme and save. Now logout, go back to your Channel Page and capture your channel page but none of the task/scroll bars or the bottom of your screen e.g. Mac Dock. Press cmd, Shift, 4 for Mac users to select the area precisely. For Windows users if you have Windows 7 you can use the Snipping Tool but if you don’t you will have to delete these bits out.

You will have to capture two images. One for the top of the page and then another picture for the bottom half.

youtubebackground1 Create a Simple, Stylish Custom Youtube Background

youtubebackground2 Create a Simple, Stylish Custom Youtube Background

Open up the screenshots in Photoshop. On the bottom half image press Cmd A or Ctrl A and then Cmd C/Ctrl C to copy it. Now paste the image into the top half image.

Go to Image, Canvas Size, select Pixels and enter 1800 into the Height box. This should give you lots of room to align both of these images. Move the top half of the Youtube page up to the top and then align the bottom half so it flows perfectly down the page. Remember to hold Shift whilst moving the images up and down else it will move sideways too. Once your done merge the layers together.

youtubebackground3 Create a Simple, Stylish Custom Youtube Background

Step 2

Take the Eyedropper Tool and click onto the dark grey borders. Now with the Rectangular Marquee Tool create a square that goes around the video preview box area and fill it with the grey colour you just selected.

youtubebackground4 Create a Simple, Stylish Custom Youtube Background

Select the Magic Wand tool and with a Tolerance of 2 click on the dark grey area. Now holding Shift click onto the bottom grey area.

youtubebackground5 Create a Simple, Stylish Custom Youtube Background

Press Delete, deselect and then select the rest of the background and delete it also.

youtubebackground6 Create a Simple, Stylish Custom Youtube Background

Now create a layer underneath and fill it with the colour black for now.

youtubebackground7 Create a Simple, Stylish Custom Youtube Background

Step 3

OK, it’s time to start doing some design work at last! Create a new document with these settings.

youtubebackground8 Create a Simple, Stylish Custom Youtube Background

Zoom in all the way, select the Brush Tool, put the size to 1 px and choose the colour black. Now hold shift and click and drag up and down a few times on the right hand side of the square. Then for the left hand side drag down once. It should look like this.

youtubebackground9 Create a Simple, Stylish Custom Youtube Background

Go to Edit, Define Pattern and name it something like Stripe. You can now either close this document or save it in case you want to edit the pattern.

Back on the original document click on the Background layer twice to bring up the Layer Style Palette. Select and tick the box in Pattern Overlay. Click the down arrow in the Pattern box and your custom pattern will be in there.

For the Opacity enter 75, the Scale 180 and click OK.

Create a Group folder and name it Background. Put the Background layer into this and now create a new layer named Fade Out Side on top of the Background. Zoom out quite a bit and now select the Brush Tool with the colour Black. Select a 1000 px Brush with a softness of 0% and drag down (remember to hold Shift) the right hand side of this area, shown below.

youtubebackground10 Create a Simple, Stylish Custom Youtube Background

Duplicate the layer and then go to Edit, Transform, Flip Horizontal and move the image over to the other side of the document so that the sharp black edge is directly running down the edge of the image.

Create a new layer in the Background group folder and name it Fade Out Bottom. Like with the sides using the same size Brush, colour and technique brush over from one side to the other.

youtubebackground11 Create a Simple, Stylish Custom Youtube Background

Step 4

Create a new Group folder, name it Boxes and put the layer that contains the layout of the Youtube page into it.

So now it’s time to clean up the page and get the basics done to the layout so you can start to customize the page properly.
Grab your preferred selection tool and delete the Info, Favourites, Share etc piece of text.

youtubebackground12 Create a Simple, Stylish Custom Youtube Background

youtubebackground13 Create a Simple, Stylish Custom Youtube Background

Now we will create our own section boxes. To start with select show Guides and Rulers from the View menu. Drag out guides from both the vertical and horizontal rulers and place them around the boxes like so. This will help to make everything perfectly in line.

youtubebackground14 Create a Simple, Stylish Custom Youtube Background

You will notice I did not place guides where the bottom boxes split for subscribers and comments. This is because these boxes will become far bigger when you have more subscribers and comments so it would then interfere with your design.

Create a new layer inside the Boxes group, above the layout image, name it Top and select the Rounded Rectangle Tool with a Radius of 3.
Zoom in and create a box around the top bar of the page. The paths will snap to the guides thus helping this process. Once the path is created choose the Eye Dropper tool and click onto the main background box. You can delete the path when you have finished the box.

youtubebackground15 Create a Simple, Stylish Custom Youtube Background

Create a new layer for each box for the top section and repeat the previous process. You will notice there is a small triangle on top of the video information box. Grab the Pen Tool, create a path around the small shape and fill it with the same colour your using.
Your layout should be taking shape now.

youtubebackground16 Create a Simple, Stylish Custom Youtube Background

Step 5

Now create another layer and another box for the small logo area on the bottom half of the layout. Keep creating new layers for each box and now drag out another box but instead of ending the box where it cuts off keep on dragging down and let go when it’s near the end of the document. This applies to the box beside it. This is how my image and layer palette looks.

youtubebackground17 Create a Simple, Stylish Custom Youtube Background

youtubebackground18 Create a Simple, Stylish Custom Youtube Background

You can now turn off the layer that had the image of the Youtube layout.

With the basic layout complete and the page ready to be customized feel free to vary these next steps and come up with your own ideas to make your page unique.

Step 6

Create a new layer on top of everything and pick the Brush tool, 1px and the colour #ffae00. Make a small line (hold shift) and let go. Now duplicate the layer and move the new line close to the other one and repeat this process. After a couple of times merge the layers and then duplicate them as it will be quicker. Move the lines so they are in between the top and bottom section. This is how mines looking like.

youtubebackground19 Create a Simple, Stylish Custom Youtube Background

youtubebackground20 Create a Simple, Stylish Custom Youtube Background

Move your lines to the left so there are around 6 small lines jutting out either side from the section boxes. If you need to create more simply duplicate the layer and then delete a section you don’t need. Remember to merge the layers!

Duplicate the layer again and transform its so running vertical. Move it over to the left and place it near the horizontal line. Delete a large section of the line so only a small amount remains for the text that we will put in next to it in the next step.

youtubebackground21 Create a Simple, Stylish Custom Youtube Background

Repeat this for the right hand side.

youtubebackground22 Create a Simple, Stylish Custom Youtube Background

Create a group folder and clean up the layers. Name the main line layer Lines, the left side,
Left Lines and the right side, Right Lines.

youtubebackground23 Create a Simple, Stylish Custom Youtube Background

Turn the Opacity of the Group folder for the lines to 70%.

Step 7

Grab the text tool; find some space on your document, and type in your channel’s name. I used the font Haettenschweiler, size of 60pt and the colour #febc3e. Turn it anti clockwise 90 degrees and move it over to the left side where the lines meet.

youtubebackground24 Create a Simple, Stylish Custom Youtube Background

Now create some more text that reads, Subscribe. Use the same settings. Rotate the text 90 degrees clockwise and move it to the other side in-between where the lines meet. You might need to edit the lines that run horizontal, as they might not be long enough/too long for the text. Simply grab a selection tool (I used the Rectangular Marquee Tool) and delete the required amount so the lines don’t go past where the text ends. If there’s not enough duplicate the lines layer, move it up or down then delete the bits you don’t need.

youtubebackground25 Create a Simple, Stylish Custom Youtube Background

Create another Group folder named Text and put the two pieces of text inside it.

Step 8

We will now tweak the boxes colours and add some depth to them. Open the group folder that contains the Youtube boxes and proceed to decrease each of the layer’s lightness to -50 from the Hue/Saturation box.

youtubebackground26 Create a Simple, Stylish Custom Youtube Background

Select one of the layers and go to the Layer Style. Use these settings and then copy them and paste them for each layer in this group. The left colour for the gradient is transparent and the right is Black.

youtubebackground27 Create a Simple, Stylish Custom Youtube Background

youtubebackground28 Create a Simple, Stylish Custom Youtube Background

Once done go to the Top Box layer and change the Angle and Scale shown in the next picture.

youtubebackground29 Create a Simple, Stylish Custom Youtube Background

Step 9

Go back into the Background group and add a new layer called Shine just above the Background layer. Choose White for the foreground colour, grab the Pen Tool and draw a large curve that is similar to the picture below. Zooming out will help quite a bit, as it’ll be easier to curve the line.

youtubebackground30 Create a Simple, Stylish Custom Youtube Background

Fill the selection with white, delete the path, set the layer style to overlay and the drop the opacity to 20%.

youtubebackground31 Create a Simple, Stylish Custom Youtube Background

Now move the layer named Fade Out Bottom all the way to the top of the layer palette.

youtubebackground32 Create a Simple, Stylish Custom Youtube Background

Step 10

This is the design finished. To put this onto your Youtube page go to File, Save For Web & Devices and put the quality to about 90. Now login to your Youtube account, click on My Channel and select Themes and Colours.

youtubebackground33 Create a Simple, Stylish Custom Youtube Background

Click New Theme and use these settings. Where it says Background Image, click on browse and upload your JPG image.

youtubebackground34 Create a Simple, Stylish Custom Youtube Background

youtubebackground35 Create a Simple, Stylish Custom Youtube Background

Name your Theme and save it.

Congratulations, you have finished the tutorial! You can now add a lot more to the page if you like and design it so it is more suited to the genre of your videos.

And We’re Done!

You can view the final outcome below. I hope that you enjoyed this tutorial and would love to hear your feedback on the techniques and outcome:

youtubebgfinalsmall Create a Simple, Stylish Custom Youtube Background

psdfanmembersbut Create a Simple, Stylish Custom Youtube Background

 Create a Simple, Stylish Custom Youtube Background

Copyright 2009. E-mail Me
Auto Spare Parts