We started her project by looking at lots of imagery, which I posted on the online interactive whiteboard  service Stixy.com. She told me she liked blues and greens, and gave me exmples of a few other sites she liked that had both a retro/cute factor and a certain sex appeal. This gave me enough direction to get started and what emerged was the desire for a nostaligic feel with a modern twist.

The above image caught her eye for a number of reasons, mainly because of color, but also for the imaginary fuzzy memories it seems to evoke. The ones that followed were from photos of found graffiti along with pinups and airplane bomber girls.

She definitely wanted to have a woman as part of her logo, so my job was to find a perfect pose and create the logo from it. From this point on it became a game of cutting and pasting pinup girls, turning them into digital “paper” dolls, with me manipulating their limbs this way and that until I got the perfect pose.

From here, however, I would need to get a model to put in this pose as plagarism is not my strong suit. I didn’t want to rip off anyone else’s work, so I set to finding a model.

Since I don’t have a lot of female friends who are pin-up models, the simplest thing to do was get on Flickr and contact a girl that might be interested in posing.

Turns out the perfect girl lived in Sweden, but she will willing to do the job remotely for a fair price, so I hired her to do the pose. Incredibly, she took her own photos and posed from her living room, and was able to make the necessary changes to get the perfect angles.

Once I had the reference photo, I set to work on adjusting contrast and some slight figure adjustments, and had my girl.

I put her in illustrator and once I got her looking the way I wanted, added some type. I used a font called “B-Movie” as the basis for the logotype, and made changes to the letterforms here and there to give them a more rounded feel. I left them alone for the “Served Hot” bit.

Now a theme was emerging and I discussed the idea of creating an identity that harkened back to old diner menus, which was well-received. This would also translate well for a webpage. I wanted to create a sense of playfulness on the page, and came up with some restaurant terms for the navigation, such as “Daily Specials,” “Our Entrées” and “Hot Plates.” Spinning off of this was a “Motto,” which was sometimes put on family diner menus, and “Hot off the Grill,” for press releases.

I built the site on the ExpressionEngine CMS platform, which to non-web people means that she can edit the website herself with the help of a fairly sophisticated framework that allows for password protected photo galleries, automatic press-release formatting, and fancy magazine flipbooks. Visit High Profile Media online.

The logo has subsequently been put on posters, t-shirts, basketballs, etc. and has been printed in 2-color and one-color. The folks at the Scoring Factory decided they wanted a more streamlined version with more emphasis on the words, so I created the variation below, which has been well-received.

When it came time to create a promotional poster, I was given this image of a basketball player taken with a point-and-shoot camera. The background was shadowed and busy, so that made cutting out the image rather tedius.

Luckily, there are two tools available to designers that allow them to get around such obstacles: creativity+Photoshop. When I have a low resolution or grainy image to start with, there are a few ways to go.

I chose to reduce the image to black and white, and then colorize it. From there, I wanted to give it a feeling of crazy motion. I added some diagonals for dimension, and brightened the color for impact.

As it happens, they wanted something more conservative, so opted for a version with a plain gray background. I still prefer this one.

The logotype was loosely inspired a bit by the Allman Bros. script, and they wanted something that would also work as a monogram. After some experimenting, I decided to keep it fairly simple, and dropped the swash from the final “E”.

While looking over old album covers from the 70s, I came across some script from an old Crosby Still & Nash album that servied as the inspiration for the photo styling. Coincidentally, the lead guitarist had a giant Malamute dog, but since we weren’t doing a parody of the cover, it wasn’t a consideration.

They didn’t have the budget to fly to Austria for the photo shoot, so I worked remotely art directing the photographer. This group of musicians was extremely low-key, and no elaborate styling was going to work.

Above is the original photograph I received from the photographer. You will notice that in addition to the color toning, I added a burlap texture, and did some touch-up on each member, including adding the monogram I created on a t-shirt.

On the inside of the package, I wanted to continue the wood texture, which ended up on the CD itself, and for the booklet I added more color and imagery inspired from the song lyrics.

Both the homepage and the “Team” page have videos playing in the TVs. The “Team” page also has skater photos and bios.

The “Products” page has two sections built in, T-shirts and Boards. Each thumbnail changes to a large image when clicked on, and the product information and pricing changes. All the prices are dynamically loaded from external text files, which can be easily updated by the client. This site has PayPal integration for checkout.

Upon page load, there is a short animation of a skater silhouette that comes down the curve and jumps over the edge before skating off the right side of the page. Visit False Profit Skateboards.

A more recent development was their desire to have their website contain dynamic pricing and apply their pricing structure to the current price of platinum and gold. I helped them come up with a formula that would allow them to input the fixed price information, and then the formula would be applied with the dynamic price of the day for gold or platinum. This way all the prices on the site would be current and it would save them time re-calculating prices at their desks.

In the bridal section there is the option to view rings in groups of four, one at a time, or all at once on a long page. In addition, the side has video and a blog, as well as searchable database of local jewelers that carry their product.

On the detail pages, each ring has a quote associated with the name, to enhance the unique quality of each piece. In addition, alternate views of the rings are shown in thumbnail size at the bottom of the page.

This site also has a custom admin page where the client can upload new ring photos, descriptions and pricing, and re-arrange the order in which they appear on the site.

Update: This client wanted to make their site more search engine friendly, so we reduced the size of the Flash animation on the home page, and added quite a bit more text and links. Here is the updated page design.

]]> http://www.wraycodesign.com/archives/611/feed 0 http://www.wraycodesign.com/archives/12 http://www.wraycodesign.com/archives/12#comments Mon, 20 Jul 2009 22:18:15 +0000 MLAW http://wraycodesign.com/blog/?p=12

I have always been a fan of the super-realistic effects you can get via the Gradient Mesh tool in Illustrator. Since I envied others being able to do this, I decided to put some effort into trying to achieve this myself. Turns out it wasn’t so hard for me once I had read through a couple of tutorials and did some experimenting. It just takes a lot of patience. Underneath that beautiful skin is quite a scaffolding of lines and points.

Each point must be positioned in a very exacting fashion so as to allow the soft color gradient effect to flow in the right direction.

This type of illustration is also called “vector”, which means, among other things, that it can be scaled up to any size without losing its crisp sharp edges and detail. Photographs, on the other hand, cannot gain any more detail than the original image, and once they have been made smaller, they cannot be enlarged again. Notice below, the detail of the eyes and flower stem.