How to Create a Div Overlay Layout for MySpace Using Photoshop

For awhile a good friend of mine wanted a custom made Div Overlay profile to promote her business. After helping her talk to several designers and establishing that it would cost a minimum of $100.00 to get a layout designed we decided to see if I could create a Div overlay for her to use with Photoshop and basic coding. Please keep in mind that before you try to do this yourself you need to have some basic knowledge of HTML and Photoshop.

The first thing you need to do is find a template that you want to use. In my case I choose a standard website template that was in .psd format. These can be found on various websites including Adobe or Templatemonster. Or you can create your own layout from scratch in Photoshop if you are an advanced user.

Step One

Once you have found the template you want to use, or have made your own, work with the layout until it looks PRECISELY how you would like it to look in MySpace. This means make sure all the text you want to include (Add, Message, Block, Rank, Etc.) buttons are there along with information you want the overlay to provide about you (About Me, Interests, Hobbies, Favorites). Remember when using this layout your friends and viewers will no longer be able to see the standard MySpace categories.

When everything looks aesthetically pleasing to you and contains all the information you feel is necessary use the Slicing tool in Photoshop to create all the links necessary to navigate your profile. The easiest way to make sure you get the correct link addresses is to sign out of MySpace, go to your existing profile, and click on each link that you want to be available in your Div Overlay. Copy the address that appears in your web browsers and paste it in the corresponding slice area.

Step Two

After you are completely done with slicing each section that will be linked to an address and your layout looks the way you want it you are ready to save the layout. Go to "File" and choose "Save For Web" in order to save the HTML and Images necessary to complete your overlay.