【Twitter】クリックした画像を変化させる方法

今回はツイッターで最近はやっている「クリックすると変化する画像」について調べたので紹介したいと思います。

あれ?クリックした画像と違う?

最近twitter上で不思議な現象が起きています。

それは、サムネイルに表示される画像とその画像をクリックして表示した画像が違うという現象です。

おそらく一番有名な画像はこれではないでしょうか?

ダウンロード

この画像をクリックすると・・・

ダウンロード (1)

このようになります。

めちゃくちゃビックリしますよね!!

実際に見てみたい方は自分が使っているツイッターのアプリなどで「エレン」と調べると出てきますよ。
※(なぜか進撃の巨人のエレン関係の画像が多いため。)

さて、このような画像ってどのようにして作られていると思いますか?

すごく特殊な技術を使っている?

そんなことありません。

実はこれ、twitterが画像を表示する際に処理するある仕組みをうまく利用して作られているんです。

twitterは画像の表示に関して

・サムネイル時 → 透過してある部分を白くする

・詳細表示時 → 透過してる部分を黒くする

このように設定されています。

上記のエレンの画像の場合だと、巨人の部分の黒の部分はすべて透明(透明度はかえてあります)にしてサムネイル時には真っ白に見えるようにし、

詳細を表示した際はその透明部分が黒くなるので巨人が浮かび上がるようになっているのです。

ちなみにこれは背景を消すことが出来るソフトがあれば簡単に作れます。

実際に作ってみた。

まず、画像修正ソフトを使って真っ白の画像を用意します。

howto1

次に、詳細を表示したときに表示させたい絵、文字を消しゴムで消して書いていきます。

今回は「消しゴムで背景を消したよ」という文字を書いてみました。

howto2

実際にtwitterにアップするとこのように、真っ白な画像として表示されます。

写真 2013-09-09 1 48 52

しかし画像をクリック(タップ)して詳細ページに飛ぶと

写真 2013-09-09 1 43 34

という風に表示されました。

上記の例のようにかっこ良く作ってはいませんが、このように黒い線を書きたい部分を細く消していけば、

絵が出来上がっちゃいます。必要なのは諦めない心!photoshopを上手く使える人は幸せになれるかも!

結論

このように画像編集ツールがあれば、誰でも簡単にちょっとしたサプライズ画像を作成することが出来ます。

アイディア次第でいくらでも面白い画像が作れますよ♩

誰か大切な人へのちょっとしたサプライズとして使ってみてもいいかもしれませんね。

ありがとうございました!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク