Things are gonna get interesting.

For this project, my client wanted something fresh and unique that would stand out from other Myspace designs. Here is what the finished design looks like and it can now be seen live and fully-coded on their Myspace page.

The first step involves gathering all of the notes from the client and sketching out the panels loosely in Photoshop making sure to leave enough room for the sections the client wants incorporated such as the bio, the custom YouTube player, the social network section, and the custom comment box. I like to use a light blue when I do the sketching not for any reason in particular but just because it reminds me of my old days in animation. Animators use “non photo” light blue pencils to sketch out their drawings because they tend not to show up on copies when you’re transferring your drawings from paper to clear cels.

After the entire layout is sketched out, I go over it with a black to clean it up a bit. This is also when I put in a sample image of the Myspace music player, the YouTube player, and anything else that I need to make sure fits into the space I provided such as the little Twitter image from twitstamp.com.

Next, I start working on the text and insert it to make sure everything will look right in the final version.

When everything is ready to be outlined, I take the sketch into Illustrator and trace over each line very carefully with one hand on “ctrl z” at all times. ;) I like to use a custom brush that I created with a 70% angle and a diameter of 3. That way I can control the pressure with my pen and create nice, dynamic lines with various widths.

As you can see, some of the lines still need a little cleaning up, especially in the first panel. This is where I take the outlined drawing back into Photoshop to manually erase all of the tiny errors until it looks nice and clean like this:

Next, I start the coloring with a new layer below the outline layer. I usually try a few different color combinations to see what makes the images pop the best. Finally, I settle on one set of colors.

Now comes the most time-consuming part of all – the detailing. This is the point where I include the shadows and highlights to make everything look as awesome as it can be. This process alone usually takes me about 2-3 days to finish – and that’s when I’m constantly working non-stop. But once this part is over with, everything else is cake.

Finally, I’m ready to add all of the little fun things like sound/special effects. For this project in particular, I used readily-available Photoshop brushes for most of this stuff. One last thing I did for this design was to cover the entire thing in a very subtle red overlay because I felt it brought everything together a little more.

Once that’s finished, the next step is to create the rollovers for some of the images that will light up when hovered over, then slice up the images, and finally code it to make everything work. Firebug on Firefox is my best friend during this process. Also, luckily, I have done a few Myspace designs in my day and have pre-written code from various past designs that I usually cut and paste to save time.

Well, that’s pretty much it. Thanks for reading and I hope you guys enjoyed it! :)

Part 5 coming soon…