【デザイン】Twitter上で変化する画像
今日も1日お疲れ様です。
<余談>
今日は忙しくなりそうなので、このような時間での更新です。
最近、こればかり取り上げている気がしますが
「がっこうぐらし」の第3話が放映されました。
今回は、物語の確信に近づくような過去にスポットが当たります。
ついに「めぐねぇ」にスポットが当たり、物語の確信が少しづつ紐解かれていきますね。
「あのとき」というタイトルから、そのことが起きた日のお話しです。
ちょっと、いろいろと衝撃すぎて思考が停止しますね…
なぜ、これを日常アニメとして売り出したんでしょうか…笑
Twitter上で変化する画像
皆様はこのような画像をご存知でしょうか?
一時期、Twitterの方で話題になった
「クリックすると変化する画像」です。
「見えないものを見ようとして望遠鏡を覗き込んだ」 クリックで見えないものが見えたらRT ※閲覧はTwitter公式推奨 pic.twitter.com/8PCVR9UeTP
— TAKI@BUMP8/4 (@taki_bump) 2013, 9月 3
(引用)
素敵で面白い画像ですよね。
これの仕組みについて少し、調べて試してみようと思います。
仕組みは2枚のレイヤー
この画像、レイヤーが2枚から作られているようです。
①クリックされた後に表示されたいものを、白で描画したレイヤー
②クリックされる前に表示したいものを、黒で描画したレイヤー
このレイヤーを、重ね合わせて透過したものを書き出すとできるようです。
テスト pic.twitter.com/61Onbpz33j
— くりす (@clip_kurisu) 2015, 7月 24
テストとして、すごく簡単なものを作ってみました。
今回は、クリックする前に変化はいらないので
①のレイヤーのみです。
白色で、グリグリっとダイヤのようなものを描いてあげて
書き出す際に「透過PNG」にしてあげることで完成です。
留意点
・Twitterの公式サイトまたは、公式のアプリから閲覧すること
・②のレイヤーを上にすること
・書き出す時は透過PNGにすること
これら3つは必ず守るようにすれば、作品が作れますね。
テスト2 pic.twitter.com/yiLiN6ShHq
— くりす (@clip_kurisu) 2015, 7月 24
しっかりとクリックで変化するようにしてみました。
2種類のレイヤーはこんな感じです。
この2つを
このような階層にして、透過PNGで書き出すことで
クリックして変化する画像になっています。
これは面白いですね。
よく考え付きますね…
失礼します。