Mike McLin's Online Portfolio

InvestmentHomesDirect.com

Designed in Photoshop, this website uses WordPress as a CMS. The theme heavily uses custom WP queries and custom fields. The majority of the visual effects are done using jQuery. The “Property Calculator” web app was based on an old Microsoft Excel sheet that the company was using in-house. I wrote a custom PHP/Javascript app to bring it to life on their website.

Web App: Humanoid Art Lab

Originally intended for Flash, this web app eventually saw the light of day using the power of PHP and jQuery. This web app allows customers to create their own board graphics. After creating the graphics, they can then save, share and purchase the board. This app was extremely complex to build, and there are so many variables taking place. Deciding not to use Flash really brought the creativity out of me. For example, rotating graphics, which is simple in Flash, all of the sudden had to be rethought using Javascript. Eventually, I created a jQuery plugin that used the jQuery UI Slider to switch between various rotated images of the same graphical asset. Other challenges included having to be able to change the size, color, and scaling of text. At the end of the day, I used a text-to-image PHP script, and plugged it into the app using AJAX.

3D Photo Effect for LearnWake

This was an image sequence shot with a Nikon D200 camera. I brought the sequence into Photoshop and cut the rider out of each shot. Then, in After Effects, I created a 3D world and placed the photos into the composition. Finally, I took an After Effects camera and made the animation. This is a small piece of a larger video that I created for LearnWake.com. Narration in this clip is by Kyle Schmidt.

McLin Digital Logo Animation

The 3d model was created and animated in Autodesk Maya. After creating the model, I imported it into Adobe After Effects and spruced it up with some secondary animations. The transition to the white logo, and the ending text animation was done in After Effects.

Magazine Ad: The Book DVD

An artist used colored pencils to create the assets for this magazine ad. We then constructed the pieces and took a photo of the constructed paper model. Once in Photoshop, I had to fix several layering issues, and remove certain things like scotch tape, string, etc. I also had to create many fake elements that blended in with the original photo to make the ad look more dynamic. This full-page color ad was featured for several months in WakeBoarding Magazine.

UndergroundProducts.com

I really wanted to create something unique for the Underground Products website. This apparel company has 2 major divisions, and they wanted to build-out separate sections for both. I convinced them to do a dual-blog design, and after some jQuery magic, I made a really unique and dynamic experience. Extensive use of jQuery was used throughout so the website matched the clothing company’s edgy, modern youthful vibe. After the project was complete, I adapted the same website for their Japanese division. WordPress was used as the blog platform, and I built a custom CMS for the rest of the website.

WakeboardCamp.com

The Wakeboard Camp site is powered by a custom CMS that I created. There are a ton of features on the website, and the design is pretty modern and edgy. It includes a WordPress blog for the homepage, and how bunch of jQuery throughout. The best feature has to be the “Rate Calculator” web app that I created for them. It allows the customer to select dates to visit the camp, and then the app gives immediate feedback, like price, availability, discounts, and a ton of other things. The Wakeboard Camp can control the pricing and availability calendar easily from within the custom CMS I built for them. Although the calculator app is easy to use, don’t mistake it as a basic script. There are a lot of things going on with the PHP server script, and a ton of variables that the end-user will never know about are being used to calculate all of the information, and process the AJAX callbacks.

LearnWake Logo Animation

I modeled, animated and rendered the 3d logo in Autodesk Maya. From there, I brought the animation into Adobe After Effects, where I swapped out the 3d logo for the full-color vector version, and added the saw blade animation. I then applied some color-corrections, motion blurs, and fake reflections. The final step was adding the particles using the Trapcode Particular plugin. Sound design by Nick Murray.

TrevorHansen.com

I created the TrevorHansen logo and the rest of the website design in Photoshop. I brought it to life using WordPress. jQuery was used in several situations like rotating the custom Twitter feed in the header, and applying little effects throughout. Custom WordPress queries were used on the home page, and the “Friends” page utilized WordPress’ “Links” functionality.

GlowMobileSprayTanning.com

The client wanted a fun website that matched her clientele, so I created a dynamic homepage and header using Adobe Flash and Actionscript. The remainder of the site needed to be accessible and updated easily, so I created a custom CMS that enabled her to add products, modify pages, and approve testimonials. YUI was used for all non-Flash effects on the website.

Wake Awards Logo Animation

This logo animation is part of a package that I created for WakeBoarding Magazine’s “Wake Awards” award show. First, I took the vector logo they provided me and created and animated a 3d version in Autodesk Maya. After that, I imported the animation into Adobe After Effects, where I applied color-correction, and the light flickering effect. Finally, I added several layers of smoke/fog into the scene using Trapcode Particular. Sound design by Nick Murray.

The Book Wakeskate DVD Series 3D work

The animations in this clip are from The Book Wakeskate DVD series. I created all phases of the visual effects, including the 3d animations in Autodesk Maya. The clip below is a small sample of a ton of 3d work that I did throughout the project. Narration in this clip is performed by Aaron Reed.

OREOManage.com

This website is a unique twist on what would be a bland information page. I broke up sections of their content and placed them into WordPress pages. I then used custom WP queries to bring that content back into a jQuery-powered content slider. Other visual effects include a custom-built navigation menu and unique-looking contact form. Rich graphics and interesting text formatting gave this otherwise simple website a premium feel.

The Book Wakeskate Intro

I created this intro for The Book Wakeskate DVD Series using Adobe After Effects and Photoshop. First off, the video was shot in standard definition, and the shots were taken from the video, and not specifically shot for the intro. This proved difficult to make an exciting intro, so I came up with this in-your-face concept using multiple 3D layers in After Effects. Each video clip was brought into Photoshop for masking (cropping). The next phase was bringing them into After Effects and animating them to go along with the music.

The GLOW Hummer

Using Photoshop in place of Illustrator, upon the client’s request, I created a rear, and side window decal for the GLOW Mobile Spray Tanning Hummer. Photos of the truck were provided by the client.

Flash App: Humanoid Boards

Flash was used exclusively for this web app. I used Actionscript to bring all of the pieces together. One of the more notable features is the dynamic rotating of the wakeboards. For this, I took CAD files that were provided by the client, and then imported them into Maya. Once in Maya, I skinned the boards with their graphics, and added special shaders and lights to make the boards look shiny when I animated them.