Initial Site

Initial Site

Initial Site

シネマグラフを作ってみた

  • ヨシオカ  2018/04/16 11:45
少しだけ試行錯誤しつつ…も、簡単にできます

少しだけ試行錯誤しつつ…も、簡単にできます

もうすっかり春ですね。

ヨシオカです。

今日は以前からやってみたかった「シネマグラフ」をadobeさんにやり方が詳しくあったので、photoshopで作成してみました。

シネマグラフとは?…写真の一部が動いてるgifアニメーションのことです。数年前からじわじわとおしゃれサイトやSNSで見かけるようになってます。

まずいい動画を持ち合わせていなかったので、Pexels Videos さんという無料動画を商用可で紹介してるサイトさんから頂きました。
30分もかからず出来たので、手持ちにあったロゴテンプレートに社名なんて入れてgif動画へ。

563397418

注ぎ込む水の部分のみを動かしてみました。中の水も動かすか考えましたが、今回はお試しだったので。

なんとも不思議な感じです。

最近は動画を再生したり、CSSアニメーション等で動くwebサイトが増えています。

その中でも昔からあるgifアニメーションでオシャレに表現できるシネマグラフ、ぜひ活用してみたいですね。


コメントをどうぞ

技術の記事

  1. 呪文
    実は俺、、、ホイミ使えます。
  2. printscreenFTHG9249_TP_V
    JSON形式でPOSTされたデータの受信方法
  3. stressed-elderly-old-man-using-260nw-307307456
    Eclipse でSVNを使っていたら色々と大変だった話
  4. 少しだけ試行錯誤しつつ…も、簡単にできます
    シネマグラフを作ってみた