BlockStudio

Blog部落格

用程式寫的動態海報

2016 年左右,設計圈開始流行以 CSS 為主的「動態海報」。

「動態海報」以 CSS3 的 Animations 為主,把背景圖片動起來、前景文字固定不動,讓觀者有前後分層感,再加上Loop整體動態,如此就會動態海報的效果出現。

部分動態海報有路徑或特殊情況的特效會加入以SVG,甚至用js寫複雜的重複特效。
這些做法不會太難,但對於動態的細節必須花許多時間做大量的細節調整。

 

∎ 競選設計 Elections Design : 動態海報
我們之前有示範過的動態海報,不過這是以C4D影像製作。
這種做法目前可使用WebGL建立3D模型貼圖,再回到網頁上運算呈現。

以下介紹幾個玩動態海報很到位的設計師、工作室:

Jon Yablonski
來自底特律的數位創作者,在Codepen上算是很紅的一位!

 

 

∎ leRenard
來自法國巴黎的leRenard,做了幾個Demo效果都非常棒!

 

 

Studio Feixen

來自瑞士的Feixen,將平面設計皆改為動態海報方式呈現,在Facebook動態上非常吸睛。
Studio Feixen Facebook

 

2016政大廣告系畢業展:變形蟲世代
2016政大廣告系畢業展的動態海報更特殊,搭配手機APP程式用AR技術與海報互動,以達到動態海報視覺。

post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦
post推薦