少し前なのですが…
Twitterで、画像の透過を使った「クリック推奨イラスト」が流行中 ポチッてビックリ – ねとらぼ
@itm_nlabさんから
こんな記事が紹介されていました。
ツイッターのタイムラインの背景がクリック前は白、クリック後は黒という事を利用したおもしろトリックです。
一瞬で見かけなくなりましたが（笑）、アイディア次第ではインパクトのある告知等に使えそう。
ブームが忘れ去られた頃にひょっこり使ってみるといいかもしれません。
ということで…
クリック推奨イラストの作り方
作成方法と言ってもコツは3つだけです。
コツ1. TLで表示させたいものは黒で、クリック後表示させたいものは白で描く。
左がTLの表示、右がクリック後の表示サンプルです。
コツ2. 画像の保存形式は透過できるPNGもしくはGIF形式で。
左のように白背景へ直接描画するとクリックしても激変しません。
コツ3.グレーで微妙な表現をしたい場合は透過の度合いで表現。
A:黒背景、白描画↓
こちらはTL上では白、クリック後に上記の表示になります。
※画像のリンク先でお試しいただけます。
B:白背景、黒描画↓
こちらはAとは逆にTLでは表示され、クリック後に絵が消えます。
※画像のリンク先でお試しいただけます。
※いづれも数字は透過のパーセンテージです。
この描画色の透過％を使い分けて複雑な画像を表現していきます。
コツは以上3つです。
さらに、白黒ともに抜きと塗りの違いでもう少し複雑な表現ができるのですが…
難しくなってしまうので、こちらではここまでとします。
（次の写真を使ったサンプル画像の方で少し触れました。）
もちろん、白と黒だけのシンプルな画像でもそれなりのインパクトを出すことは出来ますよ♪
※ツイッターを埋め込んで記事内で表示すると、TLの表示と違ってしまう（黒背景の方が表示される）ようですので、画像からツイッターへのリンクにしてあります。
写真を使ってトリックアートを作ってみる
次はサンプルの写真を使ってもう少し複雑な表現をしてみます。
1.白、黒、グレーに画像を分けやすくするため、イメージ⇒色調補正⇒レベル補正 で画像のコントラストをキツ目にします。
コントラストをキツ目にした画像↑
▼
2.イメージ⇒色調補正⇒白黒 で画像を白黒にします。
▼
3.黒の部分を切り取ります。
選択範囲⇒色域選択⇒黒の部分を選択⇒Control+Vで切り取り
黒の部分を初めからTLで表示したい場合は黒のまま残します。※詳細は後述
▼
4.先ほど切り取った部分がクリックすると黒く表示される部分です。
▼
5.残りの部分をグレーの濃度ごとに 切り取り⇒新規レイヤーにペースト していきます。
▼
6.全てのレイヤーの画像をレイヤー効果⇒カラーオーバーレイで白にします。
▼
7.それぞれ画像のグレー濃度に応じて透過を設定します。
コツは濃いグレーほど透過の％を大きくするということです。
先ほどのレースの画像を参考にしてください。
▼
出来上がりはこんな感じです。
ちなみに、抜きの黒（選択して切り取った部分）と塗りの黒（シェイプなど）の使いわけで…
※窓枠⇒切り抜き、鳥⇒塗り
こんな風に遊べます♪
完成ツイッターはこちら↓
※ツイッターを埋め込んで記事内で表示すると、TLの表示と違ってしまう（黒背景の方が表示される）ようですので、画像からツイッターへのリンクにしてあります。
今回は説明の為、トリック部分だけにフォーカスしましたが、アイディア次第で面白いことも出来そうです。
例えばねとらぼさんのサンプルのように、可愛い女の子が実は血まみれだったとか；、Tシャツと思っていたら水着だったりとか、恐い上司だと思っていたら実は怖い同僚だったりとか（笑）
くつきの場合は「クリックでヒゲ出現！」とか「TLおみくじ」のようなアホなものしか思いつきませんでしたが…（＞. ＜；）
いつかどなたかのアイディア光る『クリック推奨イラスト』をTLでお見かけできたましたらこれ幸いでございます♪
でっは～(*´∀｀*)ﾉｼ
オマケ1：GIFPALの使い方
最後のGIFはGIFPALで作成しました。
使い方はこちら♪
オマケ2：PINGの正式名称
今回記事を書くに当たってPNGとGIFをwikiってみたわけですが…
PNG形式⇒Portable Network Graphics（ポータブル ネットワーク グラフィックス）
⇒GIF形式Graphics Interchange Format（グラフィックス インターチェンジ フォーマット）
の略だそうです。
くつきは初めて知りました。。。
リンク先はグーグル翻訳ですので、ぜひステキな音声をお聞き下さいませ。
ランキングに参加しております。
記事がお気に召しましたらクリックしていただけると嬉しいです♪
