Motion graphics logo reveal for Sentinel

Posted by & filed under Articles.

As well as operating my bread & butter freelance web design business I have recently been devoting more time to learning motion graphics techniques and finding some practical applications.

I developed the logo reveal piece that you can see below for an upcoming server and website monitoring product called ‘Sentinel’.

Sentinel is primarily a web based service that scans your website or server to check if specific services are running.

I wanted to visualize the scanning process and imagined a futuristic robotic style eye that scanned objects with a beam of orange light (yes I possibly have watched too many sci-fi movies).

This was created using Adobe After Effects with Fractal noise, CC Sphere, and a little bit of Trapcode Form. It was also created by lots of learning and the great resources from Andrew Kramer’s and John Dickinson’s If you are at all interested in motion graphics then I highly recommend checking out their sites.

I also made another version of the scanning effect and used it as the background animation for sentinel beta website. It takes a few seconds to load as it’s about 150KB.

To do this I rendered out an FLV from After Effects, used it as the basis for a Flash movieclip and then overlayed the text that I wanted to appear. I changed the blend mode on the text so that it would only appear during the brightest parts of the underlying animation and then rendered out a .swf movie. From there I inserted the swf into a web page, set the wmode to ‘opaque’ and then stacked the html elements over the top. Pretty straightforward but very effective.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>