The Secret of Monkey Island:SE powered by InstantAction

Since InstantAction technology allows games to be played inside a web browser, why not integrate one of our popular games with Facebook’s extensive social network?

The Facebook integration of PlayLegions was much more in depth than the version on PlayLegions.com. Users could navigate through a tutorial and many different maps, and routes. Also, the game is integrated with Facebook’s user accounts and social feed system. Our goal was to make it simple for users to invite and challenge their friends in Legions racing mode. Check out some of the screenshots on the right – or add the app in Facebook.

Here are some of my other Garage Games web projects:

• Instantaction.com (My portfolio link.)
• PlayLegions (My portfolio link.)

The first project I worked on for Garage Games was (and is) InstantAction. InstantAction is basically a game console, similar to Microsoft’s XBOX, or Nintendo’s Wii, that you can load up in your web browser. Launching in early spring of 2008, InstantAction now boasts more than 2 million registered users from all around the world.

The InstantAction console is a complex AJAX web application. Though the application is built upon many technologies – I worked primarily with HTML, CSS, Javascript, and some PHP. I worked between the web design and the development teams to integrate our designs into the web application.

One of my first projects was applying the styles to the InstantAction messaging system panels. From there I moved on to build the layout and styling for the various game interfaces. Each game had it’s own interface in the web where the user could configure the game settings (such as level and game mode) and chat with other members of their party, before launching and playing each game.

I also helped build and integrate InstantAction’s store, game leaderboards, as well as social media and community features.

Though I primarily worked building HTML and CSS structures, I also had the opportunity to illustrate an avatar set which users could purchase.

InstantAction was a great opportunity to work directly with other designers and developers to pioneer a cutting edge web 2.0 game platform.

Here are some of my other Garage Games web projects:

• PlayLegions.com (My portfolio link.)
• PlayLegions Facebook (My portfolio link.)

This image was created when I was experimenting with a technique for creating concept art.

The technique involves creating a series of Hi-rez abstract scenes on differing layers in Photoshop. Once you have drawn quite a few of these abstractions, you begin turning on and off layers and changing their blending modes until you have something that you think looks interesting. Then you zoom in and start moving around the abstraction and start taking snapshots of interesting scenes (selecting and saving). Once you have quite a few of these snapshots – you open then separately and start developing an image from the abstract. Sometimes an idea works out and sometimes you end up abandoning it. The great thing about this technique is that often you have many abstracts to try out. If one doesn’t quite end up looking like what you had in mind, you have many others to try.

You can see the abstract that I started with by clicking on the small thumbnail on the top right.

Originally, they were going to embroider the old camp logo on a speckled gray sweatshirt and give those out to the staff for the year. I knew that no-one would wear them…

The Impact Staff at Camp Harlow was comprised of mostly high school and college kids. The camp talked to me about what they were planning and asked if I had any suggestions. I replied, “give me a couple hours, I’ll get right back to you.” I took their existing logo for the summer (that summer’s camp theme was knights of the round table) and greatly simplified it. Then I distressed the image and added some custom illustrated. I brought the idea back and everyone immediately loved them. It’s my favorite sweatshirt too.

Can Flash be used to create high quality, low file size, images?

The answer is yes! I found out that Flash is actually an excellent tool for illustrating vector graphics. Here, I illustrated an oriental style sailing ship. I drew this image from scratch.

With a company motto like “Refuse to Follow”, BowTech’s website ought to reflect a step forward into the unknown for the archery industry. Their new website utilizes many cutting edge web technologies that help overcome some common web design issues.

One of the first challenges was finding a way to tie all of BowTech’s websites together into a cohesive family. I came up with the idea of a universal navigation bar that would be included at the top of every page. Each bar would have many similarities but also have a sub menu that was brand specific. This way, users would become familiar with a universal navigation scheme, but it would present them with relevant options dependent on their location. I also included a way for the a user to preview where some of the main links would direct them.

Another challenge was finding a way to present a large amount of information without cluttering each page and dramatically increasing load times. To solve this problem I implemented a slick javascript plug in called Thickbox. Thickbox allows content to be loaded when a user chooses to view it (click this link to see Thickbox in action. I upgraded this site with FancyZoom) rather than on the initial page load. Also, Thickbox presents the information in an aesthetically pleasing overlay format that helps a user to focus on the content they are requesting. This dramatically cuts down on the loading time for users.

I also helped design and deploy a new weblog for BowTech called BowTech Live. (You can read more about that project here.) BowTech Live was designed with the idea that it would help drive repeat visits to BowTech’s website as well as allow us an easy and organized format for posting information. The best advantage of BowTech Live is that it allows users who have little experience with HTML to actively contribute content to the web.

Currently, BowTech has four major brands, each with their own website:

• Bowtecharchery.com
  
• Diamondarchery.com (My portfolio link.)
  
• Strykerxbow.com (My portfolio link.)
• Airowgun.com (My portfolio link.)

The First Baptist Church women’s logo is where digital painting and logo design meet.

The head of the women’s ministry talked to me about coming up with their ministry logo. After hearing their tag line, “Reaching out to Serve, Growing in Faith, Nurturing Friendship,” I felt that perhaps some sort of organic and natural imagery would fit and we decided on wheat. I also thought the logo would be more powerful if it had a hand-crafted nature to it, so rather than use a photograph of a wheat field, I painted one digitally. In this case I used Corel Painter IX.

During the planning stages for the new BowTech website, I thought that a powerful way for us to reach our community of bow-hunters would be through the use of a blog. What draws people to websites is changing content, and that is exactly the functionality that a blog allows for. Plus, a blog also keeps a large amount of information organized. This is helpful because any of BowTech’s websites can link to a specific category of information. Also, blog interfaces (here I used Wordpress) offer very user friendly CMS‘ so that people on staff can update the site with content without having to know a great deal about HTML and web programming.

In the end, the BowTech Live blog brings back a lot of returning traffic to the BowTech website.

Diamond Archery is one of BowTech’s brands. This website was designed to convey a sense of value similar to a jewelry commercial. Similar to the BowTech website, the Diamond site incorporates

some fancy design elements. The universal navigation is present at the top of this site, tying it to the BowTech family. Also, many of the bow pages include the AJAX loading feature that strips down the loading time of each page while reducing clutter in the design.