グラデーションにしてみよう

場合にもよるが、一般的にエンブレムはグラデーションを使うときれいに見える傾向がある。 ただしそれは虹色に塗るべきじゃという話ではなく、一見グラデーションには見えないようなわずかな色の違いをつけることで、 大きな視覚効果を得られるという話じゃ。 例を見てみよう。

グラデーション前の画像

これは君らが住む国の旗じゃな。白と赤の基調が大変美しいな。 このエンブレムは赤と白の2色でできておる。 このままでもよいが、グラデーションにしてみよう。

グラデーション後の画像

このとおり、風にたなびいているような雰囲気が出たな。 ただのベタ塗りだと、あまりにも色が奇麗かつ均一すぎて現実味がない。 まるでコンピュータグラフィックスになってしまうのじゃ。

現実に、完全にきれいな白や赤というのはありえない。 必ず少し汚れていたり、黄ばんでいたり、テカッていたりするものじゃ。 それら微妙な色加減を感じ取り、わざと少し色を変えることで、 コンピュータグラフィックスではない現実にありそうな色にしておくといい。

なお、エンブレムはとてもちいさい絵じゃから、小さくても分かりやすいように、 現実より少々おおげさ気味に黒ずませたりテカらせたりして色を加えるといい。 いわゆる「現実よりも現実らしい絵」をめざすわけじゃ。

「ペイント」での操作方法

市販のペイントソフトはグラデーション機能があるじゃろうから、説明は割愛しよう。 ここではWindows付属のペイントを使用する場合の説明じゃ。

画面左下のカラーパレットは、ダブルクリックで好みの色に置き換えることができるのじゃ。 やってみよう。

  1. まず、パレットの適当なマスをダブルクリックする。
    グラデーション手順1
  2. カラー調整ダイアログがでてくるので、好みの色をつくって「OK」を押す。
    グラデーション手順2
  3. カラーパレットにその色が現れ使用可能になる。簡単じゃな。
    グラデーション手順3

さて次にグラデーションのつくり方じゃ。 鉛筆ツールで地道に作るのもいいが、直線ツールでグラデーションすることもできる。 やってみよう。

  1. まず、16x12の白図を用意して「拡大表示」し、パレットに使用する色を用意しておく。
    手順1
  2. 色を選んで直線を引く。この例ではナナメに引いてみた。
    手順2
  3. その隣に、違う色で平行な線を引く。
    手順4
  4. これを繰り返す。
    手順5

このようにするとグラデーションになる。 もちろん、細かい部分や細い部分は鉛筆ツールで調整するとよいじゃろう。

また、一度グラデーション化するとその後の修正が大変になる。 絵は前景と背景を別々に保存しておくと、今後の編集が楽になる。

  1. まず、前景を作る。背景は適当な色で塗って保存しておく。この背景を透過色と呼ぶ。
    手順1
  2. 次に背景を作り、保存しておく。
    手順2
  3. 背景と前景を開き、前景を「メニュー→編集→コピー」しておく。
    手順3
  4. 背景に前景を「メニュー→編集→貼り付け」する。
    手順4

手順4のとき、設定しなければならない場所が2箇所ある。 絵の中で赤丸で囲んだ場所じゃ。

1つめは上の赤丸、透過モード選択と呼ばせてもらうが、ここで下を選んでおくと背景色が透過されるんじゃ。

2つめは下の赤丸、カラーパレットじゃ。 右クリックパレットのほうに、透過したい背景色を選んでおく。今回は水色を選択してあるから、水色が透過された。

このように前景と背景を別にしておくと、あとで背景だけ変更したい時に役に立つ。 あとから絵を調整したくなるのは人の常だから、ぜひ実践しよう。

アンチェイリアスしてみよう

さて、いったん話を国旗に戻そう。 この絵を見て気づくことはないかな? そうじゃ。赤い丸の縁がギザギザになっておる。 これはジャギー(和訳:ぎざぎざ)と呼ばれるものじゃ。

アンチェイリアス前の画像

ジャギーのある絵はまるでコンピュータグラフィックスじゃ。 古来より人間はこのジャギーを消すことを研究した。 その成果がアンチェイリアスという技術じゃ。 実際にやってみようかの。

アンチェイリアス後の画像

これがアンチェイリアス化した国旗じゃ。 どうじゃ?ジャギーが消え、縁が丸みを帯びているように見えるじゃろう。 このように、アンチェイリアスはカーブをなめらかにごまかす技術なのじゃ。

アンチェイリアス前の画像 アンチェイリアス後の画像

拡大すると、アンチェイリアスはぼかし技術に似ていることがわかる。

アンチェイリアスを作る考え方はこうじゃ。

  1. まず、絵を大きく作る場合を考える。今回は10倍にしてみた。
    手順1
  2. 次に、それをリネージュ用に横16縦12マスに区切る。
    手順2
  3. 1つのマスに白と赤が混在している部分は、その色をその比率で混ぜてピンク色にしてしまう。
    手順3
  4. これを繰り返すとアンチェイリアスのできあがりじゃ。
    手順4

色を混ぜる計算は、細かく調べなくてもある程度テキトウで良い。 この場合は純白、赤33%、赤66%、そして純赤の4色程度をそれっぽく配置すれば十分に見た目の効果を得られる。

市販のペイントソフトを使っている場合は、画像の縮小機能などをうまく使うとよいじゃろう。 一番簡単なのは、大きい旗を描き、それをリネージュ用に16×12に縮小する方法じゃ。

じゃが、大きく描いて縮小する方法には弊害がある。 縮小する事を計算にいれて旗を描かないと、細い線が縮小後に極細化して見えなくなったり、細かい色使いがつぶれてがっかりすることもあるじゃろう。

じゃから、手間をかけて奇麗に作りたいのなら、最初から16×12の大きさで作ることじゃ。 既に述べた通り、細かい計算はせず、虫メガネツールで大きくしたり小さくしたりして確かめながら、1ピクセルずつ丁寧に色をおいて行くと良いじゃろう。

ついでに、「隣り合うピクセルは同じ色にしないマイルールを作って守る」というのも効果があるじゃろう。 細い線を描くとき直線ツールで線を引いて満足しておらんかな? その場合は仕上げの時に鉛筆ツールを使用し、直線をグラデーションに変更してみるとよい。 既に述べたとおり、陰や反射などによって色は微妙に変わるため、線1本を見ても少々おおげさ気味にグラデーションすることによって、 よりリアルに錯覚させることができるのじゃ。

米国国旗のグラデーション例

これがそのマイルールに従った例じゃ。 下書き段階はベタ塗りでつくり、仕上げ段階でグラデーションに変更した。 同じ色が隣り合っている部分はなくしてある。 うーむ、例が悪かったかの…

透明部分の境界線の色がおかしくなる

「周囲が透明なエンブレム」を「大きく作って縮小した」場合、問題が起きることがある。 主に市販のペイントソフトを使用した場合に見られる現象じゃ。 例えば、下記のような場合じゃな。

縁のおかしいエンブレム

なんだかエンブレムの周りにポチポチと黒い点が付いてしまっているのう。 これは、「エンブレムの色」と「透明化するはずの黒い色」が混ざってしまったために起きる現象じゃ。

実際に失敗させてみようかの。

  1. 大きなリンゴを描き、周囲は透明化のため黒く塗る。
    手順1
  2. リネージュ用に横16縦12に縮小する。
    手順2
  3. エンブレムとしてリネージュに読み込ませる。
    縁のおかしいエンブレム

これが失敗例の手順じゃ。エンブレムを拡大して分析してみよう。 赤い丸の周囲が黒くアンチェイリアスされてしまっている。 「黒い部分は透明になる」と既にご説明したが、「黒っぽい赤も透明になる」わけではない。 つまり透過目的の黒い背景とその前景の境界線はくっきりしていなければならないということじゃ。

正解を見てみよう。

  1. いったん、周りを白く塗ってみよう。そうすると、黒いポチポチの原因がわかるじゃろう。
    手順1
  2. 黒いポチポチを赤で塗りなおす。
    手順2
  3. 周りをもう一度黒く塗る。
    手順2
  4. エンブレムとしてリネージュに読み込ませる。
    縁のおかしいエンブレム

これで色が混ざることはなくなった。

オークの儂に語ることができるのはここまでじゃ。 モノを考えるのは君ら人間族の方が得意なようじゃしな。 世間は広い。ぜひ自らの目でみて確かめ、考え、実践してほしい。 盟主たる君の栄光を祈っておるよ。

このページはご参考になりましたか?ぜひお知らせください。


ご意見(空欄可):

今後の参考にさせていただきます。