Download Here!
(or.. PSD)

I’ve put this off long enough, with the recent news of my thread being sticked I’ve decided to let some new things I worked on out. One that I’m proud of (and sadly don’t use enough) is the xatspace player, which looks like..

 

So let us start it off.
This Tutorial is fairly simple, the only difficulty is positioning the images right and then again I made it a lot easier than it was when I initially did this.

You should have a Youtube.xcf template, open it up and you should see it blank like this:

Pay no attention to the transparency in the middle or any of the borders, act as if you’re making a normal signature, fill in anything and make it as complexe and edited as you want, keeping in mind that the tranparent area is where the player will be for the final product, you can put the song name or some kind of text around it and get real creative with the process. I went ahead and made a fairly simple ‘signature’ of 3 characters, nothing too special. Like I said, it should look like a regular signature when you’re done.

Now comes the frustrating part! (For those without a strong sense of logic of course). Open 4 new files, each will be for the Top, Left, Right and Bottom part of the image. The sizes are:

Top – 533 x 165
Left – 129 x 24
Right – 134 x 24
Bottom – 533 x 77

I’ve done my best to simplify this part, so first you right click any layer and ‘New from visible’

Once you’re done with that, notice that there are 4 Layers with the same names as our new files, Top, Left, Right, Bottom. For this next part, you keep the “Visible” Layer active. (Have the blue highlight over it), hold ALT and click on the ‘Right’ Layer, like so.

It should select the right part. If the ALT Click part is bothering you, then you right click the ‘Right’ layer and click ‘Alpha to Selection’. After that, you go to the file selected to the Right side which should be 134 x 24px and simply copy the right part of the image and paste it to the new file and save that as ‘Right.png’ so you know what it is. Next, you select the Left and copy/paste to the left file then repeat for the Top and Bottom layers.

I can understand if this part really disturbs you but it’s really simple if you think about what you’re doing.

Now that you have all 4 Files saved, you upload them and replace the text in the code according to what should go there.

[code language=”html”]</pre>
<div style="text-align:center;">
<img src="TOP IMAGE" /><br><img src="LEFT IMAGE" />
<img src="RIGHT IMAGE" /><br><img src="BOTTOM IMAGE" />
</div>
<pre>[/code]

If you don’t want to keep refreshing your xatspace to see if it works, I’d suggest pasting it all into http://scratchpad.io/. If you’d like a live view of how it should look/be, click here.

Any help will be answered if needed in the comments.