もうただの「お絵描き講座」になっているこのコーナーですが、うわ 気付けば2年ぶり!?
もうお気づきになっていることでしょうが、冒頭のCGは「Ctrl+A」やマウスドラッグにより範囲指定する事で
隠された別のCGが浮かび上がるギミックが仕込まれています。(※ブラウザによっては出来ません)
このCGの作り方をココで述べてみたいのですが、この文章を書く直前になって作成ツール(フリーウェア)
を発見してしまい、そっちの方がカンタンに作れてしまうので面倒な人はソレでどうぞ。
などと のっけからミもフタも無い滑り出しである。
1・先ず範囲指定とは
IEを例にとって説明しますが、「範囲指定」されたCGは青っぽくフィルタが掛かります。

| →
| 
|
ココで重要なのがこのフィルタ、「半透明」でなく「不透明の市松模様(1×1ドット)」を重ねてあるという点。
拡大してみるとこう。↓

| →
| 
|
つまり、この「市松模様に重なる部分」は範囲指定することで完全に隠れているという事になります。
という事は隠れる部分と隠れない部分で違う絵を合成すれば 範囲指定on/offで違う絵が見えてくるのです。
2・その合成方法は
というワケで視認させたい絵と隠したい絵の2枚を用意しましょう。
便宜上「視認側」をA・「隠しCG側」をBとします。
A

| &
| B

|
で、それを前述の市松模様で抜いていくワケです。
使用ツールはフォトショップですが、レイヤーの使えるソフトなら大抵可能だと思います。

Aは「フィルタで隠れる部分」を抜きます。
| +
| 
Bは「フィルタで隠れない部分」を抜きます。
|
↓

合わせると こう。 あれ?
しかしこのままではAB両方のCGがクッキリ見えてしまっています。
なので この時点ではまだ完成ではありません。
3・隠匿
最後の仕上げにBの彩度・明度を下げ(場合によってはAの彩度・明度も上げます)、
BのCGを見えにくくしていきます。
そうする事によって相対的にAが目立ち、結果Aが視認しやすくなりBが「隠される」ワケです。
−あとがき−
冒頭で書いたが、このギミック付きCGを描きたいと思った時 どうしても作成ツールが見つからなかったので
上述の作成方法は他所の指南サイト&独学で身に付けたものです。
さほど需要の無いテクニックではありますが、ただこれだけでもネタになるので
挑戦してみる価値はあると思います。
あと注意! せっかく作ったCGも、ページレイアウト次第では市松模様のパターンが逆になり
全く見えなくなりますのであしからず。
最後にお土産です。 作成時の道具にどうぞ。 ( ・ω・)つCtrl+Aフィルタ(.gif画像)
-使い方-
1・青か白を範囲選択する!
2・1枚をソレで抜き、範囲を反転してもう1枚を抜く!
3・合成して以上。