articles on

Animated Photoshop Mockups

Animated Photoshop Mockups

In the past couple of years we have seen an explosion of mockups to be used for presentations, from phone frames to posters and billboards. These assets really help designers to showcase their work in a more professional way, especially personal projects that might never see the really shippable version. I am a fan of mockups and I have been using them for quite a long time, usually static but it seems that animated version will become reality very soon. For this post I will share some Animated Photoshop Mockups created by Ruslan Latypov. I haven't used them yet but you can download them here For more information about Ruslan check out http://latypov.org/

UI Transitions by Leo Leung

UI Transitions by Leo Leung

I always do enjoy stumbling across a portfolio of a designer that is also working as a front-end developer. The bridge/gap between the two titles are totally clashing with so many aspects of the job that makes everything more technically functional. I feel the work is more refined by knowing how the platform works instead of guessing interactions. It makes the work less collaborative but it's definitely on-point with your own vision. (adsbygoogle = window.adsbygoogle || []).push({}); About Leo Leung Leo Leung is a UI/UX designer but also a Front-End Developer based in Chengdu, China. We look forward to see more of his UI transition works. For more information, follow his Dribbble

Case Study: Nike LunarEpic Flyknit

Case Study: Nike LunarEpic Flyknit

We are happily sharing a tremendous case study of the new reinvented Nike LunarEpic Flyknit running shoe by/in global collaboration with Tendril and Blacklist and more. Together, they've worked on making the teaser, launch film, and global Nike in-store installations. Sit back and enjoy one of the best projects we've seen lately on Abduzeedo. Rising from the surreal landscape of an incredible alien world, Nike's reinvented running shoe, the Lunar Epic Flyknit, was a product launch of galactic proportions. The visuals for the launch were meant to further elevate the innovative, weightless, futuristic technology of the revolutionary running shoe. Reveal Video In Tendril's Words Together with Blacklist and a crew of otherworldly talents from around the world, we created the teaser, launch film, and global Nike in-store installations. We built an A-list team for the project that included one of our award-winning HIGH5ER studios, Frame, to co-direct. What was totally unique about the project for us was the global collaboration. Blacklist is in NY, Tendril in Toronto, Frame in Denmark, Nike in Portland, and there was a slew of freelance gurus dotted all over the world. In total we had Canada, US, Brazil, Germany, Slovenia, Denmark and the UK all on this project. This made it an explosion of deadly talents. We all worked together hooked up by a massive 2TB Dropbox account. The HIGH5ERS experiment of extending the collaborative spirit beyond the walls of the studio to join forces on special projects allows everyone to learn and grow while making amazing work. It also fosters new creative friendships, allows for faraway travel, and pushes everyone to make the best work possible together. Teaser Video Video Stills Process One of the biggest challenges wasn't that production was a global initiative; the challenge was mostly in creating the environment where the action takes place. Armed with photo references from Nike of Pariah Canyon in the United States (a place of insanely gorgeous flowing layers of rocks) we created an entire planet in 3D. This was no small feat–we did it by researching, experimenting, going back to drawing board some more, and then by exporting data back and forth between World Machine and C4D. Likewise, in the brand teaser film, the giant galaxy required a tonne of problem-solving. Its swirling tornado of particles took quite a bit of testing to get right. There was no way to generate it procedurally and still have the level of control we wanted. In the end, we came up with a complex recipe that combined a traditionally modelled base geometry with procedural noises and World Machine height maps that were fed through a layer shader and distorted with additional noises. Besides the amazing team who we had the pleasure of collaborating with, shout-outs to Google Hangouts, Sheets, Slack, Dropbox, continental airline travel, coffee, and beer for helping make this other-worldly experience a pain-free collaboration. Process Stills (adsbygoogle = window.adsbygoogle || []).push({}); Storyboard Launch Photos In Blacklist's Words Blacklist and Nike have taken their relationship to the next level with their latest collaboration: the Nike LunarEpic athletic shoe campaign. The campaign’s launch is anchored by a gorgeously rendered film, co-directed by creative studios Tendril and Frame with the backing of an international team of talented artists. This hero spot sees the shoe’s organic shapes and structure materialize across space and time, setting down and leaving its signature print in the dust of a far off planet. The campaign then extends into our humble Earth world, playing on giant screens in NikeTown stores around the globe, as well as heavy rotation on Nike’s social channels, where the shoe was teased in mysterious short clips before its final epic reveal at Nike’s flagship NYC store. To achieve the distinctly otherworldly look of the film, Tendril imagined the spot itself as a transmission received from deep space, a rare chance to look on as something truly new materializes from the elements before our eyes. Set in an alien landscape inspired in part by the visually stunning Pariah canyon, Blacklist and Tendril together assembled a global network of design and animation specialists to focus on each aspect of the film, which in turn were each focused on a different feature of the LunarEpic’s unique design. In the end, viewers are not only mesmerized by the journey and the transformation that takes place, but are compelled to recognize the distinct features that make the LunarEpic so remarkable. The final film was featured in New York, Berlin, London, Portland, and Tokyo. Credits Client: Nike Nike Global Brand Communications: Tad Greenough Executive Producer, Nike Brand Communication Studio: Noah Stanik Nike Producer: Meagan Moore Production Company: Blacklist EP: Andrew Linsk Producer: Karen Lawler, Alex Unick Studio: Tendril & Frame Co-Directors: Chris Bahry, Tom Crate EPs: Kate Bate, Thomas Bay HOP / Producer: Mary Anne Ledesma Producer: Louise Bejerholm Storyboards: Greg Boychuk, Gabe Sapienza Editor: Tom Crate Pitch Concepts: Chris Bahry, Tom Crate, Wojtek Szklarski, Ann Kruetzkamp, Marco Iozzi Reveal Film: Lead 3D Artists & Animation: Nejc Polovsak, Matt Frodsham, Simon Fiedler Particle FX: Simon Fiedler, Alasgar Hasanov, Marcin Porebski Shoe Rigging & Animation: Matias Hansen Lighting & Render: Nejc Polovsak, Matt Frodsham Additional 3D Artists: Sacha Wechselmann, Ben Pilgrim Shoe Modeling: Marek Denko Matte Painting: Bojan Zoric, Form Language Compositing: Chris Bahry, Brad Husband Teaser Film: 3D Artists: Christian Hecht, Alasgar Hasanov, Chris Bahry FX: Valdemaras Dzengo, Alasgar Hasanov Light & Render: Christian Hecht, Brad Husband 2D Animation: Gabriel Rocha Compositing: Chris Bahry, Brad Husband Additional Compositing: Alexandre Veaux Sound Design & Music: John Black of CypherAudio

Insane Motion Works from KIDMOGRAPH

Insane Motion Works from KIDMOGRAPH

Either that you have a full-time job, contract-based or purely freelance; as designers we should always make room for personal/experimental projects. There's a ton of reasons why it's a great thing to keep that healthy balance with your creativity, your will of making things and finding ways to get away from boredom and eventually burning yourself out. KIDMOGRAPH is a great example of someone who always finds time to explore and keeping his goals on target. Warning, make sure you have a strong internet connection to view this article. About KIDMOGRAPH KIDMOGRAPH aka Gustavo Torres is a Art Director and Motion Designer based in Argentina. His work is purely a series of personal experimentations, tests and for the fun pleasure of making. Check out his Tumblr as he so dear called it:"Art Blog from year 2583". For more information check out http://kidmograph.tumblr.com/

Space Channel Visual Refresh - Motion

Space Channel Visual Refresh - Motion

Tendril is a director-driven design studio based in Toronto, Canada. It is a lab and workshop where directors, designers, and artists from diverse backgrounds create powerful visual storytelling experiences, employing a wide range of styles and techniques. The project that they put together for the Space Channel refresh represent that vision quite well. They were also very generous with us by sharing a bit of the process behind this beautiful project. The aim with this set of ID's and Promo toolkit was to launch a brand refresh of Space that would re-position for broader appeal, especially to a female audience. The past look and feel of Space is quite dark and clearly directed at young men. The intention with these was to keep things mysterious and sci-fi, but light-filled and colourful, and with one foot firmly planted in the real world. The IDs are meant to 'surprise and delight' viewers with the unexpected wonder that exists in the real world all around us. For more information and behind the scenes process, check the project page on our site here: http://tendril.ca/#!/Project/space Space Channel Refresh from TENDRIL on Vimeo. Process Stills Client: Bell Media Space Channel Client CD: Mike Stanley Production Company:Tendril Creative Directors:Chris Bahry and Alexandre Torres Executive Producer:Kate Bate Producers: Anne Deslauriers, Leah Wesolowski Music and Sound Design:John Black of CypherAudio "Neon Spider" Editor: Steve Manz Concept Art: Rodolfo Perisse Rocha Art Direction: Alexandre Torres, Leo Mateus Modeling: Victor Hugo Dias de Sousa, Marcelo Alves de Souza Additional Modeling: Vini Nascimento Rigging: Clovis Gay Animation and Web Dynamics: Marcin Porebski Look Dev, Lighting, Textures, and Render: Marcelo Alves de Souza Technical Director: Ben Pilgrim and Marcin Porebski Compositing: Chris Bahry"Space Projector" Art Direction: Alexandre Torres, Chris Bahry Modelling and Design: Alexandre Torres, Vini Nascimento, Rowan Simpson, Marcin Porebski, Christian Hecht Technical Director: Ben Pilgrim Animation: Marcin Porebski Lighting, Render, Textures: Brad Husband ParticleFX / UI / Hologram: Gabriel Rocha Decal Textures: Steven Hollman Compositing: Brad Husband, Chris Bahry Editor: Steve Manz "Space Eggs" Art Direction: Chris Bahry, Leo Mateus Look Dev, Animation, Rigging, FX: Will Sharkey Textures: Will Sharkey, Alasgar Hasanov Lighting, Render: Alasgar Hasanov Compositing: Alasgar Hasanov, Chris Bahry Editor: Steve Manz "Iron Pink and Blue" Live Action and Art Direction: Chris Bahry and Leo Mateus Compositing: Chris Bahry and Leo Mateus Editor: Jackie Roda

Interactive Motion Design by John Schlemmer

Interactive Motion Design by John Schlemmer

John Schlemmer is a motion designer currently working at Google as the Lead Motion Designer for Apps. Based in Mountain View, California; John had the opportunity to work on Google's High-Profile apps such as Inbox by Gmail, Google Calendar, Gmail, Drive and more. Check him out! All Rights by John Schlemmer All Rights by John Schlemmer All Rights by John Schlemmer All Rights by John Schlemmer All Rights by John Schlemmer All Rights by John Schlemmer All Rights by John Schlemmer All Rights by John Schlemmer All Rights by John Schlemmer Links More info about John Schlemmer: http://schlem.me Follow John on Dribbble: https://dribbble.com/johnschlemmer

Xbox Branding Animation

Xbox Branding Animation

For todays post we bring a super smooth and beautiful animation created by Simon Holmedal for the Xbox Branding. I love the simplicity of this project with simple lines creating the Xbox logo. Everything looks top notch, check it out and for our American friends, Happy Memorial Day. For more information about Simon and his full portfolio check out http://www.simonholmedal.com/ Video I was working as part of the in-house team at ManvsMachine, I did various tasks including rigg, rnd, animation. Stills Credits Client: Microsoft Concept, Design & Direction: ManvsMachine Creative Director for Xbox: Ramiro Torres

30 Years of Nike Air Max

30 Years of Nike Air Max

Last Friday Richard Hawkings, a great motion designer that works with me at Google shared with me this amazing work done for the campaign to celebrate the 30 years of Nike's iconic Air Max. The work was done by ManvsMachine, a design & motion studio from London, UK. The work is so good that I asked myself what was 3D and what was real due to the quality of the texture maps. They were kind enough to share a little making of and we had to share it here with you. ManvsMachine is a multi D&AD and Cannes Gold Lion award winning design and motion studio. They work with forward thinking clients to create progressive and effective visual communication for a global audience. For more information check out http://manvsmachine.co.uk/ We worked closely with Nike Sportwear to design, direct and animate the campaign for the brand new Air Max Zero. Along side this we also crafted the brand language for Air Max Day — a global celebration of the iconic Air Max shoe. Video Stills An intricate project with many different elements to bring together. From building and filming Tinker Hatfield’s design studio, to 3D scanning nine different Air Max shoes and refining the design of our Air Max day type which went on to be constructed and featured in stores globally. Making of Concept, Design & Direction: ManvsMachine 3D Scanning: FBFX DoP: Dave Tree Stylist: Lee Flude Audio: Echolab

Title Sequences Work by Henry Hobson

Title Sequences Work by Henry Hobson

If you've watched the Oscars (2015) last week, you must have been wondering who worked on those beautiful motion titles throughout the whole show. Well, we do know from whose work it was from, a beautiful work by Henry Hobson. An art director and graphic designer that creates cinematic story worlds filled with characters that explore the depth of the human brain. Links More info about Henry Hobson: http://www.henryhobson.co.uk

Friction Typography

Friction Typography

Creating typefaces is a daunting task due to the many challenges behind it. The guys from Animography put together a super cool project titled Friction and made the process appear completely seamless. Friction is a distorted geometric typeface that intentionally puts emphasis on its graphic appearance. The minimalistic core of the typeface is built around geometric shapes. Two secondary layers of graphic elements create more abstract letterforms. The many small moving parts create a feeling of movement that is mesmerizing yet maintains a completely organic look. Friction is available as Adobe After Effects file for versions CS5 and up, at http://animography.net Design & Animation: Jesper Bolther Audio: Clark Rhee Video Friction - Animated Typeface from Animography on Vimeo. About Animography Animography is a type-foundry that specializes in animated typefaces. These animated typefaces comes as Adobe After Effects files. They are easy to use, customizable and scalable without any loss of quality. For more information check out http://animography.net/

Motion Works by Devastudios

Motion Works by Devastudios

Devastudios is an award-winning design firm specializing in motion graphics for film and television based in Los Angeles, USA. With a simple philosophy, Devastudios will provide a creative toolset that is uniquely versatile to make our movies even more exciting. Visit their site for to view their full portfolio. Design. Period. All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios All Rights to Devastudios Links More about Devastudios: http://www.devastudios.com

Motion Graphics by murAta Yuzi

Motion Graphics by murAta Yuzi

It has been quite some time since I posted about motion graphics. I have had the recent chance to work with some motion designers and it's amazing to see the things that they can do. I am trying to learn some new things but for me the problem is still getting the timing right. The video that I wanted to share today has all of it, beautiful graphics and fantastic motion. The piece was created by murAta Yuzi for the TANO*C TOUR 2014 TOKYO Jingle Movie. I love the easing and staggering of some elements, it feels very organic but modern at the same time. Motion TANO*C TOUR 2014 TOKYO Jingle Movie from murAta Yuzi on Vimeo. Stills For more information about murAta Yuzi, check out his Vimeo page at http://vimeo.com/myz/

Sentirse Bien by INLAND STUDIO

Sentirse Bien by INLAND STUDIO

”Sentirse Bien” means Feeling Good in Spanish. This was the message from the creative folks at INLAND Studio for casaclubtv.com. Inland Studio is based in Buenos Aires, Argentina and they have been focusing on making things beautiful not just for the aesthetic side but also to expand our own horizons. ...Development of graphic package for a series issued by casaclubtv.com “Sentirse Bien” is a series about Wellness and Lifestyle. All Rights to INLAND Studio All Rights to INLAND Studio All Rights to INLAND Studio All Rights to INLAND Studio Links More info about INLAND Studio: http://inlandstudio.tv Follow INLAND Studio on Behance: https://www.behance.net/INLAND

Alphabetic Type Animation

Alphabetic Type Animation

We featured Marcelo Baldin's project titled Cinematics a couple of days ago. It was awesome and his work is so inspiring that we have another one to share. This one is titled Alphabetic and it's type animation experiment. The style, animation and soundtrack are top notch. Check it out!. I used the font CHUNK FIVE, wich is a really cool and free font created by Meredith Mandel (http://work.meredithmandel.com). I had a lot of fun doing this piece! Can't hardly wait for the next one... Made by Ariel Costa (blinkmybrain") - Sound by Marcelo Baldin (combustion) -Special thanks to Studio Nitro (studionitro.tv) Thanks for all support guys! Stills Via Behance

Ruby

Ruby

An animated self-portrait exploring the idea of rebirth and illustrating the transfer of energy from one incarnation to another. I painted this stop frame animation on myself over 5 days, using some face paints, a mirror and a camera. Credits http://emmaallen.org http://twitter.com/imakefings Story & Performance - Emma Allen Photography & Makeup - Emma Allen Post Production - Alex Try, Phil Varnier Sound - Alex Try Stills

From Paper to Screen - Typography Project

From Paper to Screen - Typography Project

Typography is the subject of the graduation project of Thibault de Fournas and for that he put together one of the most inspiring videos I've seen in a while. The video is titled From Paper to Screen and it walk us through the evolution of typography. It is a must see. Animation which shows typography evolution from paper to screen. The animation is divided in two parts. The first deals with the basic rules of typesetting. The second, is about the evolution of typography in cinema. Used mainly for Opening and Closing title. Music : Clair de Lune - Debussy Shoot the Piano Player: Poursuite - Hugh Wolff & London Sinfonietta - Georges Delerue Video Stills

Urbance - Motion Design Inspiration

Urbance Official Trailer

It's been quite some time since I last posted a video and when this trailer came across my radar I absolutely had to share. The title of the video is Urbance, directed by Joel Dos Reis Viegas for a Project TV series produced by Steambot Studios. This clip is super stylish, especially the colors, the illustrations and the neon lights. An added bonus, Busy P's "Pedrophilia" is the soundtrack. "In the big city, gender war rises. Sex is prohibited because of a genetic deadly virus. Ruled by hate and anger, boys and girls grow up apart from each other, forming rivals gangs. Among these lost teenagers, Kenzell and lesya will fight adversity and defy all the rules in order to live their love and restore peace." URBANCE Official Trailer from Steambot on Vimeo. Stills