Custom MySpace Design Tips From Professional MySpace Designers!

Look down your shirt. Is there chest hair? (Or cleavage)? If not you've come to the right place. (Yes, our Luchatorials will grow you chest hair/cleavage.)
What we mean is, the best way to do this is to start from scratch. Don't wuss out and grab some pre-designed MySpace theme. Most of them suck and it's not the way of Lucha Libre. DIY or Die.

But it's easier than you think...

Using a MySpace Code Generator is a great way to start your new profile. These are fancy webpages that allow you to edit MySpace's clunky CSS (that code you paste into the "about me" section) code quickly and visually. Use one of these sites to style your text, colors, borders, links, backgrounds, and custom header graphic.

Our favorite all around generator:

Coolchaser.com
Coolchaser is great for the most part, but a few odd glitches keep it from being perfect. Also, the Layout creator and Theme creator are separate which is confusing at first. You'll have to go back in and manually add the URL for your background image to your code in the about me section. For some reason, coolchaser takes an image of your background, makes it too small, and puts that in your code.


Coolchaser.com Theme Editor Section

Graphic Designers adhere to grid system for just about everything. Grid are good because they make things line up nice and tidy. Maybe you don't know about the grid, but you probably know tidy. Keep your stuff tidy. If your images are too wide, the will blow your design to Kingdom Crap. So keep all pictures, videos, and widgets at the proper size for the column they are in.

MySpace Standard Column Widths
Right Column Width: 400px
Left Column Width: 175px (I.E. if you want to put a graphic in any of the interests fields)

Nothing makes a myspace profile more chaotic than dozens of images, videos, slideshows, and widgets with all different widths. Try to keep content the same width as other content in the same column.

Resizing YouTube Videos and other Widgets
In the embed code for most Flash-based widgets (i.e. YouTube videos, Gydgets) you will usually see the pixel dimensions listed as "width:xxx" and "height:xxx" in the code. Changing those to fit the width of your myspace column. Be sure to preserve the aspect ratio. To do the math, I create a blank image in photoshop at the original size, then I resize it to fit (make sure preserve ascpect ratio is checked). Or if you're on a Mac, use this app...

Aspect Ratio Conversion Tool

There're two basic background types - static and repeating. Both work fine if done right. The problem is most of you sissies do them wrong.

Static Backgrounds
Static backgrounds are a single large image, usually fixed in place. Design around the center of the page, and be sure to create enough contrast for your MySpace content. A static background can be any size, but try to keep it a 1680x1050 pixels or smaller.

Static Background Example... (Click to See Original Background)


Repeating Backgrounds
A repeating background can be a simple 50x50px GIF that repeats horizontally and vertically, or it can be a big 1800px wide JPEG that repeats up and down. A favorite Lethal Dos Technique is to create a vertical tiling graphic that is about 1400px wide and 500px high, that has a framing element in the center so content pops.

Vertical Repeating Background Example... (Click to See Original Background)





Example: Joe has a DEX of 14 and is surrounded by 3 orcs... Whoops, wrong example. Let's say Joe wants cool Emo graphics at the top of his page. All his buddies have Macbooks with tiny screens. So he creates a background image that is 1200px wide. This gives hims 200 pixels on either side of his content to throw all kinds of Emoey swirls and junk. Anyway, he makes it 600px high and fades all of his edges to solid black (000000), which creates a perfect blend between the background image and background color. In CoolChaser, he places his background graphic and places it TOP CENTER and NO REPEAT.

Your page won't get read if your page background clashes or blends too much with your content. Come up with a creative way to frame your elements. On my MySpace page shown below, I used a semi-transparent layer to frame crap in.



On this design I went big on background graphics and lite on interior graphics. The opposite works well to - simple background graphics combine with big header graphics. On DJ Atomic Mike's site below I had the nerve to go big on both. That's how I roll.

Through custom CSS, either coded by hand or via Coolchaser, you can add a header graphic to the top of your page. I recommend using Coolchaser. It's the quickest way to generate all the code needed, plus you get instant visual feedback when changing size and placement.



Step 1. Create an image in Photoshop that will blend well with your background. It can be a .GIF, .JPEG, or .PNG.

• GIF: Can animate. Offers limited transparency (no blends). You could make a two or three frame header in photoshop (open the Animation pallete) to create a nice animated header.
  
• JPEG: Wide range of color and compression options. No transparency. If your myspace background is simple or a flat color, you can achieve the illusion of transparency by matching the color or blending the edges.
  
• PNG-24: (PNG-8 isn't worth the bother - use GIF instead) Full range of transparency and blends* (*blends in I.E. 7 don't work right) Unlike a GIF, JPEGs don't leave jagged edges if on a background that is a different color. However there are no compression settings like JPEG, so you can end up with large files.

Example:This header image is a 930 pixel wide JPEG image that blends in with the solid color background behind it. It would have been much larger as a transparent PNG, and would have lost too much color as a transparent GIF. A square JPEG was just what Cerebro ordered.

Once again we can use CSS to turn of that network status message and put an image in it's place. This is great for flyers, posters, animations, anything. Big arrows pointing down. To your cousin throwing up at that party last week. Get my meanin'? Anyway.

Create an image that's as wide as your right column (if you've changed it from the default). Put a funny message on it or a picture of a cat and save that thing. Then use Coolchaser or whatever to put that on your page. Here's how.

Coming Soon. Getting. Very. Sleepy...

Want to show off ALL of your gig flyers off ALL the time? Don't just post them one after the other "About Me". Instead, create "Gig Flyers" photo album, and then create a slideshow that pulls from that album. See DJ Atomic Mike's page for example.

.