英姿颯爽

日々の気づきや、技術的なお話です。

【デザイン】Twitter上で変化する画像

今日も1日お疲れ様です。

<余談>

今日は忙しくなりそうなので、このような時間での更新です。
最近、こればかり取り上げている気がしますが
「がっこうぐらし」の第3話が放映されました。

今回は、物語の確信に近づくような過去にスポットが当たります。
ついに「めぐねぇ」にスポットが当たり、物語の確信が少しづつ紐解かれていきますね。

「あのとき」というタイトルから、そのことが起きた日のお話しです。
ちょっと、いろいろと衝撃すぎて思考が停止しますね…

なぜ、これを日常アニメとして売り出したんでしょうか…笑


Twitter上で変化する画像

皆様はこのような画像をご存知でしょうか?
f:id:kurischool:20150725011141p:plain
f:id:kurischool:20150725011151p:plain

一時期、Twitterの方で話題になった
「クリックすると変化する画像」です。


(引用)


素敵で面白い画像ですよね。
これの仕組みについて少し、調べて試してみようと思います。


仕組みは2枚のレイヤー

この画像、レイヤーが2枚から作られているようです。

①クリックされた後に表示されたいものを、白で描画したレイヤー
②クリックされる前に表示したいものを、黒で描画したレイヤー


このレイヤーを、重ね合わせて透過したものを書き出すとできるようです。


テストとして、すごく簡単なものを作ってみました。

f:id:kurischool:20150725012655p:plain

今回は、クリックする前に変化はいらないので
①のレイヤーのみです。

白色で、グリグリっとダイヤのようなものを描いてあげて
f:id:kurischool:20150725012808p:plain


書き出す際に「透過PNGにしてあげることで完成です。


留意点

Twitterの公式サイトまたは、公式のアプリから閲覧すること
・②のレイヤーを上にすること
・書き出す時は透過PNGにすること


これら3つは必ず守るようにすれば、作品が作れますね。

(http://matome.naver.jp/odai/2137774206346622701 参照)

しっかりとクリックで変化するようにしてみました。



2種類のレイヤーはこんな感じです。
f:id:kurischool:20150725014013p:plain
f:id:kurischool:20150725014017p:plain


この2つを
f:id:kurischool:20150725014037p:plain


このような階層にして、透過PNGで書き出すことで
クリックして変化する画像になっています。

これは面白いですね。
よく考え付きますね…


失礼します。