「付録/チュートリアル/5.ペン入れツールを使う」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
#setmenu(チュートリアルメニュー)
#contents()
----
-さて今回はペン入れツールを使ってみようと思います。&br()ペン入れツールとは描画をベクトルで制御する機能、と言えば良いでしょうか。 ……うん、言葉ではうまく説明できないので画像をいっぱい使って説明しようと思います。
**ペン入れツールのしくみ
+それではここで、ペン入れツールの説明をするために、[[3.基本操作編>付録/チュートリアル/3.基本操作編]]でちょこっと顔を見せたSAIの妖精さんに登場してもらいましょう。 この妖精さんを下書きとして使ってペン入れに挑戦してみたいと思います。&br()&ref(fairy_of_sai.jpg)&br()&small(){正直また使うことになるとは思ってもみませんでした。}&br()この画像を使いたい人は、&color(brown){画像を右クリック}して適当に保存し、起動したSAIに&color(brown){ドラッグ＆ドロップ}するとか&color(brown){Ctrl + O}なりで開いて下さい。 こんなマヌケづらは嫌だという人は自分で適当に下書き用画像を用意して下さい。
+下書き用画像が用意できたら、レイヤーパネル上部の&color(green){不透明度}という設定スライダを左に動かして&color(green){20%}くらいにします。 するとその分だけ妖精さんの存在感が薄れます。 スライダを思い通りの数値に正確に動かしたい場合はスライダ上を&color(brown){右ドラッグ}するか&color(brown){Shift + ドラッグ}すると精密に動かせます。&br()&ref(opa.jpg)
+次に下の画像のように、&color(green){ペン入れレイヤーの新規作成ボタン}をクリックします。 するとレイヤーパレットに&color(green){ペン入れ1}というレイヤーが作成されて、&color(green){カスタムツールトレイ}の中身もごっそりと切り替わったのが分かるでしょうか？&br()&ref(new_pen.jpg)&br()このとき、レイヤーパレットの&color(green){レイヤー１}をクリックすれば鉛筆などが入ったカスタムツールトレイに戻ります。 つまり&u(){ペン入れツールはペン入れレイヤーでしか使用できない}のです。
+では、レイヤーパレットの&color(green){ペン入れ1}をクリックしてペン入れツールに切り替えて下さい
+次にカスタムツールトレイの&color(green){曲線ツール}をクリックし、ここではブラシサイズを2.0px、色を黒にしてみました。&br()&ref(kyokusen.jpg)
+ではいよいよ、ペン入れを始めてみます。 まずは妖精さんの目玉(?)から描いてみましょう。 描きやすいように適当に表示を拡大して、&color(green){曲線ツール}で適当な位置をクリックすると線が伸びてカーソルを追います。&br()&ref(kyokusen1.jpg)
+目玉に沿った場所でもう一度クリックすると、始点と次点が結ばれ確定します。 ちなみに間違えたら&color(brown){右クリック}すれば戻れます。&br()&ref(kyokusen2.jpg)
+同じ要領で目玉の外側に沿って縫うように、始点を打ったところまで描いていきます。 終点にしたい所で&color(brown){ダブルクリック(またはEnter)}すると確定されて終わります。&br()&ref(kyokusen3.jpg)
+ここでちょっと&color(brown){Ctrlキー}を押しながら、カーソルを今引いた線の上に持ってきてみてください。 すると黄や緑の点や青い線が浮かび上がると思います。&br()&br()SAIではこの点を&color(green){制御点}と呼び、その間にある青い線分を&color(green){カーブ}と呼びます。 そして制御点とカーブでできた一つの線を&color(green){ストローク}と呼びます。&br()&ref(stroke.jpg)
+では制御点を&color(brown){Ctrl + ドラッグ}してみて下さい。 制御点を動かすことでストロークの形を変えることができます。&br()&ref(seigyo.jpg)
+またカーブの途中から&color(brown){Ctrl + ドラッグ}することで、ドラッグ開始点に新しい制御点を作りつつストロークの形を変えることができます。&br()&ref(seigyo1.jpg)
+&color(green){ペン入れツール}がどんなものか、というのが分かってきたでしょうか？ つまりこうして引いたストロークを、制御点やカーブの操作によって編集する、というのがペン入れツールの機能というわけですね。&br()ちなみに今回は&color(green){曲線ツール}を使ってますが、&color(green){折線ツール}も同じような使い方ができます。 フリーハンドでストロークを引きたい場合は&color(green){ペン入れ}というツールを使いましょう。
+制御点を増やしたり動かしたりして、形を整えてみました。&br()&ref(seigyo2.jpg)
+今度はカスタムツールトレイから&color(green){筆圧ツール}を選んで、ストロークに調子を付けてみましょう。 &color(brown){制御点を左右にドラッグ}すると、細くなったり太くなったりします。 この時表示されている％は&color(green){変更後の太さ / 変更前の太さ}です。&br()&ref(hituatu.jpg)
+&color(green){筆圧ツール}で調子をつけて、ようやくストロークが1本できました。 というわけで基本的な操作はこのあたりでおしまいにします。&br()他にも&color(green){修正液、線変更、色変更}などのツールがありますが、この辺りは使ってみればすぐ分かると思うので説明は省きます。 &color(green){制御点ツール}については次で触れます。&br()&ref(hituatu1.jpg)
**ペン入れツールを効率的に使う
-少し触ってみた感じでは、普通に鉛筆ツールとかで描いた方が早いんじゃないか、と思うかもしれません。 ここまでの使い方だけでは実際その通りです。&br()しかし、もう少し踏み込んで操作を覚えていくとペン入れツールの利点が分かってくると思います。
+それでは上のペン入れツールのしくみの続きから始めます。&br()必要な人はこちら >> &ref(fairy_of_sai.sai)をクリックしてSAIファイルをダウンロードし、SAIで開いて下さい。 自分で用意した人は自分のを使ってOKです。 画像を開いたら、とりあえず&color(green){曲線ツール}を選んでおきます。
+しくみの話では1本しかストロークを引かなかったので、次は目玉の内側の線を引いてみようと思います。&br()&ref(medama.jpg)
+しかしまた同じ操作をするのは面倒です。 筆圧なんていちいち弄っていたら日が暮れてしまいます。 それによく見ると前に引いたストロークと、これから引く予定のストロークは形が似ています。 そんな時は&color(brown){Shift + Ctrl + カーブをドラッグ}とすることで、ストロークを複製しちゃいましょう。&br()&ref(hukusei.jpg)
+複製されたストロークは&color(green){“選択された状態”}になっているので、ここで&color(brown){Ctrl + T（レイヤー >> 自由変形）}を押し、このストロークのサイズを調整することにします。&br()&bold(){※}&color(green){自由変形}は、まだ説明してない機能ですがここで覚えちゃいましょう。&br()&bold(){※}&color(green){“選択された状態”}とは&color(brown){Ctrlキー}を押した時にストロークが赤く表示される状態のことです。&br()&ref(henkei.jpg)
+さらに、&color(brown){Shift + Ctrl +カーブドラッグ}でのストローク複製と&color(brown){Ctrl + T}での変形を使って、同じように黒目の部分も描いてみました。 ちなみにストロークの位置を動かしたい場合は&color(brown){Shift + Alt カーブドラッグ}とします。&br()&ref(medama1.jpg)
+やっと目玉が描き終わったので、今度はその下の&color(green){「へ」}の部分を描いてみましょう。&br()&ref(he.jpg)
+１からストロークを引くのが面倒だったので、また目玉から&color(brown){Shift + Ctrl +カーブドラッグ}でストロークを複製して持ってきます。 しかし今度はまったく違う形なので、自由変形ツールでは無理があります。 このような場合はストローク複製後に、そのまま新しいストロークを引きたい場所の端っこあたりに&color(green){黄色い制御点}を合わせます。&br()&ref(he1.jpg)
+そうしたら、ストローク上の&color(green){黄色い制御点}以外の場所を&color(brown){Shift + カーブドラッグ}でひっぱって&color(green){「へ」}のどこかに合わせます。 &color(brown){Ctrl + ドラッグ}による制御点移動とは違った動きをすることに気づいたでしょうか？&br()&br()これは&color(green){マクロ変形}という機能です。 マクロ変形は２つの&color(green){マクロ制御点（黄色い制御点）}の間にある複数の制御点とカーブを同時に変形移動させる機能です。 画像ではマクロ制御点が１つしかないように見えますが、ストロークの始点と終点が重なってそう見えちゃってます。 またストロークの終始点は常にマクロ制御点となります。&br()&ref(macro.jpg)
+良い感じの場所にストロークをマクロ変形させたら、そこで固定したいと思う制御点を&color(brown){Shift + Alt + 制御点クリック}して&color(green){マクロ制御点}にします。 すると制御点が黄色くなります。&br()&ref(macro1.jpg)
+そしてまた別の箇所を&color(brown){Shift + カーブドラッグ}でマクロ変形すると、上で作ったマクロ制御点が影響して変形のされ方が変わります。 これを繰り返して、制御点が足りない場合は&color(brown){Ctrl + ドラッグ}などで追加しながら、&color(green){「へ」}の字を作っていきます。&br()※&color(green){マクロ変形}は大まかな変形、&color(green){制御点の追加や移動}は微妙な調整などに使うと上手くいくと思います。&br()※不要な制御点は&color(brown){Alt + 制御点クリック}で消せます。&br()※マクロ制御点のON/OFFは&color(brown){Shift + Alt + 制御点クリック}です。&br()&ref(macro2.jpg)
+こうして形を整えるだけで、なんだかそれっぽく出来上がりました。 上手くできたでしょうか？&br()&ref(he2.jpg)
+さて、なんだかよく分からないショートカットキーをいくつも使いやがって覚えきれないぞと思うかもしれませんが、このページで言ってるショートカットキーのほとんどは、&color(green){カスタムツールトレイ}にある&color(green){制御点ツール}の機能だったりします。&br()&br()なので&color(green){制御点ツール}に切り替えて、&color(green){カスタムツールトレイ}の下にある&color(green){パラメータ}の中から好きな機能を選んで使うことも可能です。 説明していない機能もいくつかあるので、興味があれば触ってみると良いと思います。&br()&ref(seigyotool.jpg)
-&bold(){補足} 自由変形ツールだとか複製だとか、何故そんなややこしいことするの？と思うかもしれません。 しかしペン入れツールだからこそ、そうするのです。 何故なら同じことを通常のレイヤーで行おうとするとこの画像のように劣化してしまうからです。&br()&ref(he3.jpg)&br()ペン入れレイヤーではストロークを変形後にプログラムが描画し直すので、常に綺麗さや線の太さなどの情報を保ちます。 そういった長所を生かすことで、より効率的な作画ができるというわけです。
|&bold(){カラーサークルが良い}&br()良いところとしてはマイナというかマニアックかもしれませんが、何気にSAIのカラーサークルはとても使いやすいです。 私なんかこれがなかったらSAIを使っていなかったかもしれません。&br()&br()というのも、通常カラーサークルの中にあるピッカーは三角形になっているソフトウェアが多いのですが、SAIの場合これが四角形になっていて、上下方向が輝度、左右方向が彩度になっており、輝度を固定したまま彩度の高い色だとか、彩度を固定したまま輝度の低い色だとかを簡単に選択できるようになっています。&br()&br()これが三角形の場合、例えば輝度を落とそうと思うと、同時に彩度が変動してしまい、狙った色を選びづらくなります。 そうなるともう見た目で選ぶかHSVスライダなどを表示させて調整するしかないのです。|
-[[6.レイヤーを使う>付録/チュートリアル/6.レイヤーを使う]]へすすむ
-[[4.基本操作編その２>付録/チュートリアル/4.基本操作編その２]]へもどる
-[[0.はじめに>付録/チュートリアル/0.はじめに]]へもどる
----
-このページ内で分かりづらい部分があれば指摘してください。
#comment(,vsize=3,below,nodate)
-とてもわかりやすいです！！勉強になりましたｍ(―Ａ―）ｍ &br()《ついでに…色の塗り方など教えてくれませんか…？；； -- （＊・ω・＊）通りすがり
-筆圧ルーツを使っても太くも細くもなりませんなぜでしょう…？ &br() -- ho2
-是非続き作ってほしいです… -- 名無しさん
-What is customtooltrei? &br()Where is it? &br() -- gigi
#setmenu(チュートリアルメニュー)
#contents()
----
-さて今回はペン入れツールを使ってみようと思います。&br()ペン入れツールとは描画をベクトルで制御する機能、と言えば良いでしょうか。 ……うん、言葉ではうまく説明できないので画像をいっぱい使って説明しようと思います。
**ペン入れツールのしくみ
+それではここで、ペン入れツールの説明をするために、[[3.基本操作編>付録/チュートリアル/3.基本操作編]]でちょこっと顔を見せたSAIの妖精さんに登場してもらいましょう。 この妖精さんを下書きとして使ってペン入れに挑戦してみたいと思います。&br()&ref(fairy_of_sai.jpg)&br()&small(){正直また使うことになるとは思ってもみませんでした。}&br()この画像を使いたい人は、&color(brown){画像を右クリック}して適当に保存し、起動したSAIに&color(brown){ドラッグ＆ドロップ}するとか&color(brown){Ctrl + O}なりで開いて下さい。 こんなマヌケづらは嫌だという人は自分で適当に下書き用画像を用意して下さい。
+下書き用画像が用意できたら、レイヤーパネル上部の&color(green){不透明度}という設定スライダを左に動かして&color(green){20%}くらいにします。 するとその分だけ妖精さんの存在感が薄れます。 スライダを思い通りの数値に正確に動かしたい場合はスライダ上を&color(brown){右ドラッグ}するか&color(brown){Shift + ドラッグ}すると精密に動かせます。&br()&ref(opa.jpg)
+次に下の画像のように、&color(green){ペン入れレイヤーの新規作成ボタン}をクリックします。 するとレイヤーパレットに&color(green){ペン入れ1}というレイヤーが作成されて、&color(green){カスタムツールトレイ}の中身もごっそりと切り替わったのが分かるでしょうか？&br()&ref(new_pen.jpg)&br()このとき、レイヤーパレットの&color(green){レイヤー１}をクリックすれば鉛筆などが入ったカスタムツールトレイに戻ります。 つまり&u(){ペン入れツールはペン入れレイヤーでしか使用できない}のです。
+では、レイヤーパレットの&color(green){ペン入れ1}をクリックしてペン入れツールに切り替えて下さい
+次にカスタムツールトレイの&color(green){曲線ツール}をクリックし、ここではブラシサイズを2.0px、色を黒にしてみました。&br()&ref(kyokusen.jpg)
+ではいよいよ、ペン入れを始めてみます。 まずは妖精さんの目玉(?)から描いてみましょう。 描きやすいように適当に表示を拡大して、&color(green){曲線ツール}で適当な位置をクリックすると線が伸びてカーソルを追います。&br()&ref(kyokusen1.jpg)
+目玉に沿った場所でもう一度クリックすると、始点と次点が結ばれ確定します。 ちなみに間違えたら&color(brown){右クリック}すれば戻れます。&br()&ref(kyokusen2.jpg)
+同じ要領で目玉の外側に沿って縫うように、始点を打ったところまで描いていきます。 終点にしたい所で&color(brown){ダブルクリック(またはEnter)}すると確定されて終わります。&br()&ref(kyokusen3.jpg)
+ここでちょっと&color(brown){Ctrlキー}を押しながら、カーソルを今引いた線の上に持ってきてみてください。 すると黄や緑の点や青い線が浮かび上がると思います。&br()&br()SAIではこの点を&color(green){制御点}と呼び、その間にある青い線分を&color(green){カーブ}と呼びます。 そして制御点とカーブでできた一つの線を&color(green){ストローク}と呼びます。&br()&ref(stroke.jpg)
+では制御点を&color(brown){Ctrl + ドラッグ}してみて下さい。 制御点を動かすことでストロークの形を変えることができます。&br()&ref(seigyo.jpg)
+またカーブの途中から&color(brown){Ctrl + ドラッグ}することで、ドラッグ開始点に新しい制御点を作りつつストロークの形を変えることができます。&br()&ref(seigyo1.jpg)
+&color(green){ペン入れツール}がどんなものか、というのが分かってきたでしょうか？ つまりこうして引いたストロークを、制御点やカーブの操作によって編集する、というのがペン入れツールの機能というわけですね。&br()ちなみに今回は&color(green){曲線ツール}を使ってますが、&color(green){折線ツール}も同じような使い方ができます。 フリーハンドでストロークを引きたい場合は&color(green){ペン入れ}というツールを使いましょう。
+制御点を増やしたり動かしたりして、形を整えてみました。&br()&ref(seigyo2.jpg)
+今度はカスタムツールトレイから&color(green){筆圧ツール}を選んで、ストロークに調子を付けてみましょう。 &color(brown){制御点を左右にドラッグ}すると、細くなったり太くなったりします。 この時表示されている％は&color(green){変更後の太さ / 変更前の太さ}です。&br()&ref(hituatu.jpg)
+&color(green){筆圧ツール}で調子をつけて、ようやくストロークが1本できました。 というわけで基本的な操作はこのあたりでおしまいにします。&br()他にも&color(green){修正液、線変更、色変更}などのツールがありますが、この辺りは使ってみればすぐ分かると思うので説明は省きます。 &color(green){制御点ツール}については次で触れます。&br()&ref(hituatu1.jpg)
**ペン入れツールを効率的に使う
-少し触ってみた感じでは、普通に鉛筆ツールとかで描いた方が早いんじゃないか、と思うかもしれません。 ここまでの使い方だけでは実際その通りです。&br()しかし、もう少し踏み込んで操作を覚えていくとペン入れツールの利点が分かってくると思います。
+それでは上のペン入れツールのしくみの続きから始めます。&br()必要な人はこちら >> &ref(fairy_of_sai.sai)をクリックしてSAIファイルをダウンロードし、SAIで開いて下さい。 自分で用意した人は自分のを使ってOKです。 画像を開いたら、とりあえず&color(green){曲線ツール}を選んでおきます。
+しくみの話では1本しかストロークを引かなかったので、次は目玉の内側の線を引いてみようと思います。&br()&ref(medama.jpg)
+しかしまた同じ操作をするのは面倒です。 筆圧なんていちいち弄っていたら日が暮れてしまいます。 それによく見ると前に引いたストロークと、これから引く予定のストロークは形が似ています。 そんな時は&color(brown){Shift + Ctrl + カーブをドラッグ}とすることで、ストロークを複製しちゃいましょう。&br()&ref(hukusei.jpg)
+複製されたストロークは&color(green){“選択された状態”}になっているので、ここで&color(brown){Ctrl + T（レイヤー >> 自由変形）}を押し、このストロークのサイズを調整することにします。&br()&bold(){※}&color(green){自由変形}は、まだ説明してない機能ですがここで覚えちゃいましょう。&br()&bold(){※}&color(green){“選択された状態”}とは&color(brown){Ctrlキー}を押した時にストロークが赤く表示される状態のことです。&br()&ref(henkei.jpg)
+さらに、&color(brown){Shift + Ctrl +カーブドラッグ}でのストローク複製と&color(brown){Ctrl + T}での変形を使って、同じように黒目の部分も描いてみました。 ちなみにストロークの位置を動かしたい場合は&color(brown){Shift + Alt カーブドラッグ}とします。&br()&ref(medama1.jpg)
+やっと目玉が描き終わったので、今度はその下の&color(green){「へ」}の部分を描いてみましょう。&br()&ref(he.jpg)
+１からストロークを引くのが面倒だったので、また目玉から&color(brown){Shift + Ctrl +カーブドラッグ}でストロークを複製して持ってきます。 しかし今度はまったく違う形なので、自由変形ツールでは無理があります。 このような場合はストローク複製後に、そのまま新しいストロークを引きたい場所の端っこあたりに&color(green){黄色い制御点}を合わせます。&br()&ref(he1.jpg)
+そうしたら、ストローク上の&color(green){黄色い制御点}以外の場所を&color(brown){Shift + カーブドラッグ}でひっぱって&color(green){「へ」}のどこかに合わせます。 &color(brown){Ctrl + ドラッグ}による制御点移動とは違った動きをすることに気づいたでしょうか？&br()&br()これは&color(green){マクロ変形}という機能です。 マクロ変形は２つの&color(green){マクロ制御点（黄色い制御点）}の間にある複数の制御点とカーブを同時に変形移動させる機能です。 画像ではマクロ制御点が１つしかないように見えますが、ストロークの始点と終点が重なってそう見えちゃってます。 またストロークの終始点は常にマクロ制御点となります。&br()&ref(macro.jpg)
+良い感じの場所にストロークをマクロ変形させたら、そこで固定したいと思う制御点を&color(brown){Shift + Alt + 制御点クリック}して&color(green){マクロ制御点}にします。 すると制御点が黄色くなります。&br()&ref(macro1.jpg)
+そしてまた別の箇所を&color(brown){Shift + カーブドラッグ}でマクロ変形すると、上で作ったマクロ制御点が影響して変形のされ方が変わります。 これを繰り返して、制御点が足りない場合は&color(brown){Ctrl + ドラッグ}などで追加しながら、&color(green){「へ」}の字を作っていきます。&br()※&color(green){マクロ変形}は大まかな変形、&color(green){制御点の追加や移動}は微妙な調整などに使うと上手くいくと思います。&br()※不要な制御点は&color(brown){Alt + 制御点クリック}で消せます。&br()※マクロ制御点のON/OFFは&color(brown){Shift + Alt + 制御点クリック}です。&br()&ref(macro2.jpg)
+こうして形を整えるだけで、なんだかそれっぽく出来上がりました。 上手くできたでしょうか？&br()&ref(he2.jpg)
+さて、なんだかよく分からないショートカットキーをいくつも使いやがって覚えきれないぞと思うかもしれませんが、このページで言ってるショートカットキーのほとんどは、&color(green){カスタムツールトレイ}にある&color(green){制御点ツール}の機能だったりします。&br()&br()なので&color(green){制御点ツール}に切り替えて、&color(green){カスタムツールトレイ}の下にある&color(green){パラメータ}の中から好きな機能を選んで使うことも可能です。 説明していない機能もいくつかあるので、興味があれば触ってみると良いと思います。&br()&ref(seigyotool.jpg)
-&bold(){補足} 自由変形ツールだとか複製だとか、何故そんなややこしいことするの？と思うかもしれません。 しかしペン入れツールだからこそ、そうするのです。 何故なら同じことを通常のレイヤーで行おうとするとこの画像のように劣化してしまうからです。&br()&ref(he3.jpg)&br()ペン入れレイヤーではストロークを変形後にプログラムが描画し直すので、常に綺麗さや線の太さなどの情報を保ちます。 そういった長所を生かすことで、より効率的な作画ができるというわけです。
|&bold(){カラーサークルが良い}&br()良いところとしてはマイナというかマニアックかもしれませんが、何気にSAIのカラーサークルはとても使いやすいです。 私なんかこれがなかったらSAIを使っていなかったかもしれません。&br()&br()というのも、通常カラーサークルの中にあるピッカーは三角形になっているソフトウェアが多いのですが、SAIの場合これが四角形になっていて、上下方向が輝度、左右方向が彩度になっており、輝度を固定したまま彩度の高い色だとか、彩度を固定したまま輝度の低い色だとかを簡単に選択できるようになっています。&br()&br()これが三角形の場合、例えば輝度を落とそうと思うと、同時に彩度が変動してしまい、狙った色を選びづらくなります。 そうなるともう見た目で選ぶかHSVスライダなどを表示させて調整するしかないのです。|
-[[6.レイヤーを使う>付録/チュートリアル/6.レイヤーを使う]]へすすむ
-[[4.基本操作編その２>付録/チュートリアル/4.基本操作編その２]]へもどる
-[[0.はじめに>付録/チュートリアル/0.はじめに]]へもどる
----
-このページ内で分かりづらい部分があれば指摘してください。
#comment(,vsize=3,below,nodate)
-べっ、べつにアンタのためじゃないんだからね！(人･ω･)★ http://www.64n.co/ -- 名無し
-とてもわかりやすいです！！勉強になりましたｍ(―Ａ―）ｍ &br()《ついでに…色の塗り方など教えてくれませんか…？；； -- （＊・ω・＊）通りすがり
-筆圧ルーツを使っても太くも細くもなりませんなぜでしょう…？ &br() -- ho2
-是非続き作ってほしいです… -- 名無しさん
-What is customtooltrei? &br()Where is it? &br() -- gigi
