Hi, my name is Keebs and I'm an illustrator/designer/developer.

I recently finished designing and developing a website on Ning with DJ Scratch (formerly of EPMD) and the result was incredible. The final version can be seen live on DJ Scratch’s ScratchVision. Here I will attempt to detail the process that I went through to create just the header illustration portion of the website design.

Note: All of my work is done digitally with a Cintiq drawing tablet. The two programs I used for this project were Adobe Photoshop and Adobe Illustrator.

Click each image to enlarge them.

First, I open up a new document in Photoshop and I lay out the basic composition of the image to see how all of the elements relate with each other. I typically use a light blue brush during this process. This way I don’t have to worry about messing up my clean sheet of “paper” with black ink and can get my ideas down faster. After a lot of erasing and repositioning, the rough draft is finished.

Next, I create a new layer on top of the rough draft, select black and outline the messy blue lines to clean up the drawing a bit.

Sometimes, if more work is needed, I create a new layer on top of the black layer to clean it up even more. In this case, I left it how it was. Next, I import the image into Illustrator for the outlining process to really tighten up the drawing. There are times I outline the entire drawing and there are times I outline only specific elements. This was a case of the latter. Only the character was outlined since I had plans to finalize the rest of the drawing using strictly Photoshop.

In Illustrator, I usually use a custom calligraphic brush set at a 70° angle, 70% roundness, and a diameter of 3pt or 4pt. This way I can use my pen’s pressure to vary the width of each line. Next, I import the outlined drawing back into Photoshop and place the character in position on a separate layer. Then, I (very roughly) start blocking out the elements with the base colors under the outline layer to get an idea of how the final colors will be displayed.

Now comes the most time-consuming part of all: the rendering. This might be the most time-consuming part of the process but it’s also the most fun for me because this is when the drawing starts to really come alive. I start out by lowering the opacity of the rough outline layer and start the work with our main character. After maybe a couple hours, the character is nearly finished.

Next, I work on the project buildings in the background, one of the turntables, and the trees. Note: I imported a few layers from the last project (ScratchVision V.1) I did with DJ Scratch (the trees and the sign) because I felt they fit perfectly with the new design. Since the turntables and the buildings will be nearly symmetrical to mirror the symmetry of the turntables, I only do the shading, lighting, and texturing for one side so I can flip it horizontally to match the other side when I’m finished.

More rendering on the buildings, turntables, trees, and mixer = Hours and hours and hours of work.

Now that the rendering is about 90% completed, I can create duplicates of the layers and flip it horizontally. However, not all of the elements align perfectly so I have to redraw the tone-arm and readjust the perspective of the pitch control for the left turntable.

I add in a background with a nice, bright moon as a light source and some clouds and also add more shading, lighting, and texturing to each element to make them “pop” a bit.

Finally, after hours of work and 200+ layers in Photoshop, I put on the finishing touches and (voila!), the illustration is completed. :)

I hope you guys enjoyed this little process bit I put together. I’m planning on making these every now and then for my new projects so if you like what you see, you can subscribe via RSS.