Here are a couple other concepts from this project.

You can check out the live site here.

Launch site.

This was my second time working with BuddyPress and was very pleased to find that a lot had improved since I first used it in one of my projects about a year or so ago. I was also happy to find that the once small/non-existent BuddyPress community as well as the codex had both grown a considerable amount. Considering that BuddyPress is only about a year old, I’d say there is a huge amount of potential in its future.

I thought I’d make a quick blog post about BuddyPress to demonstrate how easy it is to add social networking features to an existing WordPress setup.

The first step after building the site on WordPress was to install the BuddyPress Template Pack. Basically, what this plugin does is it moves the necessary BuddyPress templates to your WordPress theme directory. After that, I edited each BuddyPress template (which was conveniently listed by the plugin) necessary to make the BuddyPress pages fit nicely into my existing custom WordPress theme.

Once that was taken care of, the next step was to customize the design of the Buddypress pages to match the rest of the WordPress pages. You can see what I did with the Members, Latest Activity, and Profile pages below. Click the images to enlarge.

There were also certain BuddyPress features that I thought Kevin (aka KevJumba) would be using a lot such as “Site Wide Notice” so I made sure to make those features stand out. Now, every time Kevin makes a site-wide notice, the Welcome box will expand for all members at which point the user has the choice to close the box if they wish. Pretty cool, huh? :)

Lastly, I needed to hook up a forum to the site to have a place for all members to congregate. This was one of the areas where I had a bit of trouble. BuddyPress comes packaged with a forum of its own but in my opinion, it is a bit confusing to your average user since a member is always required to join the particular “group” associated with the forum before being able to post in that forum. I can see the reason for this but for this particular site, I wanted to make everything as user-friendly and familiar as I could. Basically, I was looking for your everyday vBulletin-styled layout.

After trying out several other forum plugins, I ultimately decided to go with WP Forum Server which is an awesome, highly-customizable plugin for WordPress. Best of all it integrates perfectly with WordPress/BuddyPress.

Here is how the forum turned out.

I hope you were able to see how easy it was to get BuddyPress working with an existing WordPress setup. If you have any questions, feel free to leave a comment!

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.

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.