ピーぷーみーの楽屋裏

本室でおバカやってる猫とうさぎと飼い主の、これまたおバカな素の日常。

 ▼よろしければコチラもいかが・・・・寄り道、近道、抜け道のご案内▼
ピーぷーみー 猫ときどきうさぎの日常

当ブログの「本室」サイト。
猫うさの写真、まんが、等。
我流パソコン絵の描き方

当ブログの1カテゴリ。
パソコンでのお絵かき方法紹介してます。
まるでためにならない音楽雑記

みーままの別ブログ。
クラシック、吹奏楽、クラリネットの話。
スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | - | | - | - |
14.AzPainter2でアニメ塗り
お久しぶりの「我流パソ絵」です。

この間にお絵かきソフトAzPainterのバージョン2が出まして、
お絵かき環境が劇的に変化しました。
いままで記事に書いてきたこともまったく違うやり方になっちゃって・・・てなことも多数。

てなワケで今回は「アニメ塗り」の焼き直しです。

★記事中の各画像はクリックすると原寸サイズで表示します★

お絵かきソフトで使う「塗りつぶし」ツール(たいていバケツのアイコン)は、
普通、アンチエイリアス線の中はキレイに塗りつぶせません。
 ↓
アンチエイリアスって

線はアンチエイリアスの方を使いたいけど、アニメ塗りもしたい・・・・
(たぶん多くの絵描きさんが)長年かかえていたジレンマですが、
AzPainter2では、これができるようになっています。

塗りの手順はいろいろありますが、以下は私が現時点で一番「ラク」と思える方法です。

まずペン(アンチエイリアスあり)で線画を描きます。
下に「作業用背景」のレイヤを作って、濃い色も薄い色もわかりやすいように中間色で塗りつぶしておきます。
線画

アニメ塗り用の「閉じた領域」を作るために、
黒線画の直下にもうひとつレイヤを作ります。(「色分け用」と名付けました)
そして、黒線画でスキマの開いている部分を、あとで塗りつぶすのと同じ色の線でふさぎます。
この線もアンチエイリアスありにしたほうがキレイです。
色分け線用別レイヤ

さらに同様にして、色と色の境界になる部分にも線を描きます。
色は塗りつぶす色のどちらかを使います。
色分け線

(試しに黒線画を非表示にすると、こんな感じです)
主線を非表示

線を描き終わったら、2つの線画レイヤを結合します。
線を結合

マル1結合した線画の直下にレイヤを作り、(「色塗り」と名付けました)
マル2線画のレイヤを「塗りつぶし判定元」に指定します。(バケツの絵をクリック)
色塗りの準備

ツールを「塗りつぶし」にします。
塗りつぶしツールは、「判定元レイヤ有効」と「境界自動判定」の両方をオンにします。
そして、「色塗りレイヤ」を選択し、そのレイヤ上で色を塗っていきます。
塗りつぶし

全部塗り終わったら細部を確認。
細かい部分は塗り残る場合があるので、そこはペンの自由線でつぶしていきます。
塗り残し

塗り終わり状態。
試しに線画を非表示にすると、こんな感じです。
色だけ見てみる

仕上げに線画のレイヤにお目目の白い星をちょんと描き、作業用の背景を消します。
お好みで、仕上げ用の背景を描きます。(なくてもいいけど)
背景を作る

とりあえず今回の完成品。
完成品

線と塗りが別々のレイヤって所だけが手間ですが、
前バージョンまでの苦労を考えると劇的な進歩です・・・\(^o^)/

ちなみに、線画専用ソフト「AzDrawing」では、レイヤを分けずにこの「塗り」ができます。
(ただしこちらは1レイヤ1色しか使えません)

両ソフトはAzelさんのサイトで入手できます。

 >> もくじ <<

JUGEMテーマ:お絵描き

(人気ブログランキング うさぎ・猫)
人気ブログランキング

(にほんブログ村)
にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ


| みーまま | 我流パソコン絵の描き方本編 | 19:23 | comments(3) | trackbacks(0) |
13.手描きのカラー絵を取り込んでさらに色を塗る(AzPainter)
ひさしぶりの「我流パソコン絵の描き方」です。

以前の記事「手描き絵を取り込んで・・・」では、
白黒絵を取り込んで色は全部パソコンで塗る、というものでしたが、
今回は手描きの段階で色が(ある程度)塗ってあるモノの処理の仕方です。

最近ムスメがやたら絵を描くようになって(マンガのキャラばっか)、
それを自ブログ用にパソコンに取り込んで、と私に頼むワケです。
いそがしい母は手早くチャッチャッと作業を済ませたいワケです。
てなコンセプトなので、あまり美しさを追求できる手順ではありませんが・・・・

てなワケで題材も実際ムスメが描いた絵を・・・・使っちゃいます。
  (とあるマンガのキャラです・・・・版権・・・・・う〜〜ん)
スケッチブックに手描きした絵

★以下説明用の各画像は、クリックで大きい画像を別ウィンドウで開きます。

【1】元絵をスキャン

スキャナに絵をセットして、
AzPainterのメニューから「ファイル」→「TWAIN機器からの入力」を実行します。

スキャナのモードは「写真(カラー)」で、解像度は300dpiくらい。
読み取り枠をドラッグして調整して、スキャンします。
スキャン時の色補正は、私は・・・・・やらないです。

スキャン直後の絵は、とてもでっかいので、まずパソコン画面に収まるくらいに縮小します。
「編集」→「サイズ変更(拡大縮小)」
幅・高さのうち長辺の方を800ピクセル程度に指定します。
縮小

【2】色の補正

フルカラーでスキャンした画像は白とか黒とかがぼやけているので、これをくっきりさせます。

方法は
「フィルタ」→「カラー」→「明度・コントラスト調整」でコントラストを上げる
または
「フィルタ」→「カラー」→「レベル補正」で調整する
がいいと思います。

↓はレベル補正のサンプル。
画面を見ながらスライダを動かして、ちょうどいいところを探してください。
レベル補正

左が補正前、右が補正後です。
補正前後

【3】アニメ塗り

次に色塗りレイヤを作ります。
元レイヤをコピーして上に置き、
「フィルタ」→「カラー」→「2値化」を実行します。しきい値は、
カラー部分の境界もはっきりさせるため、高めに設定します。
2値化

2値化がすんだら、黒線以外を透明にします。
「フィルタ」→「アルファ操作」→「明るい色ほど透明に」を実行します。

コピーレイヤに対し、色をつけたい部分に「アニメ塗り」をします。
「鉛筆」ツールの「塗りつぶし」で塗りたい部分をクリック。
線がとぎれて色があふれる場合は、黒の「鉛筆」ツール「自由線」で線をふさいでから塗ります。
アニメ塗り
(下にある元絵のレイヤは非表示にしています)

【4】グラデーション塗り

ところで、青い髪の毛はこれで完成ではありません。
今回、髪の毛はグラデーションで塗りつぶしたいので、その前準備として
「青」(単純で、他の箇所に使ってない色)で塗りました。

この「青」に逆マスクをかけます。
マル1 描画色を「青」にして、
マル2 「マスク」の色窓(?)をクリックし、
マル3 「逆マスク」をクリックしてオンにします。
逆マスクの設定

これで、「何を描いても青の上にだけ反映する」準備ができました。

マル1 グラデーションで使う2色を、描画色と背景色に指定します。どっちがどっちでもいいです。
マル2 グラデーションツールの
マル3 「塗りつぶし」にして
2色を指定

マル1 スタート点にしたい方の色をクリックして
マル2 グラデーションの方向にドラッグ&ドロップします。
グラデーションを描画
すると青い色の部分だけグラデーションで塗りつぶされました。

グラデーションを塗ったら、逆マスクを解除します。忘れないように。
マスクの解除

【5】元絵と統合

次に下の元絵と重ねる準備です。

コピーレイヤに対し、
「フィルタ」→「メディアン」を「3×3」「最大値」でかけます。
メディアン
すると塗った色がちょっと広がり、逆に黒線が細くなります。

この状態で黒線を消します。

マル1 描画色を黒にして
マル2 「フィルタ」→「アルファ操作」→「描画色を透明に」を実行。
描画色を透明に

「色だけ」状態になりました。
色だけ

これで
マル1 元絵レイヤを表示して
マル2 上のレイヤのモードを「乗算」にすれば
元絵を表示して乗算

完成です。(←忙しい母的には

ブログ用にはサイズを小っちゃくして(長辺400ピクセル程度)PNGで保存します。

なお完成品の絵はムスメのブログに置いてあります・・・・・う〜ん、何がやりたいのかようわからん、ブログなんだけどね・・・・


この方法、要するにフルカラー画像の処理なので、デジカメで撮ったイラストにも応用できます。
試しにホワイトボードに描かれた絵を全く同じ方法で処理してみました・・・・
  ↓↓
ホワイトボード加工前
ホワイトボード加工後

ダレが描いたのかは、秘密ですよ〜〜(笑

 >>次の記事「AzPainter2でアニメ塗り
 >> もくじ <<


JUGEMテーマ:お絵描き

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ


| みーまま | 我流パソコン絵の描き方本編 | 22:53 | comments(2) | trackbacks(0) |
番外編:ころん絵あそび(AzPainter)
シュールエアリズムの巨匠、ころん画伯の許可をもらったので、
私が夜中にこっそり遊んだ「ころん絵あそび」を公開しちゃうよ!

(各画像はクリックすると大きくなるよ!)

まずころんさんの絵を、前回記事の方法で透明化しちゃうよ!
(ちょっと縮小もかけたよ!)
背景を透明にした絵
(出典・・・「晴れ女のひとりごと」2009.1.2

絵の下のレイヤに写真を読み込んじゃうよ!
写真の上に重ねたよ
(出典・・・「晴れ女のひとりごと」2009.1.3

絵のレイヤをコピーして、東京タワー以外の部分を消しゴムで消して、
フィルタ>ぼかし>ガウスぼかし をかけて、
フィルタ>カラー>RGB調整で色を赤めに補正したよ!
ひとつだとさみしいから、そのレイヤをコピーして2つにして、
合成モードをそれぞれ「加算」と「リニアライト」にしたよ!
 (今、絵のレイヤは非表示にしているよ!)
東京たわをぼかしたよ
(レイヤ名・・・「たわ」って・・・・(笑))

それとは別に、もっかい絵のレイヤをコピーして、今度は東京タワーだけ消しゴムで消して、
おんなじようにボカしたよ!
色はやっぱりRGB調整で、こっちは青めに補正しているよ!
ころんさんをぼかしたよ

全部のレイヤを表示させたら、こんなになったよ!
できあがり!

せっかくだから、GIFアニメにしてみたよ!
イルミネしたよ

さあこれで今夜あなたの夢枕に、「ころんさんon東京たわ」 が立つことまちがいなし!(笑


ちなみにGIFアニメ作成ツールは「Giam」というフリーソフトだよ!

 >>次の記事「手描きのカラー絵を取り込んでさらに色を塗る
 >> もくじ <<


JUGEMテーマ:お絵描き

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ

| みーまま | 我流パソコン絵の描き方本編 | 23:27 | comments(5) | trackbacks(0) |
12.画像の背景をキレイに透明にしたい(AzPainter)
2009年最初の「我流パソコン絵の描き方」です。

前回「画像の白いフチを取る」の最後で、

>このテの絵には、今回と「逆の考え方」でメディアンをうまく使えば、
>なんとか白フチを取ることができました・・・
>その方法は、次回紹介します!

・・・なんて大見えを切ったりしたワケですが、
その後いろいろ試した結果、その方法では元の画像の状態によって結果にかなりバラツキが出ることが判明・・・・・

仕切りなおして、別の方法を探しました。
以下その方法を紹介しますが、これでも画像によっては「完璧に」キレイにはならない場合もあります・・・^_^;

今回のサンプルは昔描いた絵(酉年の年賀状)。この絵の背景部分を透明にしたいです。

★説明用の各画像は、クリックで大きい画像を別ウィンドウで開きます。見やすいようにほぼ原寸にしています。

【1】AzPainterで絵を読み込み、下準備

まず画像をAzPainterで開き、前準備として(透明具合を確かめるため)
下にレイヤを置いて適当な色で塗りつぶします。
下にレイヤを置いて塗りつぶし


【2】背景部分を透明にする

前回は「描画色を透明に」を使いましたが、今回の場合それだとトリの体とか、絵の中まで消えちゃうので、普通に消しゴムを使います。
絵のレイヤを選択し、「消しゴム」の「塗りつぶし」で消したい領域をクリックします。
消しゴムで塗りつぶし

すると、絵の周りに白フチが残ってしまいました。
白フチの残った絵
もともとの画像が作成後縮小して保存したものなので、
画像をなめらかに見せるために白に見えても白じゃない階層が絵の周りにできているためです。

このフチをなくすために、やり直し。
【1】の手順まで戻ります。


【3】レイヤを複製

【1】の下準備まで終わった後、絵のレイヤを複製します。
上の方の絵はあとで使う時まで非表示にしておきます。
絵のレイヤをコピー


【4】色階調を落として背景を透明化

下の絵のレイヤに、
「フィルタ」→「カラー」→「ポスタリゼーション」をかけます。
ポスタリゼーション

階調設定画面が出てくるので、
絵の輪郭(特に色の薄い部分)がつぶれてしまわない程度に、できるだけ低い数値に設定します。
階調を低く設定

絵の色の階調数が減って、のっぺりした感じになりました。
ポスタリゼーションした絵

このレイヤに対し、【2】と同じ手順で背景を消すと
ポスタリゼーション後、背景を消した絵
ずいぶんキレイに背景が消えました。
でもまだ絵の周りに細い白フチが残っています。(↑画像をクリックして拡大するとよくわかります)
次の【5】でこの白フチを消します。
(白フチが残っていない場合は【5】を飛ばして【6】に行ってOK!)

【5】絵のフチを削る

白フチの残ったレイヤを選択し、ツールを
「消しゴム」の「自由線」、太さは1ピクセルに設定します。
1ピクセルの消しゴム

「フィルタ」→「現在のツールで描画」→「不透明部分の内側を縁取り」を実行。
不透明部分の内側を縁取り

今度こそ(ほぼ)キレイに白フチが消えました!\(^o^)/
白フチの消えた絵

でもこの絵ははじめにポスタリゼーションをかけてるので、色がヘンなままです・・・・

【6】元の絵に、加工絵のアルファ値を適用

そこで、【3】で作っておいた元の絵のコピーレイヤの登場です。
上のレイヤを表示、選択して
上のレイヤを選択

「フィルタ」→「アルファ操作」で
「下のレイヤで透明な部分は透明に」か「下のレイヤの値をコピー」か「下のレイヤの値を乗算」の
どれかを実行します。
アルファ操作

上のレイヤが、絵の部分は元の色を残したまま、背景は白フチなしで透明になりました。
キレイに透明

このレイヤが「背景をキレイに透明にする」ミッションの完成品です。
下2つのレイヤは作業が終わったらもう要らないので削除します。

ただこの方法、絵そのものを1ピクセル削ったりするし、
ポスタリゼーションの設定によっても絵の形が崩れる場合があるので、
状況によっては元の絵と比べて「いびつ」な部分が出ることがあります。
(今回のサンプルだと、トリの足とか人物の髪の先とか・・・)
いちどやって失敗しても、
【4】のポスタリゼーションの階調数とか、
【5】の消しゴムのピクセル数とか、または実行する回数とか、
その辺を調整し、色々組み合わせてみたらうまくいくこともあるかも・・・・
また、絵が「黒の主線で縁取られている」ものだったら、
【5】の手順で黒にマスクをかけて実行するとよりキレイになると思います。

というワケで、(少なくとも私の技量では)完璧なフチなし透明にはできません・・・ってコトで、
今回のタイトルは「〜したい」という”願望”形なのです・・・^_^;


 >>次の記事「番外編:ころん絵あそび
 >> もくじ <<

JUGEMテーマ:お絵描き

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ
| みーまま | 我流パソコン絵の描き方本編 | 16:27 | comments(2) | trackbacks(0) |
11.画像の白いフチを取る(AzPainter)
年賀状書き終えました!\(^o^)/ ・・・なんとか期限内に。

んで今回の「我流パソコン絵の描き方」はそのときの苦労話です。
忘れないうちに(笑)書き留めておかなくちゃ。

(以下、説明用の各画像は、クリックで大きい画像を別ウィンドウで開きます。
見やすいようにほぼ原寸にしています。)

さて今回、「謹賀新年」のロゴをてがきブログで書こうと思いたちました。
最近進化して、レインボーカラーのペンが使えるからです。

・・・よし書けた!↓コレを元手に、ロゴを作るぞ・・・
てがきブログの元画像


上の画像を保存して (てがきブログ上で右クリックして画像保存するとPNG形式で保存されます)
AzPainterで読み込み、文字の位置を調整して、白い背景を透明にします。
・まず描画色を「白」に設定し、
・フィルタ>アルファ操作>「描画色を透明に」 実行。
背景を透明にする

これで背景が透明になりました・・・・・
透明になった画像

・・・・が!

下に別レイヤを置いて色を塗ってみると、ロゴの周りに白いフチが残っちゃってるのがわかります。
こりゃカッコ悪い。
フチの残った画像

まあ白地のハガキに乗せるだけだったらこのままでもいいけど、
背景に色やイラストが来る配置だとちとマズい・・・なのでこのフチを取ります。


まず、ロゴのレイヤを複製します。
ロゴレイヤの複製

上の方のロゴレイヤを、不透明(白背景)に戻します。
・フィルタ>アルファ操作>「すべて不透明に」 実行。
画像を不透明に

不透明にしたレイヤの、ロゴ部分をちょっと太らせます。
・フィルタ>メディアン を 「範囲3×3、最小値」で実行。
メディアン

上のレイヤのロゴ部分が、下のレイヤに比べてちょっと太りました。
(↓クリックで before > after のGIFアニメを表示します)
太ったロゴ

最後に、太ったほうのレイヤの背景部分を透明にします。
・太る前のロゴレイヤが直下にあるのを確認し、
・フィルタ>アルファ操作>「下のレイヤで透明な部分は透明に」 実行。
太ったロゴを透明化

白いフチが消えました!(^_^)
白いフチが消えたロゴ
要するに、ロゴの内側(色部分)を押し広げ、あとで広がった面積分だけ外側をカットする、という寸法です。

このレイヤをアルファ付きPNGで保存すれば
レイヤの保存

たとえばエクセルなんかに読み込んで色つきオートシェイプの上に重ねたりしても全然OKです。
オートシェイプに重ねたロゴ

AzPainterは、かなり細かいアルファ操作ができるので、こういう画像処理には超便利!
パソコン新調してフォトショがサクサク動いても、やっぱりAzPainter手放せません〜〜


・・・・で、今回の作業紹介はここまでですが、実はこの方法、落とし穴がありまして

今回のような「ざっくり色がついた」画像はよいのだけれど、
細かく描き込んであるイラストなんかにこの処理をすると

劇的だよビフォーアフター
こういうオソロしいことになります(笑

このテの絵には、今回と「逆の考え方」でメディアンをうまく使えば、なんとか白フチを取ることができました・・・
その方法は、次回紹介します!

 >>次の記事「画像の背景をキレイに透明にしたい
 >> もくじ <<

なお余談ですが、今回のサンプルのロゴ、結局実際には使わなかったんだよね・・・・^_^;
まあこの記事書く役には立ったから、よしとする・・・・・

JUGEMテーマ:お絵描き

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ
| みーまま | 我流パソコン絵の描き方本編 | 15:01 | comments(2) | trackbacks(0) |
10.テクスチャで塗りつぶす(ソフトを選ばない!)
我流パソコン絵の描き方の10回目です。

タイトルだけ見ると何のこっちゃ、と思われる方いるかもしれませんが、
要するに

自分の好きな任意の画像を
パターン

こんなふうに並べる方法です。
並べたパターン

並べてどう使うかっつーと

絵の背景にしたり
昔の年賀状絵1

キモノの柄に使ったり。
昔の年賀状絵2
  (・・・いずれも昔の年賀状絵です^_^;)

今回のサンプルと作例は全部自作ですが、
このテの塗りつぶしパターン画像はWEB素材の「壁紙」「背景」とかでいっぱい出回ってます。
気に入った画像を手に入れて、 !他者が作った画像を使うときは、利用規約等に注意!)
それで「塗りつぶし」たくても、
自分が使うお絵かきソフトには、そんな機能はついてない・・・って場合もあります。
今回は、そんな場合でもコレを実現しちゃう方法の紹介です。
要は
「並べる」ところは他のソフトにさせて、出来たモノを貼り付ける。

キモは、「他のソフト」って、お絵かきソフトじゃなくてもいい、ってトコなのだ。

まずはエクセルで行ってみよう!
(ワードでも似たような手順で出来ますが、たぶんエクセルの方が使い勝手がいいです)

【1】エクセル2003で塗りつぶし画像を作る
まずエクセルで、四角形のオートシェイプを描きます。
あとでお絵かきソフトで描くサイズより、ちょっと大きめに作っておいた方がいいです。
描いたオートシェイプを「選択」し(オートシェイプの上でクリックし、角の部分に「○」印が見える状態にする。以下同。)、
右クリック→「オートシェイプの書式設定」→「色と線」タブ→
「塗りつぶし」の「色」で「塗りつぶし効果」を選択、
出てきたウィンドウで「テクスチャ」タブ選択、
「その他のテクスチャ」から目的の画像を選択します。
オートシェイプの書式設定

ホラ並べて埋まっちゃいました。
で、このままだと普通は四角形に枠線が付いちゃってるので、それを消します。
同じく「オートシェイプの書式設定」→「色と線」タブ→
「線」の「色」で「線なし」を選択します。
色と線

こうして出来た図をお絵かきソフトにコピー貼り付けするんですが、
ここでひとつコツがあります。普通に「コピー」してもダメなんです。
オートシェイプを選択し、
Shiftキーを押しながらメニューの「編集」をクリック。
するとメニューに「図のコピー」ってのが現れるので、それをクリックします。

編集、図のコピー

すると下のような選択画面が現れるので、「形式」を必ず「ビットマップ」にします。
ビットマップ

これでクリップボードに塗りつぶし画像が画像データとしてコピーされました。

【2】お絵かきソフトに貼り付け
次はお絵かきソフトでの作業です。
AzPainterの場合だと、
「ファイル」→「クリップボードから開く」で、
さっきの画像がそのまま新規ファイルとして開くので、別レイヤに絵を描いていきます。
描きかけの絵に貼り付ける場合は、
「編集」→「クリップボードから新規レイヤ」で、
既存レイヤとは別のレイヤにさっきの画像が貼り付きます。
AzPainter画面

フォトショップエレメンツの場合だと、
「ファイル」→「新規」→「クリップボードからの画像」、
または既存ファイル上では、
新規レイヤを作ったうえで、「編集」→「ペースト」でOKです。

なおお絵かきソフトでテクスチャ画像を利用するときは、
たとえばキモノの柄に使うような場合は、
テクスチャレイヤの上に別レイヤで絵を描いて、
キモノの部分だけ透明なまま残しておいて、その他の部分に色を塗る、
ってのが一般的な方法でしょう。

以上です。
が、エクセル2003持ってないよ、って人は、【1】の代わりに、以下参照。

【1の亜流】エクセル2007の場合
同じエクセルなのに、バージョン2007はまるで別ソフト。
今回と同じ作業をしようとしたところ、私も迷いましたよ・・・
以下要約。
★オートシェイプを描く
「挿入」→「図形」から。
挿入、図形

★オートシェイプの書式設定
オートシェイプを選択→「書式」。
書式設定

★テクスチャで塗りつぶし
「図形の塗りつぶし」→「テクスチャ」→「その他のテクスチャ」から。
図形の塗りつぶし

さらに
「塗りつぶし(図またはテクスチャ)」を選び、
「ファイル」ボタンからファイルを選び、
「図をテクスチャとして並べる」にチェックを入れる。
塗りつぶしの書式設定

これでオートシェイプがテクスチャで塗りつぶされます。

★クリップボードにコピー
ここだけは、バージョン2003より簡単です。
オートシェイプを選択し、単純に「ホーム」から「コピー」するだけ。
ホーム、コピー


【1の亜流】エクセル、ワードもない場合・・・
あきらめてはいけない!
次の方法で、画像は作れるのだ。(笑
★その1
目的の画像を、デスクトップ壁紙に「並べて表示」で指定する→
画面のキャプチャを取る(PrtScキーを押す)→
お絵かきソフトに貼り付けて、不要な部分をトリミングしてから使う
(ただしデスクトップにアイコンがごちゃごちゃしてる方は不向き。(笑)
★その2
HTMLタグを書ける人は、目的の画像を背景に指定したHTMLファイルを作って、
ブラウザで開き、画面のキャプチャを取る
でもよし。(笑

最後の2つの方法↑は、もう笑い話みたいなんですが、
実際私、この方法使ってたことありましたよ・・・・もう究極の我流です(笑
(だってオートシェイプでテクスチャ塗りつぶしができるって、昔は知らなかったもん)

長らくお付き合い、ありがとうございました!
この際ついでに、↓ポチッとしてから、お帰りください(笑
人気ブログランキング

 >>次の記事「画像の白いフチを取る
 >> もくじ <<

JUGEMテーマ:お絵描き

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ
| みーまま | 我流パソコン絵の描き方本編 | 21:32 | comments(0) | trackbacks(0) |
9.本室4コマメイキングその3(AzPainter)
我流パソコン絵の描き方の9回目です。
 (本室の この4コマ のメイキング3回目)

その1 と その2 では、フォトショを使って
このPNGファイル↓を作るところまで紹介しました。
フォトショで作った絵

このあとは、AzPainterでテキストと枠線をいれます。
(いや別にフォトショでもテキストは入れられるけど、作業の都合上私にはAzPainterの方が便利だ、ってだけの話です)

【8】テキスト入れ
AzPainterでPNGファイルを読み込み、上に新規レイヤを作ります。
描画色を黒にし、ツールを「テキスト」にし、新規レイヤ上の任意の場所でクリックすると、テキスト入力画面が出てきます。
ボックスでフォントその他もろもろを指定し、文字を入力し「描画」を押すと、最初にクリックした位置に文字が入ります。
(この時点で文字は画像として入るので、あとから修正はできません。
はみ出したり、サイズその他が気に入らないときは消してからやり直します。)
テキスト入れ
文字は縦書き横書きどちらでも設定できます。
AzPainterでは、フォントの指定は、縦書きの場合フォント名の頭に「@」がついたものを選択します。同じ「MSゴシック」を使う場合でも、縦書きなら「@MSゴシック」、横書きなら「MSゴシック」とします。

日本の漫画文化では、テキストは縦書きです。ページやコマの進行も右上から左下へと進みます。
まあでも4コマのようにコマが縦一列にだけ並ぶ場合はテキストのタテヨコなんてあんまり関係ないんですが(だから初めのうちは結構迷ったんです・・・)、縦書きの方が絵の中にうまく収まるような気がして、本室4コマでは縦書きに統一しています。

文字を入れたあとは、移動ツールで位置調整をします。
位置調整

【9】テキスト枠
テキストに枠をつけます。
テキストレイヤの下に新規レイヤを作り、アンチエイリアスペンで「四角枠」を入れます。(カドからカドにドラッグします)
枠入れ

四角枠の中を白で塗りつぶします。
ツールはアンチエイリアスペンでもブラシでも何でもいいですが、少し透かしたいので濃度が中程度のツールにします。
枠塗りつぶし

【10】コマ枠線
最後に、まんがの「コマ」としての、枠線を入れます。
一番上にあるレイヤを選び、太さ2ピクセルのアンチエイリアスペン、色は黒を選択し
外枠入れ

フィルタ > 現在のツールで描画 > 枠線 を実行します。
メニュー枠線

それだけで外枠線が入っちゃいます。
完成絵

実は最初のうちはコレ知らなくて、テキスト枠のときと同じ「四角枠」を使ってましたが、四辺とも隙間なく同じ太さにするのが至難のワザ・・・・
なのでこの方法を知ったとき、えらい感動しました。

AzPainterは、こういうちょっとした「こんなんあったら便利」な機能が、さりげなく実現されちゃってるところが、スゴイと思うのです。

(逆にフォトショって、こういうフツーの四角枠、できないのかな?ヘルプ探したけど、わかんなかったのよね〜(>_<))

【11】保存
これで1コマ完成・・・PNG形式で保存します。
保存

【12】減色
WEBにアップする場合は、このまま使わずに、さらに減色をします。
目的は、ファイルサイズの軽量化。
一般に減色をすると画質も劣化しますが、実はソフトによってその具合もかなりバラツキがあるので、なるべく「キレイに」減色してくれるソフトを使います。
現時点では、私は「Yukari FLAX」というフリーソフトを使っています。

ソフトを起動し、目的のファイルをドラッグして読み込み、
ファイル読み込み

スパナのアイコンをクリックします。
減色オプションが出てくるので、パレットで色数を選びます。
私はだいたい256色、色調が単調なものだと128色にしてます。
減色オプション
「OK」を押すと、
新規ウィンドウに結果が表示されます。
気に入らなければ×で閉じてやりなおし、よければ保存します。
結果ウィンドウ

この作業で、150KBだったファイルが42KBになりました。

ここまでの作業をコマごとに、行います。

以上で本室4コマメイキングやっと終了・・・・
こんなふうに手順を書くとえらい長く感じますが、慣れればそんなに時間はかかりません。
いちばん時間を食うのはネタを考えてラフが決まる所までです。^_^;

オマケ↓。ウィンドウズ付属の「ペイント」で減色(※)したものです。品質の違いを実感してください。(笑ペイントで減色
(GIFファイル、32KB。)

JUGEMテーマ:お絵描き


※ペイントには減色なんてメニューはないですが、保存するときにGIF形式を指定すると、強制的に256色になります。

 >>次の記事「テクスチャで塗りつぶす
 >> もくじ <<

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ
| みーまま | 我流パソコン絵の描き方本編 | 08:43 | comments(0) | trackbacks(0) |
8.本室4コマメイキングその2(PhotoshopElements)
 (本室の この4コマ のメイキングです)

前回 までで「絵」の部分は描き終えたので(終えたんだよ・・・アレでも。笑)
今回はフォトショでの残りの工程を紹介します。

【5】書き文字を入れる
線画の上に新規レイヤを作り、文字を書きます。
文字かき

ちょっと浮き立たせて目立つように、文字のレイヤに特殊効果をかけます。
アートワーク・エフェクトの「レイヤースタイル」から「べベル」を選択、
そのなかの「シンプル(エンボス1)」を選び、適用します。
べベルシンプルエンボス

【6】フキダシを入れる
さらにその上に新規レイヤを作り、フキダシにハートマークを描きます。
フキダシとハートを線で描いて、その中をバケツツールで塗りつぶしました。(いわゆる「アニメ塗り」)
フキダシにハートマーク

これにも特殊効果をかけます。
アートワーク・エフェクトの「レイヤースタイル」から「べベル」を選択、「シンプル(外側)」を適用します。
べベルシンプル外側

さらに、ちょっとだけ透明にします。
レイヤーウィンドウで、不透明度を下げ、75%くらいにします。
不透明度

さてフォトショでの作業はここまで。
次の作業に移るため、コマごとに画像ファイルに保存します。

【7】保存
コマごとに、必要なレイヤーだけを表示させた状態で、
(今回の例だと下から順に背景、色、線画、書き文字、フキダシの5レイヤ)
「ファイル」→「Web用に保存」を実行します。
Web用に保存

保存ウィンドウが別に開くので、まず画像サイズを縮小します。
タテヨコ300ピクセルにして、「適用」します。
縮小

そして、ファイル形式を「PNG-24」にして、OKします。
(なおファイル形式の下にある「透明部分」にチェックをするとアルファ付きPNGで保存しますが、今回のように透明部分がない絵の場合は意味がないのでどうでもいいです)
保存ウィンドウ

あとはフォルダやファイル名を適用につけて保存するだけです。

当然ですが、前回の「【3】線画描き」からこの「【7】画像保存」までの工程は、コマの数ごとに行います。

最後にフォトショを閉じるときは、あとで部分的にやり直しがきくように、レイヤーの結合やラスタライズなどしないで、そのままの状態でpsd形式ファイルに保存しておきます。

以下、その3に続きます・・・

 >>次の記事「本室4コマメイキングその3
 >> もくじ <<
JUGEMテーマ:お絵描き

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ
| みーまま | 我流パソコン絵の描き方本編 | 16:08 | comments(0) | trackbacks(0) |
7.本室4コマメイキングその1(PhotoshopElements)
今回はピーぷーみー本室「約4コマまんが」No.55の作成工程を紹介します。
 ↓(ボケはネタバレ防止。クリックで本室に飛びます)
4コマまんが

先日から、ウチのパソコンがWindowsXPからVistaに変わりました。
フォトショップエレメンツ(以下フォトショ)が気持ちいいくらいサクサク動くので、
今回それを使って描いてみました。

言っときますが私、フォトショは全くの初心者です。

初心者の我流、しかも絵は稚拙

ときたもんだから、デキる人から見るとツッコミどころ満載、
しかも「この程度でメイキングとか言うな」と非難ごうごうの予感も・・・

まあでも、私と同じようなフォトショ初心者の方が、
「この程度でいいんだわ!じゃあ私も描いて見ようかしら?」
と思ってくれたらば、私としては、うれしいかも・・・^_^;

【1】起動と準備
まず、フォトショを起動し、「写真の編集と補正」を選びます。
photosho起動画面

ファイル→新規→白紙ファイル で、600×600ピクセルのキャンバスを作ります。
photosho新規作成

はじめは白い「背景」レイヤだけがあります。
作業前に、色指定に便利なように、「ウィンドウ」メニューから「スウォッチ」にチェックをして表示させておきます。よく使う色はここに独自に色を追加してもよし。
スウォッチ

【2】下描き
本室4コマの背景は薄い緑色で統一しているので、背景レイヤはその色ベタ1色で塗りつぶすだけです。
描画用には、新しいレイヤを作ります。
背景レイヤ

さてこれから描画にかかるワケですが

描画には、ブラシ(または鉛筆)ツールを使います。(色はスウォッチから拾います)
ブラシツール

1コマ分のラフ(下描き)を描いたら、また新規レイヤを作って次のコマのラフを描きます。これをくりかえし、全てのコマのラフを、ファイルは分けずに、別々のレイヤに描きます。
もちろん各レイヤを描くときはほかのレイヤは非表示にしておきますが
ラフレイヤ

まんがの場合は、前のコマを参考にして次のコマを描く、というような場合も多いです。
だから、線の色はコマごとに違うものにして、ラフを描きます。
1と2のラフ

全部のラフを描いたら、ひとつずつ「本描き」をしていきます。

【3】線画を描く
ラフの段階では、コマの中の配置(セリフや書き文字等)はあまり考えずに描いてるので、本描きの前に配置を考えて、位置を調整します。
位置調整

位置が決まったら、ラフの上に新規レイヤを作って、黒で線画を描きます。
本線

【4】色塗り
線を描いたら、今度はその下に新規レイヤを作って、そこに色を塗ります。
モノが動物の毛なので、太めのブラシでざっくり塗ってもOKかと。^_^;
色塗り

ちなみに、線画を非表示にしたらこんな感じです。
色だけ

ここで、色の塗り方についてちょっと。
普通に塗っただけだとのっぺりした感じなので
(絵が違っててスミマセン・・・見本としてこれしか残ってなかったんで・・・)
のっぺり

これに濃淡のメリハリをつけます。

まず色塗りレイヤの上に新規レイヤを作り、濃くしたい部分を、黒のブラシで塗ります。
境界があまりはっきりならないように、太めのブラシで薄くざっくり塗り、さらに「アートワーク・エフェクト」の「フィルタ」「ぼかし」の「ガウスぼかし」を適当なサイズで適用させて、ぼかします。
黒ぼかし

んでもって、黒ブラシのレイヤの、合成モードを「オーバーレイ」にします。
合成モード

すると、黒ブラシの部分が「濃さを持った透明」になり、絵に濃淡がつきました。
濃淡ついた絵

この方法は以前紹介した「絵に影をつける」と同じです。
あからさまな影だけでなく、最近は色にメリハリをつけるのにもっぱら使ってます。

ちなみに、オーバレイで黒だと元の色が濃くなりますが、白だと逆に明るくなります。
状況に応じ使い分けます。(私は白オーバレイは、めったに使わないんだけどね・・・^_^;)

今回はここまで。このあとの工程は「その2」、「その3」へと続きます・・・

 >>次の記事「本室4コマメイキングその2
 >> もくじ <<
JUGEMテーマ:お絵描き

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ

| みーまま | 我流パソコン絵の描き方本編 | 19:18 | comments(2) | trackbacks(0) |
6.半透明の絵を作る(文書用限定)
今回のサンプルは、この花です。
何の変哲もないただの白い花に見えますが・・・・・


前回の要領でエクセルに読み込んで、後ろのセルに色を付けてみると・・・!



実は半透明なのでした。

前回作った「透明な絵」は、
「完全に透明な部分」と「完全に不透明な部分」の2極だけでしたが、
上の花は「透明さの度合い」もデータに記録されているのです。

これができるのはPNG形式のファイルだけですが、
特にこのように透明さの度合いまで記録されたものを
「アルファチャンネル付きPNG」といいます。

作り方はいたってカンタン、
レイヤー機能のあるお絵かきソフトで透明なレイヤに絵を描き、
それをそのまま(アルファ付きPNGと指定して)保存するだけです。

今回もAzPainterを使った作成過程を紹介します。

【1】線画を描く
まず花びらと花芯を描きます。
透明さの度合いを確かめるため、あらかじめ濃いめの色に塗りつぶした別レイヤーを「下敷き」として置いておきます。


【2】色を塗る
線画の下に新規レイヤを作り、花芯部分の色をブラシ等の「ボケる」ツールで塗ります。


その下にもうひとつレイヤを作り、花びら部分を塗ります。
ブラシで大まかに輪郭をなぞったあと、「ガウスぼかし」等のフィルタをかけたり、
薄くしたい部分はブラシ消しゴムで消したりと、まああの手この手でソレっぽくなるように描きます。


【3】影を付ける
色の下に新規レイヤを作り、色を塗ったときと同じ要領で影を描きます。
形をよりキレイに作りたいなら、線画と同じ形に塗りつぶしてガウスぼかしをかけ、
レイヤ全体を右下方向にずらし、花と重なった部分をブラシ消しゴムで消します。


影も透明さを出すために、影レイヤは不透明度を少し落とし、60%としました。


【4】レイヤを結合する
以上4つのレイヤを、1つずつ結合していきます。

なお「通常」以外の合成モードのレイヤが存在するときは、それを先に結合します。
「上が通常以外、下が通常」となるように、順番を工夫します。
今回は全部が「通常」なので、上から順に1つずつ結合していきました。

「下敷き」レイヤを非表示にして、でき具合を確かめます。

【5】保存する
花のレイヤを選択して、レイヤウィンドウの「レイヤ」メニューから
「アルファ付きPNGに出力」を実行します。


これで保存されたものが、アルファ付きPNGです。お疲れ様でした。

なおAzPainterでは単体のレイヤごとでしかアルファ保存が出来ないので
【4】の結合が必要でしたが、ソフトによって状況は違ってきます。
フォトショップエレメンツでは、
複数のレイヤもそのままで(非表示にしているレイヤを除く)
「ファイル」→「Web用に保存」で
プリセットを「PNG-24」にして「透明部分」にチェックを入れて保存する、
でOKのようです。

【余談】なんで「文書限定」なのか
このアルファ付きPNG、ウェブ上でこそ威力を発揮しそうなのに、
なんで文書限定なのか・・・
理由は前回も書きましたが、ファイルサイズがバカでかくなるのと、
パソコンの環境により、透明部分を表示してくれないから。


ためしに背景画像のある所に
アルファ付きPNGファイルを貼ってみました。
240×252ピクセルという小柄のクセに
ファイルサイズは70KBもあります。


アルファPNGに対応したブラウザをお使いの方は、
花の裏に背景の生物(?)模様が透けて見えます。
でも現在のブラウザの普及状況では、
透けて見えない人の方が多いでしょう。
(今回の場合は、その方が平和かも・・・・・笑)



なので、少なくともここしばらくはウェブでの利用は考えない方が無難でしょう。

ちなみに、絵に描くような物体は「半透明」であることは少ないので、
文書であってもシンボルマークやロゴ、といったものの方が使いでがありそうです。

たとえば書道の得意な方は(そうでない方でも)
筆ペンで「謹賀新年」「丑」とか書いたものをスキャンして
半透明にカッコよく加工してワードに貼ったりなんかしちゃうと
あなただけのオリジナル年賀状のできあがり!です。

 >>次の記事「本室4コマメイキングその1
 >> もくじ <<
JUGEMテーマ:お絵描き

にほんブログ村 イラストブログへ にほんブログ村 イラストブログ 絵日記へ

| みーまま | 我流パソコン絵の描き方本編 | 15:19 | comments(2) | trackbacks(0) |
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>
+ ランキング
クリック応援ありがとう!
人気ブログランキング(猫、うさぎ)↓
人気ブログランキング
にほんブログ村↓
にほんブログ村 イラストブログへ
にほんブログ村 イラストブログ 絵日記へ
+ SELECTED ENTRIES
+ RECENT COMMENTS
+ ★お絵かき★
★みーとみーままの手書きブログ★

(サムネイルメニューはコチラ。)

★ pixiv ★
お絵かきSNSに参加してます


+ メッセージフォーム
みーまま または みー への
メッセージ、非公開コメントは
コチラ↓をご利用ください。

+ LINKS
+ CATEGORIES
+ ARCHIVES
+ MOBILE
qrcode
+ PROFILE
+ RECENT TRACKBACK
+ SPONSORED LINKS