PDA

View Full Version : Pimping your myspace


erric1234
05-29-2007, 10:28 PM
old tut i found, it should work, ill try and make a newer one

Skills needed: basic Photoshop skills, basic understanding of HTML, common sense
Programs needed: Photoshop (I'm using Photoshop CS2), a webhost (either your own or I recommend Photobucket.com - reasons will be covered later on)

Tired of having the same looking Myspace page as everyone else no matter how much you customize it? Do a complete overhaul with a div overlay. The div overlay will completely cover up the default Myspace page.

A div overlay is actually very simple to do. The hardest part is actually creating the design you want. Your design is only limited by your imagination. Other examples of my designs:
My Myspace page: http://www.myspace.com/backslide
My first version: http://www.calviniscool.com/myspace/calvin/v1/
A page I designed for my friend: http://www.calviniscool.com/myspace/jake/

For the purposes of simplicity, the design for this tutorial will not be complex. Also, this will be a div overlay without comments showing. Getting your comments to show on a div overlay involves some skills that are beyond the simple skills needed for this tutorial and therefore, will not be covered.

I start off with an image that I want to use for my div overlay. I edited a picture of Kate Beckinsale and made it a vector and gave it a slightly retro feel.
http://www.calviniscool.com/myspace/tutorial/01-tutorial.jpg

Add the links you want onto the base image. Again, for the purposes of simplicity, all my links are simple text. You can use images if you want. You can add or not add whichever links you want.
http://www.calviniscool.com/myspace/tutorial/02-tutorial-text.jpg

In Photoshop, select the Slice Tool. It looks like a little Exacto knife. The Slice Tool allows you to (*gasp*) slice up your image.
http://www.calviniscool.com/myspace/tutorial/03-slice%20tool.jpg

Using the Slice Tool, you will be slicing your links. You will accomplish this by starting from one corner of the part you want to slice, clicking the mouse button and while holding the mouse button down, dragging the cursor to the other corner.
http://www.calviniscool.com/myspace/tutorial/04-select%20slice.jpg

Once you let go of the mouse button, a part of your image will be sliced. If you need to change the dimensions of the slice, click and drag the boxes on the slice.
http://www.calviniscool.com/myspace/tutorial/05-slice.jpg

Slice out the rest of your links and you will have a bunch of blue boxes showing on your image. These are your slices.
http://www.calviniscool.com/myspace/tutorial/06-sliced.jpg

If you use the Slice Select Tool, you will see an option at the top to Show Auto Slices
http://www.calviniscool.com/myspace/tutorial/07-show%20auto%20slices.jpg

If you click this, you will see all the slices that Photoshop automatically does for you. Your slices are the ones with blue numbers and the automatic slices are the boxes with grey numbers. Personally, I like designing with the Show Auto Slices option turned off. It makes it easier to see my own slices and makes it easier to edit if I have to.
http://www.calviniscool.com/myspace/tutorial/08-auto%20slices.jpg

If you decide to move a text link, don't worry, you won't have to reslice the whole image. All you have to do it move the link and then using the Slice Select Tool, move the slice to the new location.

Now that the designing part is done, it's time to get your image ready to be put up on Myspace.

From the File menu, select Save for Web.
http://www.calviniscool.com/myspace/tutorial/09-save%20for%20web.jpg

This will bring up the Save for Web screen. Again, you can see that Photoshop has separated your slices from the automatic slices by making your slices a little darker than the automatic slices. You can move the image around by holding down the Space Bar and clicking on the image and dragging it around.
http://www.calviniscool.com/myspace/tutorial/10-save%20for%20web%20screen.jpg

Time to add the links. Do this by double-clicking on one of your slices. This will bring up the Slice Options screen.
http://www.calviniscool.com/myspace/tutorial/11-slice%20options.jpg

erric1234
05-29-2007, 10:29 PM
There are two ways to get your links. The first way is to view your profile. From there, simply copy your links. There are a couple of links that have a "&MyToken=(bunch of random letters and numbers)" added to the link. It is ok to delete everything from the "&MyToken=" part back. All the other links, keep them intact.

The second way is from a website that has been a secret for us div overlay designers for a while. And I will now reveal it to you.

http://www.bbzspace.com (http://www.bbzspace.com/)

It is a website that has several generators as well as tutorials. Be warned, the website is popular and sometimes, it will load very slow. Be patient and it will load. On the right, on the menu, click on Div Overlay Model. Near the bottom of the screen, there is an Essential Links & Codes for Overlays section. All you have to do is enter you Myspace link and it will generate the links for you. However, I found this to be extremely slow as it pulls the links from Myspace itself. So if Myspace is slow in addition to the slowness of bbz, the links will either take an extremely long time to be generated or might not be generated at all. It might be easier, but it would probably be quicker to get the links yourself.

Once you have all your links, add them to each link and then you are ready to save. Remember you are saving JPEGs and I like to use 90 as the Quality. Click Save and save it to a folder. Photoshop will generate the HTML and the all the appropriate images. You can now test out your new design by opening the HTML file Photoshop created and see your page.

You have to now upload your images. I have my own website so I just host my div overlay images there. You do not want to use a temporary uploader that will delete images on a regular basis. The reasons are pretty self-explanatory. Like I mentioned on top for the Programs needed, I recommend Photobucket (http://www.photobucket.com/). Go to the folder that you saved your design to and open up the Images folder. If you open up a couple of the images, you'll see that these are the slices of the whole image. You will have to upload all these images.

Once you have uploaded all the images, you will need to edit your HTML page. Open up the HTML page in Notepad. Using the Replace option, you will be replacing all the links. In Find What, use "images/" and replace it with your Photobucket folder or the folder on your website. Use Replace All. Be sure that your links are either fully enclosed within two quotation marks or don't have quotation marks at all.
http://www.calviniscool.com/myspace/tutorial/12-replace.jpg

Save this file as a HTML file with a different name than the original just in case you mess something up. I usually just add "-online" to the original filename and that way, I know it has online links to the images. If you did everything correctly, if you open up the HTML file with the online links, it'll look the same but with your images being loaded from a website instead of from your harddrive. This is also a good way to see if you uploaded all your images especially if you uploaded to Photobucket. Having to upload 30+ images, you might have missed one. If there is a blank spot in the middle of your image, you probably missed the file when uploading to Photobucket.

Once the HTML file has been edited and the images uploaded, you are ready to edit your Myspace page. Sign onto Myspace and edit your page in Safe Mode. I usually clean out everything. All my Interests & Personality, my Schools, Company ... I make it a clean slate.

Go back to http://www.bbzspace.com (http://www.bbzspace.com/) and go to the Div Overlay Model page. Select full screen. Use whatever Background Color and Div Background Color you want. However, it would make sense to make it a color that compliments your design. You find the background color of your design in Photoshop by using the Color Picker and copying the hexidecimal number.
http://www.calviniscool.com/myspace/tutorial/13-color%20select.jpg

Or you can use black or white. Black is 000000 (all zeros) and white is ffffff.

I usually use "None" as the Div Border Width and therefore, don't need a Border Width, Color or Style. I also usually leave the Text, Link, and (Comment) Header Colors blank. Check "Hide Top Links" if you want to hide the top links. I suggest you do so. It makes it look a lot better. Also check "Hide Comments". If you don't check it, your page won't look as good in my opinion. It also takes a bit more manipulation that isn't covered in this tutorial. Generate the code.

Once the code is generated, you're almost done. As the bbz directions state, copy the first block into your Interests & Personality section. You can delete all the text in between the first <style></style> tags including the tags. It won't affect anything. This first block is telling Myspace to hide certain things and display other things. Take a look at the code. In the ".div1" section, you'll see a width and height. Change the pixels to the width and height of your image. You can make it a pixel or two larger than your image to be safe. In my case, it was width:1025px and height:708px. You'll also have to change the margin-left to half the amount of your width. In my case, it would be margin-left:-512px. This is so your overlay will be centered. Also change the overflow: from auto to inherit. You shouldn't have to mess with anything else. Click "Preview" and then "Submit".

The second block is where you'll be putting in the HTML generated by Photoshop. Copy the second block into your Music section. You will be putting your own content right under the <div class="div1"> tag. So delete everything in between the <div class="div1"> and first </div> tags.

Open up your HTML page with the online links in Notepad. At the top, start selecting from "<table id=" until the ending </table> tag.
http://www.calviniscool.com/myspace/tutorial/14-highlight.jpg

Copy the selection and put it in between the <div class="div1"> and first </div> tags. Click "Preview". You should now see your overlay. Click "Submit".

You're done. Click on "View My Profile" and you should see your div overlay.

Note: This tutorial WILL NOT cover up your ads or remove them. If you remove or cover up your ads, Myspace will most likely ban you and delete you account.

Here is the tutorial design hosted on my test profile page:
http://www.myspace.com/thelightisfading



Questions? Comments? If anyone wants the psd file for this tutorial, feel free to PM me.

-----------------------------------------------------------------------------------------------------------------------

Addendum #1: Getting your Profilesnoop to work with your div overlay

Place your Profilesnoop code after everything in the "Interests" section and it will continue to log visitors.

-----------------------------------------------------------------------------------------------------------------------

Addendum #2: Adding Comments to Your Div Overlay

Use bbzspace's div overlay generator. However, remember to uncheck "Hide Comments".

Copy and paste the codes as given to you. Be careful because the generator has now given you an extra line of code to be placed into your "Who I'd Like To Meet" section. Remember to put that line of code in.

Take a close look at the code you will be placing into your "Interests" section. The highlighted section deals with how your comments are displayed.
http://www.calviniscool.com/myspace/tutorial/15-comments.jpg

Quick lesson on "position: relative"
top: -45px = moves up 45px
top: 45px = moves down 45px
left: -15px = moves left 15px
left: 15px = moves right 15px

This highlighted part represents how far up from the bottom of the screen the bottom of the comments are. If it -100, then then bottom of your comments will be 100 pixels up from the bottom of the screen. If it is 0, then the bottom of your comments will be sitting at the very bottom of your screen. Edit to your preference. Something like 25 or 30 pixels is a good amount.
http://www.calviniscool.com/myspace/tutorial/16-comments2.jpg

If you want to have your comments scrolling, use the default overflow:auto. However, if you want your comments to be all displayed without a scrollbar, use overflow:inherit
http://www.calviniscool.com/myspace/tutorial/17-overflow.jpg

This number deals with how far down the top of your comments section will be. This depends on the height of your design. A good number is about 100 pixels greater than the height of your design. You'll have to do some experimenting.
http://www.calviniscool.com/myspace/tutorial/18-margin-top.jpg

Once you are satisfied with the results, simply Preview and Submit and you will have comments at the bottom of your div overlay.

Zodi@c
05-29-2007, 11:26 PM
Must have took a while to make that tutorial? :p
But no doubt this tutorial will help many out there :)

Great job :D

erric1234
05-30-2007, 10:32 AM
Must have took a while to make that tutorial? :p
But no doubt this tutorial will help many out there :)

Great job :D
its not mine, its an older one that i found, but its pretty much the same thing

Mondala
05-30-2007, 10:01 PM
your backslide and page you did for your friend look great.

thanks for posting the tutorial. (be sure to give credit to the author if you have that info)

Zodi@c
05-31-2007, 12:00 AM
its not mine, its an older one that i found, but its pretty much the same thing

Oh .. i see

But yeah, would be nice if you give some credits if there was some ;)

erric1234
05-31-2007, 03:27 PM
well that is his myspace page, backside

suzq044
06-01-2007, 01:29 AM
hmm.. I may have to do something like this - it looks like a little image map.

elmer91
02-22-2008, 09:20 PM
I gave this a shot yesterday, all was fine and dandy until i got to the part where you have to use the website. it doesnt work. the website wont even load at all. my friend is having the same problem. i got everything uploaded into photobucket, and that is as far as i got. here is the link to the photobucket album. Photobucket (http://s205.photobucket.com/albums/bb80/elmer091/myspace/)

suzq044
02-22-2008, 09:48 PM
lol.. that's funny - i got it to work just fine last year.. lol
http://www.myspace.com/suzq044

elmer91
02-22-2008, 09:56 PM
lol.. that's funny - i got it to work just fine last year.. lol
http://www.myspace.com/suzq044

Looks good. i wonder what happened to that site.

Moncef
02-22-2008, 10:19 PM
old threads are TEH SUCX0RZ

elmer91
02-22-2008, 10:22 PM
old threads are TEH SUCX0RZ

yeah, sorry bout bringin up an old thread, but i really need the help on this.

WildmanProductions
02-22-2008, 11:27 PM
after takin a web design class I couldn't believe how simple this stuff is lol

Suz, I added you as a friend so we can be myspace buddies haha

suzq044
02-23-2008, 05:26 AM
lol wildman; sure.. why not - i dont use the page; i was just bored.

elmer91
02-24-2008, 12:07 AM
ok, i got it figured out finally. if you want to check it out, go to www.myspace.com/elmer91

TechChild
05-09-2008, 03:53 PM
Cool tut check out the one I just made.

www.myspace.com/paulgallizzi