Derrick Johnson is a domestic life stylish coach who updates his blog with fun and creative tips and advice for those looking to spruce up their homes. He also provides home organizing services in and around the Los Angeles area.

When Derrick contacted me for work, he already had a general idea of the direction he wanted to take for the redesign of his website. The redesign needed to be young, hip and appealing to the 20s and 30s demographic. He liked the use of textures such as cork, stone, and wood as well as the look and feel of the interior of a city loft. Think Martha Stewart without the pastels and her 40-something market.

Derrick’s website at the time had the content but was lacking the clean presentation needed to attract potential subscribers and customers. There were also some inconsistencies with the navigation which made some of the pages and features difficult to access.

Together, we went through a few concepts and ended up choosing one that we both felt projected his theme precisely. White was chosen as the dominant color to give a clean, minimalist impression and light blue accents were added for an energizing and refreshing feeling. Originally, more textures such as cork and stone were incorporated but were later scrapped because I felt they were really starting to clutter up the design. I decided that leaving it nice and simple with a touch of wood would work best.

Below are some custom buttons I created to go along with the design.

For the redesign of the logo, Derrick needed something fresh to match his brand new website design. Again, we went through several concepts together, each time incorporating a different “domestic” element to see how well they integrated with the established concept.

Below is the design we both liked best and ended up choosing.

Derrick and I were both very satisfied with the outcome of this project. I wish him the best and I hope his brand new website aids in the growth of his business. Oh, and check out the live site if you haven’t already. :)

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.

Click each image to enlarge them.

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.

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! :)