• Biker Theme Nightclub - 01
    For this project, I wanted to create an icon or mascot that would be a virtual spokesperson for the company. Because the company resided on an historical site, I chose this antique gas pump as the base image for the icon.
  • Biker Theme Nightclub - 02
    Once I got the digital hi-res photo into Photoshop, I removed the background and began manipulating the image with soft curves. My idea was to create a sexy female character out of the pump.
  • Biker Theme Nightclub - 03
    My research showed that a globe like the one seen above was original equipment for the pump. So, I went to Photoshop and used the original globe as a model as I created a head for the character.
  • Biker Theme Nightclub - 04
    Here you see the globe I created in Photoshop modeled after the original Amoco globe.
  • Biker Theme Nightclub - 05
    Hair is difficult to create in Photoshop, but I was happy with this rather wacky style in a cartoonish red. 
  • Biker Theme Nightclub - 06
    With the hair over the globe, I proceeded to add eyes, nose, lips, arms, and legs to complete my character.
  • Biker Theme Nightclub - 07
    Here you see the final standing version. I used the bottom of the pump as a skirt with trim. It took a great deal of warping the image to get the curves to work correctly. Perspective was a problem as the pump body was so long, the other body parts also had to be long to stay in perspective. In real life, this character would be over eleven feet tall.
  • Biker Theme Nightclub - 08
    Besides a standing character, I also wanted to have one sitting on a motorcycle. I took this photo with my Nikon and went back to Photoshop.
  • Biker Theme Nightclub - 09
    Here are the final versions of the fictional character - one standing and one sitting on a chopper.

Biker Theme Nightclub


Overview:

Biker Theme Nightclub Home Page
Click Here For Full-Page View.

The biker theme nightclub (BTN) project was built on a custom dynamic PhP framework in much the same manner today's modern CMS platforms are designed. This meant that the site's content was coded in small parts, each in its own container. These containers could then be called by the PhP code in the webpage template to assemble the page on-the-fly. This is an excellent method of content management for sites with many pages as it allows those pages to be updated with a single edit—whereas, in the past, each page of the site would have to be updated individually. At the time the BTN site was designed, this dynamic container approach was cutting edge.

The BTN project also contained some very unique, customized design elements. On the onset of the project, I imagined a fictional spokesperson and endeavored to create one out of imagery unique to the client. A bit of the creation process is shown in the slide show above.

Biker Theme Nightclub CTA Animation

The character was designed around a vintage gas pump and took a healthy share of design hours in Photoshop. I started with hi-resolution images I took with my Nikon. Then I twisted, bent, and shaped the pump into the character (below right).

Once the character was created, I incorporated it into the site's design. My favorite design feature creates the illusion of the character popping out from behind a site panel and pointing to the opt-in conversion form. The movement catches the visitor's eye and draws their attention to the form. But the real challenge was coding it to work. The task required absolute alignment of a stack of content containers. The illusion of popping out was achieved by precisely coding the CSS z-index values to align with pixel-perfect PNG graphics with 24-bit alpha channeling.

Fictional Character
Click Here For Full-Page View.

Another design shows the fictional character sitting on a chopper. Again, this took some serious warping in Photoshop, but in the end, I achieved the goal.

I started by wandering about at some bike exhibits searching for a candidate. I came across the red chopper and took some hi-res images with flash that came out bold and bright. You can see the original image in slide #8 at the top of the page.

Fictional Character on Chopper
Click Here For Full-Page View.
Once in Photoshop, I separated the background from around the chopper and manipulated the fictional character to give the 3-d illusion of sitting on the chopper.

The final image displayed here is a design I created as a t-shirt print. The design was created as collage from several digital hi-res images and a $hitload of Photoshop editing. It never saw mass production but is displayed here as a unique work of digital art. Biker_Theme_Nightclub Vivid T-Shirt Design