-Binchan Kamisan- PSP -

PSP CG講座

・‥…━━━☆ きほんじこう ☆━━━…‥・

★扱う分野

まず初めに断っておきます。CG講座といっても、自分が得意としている分野に限られます。 80×80〜150×150ピクセルくらいの「ちっちゃいCG」を きれいに仕上げるコツをまとめています。(要するにアイコンですね) 完全に独学なので、「な〜に言ってんだ、嘘つき!」ということも十分あり得ます。 そういう場合は メール掲示板で教えていただければ幸いです。

I.まずすべきこと

【Image電ボ@奈良漬】

はじめに、何を書くかを決めておきます。(あたりまえか)

ここでは、例として、酔っ払い電ボを用いることにします(上のイメージ )。

さて、ペイントショップ・プロ(以下PSPとします)を起動して、最初に行うのは、新規作成ボタン(下図)をクリックすることです。(ショートカットキーは、【Ctrl+N】

すると、キャンパス(画用紙)のサイズを聞いてきますから、迷わず1000×1000ピクセル、背景色「白」に指定します。(※)

新規作成画面

このコマンド入力が、「儀式」のようなものです。

<注意>

【キャンパスの色】

もしホームページ素材として使うなら、そのホームページの背景色に合わせる。

【イメージの種類】

必ず【True Color(24ビット)】にする。これ以外だと、使えなくなるツールがある。 (※)大きければ大きいほど縮小したときに綺麗なラインができますが、メモリーの関係上、 これ以上大きくすると各処理に時間がかかってしまいます。(PCの環境#メモリー容量によって、 最適なサイズが違います)

II.下書きを書く

下書きは最初はできるだけ書いたほうが良いと思います。

まず、【ブラシ】のアイコン(下図)をクリックします。(ショートカットキーは【B】

ブラシアイコン

次に、ブラシの種類を指定します。↓この部分にカーソルを合わせてみてください。

ツールオプション(閉)

すると、下図のようなボックスが現れます。ブラシの太さ(サイズ)などを好みの設定にしましょう。

ツールオプション(開)

<注意>

サイズ

8前後がオススメ。

※・・・・ここをクリックすると、ブラシの種類を選べます

下書きなので、設定は適当で構わないでしょう。

colorbox

ブラシの色は、このカラーボックスを使って変更します。適当な色をクリックします。 厳密に色を選ぶときは、下の四角いボックスをクリックして行いますが、それは後ほど。因みに下書きは灰色がオススメ。

では、早速下書きを書いてみます。大体、こんな感じでOKです。下のは、かなり上出来な部類です(笑)

電ボ下書き

<注意>

できるだけ大きく書く。

顔、羽、手足など、各パーツの大きさのバランスに気をつける。

ちなみに、紙にかいて、スキャナーで取り込んだほうが、2倍早いです。が、持ってないので仕方なくマウスで書いてます。

III.便利なツール

大事なことを書くのを忘れていました。PSPで絵を書くのに、欠かせないものがあります・・・

「インテリマウス」です。

これは、左右のクリックボタンの間に、スクロールボタンのついたマウスです。この「スクロールボタン」を上方向に押すと画面が拡大し、下方向に押すと画面が縮小します。細かい部分に手を加える際には2倍、全体のバランスを見ながら作業する際には1/4に画面の比率を変更する必要があるため、この「拡大・縮小」は、頻繁に行うことになります。是非とも用意しましょう。

IV.下書きのラインをトレースする

今書いた下書きは、【バックグラウンド】という名前の白画用紙に書かれたことになります。 ここからは、数枚の「透明のビニールシート」を重ねるようにして、絵を完成させていくことになります。 この「透明のビニールシート」を【レイヤー】と呼びます。

これから行う作業は、イメージ的には、下書きの上に透明のレイヤーを重ねてその上に書いていく・・という感じになります。(ここでは本当は必要ないのですが)レイヤーを作る作業をしてみます。

レイヤーパレット(閉)

左図のレイヤーパレットの上にカーソルを乗せます。

レイヤーパレット(開)

すると、上図のようなボックスが現れます。

左上のボタンを右クリックしてください。

ここで、【新しいベクタレイヤー(V)】を選択します(下図)。

レイヤー選択画面

すると、レイヤーの名前その他をどうするか聞いてくるボックスが現れますので、OKをクリックします。 (レイヤーの名前は適当に付けましょう) これで、「ベクタレイヤー」というものが、下書きの上に重ねられたことになります。 ただ、透明なので見た目は何も変わりません。

もう一度、レイヤーパレットを開いてみましょう。

レイヤー位置関係

【バックグラウンド】というのが、下書きを書いたキャンバスです。その上に、「レイヤー1」というものが加わりました。これが今新たに作成したベクタレイヤーです。(名前を変更していれば、レイヤー1の変わりにその変更した名前になります)

さて、【ベクタレイヤー】とは何でしょうか。

チョット違うんですが簡単に言ってしまうと「滑らかな線を描きたいときに必要なレイヤー」です。

では、早速「滑らかな線」で、下書きをなぞってみましょう。

「滑らかな線」は、【ドロー】というツールを使って書くことが出来ます。下図の「ドローアイコン」をクリックしてください(ショートカットキーは【I】

ドローアイコン

さて、この【ドロー】を使ってラインを書く前に、線の太さなどを決めておく必要があります。【ツールオプション】を開いてください。

ドロー1 ドロー2

【ドロー】のツールオプションには、3つのタブがあります。

左図は、一番左のタブを開いたもので、右図は真ん中のタブを開いたものです。右のタブは、あまり重要でないので省略しました。

左図の設定を次のようにします。

  • 種類:【フリーハンド】
  • スタイル:【輪郭線】
  • 幅:8(5〜9くらいでOK)

に設定します。そして・・

  • 【スムージング】、【ベクタデータ】のチェックボックスをオン
  • 【パスを閉じる】のチェックボックスをオフ

とすることも忘れずに・・

とりあえず意味不明かもしれませんが、最初はそんなもんです。

ちなみに、スムージングをオフにすると、線がギザギザに・・、ベクタデータをオフにすると、 書いた後、線の形を変えることが出来なくなり・・、パスを閉じるをオンにすると、曲線が閉じてしまいます。

右図の設定は次のようにします。

  • 曲線のなめらかさ:8〜15
  • 他の設定は、図のようにしてください

下書きを参考にしながら、ラインを描いてみたのが下図です。

電ボ(ライン&下書き)

実は、単に下書きのラインをなぞっただけでは、うまく行かないことがままあります。そんな時に、ベクタレイヤーのお世話になります。具体的には線の形を変えることができる・・ということなんですが、説明が長くなるので、また次回・・ということで。

・‥…━━━☆ ドローツールあれこれ ☆━━━…‥・

★ドローツールの利点

ここでドローツールがどれだけ便利なものか、ということを紹介したいと思います。

  • まず、これがなければとてもじゃないけど「マウスで」絵(キャラ物)を書き続ける気になれません
  • 手書きでは技術の必要な滑らかな曲線を書くことができます
  • あとから線の色、太さを変更することができます
  • あとから図形の位置を変更することができます
  • 一度ドローツールで作った図形は、何度も使い回すことができます(拡大縮小、変形可能)

公ちゃんの☆

例えばこの公ちゃんの星などは、一度作ってしまえば、もう作る必要はなくなります。変形して何度でも使うことができます。

★どのドローツールを使うか

で、やはりドローツールを楽しく使えるようになるためには、自由自在に思い通りの図形を書けるようになるのが理想です。さて、そのためのコマンドは何でしょうか?

ドローツールには、【直線】、【フリーハンド】、【ベジェ曲線】、【ポイント直線】があり、他にも便利なツールとして【図形ツール】というものがあります。

しかし・・・実はこれらのツールを使い分けるというのは、理想の図形を書くために少し便利だというだけなんです。

はっきり言ってしまえば、どれを使っても同じです(本当)。だから、色々なツールがありますが、混乱する必要はありません。みんなおんなじなんですよ(笑)。ので、慣れるまでは最も汎用性の高い【フリーハンド】だけで十分です。

これはどういうことかと言うと、上で挙げたツールで書くものは、すべて【ベクタデータ】であるということです(但し【フリーハンド】等のツールオプションで【ベクタデータ】のチェックがオンになっている場合のみ)。

ベクタデータはすべて、【ポイントの編集】というコマンドを使って曲線を曲げたり伸ばしたり、後から細かく変更することができます。そして、本当に綿密な作業というのは、この【ポイント編集】でしかできないのです。(例外:フォント)

ですから、「 自分の意図した図形とは少しくらい違ってもいいや・・」という意識で絵を書こうとしている方は、ここから先は読み飛ばしてください。ただ、その場合は下書きが非常に重要になってきます。そのため、下絵をスキャナーで取り込む手法をオススメします。それが不可能なら、最低でもタブレットが必要かと思われます。

★ポイントの編集

では論より証拠。ということで、フリーハンドで書いた下のタダの曲線を、公ちゃんの星に変形してみましょう。

その前に、上の状態について説明しておきます。上図の枠のようなものは「その図形が選択された状態である」ということを意味しています。ベクタデータとして図形を書いた直後は必ずこの状態になっています。選択が解除された状態から、再びこの状態にするには、【ベクタ選択】というコマンドを使います(下図)。

ショートカットキーは【Q】

ベクタ選択のモードにして、選択したい曲線をクリックすればOKです。


では上の曲線を細かく変形してみます。そのためには、【ポイントの編集】というコマンドを使うということは、前に述べました。

★ポイントの編集の開始方法★

  1. ベクタ選択モードにする
  2. 曲線を選択する
  3. 適当なところで右クリックして【ポイントの編集】を選ぶ

    (またはベクタ選択のツールオプション【ポイントの編集】)

ポイント編集モードになると、下のような表示に変わります。

上の図について説明します。四角いヤツが「ポイント」です。上図ではポイントが5個ありますね。フリーハンドで書くと、このポイントの数は書き方によって違ってきます。丁寧に滑らかに書けば、もっと少なくなるでしょうし、ぐちゃぐちゃに書けばもっと多くなります。このポイントを操作して図形を変形するわけですが、ポイントは後から増やしたり減らしたりできます。

以下では、次の操作を覚えます。

  1. 曲線を閉じる
  2. ポイントを増やす
  3. 山と谷を作る
  4. ポイントの種類を変更する
  5. 曲線の山の形を微調整する
  6. 曲線を開く
  7. ポイントを減らす

i.曲線を閉じる

曲線を閉じるには、

  1. ポイント(どれでもよい)をクリックして色を反転させる
  2. 【右クリック】⇒【編集】⇒【曲線を閉じる】またはショートカットキー【Shift+Ctrl+C】

とします。すると下図のようになります。

ii.ポイントを増やす

さて、この図形を公ちゃんの星に変形するのが目的でした。星という図形は、山と谷が五個ずつ計10個ありますね。そのため山の頂上と、谷の部分で曲線が急激に曲がっている形です。ポイントは、曲がり方の激しい部分につくるのが理想です。

ポイントの増やし方は・・

  1. 曲線上のポイントを付け加えたい部分に「Ctrlキーを押しながら」カーソルを合わせる
  2. 【+ADD】という記号が現れたら)クリックする

という方法です。ちょっとテクニカルですが慣れてくると便利なことが分かります。

↑ポイントを10個に増やしてみました。

iii.山と谷を作る

細かい調整は後回しにして、とりあえず星らしい形にしてしまいます。

下図のように谷となる部分のポイントを矢印の方向にドラッグします。

すると、まあ星に見えなくもない形になりました。

ここで、あまりにもひどいポイント(上図では○で囲んだポイント)くらいは直しておきます。このポイントは、他のものと比べて【ハンドル】が長すぎるということが直感で分かります。この【ハンドル】というのは、ポイントをクリックしたときに現れるもので、両端に三角と丸で表される2つの【コントロールアーム】があります。難しい話になるので、とりあえずこの【コントロールアーム】両端のどちらかをドラッグしてハンドルを短くすれば、上のような「緩やかな曲線」を鋭くすることができるということを覚えておきましょう。逆に曲線が鋭すぎるときは、コントロールアームが短すぎです。説明が悪いですが、とりあえず分からなければ何もしないで構いません。修正は最後にまとめてやります。(一応下図参照)

ちなみに、ポイントをクリックしなくても、そのハンドルの長さと傾きが分かるようになるまでは、ポイント編集は結構苦痛かもしれません。が、慣れだと思いますので頑張ってください。

そのうち、【ドローツール】すら最初の一筆しか使わなくなり、たった1回のポイント編集(※注1)だけで1つの絵が書けてしまうようになりますが、こうなるともう「絵を書いている」という実感はなくなりますので注意してください(笑)。

iv.ポイントの種類を変更する

微調整うんぬんの前にやっておく必要があるのが、このポイントの種類の変更(修正)です。

ポイントには、様々な種類があってはじめは混乱しますが、やはりというかなんと言うか、大切なのはたったの1つだけですので、安心してください。

それは・・【コーナー】という種類のポイントです。

どういうことかというと、ポイントの種類が【コーナー】であれば、他のほとんどすべての種類のポイントについて、それらが持っている性質を含んでいるわけです。

が!しかし、【左右非対称の曲線】という種類のポイントも重要です。 汎用性は【コーナー】に劣りますが、滑らかな曲線をつくるのに便利です。

で、その他ですが、存在を無視してしまって全く問題ありません(この辺は主観ですので書きたい絵によってはひょっとすると必要なものもあるかも知れませんが)。

さて、今必要な作業は、山と谷を整形することでした。山の部分(滑らかな曲線部分)に適しているのは【左右非対称の曲線】という種類のポイントです。一方、谷の部分(コーナーになっている)に適しているのは【コーナー】という種類のポイントです。

star画像

最終的にはこの星の形にしたいわけです。

ポイントの種類の変更についてですが、【フリーハンド】で書いた曲線のポイントは、大抵初めから【左右非対称の曲線】になっています。ポイントの周りが滑らかな曲線になっているものはほぼ、これです。ので、谷の部分のポイントを【コーナー】にしてやる必要があります。

★ポイントの種類の変更方法★
  1. ポイントをクリックして色を反転させる
  2. 【コーナー】にするときは【Ctrl+X】、【左右非対称の曲線】にするときは【Shift+Ctrl+S】のショートカットキーを使う。

もちろんショートカットキーを使わない方法もあります。でもこればかりはあまりに面倒なのでショートカットキーを使うことにしています&絶対オススメです(^^;(※注2)

で、谷の部分のポイントを【コーナー】にしたものが下図です。

2つのコントロールアームがそれぞれ自由に角度を変えられるので、ハンドルが折れ曲がり、その結果としてコーナーができています。

v.曲線の山の形を微調整する

山の部分は緩やかな曲線になっていました。そのようなときには【左右非対称の曲線】というポイントにします。この場合については【左右対称の曲線】という種類のポイントでもよいのですが、【左右非対称の曲線】にその性質が包含されています。

ちょっと中身が濃いのでここはページを変えたいと思います。


(※注1)ポイント編集には【ドローイングモード】という悪魔の(?)モードがあり、使いこなすとこれでほとんど事足りてしまいます。正に「万能」です。

(※注2)ポイントは【Shift】キーを使って複数選択することができますが、複数のポイントの種類を変更することは何故かできません。そのため、ひとつずつ変更しなければならず、すごく面倒です。

正直言って、ポイントの編集は「慣れ」が一番大事だし、ボクの方法もほんの一例に過ぎないので以下のものは参考程度にしかならないと思います。要するに山の形の整形などは、以下の方法でなくてもいくらでも可能です。ただ知っておけば比較的整形しやすいのではと思います。

シンプルな山の形というのは、3つのポイントがあれば完全に自由に調整できます。山の頂上に1つ。麓(?)に2つです。

まず、頂上のポイントの扱い方を説明します。ポイントの種類は【左右非対称の曲線】です。

  1. 頂上にポイントを置くためには、そのハンドルの角度を下図のように底辺と垂直になるようにする

    【画像1】

  2. 頂上の角度は2つのコントロールアーム(ハンドル)の長さを変えることで調整可能

    【画像2】 【画像3】

麓の二つのポイントも重要です。

  1. 角度は底辺に対して垂直か、または頂上の方向より垂直よりにする。

    【画像4】

  2. 長さは山の形を見ながら微調整する。

1についてですが、作りたい形が山でなくマッチ棒の芯のようなものなら、角度を下図のようにすればOKです。

【画像5】

なんにしてもいろいろいじくっていくうちに自然に覚えられると思いますので、試してみてください。(結局結論はこれかも・・)


で、ポイント編集を終了してみると、このように星ができました。

【画像6】

ポイントの編集 終了の仕方

「方法1」【右クリック】⇒【ポイント編集の終了】

「方法2」ウィンドウの何もないところをクリック(例:カラーパレットの下)

vi.曲線を開く

せっかく作った星ですが、保存が終ったら解体してみます。これは今までやった逆の操作なのですが、直感的に分かりにくいコマンド名が使われている部分があるので、注意してください。

曲線を開くには2つの方法があります。

  1. 開きたいポイントを選択して、【右クリック】⇒【編集】⇒【曲線を開く】

    ショートカットキーは【Ctrl+M】

    【画像7】

  2. 開きたいポイントを選択して、【Delete】キーを押す。

    (これは【右クリック】⇒【編集】⇒【ポイントの削除】と同じ)

    【画像8】

vii.ポイントを減らす

ポイントを増やすときは、【Ctrl】キーを押しながら曲線をクリックしました。ポイントを減らすときも、少し変わったコマンドを使います(名前的に・・)

★ポイントを減らす方法

【右クリック】⇒【編集】⇒【ポイントの結合】

ショートカットキーは【Ctrl+M】

【画像9】

これで曲線を開くことなくポイントを減らすことができました。お気づきかもしれませんが、ポイントを減らしたのに、山の形がそれほど崩れていません。実際、2つのポイントを編集することで、山を整形することも可能です。が、この場合、柔軟に変形させることが弱冠難しくなります。もちろん、2つのポイントで山を整形する方がより良い場合もあります。たとえば、非常に緩やかな山などです。この場合、ポイントはできる限り少ないほうがラインを綺麗にするのが容易になります。

  • ポイントの数が多いほど、図形を整形しやすい
  • ポイントの数が少ないほど、ラインを綺麗に整えやすい

ということを覚えておきましょう。

★ADVANCED

・‥…━━━☆ 着色について ☆━━━…‥・

★着色の概要

簡単に書くと・・

  1. 【ベクタレイヤー】(ドローツールで下書きをトレースしたレイヤー)で選択範囲を作成する
  2. 着色用の【ラスタレイヤー】を作成し【塗りつぶし】ツールでその選択範囲内を塗りつぶす

これだけなんですが、注意点が2つあります。

  • 選択範囲は拡大する必要がある
  • 【塗りつぶし】は専用の【ラスタレイヤー】を用意する必要がある(ベクタレイヤー上では行えない)

この2点です。

★選択範囲の作成

  1. まず、ラインを書いたベクタレイヤーが選択されていることを確認します

  2. 色を塗る範囲を選択します。自動選択ボタンをクリックしてください

    (またはショートカットキー【M】)

    自動選択アイコン

  3. 選択したい領域内でクリックすると、下図のように選択範囲が点線で示されます。

    選択範囲

  4. この選択範囲をそのまま塗りつぶすと、ラインとの間に小さな隙間ができてしまいます。そこで、この範囲を少しだけ拡大してやります。

    【選択範囲】⇒【変更】⇒【拡大】とします

    選択範囲の拡大画面

    すると、拡大するピクセル数を聞いてきますので、「2」にしてください(図略)

選択範囲の解除の仕方

ショートカット【Ctrl+D】を使います。

【選択範囲】⇒【選択の解除】でも可能です。

さて、この選択範囲に「塗りつぶし」コマンドを使って色を流し込むわけですが、現在「ベクタレイヤー」で作業をしているので、このコマンドは使えません。新たに着色用の「ラスタレイヤー」を作成する必要があります。

★着色

  1. 着色用ラスタレイヤーを作成します。

    レイヤーパレットにカーソルを合わせ、レイヤーの作成ボタンをクリックします

    レイヤー作成ボタン

    すると、あたらしい【ラスタレイヤー】が作成されます。これは、【ベクタレイヤー】とは違い、着色やブラシでのペイントを行うことのできる通常のレイヤーです。

  2. 次に、何色で塗るかを選択します。

    画面右の描画色パレットをクリックしてください。

    描画色パレット

    (図では赤い四角が描画色パレット)

    すると、【色の設定】画面が現れます。

    (この画面にならない場合【カラー】⇒【増色】⇒【TrueColor】とします)

    色数変更画面

    この画面から色を選択する方法は色々ありますが、

    • 【基本色】の中から選ぶ
    • 右のカラーパレットから色を拾う

    が主な方法です。

    オススメは、【基本色】でおおまかな色を選んでから、右のカラーパレットで微調整するという方法です。

    円の部分で色を選択して、中の四角の部分で、明るさや濃さを調整します。

  3. 色を選んだら、着色します。

    【塗りつぶし】のアイコンをクリックしてください。

    塗りつぶしアイコン

    ショートカットキーは【F】

  4. 作成してある選択範囲の中でクリックすれば着色完了です。

    着色画面

レイヤーの重ね合わせの順序

【レイヤー()】⇒【順序()】 で、レイヤーを重ねる順序を変えることができます。着色のレイヤーは、ラインのベクタレイヤーの下になるようにしてください。着色レイヤーが上だと、ラインに色が重なってしまいます。

★繰り返し作業

後は繰り返し別の部分の着色をしましょう。

【重要】上の顔の部分の着色をした時点では、【ラスタレイヤー】での作業をしていることになります。もう一度ラインを参考にして選択範囲を作成するには、ラインを描いた【ベクタレイヤー】に切り替える必要があります。

レイヤーの切り替え

【レイヤーパレット】にカーソルを合わせ(ウィンドウが拡大)、切り替えたいレイヤー名をクリックします。これで切り替え完了です。あとは、同様に選択範囲を作成し、着色用のラスタレイヤーに切り替えて着色するだけです。

繰り返しの手間を省くために

着色する部分ごとにレイヤーを切り替える作業は大変です。選択範囲を複数作成する方法もありますので試してみてください。方法は、【shift】キーを押しながら選択するだけです。

まとめて選択した図

すべてのパーツをまとめて選択した図

すべての選択範囲に着色すれば完了です。これなら、一々レイヤーを切り替えずに済みますね。

着色完了画面

あ。まだ目を書いていませんでした。え?書いてあるじゃないかって? これは眉毛なんです。目はブラシでたましい込めて書きましょう(笑)。ブラシはラスタレイヤー上で使えます。

★レイヤーの結合

注意

以下の作業をする前に保存することをオススメします(*.psp形式で)

現在の状態では上から・・・

  • ベクタレイヤー(ライン)
  • ラスタレイヤー(着色)
  • バックグラウンド(下書き)

という順序でレイヤーが重なっています。本来、下書き用のラスタレイヤーを用意すべきですが、今回はバックグラウンドに直接書いたので、まずこれを消します。次に背景色を決め、その色でバックグラウンドを塗りつぶします。最後にすべてのレイヤーを結合して完了です。バックグラウンドは、特殊なラスタレイヤーなのですが、これを選択し、【Delete】キーを押します(消去完了)。

i.下書きの消去

バックグラウンドのレイヤーを選択して、【Delete】キーを押します(レイヤーは削除しません)。下書き用のレイヤーを作っていたのなら、そのレイヤーそのものを削除します。

ii.背景色を決める。

【塗りつぶし】ツールを使って、好きな色でバックグラウンドレイヤーを塗りつぶせば完了です。

★ホームページで使う場合(背景を透過色にする場合)

透過GIFまたはPNGで仕上げるつもりなら、バックグラウンドはそのホームページの背景色に合わせます。全く同じ色である必要はありません。白っぽいか、黒っぽいか、その中間か、ぐらいの感覚で合わせれば大丈夫です。実は透過色というものは存在しません。1つの色をブラウザで透過色として認識するよう指定します(後述)。また、複数の色を透過色に指定することはできません。

ホームページの背景色が黒っぽいのに、白っぽい色を透過色に指定してしまうと、その画像にシャギーと呼ばれる「ギザギザ」が生じてしまったり、ラインが汚くなってしまいます。なぜそうなるかは、わざとやってみて、画像のwidthとheightを実際より4倍ほど大きく指定し、イメージタグで読み込ませれば一目瞭然なので書きません。

ちなみに、InternetExplorer5 の右クリック機能を拡張すると、【画像表示拡大】というコマンドが使えます。ホームページで、絵が綺麗だなぁ・・と思ったとき、この機能を使うと、どういう処理をすれば綺麗に見えるか、わかることがあります。ボクはこの機能で画像を拡大させ、色々参考にして研究しました。MSペイントを使っていた頃、これをやって人間技ではないことを知り、PSP購入を決意しました(笑)。

※この機能については、マイクロソフトのダウンロードページ参照

iii.すべてのレイヤーを結合する

【レイヤー】⇒【結合】⇒【すべて結合】でOKです。

これで、バックグラウンドという一枚のラスタレイヤーに、画像のすべての情報が収まりました。この状態にしてしまうと、もうラインはベクタデータではないので、図形として選択し変更することは出来なくなります。ですから、レイヤーを結合する前に保存しておくと後々助かることがあります。

★画像サイズを縮小する

1000×1000ピクセルというとても大きなサイズで書いていました。当然ながら、これを目的のサイズに縮小してやる必要があります。

★サイズを縮小するタイミングは、「レイヤーを結合した後」で、かつ「減色をする前」です。

縮小後画像

【イメージ】⇒【画像サイズ変更】で、上の画面が出ます。(ショートカットキーは【Shift+S】)

基本的に、幅と高さ以外は上図と同じ設定にしてください。一番重要なのが【サイズ変更の種類】で、

  • 【スマートサイズ】に指定しておけば、縮小したとき、綺麗なラインが保持されます。
  • 【ピクセルサイズ】だけは使ってはいけませんが、他のものは、ハッキリ言ってよく分かりません(爆)。
  • 【スマートサイズ】であまり綺麗に縮小できないときに試しては見ますが、効果があったことはありません(謎)。

電ボ(縮小後)

縮小後の電ボです↑

★着色のまとめ

画像を綺麗に処理するための基本的なポイントが多かったと思います。最後にちょっとまとめてみますと、

  • 着色用のラスタレイヤーは、ラインを作るベクタレイヤーより下の位置にする
  • バックグラウンドはホームページの背景と同じような色にする(HP用としてつかうとき)
  • サイズの縮小は、「レイヤー結合後」かつ「減色前」に行う
  • 【サイズ変更の種類】は、【スマートサイズ】で行う

・‥…━━━☆ 減色について ☆━━━…‥・

★16色減色の方法(基本編)

まず試すべき方法

【カラー】⇒【減色】⇒【16色】

(ショートカットキーは【Shift+Ctrl+2】

として、下図の設定でOKをクリックする

16色減色画面

これでうまく減色できなかった場合、【最適化(Median Cut)】(上図参照)の方にチェックを入れてもう一度試してみる。

【減色方式】は、【近似色】で行います。【誤差拡散法】使う必要はありません

【選択範囲の色を強調】というのは、気にしないでください。これは詐欺です(苦笑)。選択範囲を作成したときに、その範囲内の色を強調するらしいですが、経験上では普通に減色したときと何ら変わりませんでした。

<失敗例>

大抵は上記の方法でうまく行きます。とくに塗りつぶしに使った色が少ない(2〜3色)時は。

ところが、左下図の電ボはラインの黒を含め8色使っています。これを上記の方法で減色すると、右下図のようにひどい有様になります。

減色前の画像減色後⇒ 減色後の画像

まず、色がずいぶん変わってしまいました。いや、色が変わっただけなら後で直せば済むことなんですが、残念なことに、シャギー(ギザギザ)が出てしまっています。とくにお腹のあたりがひどいですね。

〇原因

シャギーを目立たなくするためには、ラインと塗りつぶし色との中間となる明度を持つ色が1色以上必要なのですが、頭のあたりでは、これに2〜3色使ってしまっています(1色で十分)。ようするに色の無駄遣いで、PSPの減色能力があまり優れていないわけです。

〇対策

以下で3つの方法を紹介します。

★16色減色方法その2(X色減色を使う方法)

【X色減色】とは、16色以上、256色以下で、色数を指定して減色する方法です。この方法を使って、徐々に色数を少なくして行き、最終的に16色にします。

16色と17色

16色の場合、画像は4ビットデータですが、17色の場合、使っている色が17色というだけで、256色と同じ8ビットデータです。このため、ファイルのサイズは256色とさほど変わりません。以前、150色で減色してみたとき、256色の場合よりもサイズが大きくなってしまったことさえあります。したがって、17色以上で減色するのであれば、256色すべて使った方がよい場合が多いです。(GIFの場合)

手順

  1. 【カラー】⇒【減色】⇒【X色(4/8ビット)】で、150色くらいに設定して減色する

    その際、他の設定は下図のようにします。

    X色減色設定画面

  2. 画質が劣化していないのを確認したら、同様の方法で100色くらいで減色する
  3. 同様にして少しずつ色数を少なくして減色してゆく
  4. 画質が劣化したら、アンドゥ(やり直し)で減らす色数を少なくしてやり直す
  5. 16色まで減らせたら成功。だめなら、出来る限り少ない色数まで減らしておく

50色でも画質が劣化するようなら、諦めて256色で我慢するか、画像を分割してしまうしかありません。まあ、大体これで16色減色できます。とか言いつつ、上の電ボは駄目でした(爆)。

★16色減色方法その3(手動で・・)

これは最終手段でして、とても面倒くさいです。上の【X色減色】で出来る限り色数を少なくしておくことをオススメします。あ。一応256色以下にしておかないと、この方法は使えません。

おおまかな手順

  1. 【カラー】⇒【パレットの編集】で、256色カラーパレットを表示させます
  2. ほとんど同じような色があったなら、どちらか一方をダブルクリックして、HTMLコードをコピーし、ダイアログを閉じます
  3. もう一方の色をダブルクリックして、コピーしたHTMLコードを貼り付けます
  4. 繰り返します(【カラー】⇒【色数カウント】で現在の色数を確認できます)
  5. 16色まで減らせたら終了です

ある意味、自分の色覚に頼るわけですが、別に才能は要りません。似たような色がわかればOKです。余談ですが、ボクは身体検査の色覚テストで誰もが見える「あ」が、どうしても「う」に見えてしまいます(汗)。要するに色盲なわけです。

問題は、同じような色がない場合でしょう。この場合、メインの塗りつぶし色以外の、シャギーを消すために使われている色に着目します。これらの色は、明度が大切なのであって、色あいは重要ではありません。したがって、明るさが同じくらいなら、多少色あいが異なっても、同じ色に置き換えてしまって大丈夫です。

今まで扱ってきた電ボの配色で説明します。とりあえず、【X色減色】で30色まで減らしました。 【カラー】⇒【パレットの編集】でカラーパレットを表示させたものが下図です。

256色カラーパレット

例えば最上段の3つの黄色。これらはほとんど同じ色なので1色にまとめてしまいます。そのほかにも似通った色がたくさんあるので、どんどん減らしていきます。また、下のほうの暗い色は、黒のラインをスムーズに見せるために使われているだけなので、これらも1〜2色にまとめてしまうことができます。

★16色減色方法その4(カラーパレットを作成する)

どのようにしてラインをスムーズにする処理が行われているかが分かってきたら、あらかじめ自分で16色のパレットを作成しておく方法が有効です。

カラーパレットの作成方法

ちょっとベタな方法ですが、

  1. 【ファイル】⇒【新規作成】
  2. 【ブラシ】アイコンをクリックして【ツールオプション】の【硬さ】の設定を【100】にする※
  3. 作成したい16色で、キャンパスを適当に塗る※2
  4. 【カラー】⇒【減色】⇒【16色】(または【256色】)
  5. 【カラー】⇒【パレットの保存】で、その配色に名前を付けて保存する

※1 硬さ100というのがポイントです。これ以外だと、関係ない色が追加されてしまいます。

※2 【色の選択】を使ってすでに作成したイメージから色を参照するのがいいでしょう。

色の選択アイコン【色の選択】アイコン

カラーパレットの適用方法

作成したカラーパレットで、任意のイメージの色を置き換えるには

【カラー】⇒【パレットの交換】

で、保存したカラーパレットを選択します。

推奨

減色に成功したら、是非とも【カラーパレットの保存】をしておきましょう。同じ配色のイメージを作成するときに、【パレットの交換】で簡単に同じ減色をすることが出来ます。

(C)2000-2001 byそふらん w650s@mcn.ne.jp