This tutorial will be more focused on the myspace code and how to go about making a myspace layout rather than a photoshop aspect. I have included a site to customize your colors of borders and text and such that will give you a code, and then I put the code you insert to get the custom contact table and extended network image. With that being said, let’s get rolling.

First thing you will want to do is pick out pictures that are similar. Most likely will be the same thing in different views or poses. It’s possible to use the same image for all 3 images, but I find that it wont look nearly as good. Another thing you will need to do is decide on a color theme for your text and borders based on your image(s).

Start out by creating a new document that will become your background image. I used a 1284×900 canvas, although you can use whatever size fits your computers resolution. Slap on a render, and start making your background however you like. Here is the background image I will be using:

Next up is the extended network table. I’m not even sure of its uses on myspace, but it makes a nice place to put an image.
Create a new document. For this tutorial, my extended network table will be 435×250.
The code that I have included at the end of this tutorial is set to 435×250 dimensions. If you want to use a different size, you will have to change the code a bit.

Now it is time for the contact table. This one takes a bit more work to set up the buttons. For ease of use, I have made a button template.

You’re going to want to SAVE, not copy, this template.
Create a new document, 300×150 pixels.
Your may want to place your buttons first, and then make your image in conjunction with the buttons. Or you may want to just slap the buttons on top of the background. But either way, you will need to use the template so you know where the buttons have to be.
When you’re making the buttons, you don’t need to illustrate all of them, but you will want to include the ‘send message’ and ‘add friend’ button for sure. If you want more room for the image in the contact table, you can choose to not illustrate buttons for all the buttons on the right side. However, they will still be functional links on your page. Here is the settings I applied to my buttons:

You have made all 3 of your images, and you’re ready to code them in your myspace page. Start out by going here (freecodesource.com) to create your code for text and borders. You will also add your background image here. Make sure you find a webhost (I recommend imageshack.com or photobucket.com) to host your 3 images, so do that now before you go any further.

After you have finished doing all of that, you will be given a code to copy and past into your ‘about me’ section. Here is the instructions incase some people don’t know how.
How to Install:
1. Login to your MySpace Account
2. Click the “Edit My Profile” link on the right side of your profile picture
3. Click the “(edit)” link next to the box titled “About Me”
4. Copy (CTR+C) the code below and paste (CTR+V) it into the “About Me” box, then click the “Preview” button
5. Next, click the “Submit” button
6. Click the “View My Profile” link near the top of the page, and that it’s! Your new layout is installed!
Important Note: If you have another layout installed on your page, remove it before adding your new layout code.
One more thing you can do to the code is remove the advertisements. Go to the very bottom of your code, and delete this portion:
<a href=”http://www.freecodesource.com” style=”position:absolute; top:0px;background-repeat:no-repeat;left:0px; height:155px; width:115px; background-image:url(http://freecodesource.com/images/promote/clickhere.gif); background-position:left;”></a><a href=”http://www.freecodesource.com”>Layout Provided By FreeCodeSource.com</a> – <a href=”http://www.freecodesource.com”>Myspace Layouts</a>
Copy and paste this code into your ‘About Me’ section to insert your contact table graphics. Replace the bold and underlined text with the URL of your contact table:
<style type=”text/css”>.contactTable {width:300px !important; height:150px !important; padding:0px !important;background-image:url

(’http://i92.photobucket.com/albums/l39/fwllayouts/alysoncntvl5.jpg’)

;background-attachment:scroll; background-position:center center;background-repeat:no-repeat; background-color:transparent;}.contactTable table, table.contactTable td { padding:0px !important;border:0px; background-color:transparent; background-image:none;}.contactTable a img {visibility:hidden; border:0px !important;}.contactTable .text {font-size:1px !important;}.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}.contactTable .whitetext12 {display:none;}</style>
This next set of code is to insert your extended network table. Again, I have underlined and bolded what to change. The first underlined bold text should be replaced with the URL of your extended network table. The second underlined bold text is for the dimensions of your extended network table. These values should match the size of your extended networks table. Paste this code into the ‘About me’ section:

<style type=”text/css”>table table table td {vertical-align:top ! important;}span.blacktext12 {visibility:visible !important;background-color:transparent;background-image:

url(”http://c.myspace.com/Groups/00019/48/53/19643584_l.gif”);

background-repeat:no-repeat;background-position:center center;font-size:0px; letter-spacing:-0.5px;width:435px; height:250px; display:block !important; }span.blacktext12 img {display:none;}</style>

Step1:
Create a new document 780×200.
Step2:
Create a new layer and fill the top half of the document with red #FF0000. Create a new layer and fill the bottom half with red #850000.

Step3:
Apply these layer styles to the top layer:

And apply these layer styles to the bottom layer:

Step4:
Create a new layer for the navigation bar and fill with red #C20000. I made mine 40 pixels high.
Step5:
Create a new layer. Using your elliptical marquee tool, hold shift and create a round circle. Fill this circle with red #C20000. position the circle in the middle of your document. When you get to the center, Photoshop should sort of hold it there. Apply these layer styles to your circle:

Step6:
Put you text on your navigation bar. Try to space them out as equally as you can, and not touch the circle. I also put my website’s initials in the orb.

Step7:
With your rectangular marquee tool, cut out each section of the buttons from the single nav bar piece.

Position them where they should be, and apply these layer styles to each one.

Step8:
Create a new layer. With your elliptical marquee tool, hold shift, and create a circle; fill with white.
Press ‘Q’ to enter quick mask mode. Get your gradient tool. Start from the bottom of the circle, hold shift, and drag to the top of the circle. Press ‘Q’ again to exit quick mask mode. You should how have a selection. Press delete once or twice depending on which one you think looks better. Now drop the opacity to about 85%.

Step9:
Create a new layer. hold CTRL and left click on your circle layer to select it. Go to EDIT>STROKE and use these settings:

With your line tool, hold shift to make a path like this:

Select your pen tool, right click, and do ‘make selection’ and then delete path. Press delete, and then CTRL+D. apply these layer styles:

Step10:
Create a new layer, and with your pencil tool set to 2 pixels, make little rivets: