Chronicling the Creation of Some Volumetric Light

    Recently, I created an introduction sequence of sorts with 3D volumetric lighting in After Effects by using a tutorial from Video Copilot (you can find the tutorial here).  It was a fairly simple project, primarily focusing on using adjustment layers to modify the composition and using null objects being tracked by lights to create the illusion of 3D lighting.  I'm quite happy with the end result, which you can find at the bottom of this post if you don't feel like reading my ramblings on the creative process.

     This is how I began my project.  A simple pre-composed text layer containing my spirit font, Futura, and a grey solid to represent the floor.  I changed them to 3D objects so I could rotate them, and then added a 2D black solid background.


    After that, I added a point light and a null object, and set the light to track the null object, which let me control how the light shined through the letters.  I then made a white solid and used the ellipse tool to cut a circle out, and created an adjustment layer with the CC Fast Blur effect to create the blurring around the light source.

    I then added some "smoke" to the scene by creating some solids with a Fractal Noise effect on them, making an ellipse, creating a Solid Composite effect on the layer, and setting it to the Screen blending mode.  I also set the floor and light to the Screen blending mode, so that they would all be visible even if they were laying on top of each other.  I also began to play with color curves at this point, giving the smoke and light a slight reddish-orange tint.  I then duplicated the smoke layer twice more and gave them each a different size and distance from the camera.

     Though it's hard to tell due to the small image size on this post, I then duplicated the text layer twice and gave them a Bevel Alpha effect to create more depth.  I also began to give the smoke clouds some animation, keyframing the evolution of them so that they would swirl around in the background.

    After all of this, it was mostly just polishing.  I continued to play with the color correction, giving the scene a deeper, more orange hue.  I also changed the mask feathering on the light source, so that it blended into the smoke clouds, rather than being like a large spotlight shining through.  I also added a camera rotation to the scene, to show how the light shines through the letters at different angles.  After that, I rendered it out and felt awfully good about myself.

    All in all, I really enjoyed this project.  I definitely enjoyed learning about 3D lighting in After Effects, and I also learned more about how adjustment layers work.  (Also, I indirectly found out how to make a decent smoke cloud.  So score on that, as well.)  I think the hardest part of the tutorial was just playing around the the smoke clouds and light source to get them to look well together, because the actual lighting aspect was fairly easy.  My favorite part was working on the Fractal Noise effect, trying to find a good smoky look for it.  I feel as though the settings I ended up with look pretty good, if I do say so myself.  I'm very happy with my final product, with my only major complaint being that it looks like the type is floating above the floor.  However, I couldn't fix that without changing the font, and given how I love Futura that was not an option.  Still, that's a pretty minor issue, and I still enjoy the end result.

Responsive Web Design

    Responsive web design is the practice of making websites that are easy to view across all devices, be it tablets, desktops, or phones.  This is important because it reduces the cost to maintaining only one site (instead of separate mobile and desktop sites), because of the rising use of mobile devices, and because it enhances user experience.  Responsive web design can be achieved through use of media queries, CSS declarations that can alter the style sheet based on the device being used to view it.  One aspect of these media queries are breakpoints, which change the layout once a certain browser width has been reached.  For an example of responsive web design, I found the Boston Globe's website (http://www.bostonglobe.com/).

    This is the main page displayed on a desktop monitor.  The font and images are large, and there's even an ad in the upper right.  The navigation bar at the top covers all the categories of the paper in addition to a search bar.  There are three main columns, one for major stories to the left, another for smaller stories to the right, and one for the ad and tweets from their Twitter on the right.  The content spans across the entire page, and it makes use of all of the space it has.

    This is the main page displaying as it would on a tablet.  Notice how the entire right column with the ad and tweets has been removed to save space.  Only the columns with stories remain.  The font and images are smaller, but still easily readable, and are the main focus of the smaller view.  The navigation bar has been reduced to only three main tabs with sub-tabs and the search bar to save screen space.  The main focus of the content is still the stories, but it is made even more evident in this view due to the lack of the right column.

    This is the main page displaying as it would on a mobile phone.  At this point, due to the lack of screen space, there is only one column with the major stories.  The text and images have been shrunk quite a bit, but are still readable (maybe with a BIT of work).  The navigation bar has been condensed even further, with only two main tabs and the search bar becoming a button that you need to push, rather than a text field.  The main content (and pretty much the only content) on this page are the main stories, which are the primary focus of the site.  As such, even though the layout is much smaller, the point of the site still manages to be put across.