<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>Mark Shingleton &#187; Articles</title> <atom:link href="http://markos.co.nz/category/articles/feed/" rel="self" type="application/rss+xml" /><link>http://markos.co.nz</link> <description>Freelance Web Designer &#124; Motion Graphics &#38; DIgital Imagery</description> <lastBuildDate>Fri, 04 Nov 2011 23:41:39 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.3.1</generator> <item><title>Pet project: Comvita Science Challenge</title><link>http://markos.co.nz/2011/04/pet-project-comvita-science-challenge/</link> <comments>http://markos.co.nz/2011/04/pet-project-comvita-science-challenge/#comments</comments> <pubDate>Tue, 05 Apr 2011 09:31:12 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Portfolio]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=707</guid> <description><![CDATA[Some friends and I entered a competition to create a video for the Comvita Science Challenge. We had a huge amount of fun and quite a few late nights &#8230; but we&#8217;re really stoked with the end result so please go and take a look and if you have a vimeo account (which is free [...]]]></description> <content:encoded><![CDATA[<p></p><p>Some friends and I entered a competition to create a video for the Comvita Science Challenge. We had a huge amount of fun and quite a few late nights &#8230; but we&#8217;re really stoked with the end result so please go and take a look and if you have a vimeo account (which is free hint hint) then give us a big ol heart (like).</p><p><strong><span
style="color: #993300;">UPDATE: We Won!</span></strong><br
/> <iframe
src="http://player.vimeo.com/video/21952647?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=0" width="500" height="281" frameborder="0"></iframe></p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2011/04/pet-project-comvita-science-challenge/feed/</wfw:commentRss> <slash:comments>2</slash:comments> </item> <item><title>2011 : The first quarter</title><link>http://markos.co.nz/2011/03/2011-the-first-quarter/</link> <comments>http://markos.co.nz/2011/03/2011-the-first-quarter/#comments</comments> <pubDate>Wed, 30 Mar 2011 10:24:33 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=704</guid> <description><![CDATA[Just a really quick update as I&#8217;ve been very quiet posting here lately. It&#8217;s the virtually the end of March and this year is zooming on past. Firstly, I&#8217;m still super busy wrapping up a couple of client web design / development projects. That&#8217;s keeping me busy far too late into the evenings but the [...]]]></description> <content:encoded><![CDATA[<p></p><p>Just a really quick update as I&#8217;ve been very quiet posting here lately. It&#8217;s the virtually the end of March and this year is zooming on past.</p><p><strong>Firstly</strong>, I&#8217;m still super busy wrapping up a couple of client web design / development projects. That&#8217;s keeping me busy far too late into the evenings but the projects are rewarding and the end results will be great.</p><p><strong>Secondly</strong>, I&#8217;ve extended my contract with local software company, <a
href="http://www.cucumber.co.nz">Cucumber</a>. They&#8217;re a great bunch of folk and I&#8217;m very much enjoying working on some high profile projects with them. There is some great stuff coming out of that company and it&#8217;s nice to play a role there.</p><p><strong>Thirdly</strong> is <a
title="Sentinel server &amp; website monitoring" href="http://www.sentinelmonitoring.com">Sentinel Server &amp; Website Monitoring</a>. This started out as a project with a good friend and long time business associate, Tim Philips. It&#8217;s going form strength to strength and its continued development is the major reason why I wont be accepting any new clients for a while. We&#8217;ve done some amazing things with this piece of software and we have some solid direction for it&#8217;s future. We&#8217;re getting really positive feedback and, to once again be involved in developing something special is extremely exciting.</p><p><strong>Lastly</strong>, video production, vfx and motion graphics, are continuing to excite and enthrall me. I&#8217;ve been working on numerous small video projects here and there and have recently been approached by 3 separate agencies looking for After Effects freelancers. Guys, once the smoke clears, I would be more than happy to chat with you further about AE freelance work. Thanks very much for taking the time to make contact.</p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2011/03/2011-the-first-quarter/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>iPhone Video Enhancement in After Effects.</title><link>http://markos.co.nz/2011/01/iphone-video-enhancement-in-after-effects/</link> <comments>http://markos.co.nz/2011/01/iphone-video-enhancement-in-after-effects/#comments</comments> <pubDate>Mon, 31 Jan 2011 09:50:59 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=691</guid> <description><![CDATA[Here&#8217;s a quick experiment with Adobe After Effects and Optical Flares (from Videocopilot). I captured this quick video on my iPhone on a recent stroll around Mt Maunganui. The sun was going down throwing a stunning gold light over everything and Ash couldn&#8217;t resist a quick paddle in the water. When I got home, I [...]]]></description> <content:encoded><![CDATA[<p></p><p><a
href="http://markos.co.nz/2011/01/iphone-video-enhancement-in-after-effects/"><img
class="aligncenter size-full wp-image-697" title="Ash playing on the beach" src="http://markos.co.nz/wp-content/uploads/2011/01/comparison_teaser.jpg" alt="" width="568" height="160" /></a></p><p>Here&#8217;s a quick experiment with Adobe After Effects and Optical Flares (from Videocopilot). I captured this quick video on my iPhone on a recent stroll around Mt Maunganui. The sun was going down throwing a stunning gold light over everything and Ash couldn&#8217;t resist a quick paddle in the water.</p><p>When I got home, I checked out the video and was pretty impressed with how it came out. Not a bad little camera on the iPhone. However, it didn&#8217;t quite have that &#8216;golden times&#8217; feel that I wanted. That meant it was time to crack into some After Effects <img
src='http://markos.co.nz/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> <span
id="more-691"></span></p><h2>Making a sunset</h2><p>So the first thing I wanted was a real sunset look. And for that, I needed a sun. Enter Optical Flares from Video Copilot.</p><p>I tracked the video clip with After Effects built in tracker and that gave me a position to fix the lens flare to. I had a couple of small issues with Ash running in front of my tracking points and the tracker getting confused.  The way that I got around that was to make 3 tracks, attach them to null objects and parent them together. It seemed to do the job quite nicely.</p><p>Once I had that tracking data, I created a new solid in AE and applied Optical Flares to it. I chose one of the presets and changed a few of the elements around (must buy that new Pro-Presets 2 pack) to get the look that I wanted.</p><p>Then I created a new light and parented that to the 3d null object that held the tracking data. That made the light move along with the video but a problem that I had was that the actual sun was off the edge of the clip .. it wasn&#8217;t visible for the vast majority of the shot.  So I had to move my light off to the edge of the clip about where I figured the sun would be. By using a simple expression I could leave the light moving with the clip and the move it about 400px on the x axis to push it off to the side. All good.</p><h2>Finishing the look</h2><p>I&#8217;d love to say that I spent a reasonable amount of time creating the right color look. But I didn&#8217;t. I just opened up Magic Bullet Looks and chose one of the presets. I dropped the saturation a little and fiddled with another couple of settings and until I was happy with it. Took about 5 minutes. No real manual colour adjustment necessary.</p><p>I then added a subtle vignette and some film grain and rendered it out.</p><p>Nice and easy and a great way to kill an hour or so doing something creative with video.</p><p><strong><a
href="http://vimeo.com/19384069">Check out the video here.</a></strong></p><p
style="text-align: center;"><a
rel="shadowbox" href="http://markos.co.nz/wp-content/uploads/2011/01/comparison_mainImage.jpg"><img
class="aligncenter size-large wp-image-693" title="Comparison of video color adjustment" src="http://markos.co.nz/wp-content/uploads/2011/01/comparison_mainImage-1024x732.jpg" alt="" width="502" height="358" /></a></p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2011/01/iphone-video-enhancement-in-after-effects/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Photoshop Moonlight Composite</title><link>http://markos.co.nz/2010/09/photoshop-moonlight-composite/</link> <comments>http://markos.co.nz/2010/09/photoshop-moonlight-composite/#comments</comments> <pubDate>Mon, 20 Sep 2010 11:32:30 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=621</guid> <description><![CDATA[]]></description> <content:encoded><![CDATA[<p></p><p><a
href="http://markos.co.nz/wp-content/uploads/2010/09/ash-the-gentle-giant.jpg" rel="shadowbox[post-621];player=img;"><a
href="http://markos.co.nz/wp-content/uploads/2010/09/ash-the-gentle-giant1.jpg" rel="shadowbox[post-621];player=img;"><img
class="aligncenter size-full wp-image-627" title="ashIntro" src="http://markos.co.nz/wp-content/uploads/2010/09/ashIntro.jpg" alt="" width="568" height="115" /></a></a></p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2010/09/photoshop-moonlight-composite/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Business of Design Banner</title><link>http://markos.co.nz/2010/08/business-of-design-banner/</link> <comments>http://markos.co.nz/2010/08/business-of-design-banner/#comments</comments> <pubDate>Sat, 28 Aug 2010 03:15:02 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=584</guid> <description><![CDATA[I had a great time working with John from www.motionworks.com.au on his last banner and was really flattered when he asked me to put together a new banner for his first Business of Design product; Success with Twitter. John supplied the bulk of the imagery and I put the design and animation together. The whole [...]]]></description> <content:encoded><![CDATA[<p></p><p
style="text-align: center;"><a
rel="shadowbox;width=588;height=115" href="http://markos.co.nz/wp-content/uploads/2010/08/bod_twitter_banner_motionworks.swf"><img
class="aligncenter size-full wp-image-585" title="Business of Design Banner" src="http://markos.co.nz/wp-content/uploads/2010/08/bannerStatic.jpg" alt="" width="568" height="111" /></a></p><h2>I had a great time working with John from <a
href="http://www.motionworks.com.au/">www.motionworks.com.au</a> on his <a
href="http://markos.co.nz/2010/06/developing-an-animated-flash-banner-for-motionworks/">last banner</a> and was really flattered when he asked me to put together a new banner for his first <a
href="http://www.motionworks.com.au/category/bod/">Business of Design product; Success with Twitter</a>.</h2><p>John supplied the bulk of the imagery and I put the design and animation together. The whole thing came together really quickly and looks great.</p><p><strong><a
rel="shadowbox;width=588;height=115" href="http://markos.co.nz/wp-content/uploads/2010/08/bod_twitter_banner_motionworks.swf">View the finished banner here.</a></strong></p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2010/08/business-of-design-banner/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Photoshop Composite: Ash meets Gandalf</title><link>http://markos.co.nz/2010/07/photoshop-composite-ash-meets-gandalf/</link> <comments>http://markos.co.nz/2010/07/photoshop-composite-ash-meets-gandalf/#comments</comments> <pubDate>Sat, 31 Jul 2010 02:54:35 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=521</guid> <description><![CDATA[I found another picture of my young lad on my phone. This time he was holding a toy windmill up to a fan (He loves fans). I needed a break from cutting html and css so decided to open up photoshop and see what I could put together. This isn&#8217;t complete as yet &#8230; but [...]]]></description> <content:encoded><![CDATA[<p></p><p><a
href="http://markos.co.nz/wp-content/uploads/2010/07/ashdalf.jpg" rel="shadowbox[post-521];player=img;"><img
class="alignnone size-full wp-image-522" title="Ash meets Gandalf" src="http://markos.co.nz/wp-content/uploads/2010/07/ashdalkIntro.jpg" alt="Ash meets Gandalf" width="568" height="115" /></a></p><p>I found another picture of my young lad on my phone. This time he was holding a toy windmill up to a fan (He loves fans).</p><p>I needed a break from cutting html and css so decided to open up photoshop and see what I could put together.</p><p>This isn&#8217;t complete as yet &#8230; but overall I was pretty pleased with the look so thought I would share <img
src='http://markos.co.nz/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p><p><strong><a
href="http://markos.co.nz/wp-content/uploads/2010/07/ashdalf.jpg" rel="shadowbox[post-521];player=img;">View the large image here.</a></strong></p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2010/07/photoshop-composite-ash-meets-gandalf/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Tears in Heaven video: Colour treatment and particles in Adobe After Effects</title><link>http://markos.co.nz/2010/07/tears-in-heaven-video-colour-treatment-and-more-in-adobe-after-effects/</link> <comments>http://markos.co.nz/2010/07/tears-in-heaven-video-colour-treatment-and-more-in-adobe-after-effects/#comments</comments> <pubDate>Mon, 26 Jul 2010 05:07:45 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=488</guid> <description><![CDATA[I have a good friend who is an amazing guitarist. He recently recorded a stunning instrumental version of Eric Claptons &#8216;Tears in Heaven&#8217; for his YouTube channel. I took the opportunity to tidy up the video and make something quite cool at the same time. With this project the first thing to do was see [...]]]></description> <content:encoded><![CDATA[<p></p><p><a
href="http://markos.co.nz/2010/07/tears-in-heaven-video-colour-treatment-and-more-in-adobe-after-effects/"><img
class="alignnone size-full wp-image-501" title="introStrip" src="http://markos.co.nz/wp-content/uploads/2010/07/introStrip.jpg" alt="" width="568" height="115" /></a></p><h2>I have a good friend who is an amazing guitarist. He recently recorded a stunning instrumental version of Eric Claptons &#8216;Tears in Heaven&#8217; for his YouTube channel. I took the opportunity to tidy up the video and make something quite cool at the same time.</h2><p><span
id="more-488"></span><br
/> With this project the first thing to do was see if I could tame the video a bit and shift the focus onto Baz (our guitarist) and tone down some of the background noise. I used some vignettes, blurs and general colour correction tools as well as overlaying some brighter colours to create a bit of visual interest and faux lighting.</p><p>I then duplicated the video clip, masked out the background and inserted a few layers of gently drifting particles. The particles only appear in places where there is light so they kind of resemble some magical looking dust gently floating toward the sky.</p><p>I added some video footage of children playing onto the wall behind Baz and gave it a home movie projector look as well as ramping up the colour intensity as the track intensifies toward the end.</p><p>The<a
href="http://bit.ly/alIi7s"><strong> final video is viewable here</strong></a> (Baz would love a comment on the video or a click of the &#8216;Like&#8217; button so don&#8217;t be shy).</p><p>Here are a couple of stills from the video showing the before and after.</p><div
id="attachment_497" class="wp-caption alignleft" style="width: 150px"> <a
href="http://markos.co.nz/wp-content/uploads/2010/07/baz_before.jpg" rel="shadowbox[post-488];player=img;"><img
class="size-thumbnail wp-image-497" title="baz_before" src="http://markos.co.nz/wp-content/uploads/2010/07/baz_before-150x150.jpg" alt="" width="150" height="150" /></a><p
class="wp-caption-text">Before</p></div><div
id="attachment_496" class="wp-caption alignleft" style="width: 150px"> <a
href="http://markos.co.nz/wp-content/uploads/2010/07/baz_after.jpg" rel="shadowbox[post-488];player=img;"><img
class="size-thumbnail wp-image-496" title="baz_after" src="http://markos.co.nz/wp-content/uploads/2010/07/baz_after-150x150.jpg" alt="" width="150" height="150" /></a><p
class="wp-caption-text">After</p></div> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2010/07/tears-in-heaven-video-colour-treatment-and-more-in-adobe-after-effects/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Animating still photographs</title><link>http://markos.co.nz/2010/06/animating-still-photographs/</link> <comments>http://markos.co.nz/2010/06/animating-still-photographs/#comments</comments> <pubDate>Sun, 27 Jun 2010 12:17:04 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=471</guid> <description><![CDATA[The rain was coming down today and I thought I&#8217;d try out a few techniques that I had seen in some After Effects tutorials recently. These aren&#8217;t high quality renders or finished animations. Just enough for me to try some new techniques. Displacement Maps &#38; Sky Replacement For this photo I added some movement to [...]]]></description> <content:encoded><![CDATA[<p></p><p>The rain was coming down today and I thought I&#8217;d try out a few techniques that I had seen in some After Effects tutorials recently. These aren&#8217;t high quality renders or finished animations. Just enough for me to try some new techniques.<span
id="more-471"></span></p><h2>Displacement Maps &amp; Sky Replacement</h2><div
id="attachment_473" class="wp-caption alignleft" style="width: 90px"> <a
href="http://markos.co.nz/wp-content/uploads/2010/06/2351574160082132336ZETyAx_fs.jpg" rel="shadowbox[post-471];player=img;"><img
class="size-thumbnail wp-image-473 " title="River" src="http://markos.co.nz/wp-content/uploads/2010/06/2351574160082132336ZETyAx_fs-150x150.jpg" alt="Original photo" width="90" height="90" /></a><p
class="wp-caption-text">Original photo</p></div><p>For this photo I added some movement to the water with a displacements map. I also masked out the sky using the very cool Refine Mask option in Photoshop CS5 trial. It can certainly help when working with more complex masks. The Sky was animated in 3d space and then used as a reflection in the river.</p><p>I also added a light leak to the right side and experimented with some interesting colour options. There is a lens grime layer in there too.</p><p><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="568" height="426" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param
name="allowfullscreen" value="true" /><param
name="allowscriptaccess" value="always" /><param
name="src" value="http://vimeo.com/moogaloop.swf?clip_id=12886617&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed
type="application/x-shockwave-flash" width="568" height="426" src="http://vimeo.com/moogaloop.swf?clip_id=12886617&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p><h2>Liquify and Particles</h2><div
id="attachment_476" class="wp-caption alignleft" style="width: 90px"> <a
href="http://markos.co.nz/wp-content/uploads/2010/06/Ruapehu-1995-eruption2.jpg" rel="shadowbox[post-471];player=img;"><img
class="size-thumbnail wp-image-476 " title="Ruapehu 1995 eruption2" src="http://markos.co.nz/wp-content/uploads/2010/06/Ruapehu-1995-eruption2-150x150.jpg" alt="" width="90" height="90" /></a><p
class="wp-caption-text">Original photo</p></div><p>In a nod to Andrew Kramer&#8217;s recent &#8216;Animating a Still&#8217; tutorial I thought I&#8217;d try something a little similar  by animating an eruption of Mt Ruapehu.</p><p>I found a suitable photo and sliced it up into various layers which I arranged in 3D space. I added a camera and a really basic move that was supposed to resemble someone running (I should have got hold of some actual footage with someone running and motion tracked it .. but I was being lazy).</p><p>I Used the liquify tools to animate the mountain smoke and After Effects built in CC Particle World plugin to create some basic dust floating around.</p><p><object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="568" height="320" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param
name="allowfullscreen" value="true" /><param
name="allowscriptaccess" value="always" /><param
name="src" value="http://vimeo.com/moogaloop.swf?clip_id=12311560&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed
type="application/x-shockwave-flash" width="568" height="320" src="http://vimeo.com/moogaloop.swf?clip_id=12311560&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2010/06/animating-still-photographs/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Developing an animated flash banner with John Dickinson from Motionworks.com.au</title><link>http://markos.co.nz/2010/06/developing-an-animated-flash-banner-for-motionworks/</link> <comments>http://markos.co.nz/2010/06/developing-an-animated-flash-banner-for-motionworks/#comments</comments> <pubDate>Sun, 20 Jun 2010 09:48:33 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=425</guid> <description><![CDATA[I&#8217;ve been following John from Motionworks for quite some time now and he&#8217;s one of the people that is doing great things for the motion graphics community online. His site (www.motionworks.com.au) offers a wealth of information &#38; great tutorials for After Effects and Cinema 4D. He also has as a great business based series called [...]]]></description> <content:encoded><![CDATA[<p></p><h2><p
style="text-align: center;"><a
href="http://markos.co.nz/2010/06/developing-an-animated-flash-banner-for-motionworks/"><img
class="size-full wp-image-451 aligncenter" title="Motionworks Banner" src="http://markos.co.nz/wp-content/uploads/2010/06/bannerStatic.jpg" alt="" width="558" height="109" /></a></p><p>I&#8217;ve been following John from <a
href="http://www.motionworks.com.au">Motionworks</a> for quite some time now and he&#8217;s one of the people that is doing great things for the motion graphics community online.</h2><p><span
id="more-425"></span>His site (<a
href="http://www.motionworks.com.au">www.motionworks.com.au</a>) offers a wealth of information &amp; great tutorials for After Effects and Cinema 4D. He also has as a great business based series called &#8216;The Business of Design&#8217; and a fabulous interview show called &#8216;Unplugged&#8217;. So when he mentioned that he was looking for someone to help him out with creating an animated Flash banner for his &#8216;<strong>Making it look great 7</strong>&#8216; product I jumped at the chance to help.</p><p>John gave me free reign over the initial concepts and as we got closer to the end product we worked collaboratively with John giving me some great animation tips along the way. He has a keen eye for detail and a solid sense of design and was also open to any suggestions that I had. So working with him was very refreshing for me.</p><h3>Initial concept</h3><p>My initial concept for the banner consisted of 3 scenes. An intro, a small clip from one of the teasers for his product and a call to action scene. Here is the original design below.</p><div
id="attachment_430" class="wp-caption aligncenter" style="width: 300px"> <a
rel="shadowbox" href="http://markos.co.nz/wp-content/uploads/2010/06/sampleFrames.jpg"><img
class="size-medium wp-image-430 " title="sampleFrames" src="http://markos.co.nz/wp-content/uploads/2010/06/sampleFrames-300x154.jpg" alt="" width="300" height="154" /></a><p
class="wp-caption-text">Original concept</p></div><p>&#8216;<strong>Making it look great 7</strong>&#8216; features 6 individual workshops and because I wanted to use a few seconds of video from each of the teasers I decided that maybe the best way to approach this would be to make 6 individual banners with a different video in each and just rotate them around on page load otherwise the file size would become too large to include video from each into a single banner. No-one wants to download or serve a 500k banner with each page visit.</p><p>I mocked up a couple of these concepts, but in the end it just didn&#8217;t come together as I had hoped. The video had to be no more an 2 or 3 seconds at the most and that just didn&#8217;t really give the viewer enough time to get the message. It was more a &#8220;what the heck was that&#8221; experience rather than an &#8220;ahhhhh that&#8217;s what I want to know how to build&#8221; experience. Plus the video compression was pretty intense to keep the file size down to around 100kb and that degraded the overall look of the banner.</p><h3>Final concept</h3><p>Instead of creating 6 individual banners with a few seconds of video in each we turned things around and went with 1 banner that contained 6 stills (1 from each of the workshops). Each still had it&#8217;s own title and each stayed onscreen from around 3 seconds and was animated off with a simple slide transition. The text was changed from oblique to regular to aid readability and after a few tweaks with different alias settings we were sorted.</p><p>Here&#8217;s the final banner (the image is slightly reduced to fit my layout). Click to see the animated version.</p><div
id="attachment_451" class="wp-caption aligncenter" style="width: 470px"> <a
rel="shadowbox;width=588;height=115" href="http://markos.co.nz/wp-content/uploads/2010/06/milg7Banner03.swf"><img
class="size-full wp-image-451 " title="Motionworks Banner" src="http://markos.co.nz/wp-content/uploads/2010/06/bannerStatic.jpg" alt="" width="470" height="92" /></a><p
class="wp-caption-text">Final banner - click to play</p></div><h3>It wasn&#8217;t all plain sailing though &#8230; here are a couple of &#8216;gotchas&#8217;</h3><p>I have been spending more time using Adobe After Effects of late and I much prefer the animation tools inside of AE. I have always found Flash&#8217;s animation tools to be a little clunky and it seems all to easy to make an edit on something which inadvertently screws something else up. So for this project I really wanted to use After Effect&#8217;s export as XFL option for flash. The idea behind this was that I could use After Effects to lay down the  grunt work of the animation and then export that animation data over to flash and hook in my desired graphic elements. Also, John is an advocate for Adobe After Effects so I thought it would be great to keep things in the family so to speak.</p><p>I spent a few hours on this as I really wanted to be able to use this technique for projects in the future, but try as I might, I couldn&#8217;t get a good result from it. It seemed that AE and Flash use different anchor point positions and that was proving problematic. I also had issues with the canvas size that was being created in Flash as well as the general placement of the elements. Things that lined up in AE just didn&#8217;t line up in Flash and the timing of the animation was off ever so slightly.</p><p>I went over the little documentation that I could find and looked over examples on the net I couldn&#8217;t find an answer to the problem. So I ditched that option and went back over to using the motion time line in Flash to pull the animation together.</p><p><strong>If you have managed to use AE to drive a flash animation via XFL then I would love to hear how you found it. It looks like something I could really use if I could get it to work reliably.</strong></p><p>One of the other oddball things is that flash refused to render the regular version of the font that we were using. No matter what I selected it kept rendering out the oblique version. So in the end all the text was put together in Adobe Fireworks and rendered out as 32bit png files.</p><h3>The end result?</h3><p>The end result was very satisfying and working with John was fantastic. I feel very privileged to have had the opportunity and I look forward to working with him again.</p><p>If you&#8217;re not already a Motionworks subscriber then head on over to <a
href="http://www.motionworks.com.au">www.motionworks.com.au</a> and hook into his RSS feed.</p><p>PS. Don&#8217;t forget to checkout his <a
href="http://www.motionworks.com.au/2010/02/milg7/"><strong>Making it look great 7</strong></a> product while you&#8217;re there.</p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2010/06/developing-an-animated-flash-banner-for-motionworks/feed/</wfw:commentRss> <slash:comments>5</slash:comments> </item> <item><title>Relighting a person in photoshop (and adding luminous butterflies)</title><link>http://markos.co.nz/2010/04/relighting-a-person-in-photoshop-and-adding-luminous-butterflies/</link> <comments>http://markos.co.nz/2010/04/relighting-a-person-in-photoshop-and-adding-luminous-butterflies/#comments</comments> <pubDate>Thu, 29 Apr 2010 09:52:50 +0000</pubDate> <dc:creator>Markos</dc:creator> <category><![CDATA[Articles]]></category> <category><![CDATA[Recommendations]]></category> <category><![CDATA[Tutorials]]></category><guid
isPermaLink="false">http://markos.co.nz/?p=355</guid> <description><![CDATA[Sticking with my theme of actually doing tutorials (and not just watching along) I wanted to experiment with a very cool lighting technique demonstrated by photoshop legend, Russell Brown, in this fantastic tutorial. http://tv.adobe.com/watch/the-russell-brown-show/samurai-poster-part-2/ We had a nice afternoon out at a local park when something caught my little one&#8217;s attention. We took a quick [...]]]></description> <content:encoded><![CDATA[<p></p><p><a
href="http://markos.co.nz/wp-content/uploads/2010/04/ashs_butterflies.jpg" rel="shadowbox[post-355];player=img;"><img
class="alignnone size-full wp-image-357" title="My son's luminous butterflies" src="http://markos.co.nz/wp-content/uploads/2010/04/teaser.jpg" alt="" width="568" height="160" /></a></p><p>Sticking with my theme of actually doing tutorials (and not just watching along) I wanted to experiment with a very cool lighting technique demonstrated by photoshop legend, Russell Brown, in this fantastic tutorial.<br
/> <a
href="http://tv.adobe.com/watch/the-russell-brown-show/samurai-poster-part-2/" target="_blank">http://tv.adobe.com/watch/the-russell-brown-show/samurai-poster-part-2/</a></p><p><span
id="more-355"></span>We had a nice afternoon out at a local park when something caught my little one&#8217;s attention. We took a quick photo (as you do when you have kids) and when we returned and looked through the photos I realised that this was the perfect pic to try out the technique.</p><p>I wont go into all the details here unless some really wants me to break it down. Suffice to say that I sourced an image of something that looked like butterflies and composited it into the the original photo. I then made some color adjustments, added some noise and integrated the awesome relighting technique from the tutorial above. Click the image below for a comparison and be sure to click through to Russell Browns great tutorial.</p><p><a
href="http://markos.co.nz/wp-content/uploads/2010/04/comparison.jpg" rel="shadowbox[post-355];player=img;"><img
class="alignnone size-full wp-image-362" title="comparison_thumb" src="http://markos.co.nz/wp-content/uploads/2010/04/comparison_thumb.jpg" alt="" width="568" height="320" /></a></p> ]]></content:encoded> <wfw:commentRss>http://markos.co.nz/2010/04/relighting-a-person-in-photoshop-and-adding-luminous-butterflies/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced (User agent is rejected)
Database Caching 3/16 queries in 0.036 seconds using disk: basic

Served from: markos.co.nz @ 2012-02-07 03:18:33 -->
