1 / 18

CD202 Interface, Representation & Sequence Introduction to motion design and 2D animation

CD202 Interface, Representation & Sequence Introduction to motion design and 2D animation. Course created by Sarah Phillips sphillips@ lecturers.billyblue.edu.au BBCD Melbourne BAPDCOM Version 1 – February 2013. http :// bbcdcomdes.weebly.com /. Flash banners.

slone
Download Presentation

CD202 Interface, Representation & Sequence Introduction to motion design and 2D animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CD202 Interface, Representation & SequenceIntroduction to motion design and 2D animation Course created by Sarah Phillipssphillips@lecturers.billyblue.edu.auBBCD Melbourne BAPDCOM Version 1 – February 2013.http://bbcdcomdes.weebly.com/

  2. Flash banners • Flash banners generally appear on sites other than your own, to push traffic to your site. • Most common sizes are 300x250 (MREC)160x600 (Skyscraper)728x90 (Leaderboard)

  3. MREC Leaderboard Screen shot from http://www.ninemsn.com.au Accessed 4/2/13

  4. Flash banners • Best practice is to… • Keep file size LOW! The most common web banners I’m asked to make needs to be under 40kb. • Most web banners will loop, so make sure this is seamless. Some websites will only allow a banner to play for 30sec though before it needs to stop, so make sure you read the banner specs before designing!

  5. Flash banners • Make sure brand logos are clear & easy to read. Often clients like the logo on screen at all times, (others only at the end). Make sure you know your client’s preference so you can work it into the design • A 1px border around the banner is polite and sometimes required. If your banner is on a white background and the website it’s going on also has a white background –thisis a must!

  6. Flash banners • Clear call to action. The user needs to know what they’re getting or where they’re going if they click on your banner. • Keep the amount of copy as low as possible – but make it relevant, interesting and punchy. Simple, right? • Think about how your concept will work in different sizes. Most of the time, multiple sizes are required, and they need to work in the same way

  7. Flash banners • Cottees – ‘Boys vs Girls’ • 300x250 • 728x90 Personal design work. Client: Cottees. Studio: BD Network.

  8. Interactive Flash banners • Close to Home • http://www.interactiveentries.com/closetohome/index.html • Stride – ‘Ridiculously Long Lasting’ • http://www.weworkweekendsforbrands.com/stride/2011-2/brll-banner-case-study/

  9. Award winning flash banners • Fedex – ‘Just in time’ • http://www.judgehere.com/justin/index.html • Pringles – ‘Can Hands’ • http://awardshome.com/cannes2009/pringles/can-hands.html • Aljazeera – ‘Every angle, every side’ • http://74.207.233.159/Webby/Aljazzera/landing.html

  10. Continuing with Flash

  11. Flash tutorials • http://www.smashingmagazine.com/2008/01/17/adobe-flash-tutorials-best-of/ • http://www.adobe.com/devnet/flash.html • http://www.youtube.com/user/AlanBeckerTutorials • http://www.newgrounds.com/wiki/creator-resources/tutorials/flash-tutorials

  12. Continuing with Flash • Graphic clip vs movie clip • Classic tweens • Shape tweens • Easing • Importing PSD and AI into Flash • Photoshop save for web For a recap later, go to ‘Up and Running with Flash Professional’ on Lynda.com

  13. Storyboarding

  14. Storyboarding • A series of sketches of what your animation will look like and what will happen. • Shows composition, staging, movement and design, as well as referencing the pace • It is quicker to change things in the storyboard stage than the production stage. Sketches are cheap!

  15. Batman (TV Series 1992–1995). Title Sequence Storyboard, Drawn by Bruce Timm & Colored by Eric Radomski, 1992http://livlily.blogspot.com.au/2011/03/batman-tv-series-19921995-storyboards.html

  16. Storyboarding • Quick sketches vs actual mockups • Sketches are quicker and easier but also leave a lot open to interpretation. Maybe what you have in your head is not quite what’s in the client’s head. • Mockups leave less open to interpretation, but the client can get bogged down in the details. For example, can reject an idea based on a colour or font, rather than the idea itself. • Best to start with sketches and then move into mockup storyboards

  17. Storyboarding • Video – Toy Story Storyboarding • http://www.youtube.com/watch?v=QOeaC8kcxH0

  18. Storyboarding exercise • Design a min 8 frame storyboard of the obstacles you face getting here in the morning. (Doesn’t have to be true!)

More Related