お絵かき掲示板Art.netイラスト講座>投稿イラスト講座 vol.14『反転絵について』トメヂさん

投稿イラスト講座vol.14『反転絵について』

イラスト講座作成:トメヂさん 制作日:2009年10月16日

『反転絵について』

画像をドラッグして選択( ctr+A )を利用した絵
(自分は反転絵と呼んでいます)についての説明です。
描いた絵を消したり、別の絵を出現させることができます。

これはブラウザの性質を利用した技法なので、
環境によっては反転絵の効果を見ることが出来ない場合もあります。

それと、これも結構だいじな事なのですが、
手品のタネを知ってガッカリしたことってありませんか?
摩訶不思議に思えたことでも、実際に
やっていることは驚くほどあっけなくて、
「なんだそんなことなの」ということがあります。

なぜこんなことを書き出したかというと、
反転絵の仕掛けは、あっけないものだからです。
内容を知ってしまうと
純粋に楽しめなくなる可能性があります。

反転絵を見て楽しむのではなく、
描いてみたい、という方のための講座です。
そこを踏まえたうえでご覧ください。

ctr+A
WindowsInternetExplorerなどのブラウザをお使いの場合は、画像をマウスでドラッグして選択するか、あるいは、ページの何もない部分で、右クリックメニューを出して、「すべて選択」を選びます。または、キーボードの[Ctrl]を押しながら[A]を押すと、画面の色が反転します。

ブラウザの右クリックメニュー

ブラウザ上をドラッグして選択したときに画像を覆うものを、以下「フィルター」と呼びます。

クオリティ1を前提に書いていますが、それ以上でもおそらく大丈夫でしょう。
2と3は確認しました。

ページ最上部へ | 1.タネをつくる | 2.なぜそのように見えるの? | 3.応用1「図と地」 | 4.応用2「薄消し」 | 5.その他・豆知識 |

1.タネをつくる

鉛筆(A値MAX)+ 任意の色で画面すべてを塗りつぶし、
消しゴム + テクスチャ7番をキャンバス全体にかける。
これでタネの完成です。おしまい(笑)
タネの下のレイヤーに描いたものは、
ドラッグして選択したときに消えます。

>>A値(透明度変更)の使い方

1.タネをつくる
ページ最上部へ | 1.タネをつくる | 2.なぜそのように見えるの? | 3.応用1「図と地」 | 4.応用2「薄消し」 | 5.その他・豆知識 |

2.なぜそのように見えるの?

2.なぜそのように見えるの?

 フィルターを拡大してみると、
 非常にこまかな市松模様になっていることが分かります。
白い部分は白色ではなく、無色の隙間で構成されています。

 タネはこの市松模様を
 1ピクセルずらしたものとなっています。

 ドラッグして選択すると、タネの市松模様の隙間部分を
 フィルターの市松模様が埋めるので
 上記のような絵をつくることができるのです。


ページ最上部へ | 1.タネをつくる | 2.なぜそのように見えるの? | 3.応用1「図と地」 | 4.応用2「薄消し」 | 5.その他・豆知識 |

3.応用1「図と地」

仕組みが分かったところで応用です。
テクスチャ7番とフィルターは同じものであり、テクスチャ7番で消した部分がタネとなります。

他にもいくつかあるのですが、講座としてご紹介できるのはいまのところ二つです。

フィルターがかかったときにシルエット(図)が浮かびあがるように作成します。
イラスト資料写真館 No140 ぺんたさんの投稿写真を参考にさせていただきました。

3-1.

鉛筆一色でシルエットを描く。

レイヤー0
3-1

3-2.

レイヤー間コピーで同じものをもう一枚つくる。

レイヤー1

>>コピーの使い方

3-2

3-3.

   シルエットに使用した色をマスクし、
     任意の色でテクスチャ7番をキャンバス全体にかける。

レイヤー1
レイヤーは上下どちらでも構いません。 (作例ではレイヤー1)

>>マスクの使い方

左上から七番目のテクスチャーを使います。
テクスチャ

3-4.

   シルエットに使用した色を逆マスクし、
     消しゴムでシルエット部分だけ消す。

レイヤー1
3-4

3-5.

   3-4とは違うほうのレイヤーにうつる。
レイヤー0
     シルエットに使用した色を逆マスクし、
     3-3で用いた色に変える。

 

3-6.

   その色を再び逆マスクし、
     消しゴム + テクスチャ7番で消す。

レイヤー0
3-6

3-7.

   ふたつのレイヤーを表示させて完成。


  陰影の細かなところはドットが入り乱れて
  上手く隠れているのですが、ベタの部分は
  エッジが際立ってラインがある程度でているのが
  分かるかと思います。

[Ctrl]+[A]で選択すると絵が出てきます。

3-7

ページ最上部へ | 1.タネをつくる | 2.なぜそのように見えるの? | 3.応用1「図と地」 | 4.応用2「薄消し」 | 5.その他・豆知識 |

4.応用2「薄消し」

タネを部分的に薄く消します。
フィルターという共通の色がキャンバス全体にかかることで
消したところとそうでないところのコントラストが強まり、
消した部分が浮かび上がってみえます。

4-1.

   好きなように絵を描く。
     と言っても
     あらかじめどのように変化させるか練っておく。
     モノクロである必要はないが、
     色はしぼったほうが仕掛けが目立たない。

4-2.

   新規レイヤーにタネを作成。
     より強い差を出したいのであれば、
     タネの色は黒に近い方がよい。
     タネのかかった状態で描いた絵を見て、
     必要であれば
     焼きツールなどをつかって明るさを調節する。
     画像は暗いと感じたので焼いて明るくしてみたところ。

4-2

4-3.

   新規レイヤーに
     タネに使用した色とは別の一色で変化後の絵を描く。
     のちに下の絵が透けることになるので
     内容によっては下の絵が目だってしまう。
     このあたりをあらかじめ考え、デザインすべし。
     描き終わったら、消しゴム + テクスチャ7番を全体にかける。
     タネの上にレイヤー移動させてから、
     タネと変化後の絵ふたつを結合させる。

4-4.

   4-3のレイヤーをコピーで二枚にし、マスク・逆マスクをつかって
     変化後の絵とそれ以外に分離させたのち、
     変化後の絵の色をタネの色に統一させる。

4-3

4-5.

   4-1で描いた絵を可視にして、
     変化後の絵のレイヤー可視レベルを
     お好みで調節して完成。
     フィルターのレイヤーをつくっておくと便利。
     画像は35パーセント。

4-5

  明るめの色と暗めの色で「てすと」の見えかたが変わるのが
  分かるかと思います。
  今回はエッジをすっきりさせたかったのでマスクを利用し、
  レイヤーの可視レベルを下げることで薄消し部分をつくりましたが、
  もちろん、消しゴムでも、薄消しゴムでも可能です。

  消しながらつくる場合は、
  タネを二枚にしておくと便利です。
  削る作業でやりすぎたかなぁと感じたらその部分だけ、
  控えていたタネからレイヤー間コピーで
  持ってくることで修復が可能になります。

ページ最上部へ | 1.タネをつくる | 2.なぜそのように見えるの? | 3.応用1「図と地」 | 4.応用2「薄消し」 | 5.その他・豆知識 |

5.その他・豆知識

その他・豆知識

 ・フィルターのRGB値 → (159.96.112)

 ・画像が劣化(容量削減のための色圧縮)すると
  多少みづらいものとなってしまう。

 ・テクスチャ2〜7番はフィルターがかかると消える。
  着ていた服が消える、なんてことも出来ますね(笑)

 ・細かな市松模様による錯視(常に波を打ってみえる)
  が起こることがあります。
  モニタの発色具合や室内の明るさによっても変化するようなので、
  自分の環境でそう見えるからといって相手の環境でも
  そう見えるとは限らないのが残念なところ。
  とても面白い現象なので、発見できた方はラッキー!

 ・この技の効果を見れる・見れないブラウザ
  IEに使用されているエンジン(Trident)
  がキーポイントのようです。
  他のエンジンでは見ることができません。

  デフォルトでは見れないブラウザでも
  拡張機能などによっては見ることができるでしょう。


このイラスト講座は役立ちましたか?  CTぱちぱち。

あとがき

 我流ですが知っていることを書いてみました。
 お役にたてれば幸いです。
 上手くまとめることができたら
 応用その2を投稿したいと思います。

 いっけんしてインパクトがあるし、
 おもしろい技法だなとは思いますが、
 全ての人が効果を体験できるわけではない、
 楽しめない人もいる、ということを忘れずに〜!

ページ最上部へ | 1.タネをつくる | 2.なぜそのように見えるの? | 3.応用1「図と地」 | 4.応用2「薄消し」 | 5.その他・豆知識 |

トメヂさんの絵師名簿 | テキスト掲示板


お絵かき掲示板Art.netイラスト講座>投稿イラスト講座 vol.14『反転絵について』トメヂさん