Initial Site

Initial Site

Initial Site

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

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

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

もうすっかり春ですね。

ヨシオカです。

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

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

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

563397418

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

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

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

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


コメントをどうぞ

技術の記事

  1. 無題
    WordPressで出力内容が動的に変わる固定ページの<title>を変更
  2. startup-593296_960_720
    XAMPPのローカル環境を同じ社内LAN内の別PCからアクセスする方法
  3. 呪文
    実は俺、、、ホイミ使えます。
  4. printscreenFTHG9249_TP_V
    JSON形式でPOSTされたデータの受信方法