October 23, 2009 @ 02:15 PM

Post: 212

Join Date: Oct 2007

Location: Los Angeles

I've done a few of these illustrated, "comic book style" Myspace designs before but this time I thought I'd show some of the process to let you guys see the amount of work that goes into one of these. Everything I do is done digitally and I use a Wacom Cintiq 21UX drawing tablet for all of my work. It's a very handy tool that I've been using for years and I can't imagine working without it.

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!
October 23, 2009 @ 04:11 PM

Post: 114

Join Date: Nov 2006

Location: NC

WHOA! Good job man!


October 23, 2009 @ 11:56 PM

Post: 212

Join Date: Oct 2007

Location: Los Angeles

Thanks man.
October 24, 2009 @ 12:21 AM
The Nation

Post: 103

Join Date: Sep 2009

thats dope! and your tshirt line is pretty fresh too! wanna hook it up with one??smile
October 24, 2009 @ 02:19 AM

Post: 47

Join Date: Oct 2009

Fucking beautiful
October 24, 2009 @ 02:24 AM

Post: 212

Join Date: Oct 2007

Location: Los Angeles

Thanks for the comments!

@The Nation Sorry man I'm broke. Why don't you help a brother pay his rent and show some support! I'll hook you up w/ extra stickers. ;)
October 25, 2009 @ 08:40 AM

Post: 234

Join Date: Sep 2009

That's simply awesome. Nicely done...
October 25, 2009 @ 10:50 AM

Post: 53

Join Date: Sep 2009

Location: ohio

that's really sick


October 25, 2009 @ 03:37 PM
Flatland Funk

Post: 4144

Join Date: Oct 2006

Location: Lauderhill,Fl

amazing work
October 25, 2009 @ 06:45 PM
3 Stripes

Post: 1223

Join Date: Mar 2009

Location: ILL

Im just wondering. How much do you get for a project like that? and how many hours did you work on it for?
October 25, 2009 @ 06:53 PM
The Kid Blaze

Post: 38

Join Date: Nov 2006

wow that's sick.
October 25, 2009 @ 09:19 PM

Post: 212

Join Date: Oct 2007

Location: Los Angeles

Thanks for all the comments!

@diaz77alex - The whole thing took me a little over a week maybe. Cost is low thousands.
October 26, 2009 @ 04:03 PM
jay tee

Post: 177

Join Date: Aug 2007

Location: Winston-Salem, NC

excellent walkthrough. thanks for taking extra time to show us all the details.

on a side note, what type of blanks are your tees printed on? im thinking i would like to grab one of those animal farm tees, its a great design.
October 26, 2009 @ 04:32 PM

Post: 212

Join Date: Oct 2007

Location: Los Angeles

Thanks jay tee. The Gno shirts are printed on Alstyle 1301s. You can read more info about them on the FAQ page: www.gnobrand.com/faq

Please login first to reply.
Back To Top