Interface Project
November 05, 2007

Reading a book is like walking down a hallway. You start at one end, and finish at the other. Experiencing an interface is like walking into an atrium, with multiple doors around the walls, the floor, and the ceiling. (Baron 212)

My goal was to design a portfolio interface for DVD, CD and web delivery formats which can be used to present my creative work, consisting mostly of sound design. My portfolio needs to have three "galleries" which relate to my main categories of work: sound design, music, and multimedia. Each gallery includes a menu to browse sound files and videos. I decided to work on the sound design gallery menu first and I have documented that process here. The other two menus will have a similar look but will be uniquely different from each other.

This information could be useful to sound designers interested in making more professional portfolios or even people interested in creating some eye candy with AfterEffects. This is process documentation written for myself and not a tutorial. However, you might become inspired by some of my ideas and techniques.

Sound design portfolios are very nontraditional. For the most part a sound designer's portfolio can be approached in the same way as a digital artist's but with one major difference. Artists are generally better off not using background images as not to distract the viewer from the content. An interesting background image will not likely distract a listener from sound design though and good visuals can even make the sounds more memorable.

My idea for the portfolio's visual style started with an animated DVD menu background. I hoped that by creating this movie I could solidify the theme. I was inspired by some science fiction films featuring artificially intelligent machines such as Bladerunner, The Matrix and 2001: A Space Odyssey. My intention was to create a looping audiovisual backdrop that that looks like an androids mind at work. Well...I do not know what that would actually look like or if robots could ever be self-aware but with artistic license at my defense I took my best shot at it.

Approach

	After Effects is a powerful 2D compositor that can be used to create stunning visual effects backgrounds without the lengthly rendering times usually associated with 3D.

Sound Designer Randy Thom wrote a very interesting paper called "On Being Creative" that resonates with the way I work. In it he states that "The frame of mind in which interesting things germinate is often more confused and desperate than organized and confident. Being creative is balancing precariously between, or shifting back and forth between, these two extremes." He gives this very important advice: "Begin each project with few assumptions about the methods you will use. Let the needs of the project, most of which you won't know until after you've gotten your feet wet, determine your approach."

I went into this project having little understanding of how to approach it but at each step something happened that gave me the impulse to try something else. I let technical mishaps and happy accidents guide me toward a more solidified understanding of what I wanted the portfolio to look like.

In order to create the animated background, I experimented with Adobe After Effects and some assorted plug-in packages. I knew that by cutting some corners most of my goals could be achieved with a 2D animation program. This would keep my render times much shorter than if I were to animate in 3D. This animation was done entirely on a Dell Inspiron 700m running Windows XP SP2 with a 1.6 Gig Centrino processor and 500MB of RAM.

The very first thing I needed to do is determine an appropriate aspect ratio. I wanted a widescreen look for the menu, so I decided on DV NTSC 16:9 Anamorphic with a resolution of 852 x 480. This wouldn’t be too much of a burden for my laptop and the extra width would give the piece a wide cinematic appearance. I set the frame rate to 24 and the length of the composition to one minute. At this point I was ready to dig in and get creative.

Grids

To make the background look technical, I created some horizontal black and white lines in Photoshop which I then imported to my After Effects composition. A partial mix of these lines would give the animation a CRT monitor look. I also created some very thin grids and animated them with keyframes in such a way that they constantly expand outward from the center of the screen--an infinite focus into smaller and smaller subdivisions of a latticework. I remember seeing something like this in Carl Sagan's Cosmos when he was explaining infinity.

Light Beams

	I created a big morphing ball of light and swirling particles. This gave me something to start manipulating into moving patterns. At this point I had not started working with color yet, just shapes.

I then wanted to create something organic that embodied a vision of life energy, thoughts and feelings. The image of sunbeams reaching beneath the surface of clear ocean water came to mind. I decided to create light beams radiating roughly from the center of the screen. To do this, I needed some moving blobs that would act as radiation points for light rays. As long as the blobs kept changing shape and moving around so would the beams. I set a DV camera up in front of a lava lamp and got some closeup footage of hot wax blobs dancing around in the oil. Although it looked very interesting, the wax had too much of an up and down movement to be usable. The movement had to be more uniform and circular. I ended up using Tinderbox Plasma to create some animated fractals. This plug-in gave me all the capability I needed to create organic shapes and movement. I assigned a Boris plug-in called Rays Radiant Spotlight to the fractals and soon had a natural flowing cloud of light. Wanting to add more detail and movement to the light rays I added some watery refractions and tiny floating particles. I animated the particles to further give the illusion of forward movement.

Reality Check

By this point I was really starting to build out the sequence. After Effects plug-ins feature an enormous amount of numerical adjusters and the process of adjusting them can be slow and tedious. Unlike audio software, which allows one to preview adjustments in real-time, most video compositing processes are calculated non-real-time and the only immediate feedback is a single frame preview. To help get an idea of what things would look like when completely rendered out, I created many RAM previews, which are draft renderings written directly to memory. Once in a while, I rendered out the work to a file and while playing it back, took notes on what needed to be tweaked. Because I was stacking up more and more layers and plug-ins, renderings and previews took continually longer to produce. After Effects became a bit unstable because I was running out of memory and CPU cycles. In order to remedy this, I rendered out what I had so far, imported the footage into an empty composition and then added to that. Sometimes I had to backtrack and make changes to previous compositions. Although I had to work on multiple AfterEffects compositions simultaneously, the separation really helped to keep my main composition lean. Another great benefit is that by mixing down portions of the work it can be manipulated in new ways, such as with cutting and re-sequencing, which then inspires new creative approaches.

Kaleidoscope

The light waves and particle effects were looking too organic in relation to the grids so they did not combine well. I decided to run the background through a plug-in called Mehdi Kaleidoscope 2. This gave the organic stuff a more geometric and techy look. Kaleidoscope is a very flexible and fun Photoshop plug-in with a lot of parameters. Although it is possible to use Photoshop plug-ins in After Effects the parameters can not be keyed. This was rather unfortunate because Kaleidoscope can produce a beautiful range of soft geometric patterns—the thought of animating them over time was enticing. Nonetheless, just running animations through the static filter was cool. I programmed a few variations and sequenced the settings in series so that over the course of time the geometry changed. Throughout most of the animation the effect is quadratic so that each quarter of the screen is identical. Other times there are so many facets that the screen looks like a blooming flower. Overall I think that the Mehdi filter has given the imagery an interesting psychedelic vibe.

Spheres

After running what I had done so far through the Mehdi plugin, my particles had become part of the background texture, no longer giving the impression of movement through 3 dimensional space. In order to regain some of the 3D look I decided to add something that looked like the wax blobs in my lava lamp experiment. I decided to create some spheres using the Trapcode Particular plug-in. With Particular I was able to animate the spheres so that they looked like bubbles rising through turbulent water..

Raining Data

Next I created raining text streams, somewhat resembling a visual effect featured in The Matrix. In order to do this, I used a plug-in called Text Anarchy, which allows text to be moved along preset paths. This is a fairly common technique used in web design, and it is especially easy to do with vector graphics programs such as Flash and Illustrator. Unique to Text Anarchy though, is the capability of randomizing the text, including the characters, spacing, timing, opacity and path placement. I decided to create three types of animated text: thin slow drips in the background, tiny scattered rain drops in the mid ground, and fast horizontal and vertical sweeps in the foreground. In order to blend the effect in with the background better, I applied a filter called Trapcode Shine to the rain. This enabled text with high brightness to glisten lightly. It took a bit of trial and error to sequence the text so that that characters and paths did not cluster up or overlap too much.

Music

For the DVD menu I created a soundtrack featuring a slow two-note chanting sound which I felt would work well with the psychedelic visuals. I then created a droning sound underneath by mixing in a patch created with MHC Space Synthesizer, and then some sitars. For some added detail I mixed in some special effects sounds and a bit of light drumming.

Here is a sample of the background animation with music, before adding the interface controls:

Background Preview

Interface

Does your work display a unique flavor? This question is subjective but goes to the heart of your portfolio. If your profession is style-based, your portfolio and all the work within it should express a personality. (Baron 29)

In order to make the interface buttons blend nicely with the background rather than just lay on top I considered making them translucent. To experiment with this idea I imported the animation into 3ds Max and created an array of small glass balls in front of it. I applied a raytrace material to spheres to make them glass-like and gave the the light coming through them a blurry smokey quality. After adjusting the material to my liking I rendered the animation out as a PNG sequence and hid the background, except where visible through the spheres. This series of images was imported into AfterEffects for compositing.

This is the first time I worked with still image sequences rather than uncompressed AVI files. By using a PNG format I was able to preserve the alpha channel so that the buttons floated on top of a transparent background, something I could not get to work as simply by rendering to AVI. What was especially convenient is that I could stop the rendering at any point and later continue it from the point that I left off without having to make any adjustments. In fact, there does not seem to be any disadvantage to working with image sequences and it only makes the compositing process more flexible.

Unfortunately the buttons looked better when the glass was less see-through with no surface reflections because my eyes needed a place to rest from all the background activity. Despite how nice the glass buttons looked, I decided to go with opaque circles instead. What I liked about this is that the buttons took on a very clean and functional look which contrasted nicely with the entertaining background effects.

I wanted to give myself enough buttons to support a large collection of work, but also be able to turn them off so that there is always space for new content. Unused buttons can be crossed out which shows that the portfolio is a work in progress. I figured that 16 buttons would allow for more than enough links. It took some experimentation to come up with a button arrangement that looked good on top of the entire animation. The background is so different from moment to moment that a button arrangement could look really good one second and really bad the next. A somewhat circular arrangement worked the best overall.

To help make the buttons look more futuristic I added circuits along the left and right sides of the screen, an image made in Photoshop by bending geometric shapes around with the "Liquify" tool. I imported this image into AfterEffects and adjusted the blending for a translucent effect. As a final touch I added some animated water droplets to the circuits using Tinderbox Condensation.

Here you can see how the portfolios are mapped out— They both follow a very simple and logical structure. In the web version my biography, resume and contact information are available from any of the three galleries and one can easily switch from one gallery to another. Because the DVD is much lower in resolution, the interface will be simplified so that there are fewer links on the screen. Different pages are accessible from the main menu so in order to switch to a different gallery, one must exit out to the main menu (there is an exit button in the bottom center of the screen).

Authoring the DVD

One of a digitally based portfolio's conveniences is its flexibility. The same content can be packaged in a delightful variety of ways, depending on your needs and your available time. You can begin simply with a small selection of work collected in a PDF, opt for a short slideshow presentation for a client pitch, or move to an interactive website or CD. A well-organized digital file lets you shift elements in and out for multiple presentations almost as easily as you might slide something into and out of a binder. Even nicer, the work you collect in one format can become the basis for a more comprehensive and sophisticated portfolio as your technical knowledge broadens and your body of work increases. (Baron 59)
My gallery interface design evolved from a mixture of concepts that I formed while working on both the DVD and web versions of the portfolio. Designing the portfolio as a web page was probably the most important goal as this is how most people encounter my work. However, I would not have been able to design my web portfolio without making the DVD interface first. Basically I used the DVD interface graphics to create the web interface. After mapping out the website I had a better idea of how to arrange the media on the DVD. This back and forth interaction resulted in a design that is consistent and well composed for both formats.

Each media file is on a different page which includes a unique still image of the DVD animation. Being able to browse through the portfolio and see different images in the background while checking out the media (much of it being sound related) makes the experience more like a gallery visit. On the DVD, the background animates on the home screen only. The web version does not include this animation but does include some simple flash button animations to give the interface a more interactive and responsive feel.

Although I am pretty experienced as a web designer this project was my introduction to the craft of DVD authoring. Before I could do any sort of DVD menu design I had to figure out what software to use, a task that was more challenging than I anticipated.

I compared two authoring packages to see if either one would be suitable for creating the DVD: Adobe Encore 2 and Mediachance DVDlab Pro 2. There are good reviews about both of these programs and they seem like the main choice so far for DVD creation on PC's. Encore is hailed for something called "Adobe Bridge" which integrates AfterEffects and Photoshop for menu design and editing. While Encore is a more professional package, most agree that DVDlab Pro is more flexible and feature abundant.

As an experiment I used the graphics I had completed for the interface and attempted to set up an interactive DVD menu with the animated background. To do this, I first evaluated Adobe Encore 2. After a very lengthy installation I tried to import my background animation. There were a couple of problems. First, Encore would not accept a movie that was 852x480 and declared that it had to be a DVD compliant size of 720x480. The inability of Encore to make this adjustment internally required me to re-render the file from AfterEffects so that I could actually get the file to import. The second problem I encountered was that the movie was horizontally squashed after import. I was not sure if this was caused by settings I made when I rendered the movie out of AfterEffects or perhaps some settings I needed to adjust in Encore. I researched this problem first by checking out the help section in Encore where it is stated that televisions use rectangular pixels rather than square ones. It was necessary for me to set the pixel aspect ratio to 1.2 so that Encore knew how to display the movie properly. I did as the help section instructed and right clicked on the file to adjust the pixel aspect ratio settings. In a dropdown list I could see "Interpret Footage..." which was exactly where I needed to go but it was greyed out and I could not open the dialog box. I spent hours trying to figure out how to access this feature to no avail. Weather was a bug or a feature, I could not tell. In order to remedy the problem I went back to AfterEffects and rendered the file out as D1/DV NTSC Widescreen (1.2) format. This created a vertically squashed movie file that looked fine when it was imported into Encore. This process was quite time consuming and Encore did little to help me out during my struggles.

Now it was time to get the buttons working. I wanted each button to have two selection states so that a selected button would be circled and accompanied by the name of the associated media file. Keeping the circles and text separate from the background allowed me to set up the interactive states. In order to do this I created a Photoshop file with circles positioned exactly where each button should be and I kept these objects on separate layers. After importing the PSD file as a menu, each layer became a different button. When I laid the buttons on top of the animation they lined up perfectly. With the Adobe Bridge function I was able to make further adjustments to the buttons in Photoshop so that the circle and text was visible only if a button was selected. I was able to preview the interactivity and menu animations in a special window which emulated a television screen and remote.

I found Encore's interface to be rather cramped and its features hard to learn. The "Flowchart" feature, which allows one to map out the DVD looked nice but was very non-responsive to editing. Trying to make connections between different buttons, menus and media content using the flowchart was often frustrating. Moving or deleting one of the items in the flowchart was sometimes impossible and a look in the help section usually revealed no answers. I often found myself on the Adobe website searching endlessly for an answer to the simplest of problems. Occasional bugs would require me to restart the software and when previewing movies the audio would turn on and off continually. After two frustrating days of DVD authoring with Encore I was looking forward to uninstalling it.

DVDlab Pro 2 has a much smaller footprint and took considerably less time to install. It accepts a large variety of audio and video formats for import but not uncompressed AVI such as Encore does. Mediachance states that encoders are bundled in with all other video and DVD burning software so the inclusion of the encoder would have been a redundant expense. Therefore before import I reduced the resolution to 720x480 and encoded the movie to mpeg2, the standard format that all DVD players use. The movie imported to DVDlab with no problems.
I then imported the menu I created in Photoshop and each layer automatically became a seperate button. By right clicking on the buttons I was able to set up links to different menus and media files. Although I could not preview the background animation with the buttons, the "simulation" feature allowed me to test button selection order and menu navigation. I had the menu looking right and working properly within just a couple of hours.
DVDlab is very easy to understand and the help file is excellent. If I put a keyword into the search function of the manual, I got some very relevant and detailed information. The Mediachance website is full of great tutorials and an active forum of DVDlab users.

Keep this thought in mind when considering nontraditional digital portfolios: a successful end result requires a strong visual foundation of design sensitivities coupled with equally strong technical ability. The successful presentation of your design evidence in digital format is a product of imagination, skill and experimentation. (Linton 162)

References:

Baron, Cynthia L. Designing a Digital Portfolio. Berkeley: New Riders, 2004

Linton, Harold. Portfolio Design, Third Edition. New York: Norton, 2003

Thom, Randy. "On Being Creative." (2007): n.pag. Online. Internet. Available: filmsound.org

[back]