Custom Myspace Overlay Tutorial

FFletcHH · #1 (**permalink**) **Custom Myspace Overlay Tutorial** 07-23-2007

After posting my new layout in the showoffyourwork section, i got numerous messages about how i did it or help me make one! Instead of explaining individually i decided to make a thread.
Here is what im talking about. www.myspace.com/l0l0l (mine, add me<3)

Anyways, first make sure you have Photoshop and Imageready, a photobucket account, and of course a myspace

Now open up Photoshop. Make a new document, size should be at least 1000x800. Mine is 1500x1000. Now just start designing what you want your layout to look like. Dont forget to add text's like "add" "message" "home" etc.

Once your finished creating what you want, SAVE IT!!!!

Now, open your file in Imageready. The next few steps is where it gets a little tricky.
Begin by slicing your layout. Make sure you dont have extremely big slices!!!! Slices too big wont upload into photobucket! I cannot stress that enough, i had to go back and re-upload my 110 slices 5 times. its a pain in the @$$!!!

After your done slicing, use the select slice tool to choose a slice you want to have a link. like you "ADD" slice.(When doing friends, make sure you go to their profile,and copy that link. not insert their URL(like myspace.com/haloplayer), because the link wont work.) Higlighted in red is where you insert the URL of ADD me to your friends link.

Now do this for every link you want to use.

Now, still in IMAGEREADY, go to FILE>PREWIEW IN>(your internet browser)

Should bring up your full size layout, with the links you inserted working. This is where you need to check all of your links and make sure they are still working. Now there might be some extra white space to the right of your document, dont fret! lol. I have no clue why its there, but its not an error of your photoshop, so dont worry about it.

NOW below the layout should be the HTML code. You need to copy this!!!! Start copying from html tag. Dont worry about the little bit of info at the top. Once you have it copied, paste it in a RICH TEXT DOCUMENT, which for windows users, can be created by right clicking on your desktop>NEW>RICHTXTDOCUMENT. It makes it a lot easier to edit your code.

Now, go back to imageready, and click FILE>SAVE OPTIMZED
this should create a folder called IMAGES (where ever you saved it to)

NOW Your going to have to upload every image in that folder to your photobucket.
This is much easier if you just select "ADD MORE IMAGES" on photobucket, you can upload 20 at a time. Upload every image including SPACER!!!!!

THIS IS THE HARD AND TIME CONSUMING PART!!!
After uploading all of your images, open up your html code you saved earlier to a Rich Text Document. You can see where it has the placing for your image's url.

Before

After

Now insert the URL (NOT HTML) of the image that corresponds to the code. Do this for every link. INCLUDING SPACER!!! there is going to be a lot of spacer codes at the bottom, so dont forget to add those in! Now one last part, you have to delete the html and head tags at the beginning and end of the code like so

Now you just have to put your code into myspace!!! But first, make sure everything you have in your myspace sections ex:about me, is deleted.

First, put this tiny code into your ABOUT ME Section.

Code:

<style type="text/css"> .mygen { Created using MyGen 2.5 - www.mygen.co.uk } .mygen { Background Properties } table, tr, td { background-color:transparent; border:none; border-width:0;} body { background-color:000000; } </style> <div style="width: 120px; height: 31px; position: absolute; top:0px;left:0px; background-color: 000000; border-width:1px;border-style:solid;border-color: 000000; font-family: Arial Black;"> </div> <style type="text/css"> .main{ position:absolute; left:50%; top:0px; width:990px; z-index:1; margin-left:-500px; background-color:..000000; } </style> <style>div div table tr td a.navbar, div div table tr td font {display: none;}</style> <style type="text/css"> .hidethem {visibility:hidden; display:none;} </style> <style type="text/css"> .navbar {visibility:hidden;} .content{ width:990px; float:left; padding:0px 0px 0px 0px; margin:5px 0 0 5px; border:0px solid; } body{background-color:000000;}</style>

Now put this tiny code at the TOP of you WHO ID LIKE TO MEET section

Code:

<div class="main"> <table style="width:992px; height:1000px; cellpadding:0px; cellspacing:0px; background-color:000000;"> <tr><td valign="top"> <center> <HTML> <HEAD> </HEAD> <BODY BGCOLOR="..cf2b92" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0> 



<br><br><br><br><br><br><br><br>

Now right after that code,STILL IN YOUR WHO ID LIKE TO MEET section, insert YOUR LAYOUT CODE that you finished in your RICHTXTDOCUMENT.

Now after you put in your code, put this final tiny code AFTER your layout's code.

Code:

</body>
</html>
</center> </td></tr></table></div> <div style="position:relative; height:400px; overflow:hidden; border:0px;"><table><tr><td><table><tr><td>

Then save all your changes! YOUR NEW AWESOME LAYOUT IS DONE!!!

If you have any questions, id be glad to try and help. My aim is =Hiimfletch. Im usually on.

AlienatorAlex · #2 (**permalink**) 07-23-2007

That Kevin guy on your page looks like he could be in The Beatles.

Solid · #3 (**permalink**) 07-23-2007

Nice tutorial. I'll definately use this.

FFletcHH · #4 (**permalink**) 07-23-2007

Haha ill have to tell him that

♫B1G · #5 (**permalink**) 07-23-2007

niiice thanks. ive been trying out divs a lot lately, and none of the tutorials are much help.
This one ill try and post my questions/work later.

PHi1 · #6 (**permalink**) 07-23-2007

Nice tutorial. I might use it tomorrow.

AlfabetSoop · #7 (**permalink**) 07-23-2007

Slicing in Imageready is MUCH more complicated than just div'ing your MySpace yourself. If you don't really know what you're doing, I guess you could attempt this. Honestly, I HATE Imageready with all of my soul.

Just Google, "MySpace Div Layout Tutorial," or something like that.

Note that I'm not trying to insult you with this, Fletch. It's cool for someone to show people that Imageready does more than make GIFs of kids dancing.