FC2ブログ

弾痕の作成、の続き(Adobe Illustrator)

bt_riho_01.jpg先週末はブログ書くのをさぼったので、この中途半端なタイミングで書いておこうと思います。

前回はAdobe Illustratorで「弾痕」を制作した訳ですが、一通り制作方法をなぞって、最後に同様のものを計3種類作ったところで終わりました。今回はまず3種類作った理由と、併せて反省点についてです。

では早速、3種類作った理由ですが、単純に「1種類だけだとあまりにも単調すぎる」からです。

実際には背景ですし、特定の理由がなければ観る人もそんなところまで気にはしないと思いますが、作っているこっちとしてはそういった誰も気が付かないようなところも、当然全て分かってしまうので、気になって仕方がありません。

また、もしこのシンボルが「光源」を設定されていないようなものであれば、シンボルインスタンスを回転させてごまかす事も出来たと思いますが、光源が設定されている以上回転させると違和感が発生します。

illustrator_180329_01.jpg
1種類をランダムに回転させた例

まあ結局のところは、「それなりに処理をした」という自己満足だけなのかもしれません。

illustrator_180329_02.jpg
自己満足した例

そして反省点ですが、実際のイラストでは演出的に大きさに変化をつけています。その使い方が読めているのであれば、シンボルの種類は「ダイナミックシンボル」で作成するべきでしたが、時代の流れについていけていない私は安直に「スタティックシンボル」で作成していました。

「ダイナミックシンボル」は割と最近(おそらく2015年ころ)追加された「インスタンスを編集してもシンボルとのリンクが継続している」と言う機能で、Illustratorになじみのない方には何を言っているのかさっぱり分からないかもしれませんが、私的な表現としては「本来のシンボル(スタティックシンボル)の定義を覆す機能」で、説明を読んだ時には何を言っているのかさっぱりわかない顔になっていました。

今回の事例で比較的分かりやすく言うと、「インスタンスを拡大した際、ダイナミックシンボルは線の太さや効果(ぼかし)が設定にしたがって変化するが、スタティックシンボルは問答無用で線の太さや効果も拡大される」となります。

illustrator_180329_03.jpg
左側がダイナミックシンボル、右側がスタティックシンボル、それぞれ上が基のサイズ、下が拡大したインスタンス。

これでもまだ分かりにくいのでもうちょっと違う言い方をすると、「スタティックシンボルはビットマップのように扱われる」となるような気もするのですが、自分でも何を言っているのか分からなくなってきました。

ともかく、昔ながらのユーザーを気取った私は「いや、シンボルと言ったらスタティックシンボルに決まっている」と決めつけたため、結果として拡大された弾痕はぼかしが強くなりすぎてフォーカスがずれたような結果になってしまいました。

最後にダイナミックシンボルに関して補足すると、線や効果の拡大に限らず、もっと広い範囲で柔軟に編集ができる、はずなので、興味がある方はAdobeの正式なアナウンスをチェックしてみてください。

弾痕の作成(Adobe Illustrator)

bt_riho_03.jpg実際書いてみて気が付いたのですが、このブログには「Adobe Illustrator」のカテゴリがないので、そういった意味では若干書きづらいです。まあ、カテゴリ作ればいいじゃんって話なんですけど。

さて、変な事に夢中になっていたらあっという間に日曜日の夜になってしまったので、慌ててブログを更新しようと思います。ちょうど流れで「Adobe Illustrator」の事を書くとパッと終わらせられそうなので、例の「難所」で作った「弾痕」について振り返ってみます。

具体的には下の図のそれです。

heavychristmas_180318_01.jpg

弾痕と言っても材質によって形状はまちまちになろと思いますが、今回は金属板を貫通したイメージです。ですが当然、普段弾痕を見る機会もないので、まずはインターネットで検索して弾痕の画像を確認しました。その結果、大きく分けると以下3つの要素で構成できると考えました。

  1. 「穴」
  2. 穴が開く際に発生した「へこみ」
  3. 弾丸衝突の衝撃による「めくれ」

と言う事で、まずは「めくれ」から作ってみます。これは「パンク・膨張」を利用して楽しようと思ったので、とりあえず大まかな形を単にアンカーを置くだけの直線で作成します。
illustrator_180318_01.jpg

そしてそれにフィルター「パンク・膨張」を適用すると名前の通り、パンクしたような感じになりちょうど良さそうです。ちなみに、画像では値がマイナスになっていますが、これがプラスになると「膨張」となり、花びらのような感じになります。
illustrator_180318_02.jpg

色は、それなりに金属的な雰囲気になるよう、軽くグラデーションをかけてみました。
illustrator_180318_03.jpg

次に「へこみ」を作ります。これに関しては単純に円とグラデーションで表現できると考えました。
illustrator_180318_04.jpg

ただ、あまりにも境界がはっきりしすぐているので、フィルター「ぼかし」を適用しました。また、この画像はブログ用に編集したものなので、実際に使われたものとは値が異なります。
illustrator_180318_05.jpg

最後は「穴」です。これはもっと単純で円にただの塗りです。
illustrator_180318_06.jpg

同様に境界がはっきりしすぎているので「ぼかし」を適用します。実際に使われたものと値が異なるのも同様です。
illustrator_180318_07.jpg

以上で完成ですが、「パンク・膨張」は結果がランダムな事を利用して、同様のものを3種類作成します。
illustrator_180318_08.jpg

と言うところで、もう少し話は続くのですが、変にやる事がいろいろあったり、今回も話が妙に長くなってきたので続きは次回にします。

「立体的っぽい」ロゴ(Adobe Illustrator風味)

bt_dolma018_14.gifたまには毛色を変えて「Adobe Illustrator」の事でも書こうと思ったのですが、その為の画像を用意している段階でなんだかどうすればいいのか分からなくなってきたので、分かる分からないは別にして上っ面の雰囲気だけをサラッと流してみようと思います。

具体的には先日あげた「難所」に使われているロゴの作成に関するチュートリアルです。

heavychristmas_180310_01.jpg
そのロゴ

早速ですが、まずはテキストを用意します。この後任意の形状に変形させる「エンベロープ」と言う処理を行うのですが、その関連で矩形にぴったり収まるように出来るとよいと思います。
heavychristmas_180310_02.jpg

次にその「エンベロープ」を行うため、変形後の形状を作成します線や塗は結果に影響しないのでなんでもかまいません。下図内の赤枠がそれです。
heavychristmas_180310_03.jpg

テキストの前面に赤枠を配置し、「オブジェクト>エンベロープ>最前面のオブジェクトで作成」を実行します。テキストが最前面にあったオブジェクトの形状に変形しました。その後、利便性の理由で同じくエンベロープのメニューから「拡張」を実行し、「HEAVY」と「CHRISTMAS」をそれぞれグループでまとめます。
heavychristmas_180310_04.jpg

「HEAVY」と「CHRISTMAS」それぞれのグループにそれっぽい塗りと線を適用します。それぞれの「グループ」に適用することで、「HEAVY」と「CHRISTMAS」それぞれにグラデーションが適用されます。
heavychristmas_180310_05.jpg

「立体的っぽく」見せるために「ブレンド」の準備をします。「ブレンド」は名前の通り2つのオブジェクトの中間のオブジェクトを作成する機能です。理屈はともかく、「HEAVY」と「CHRISTMAS」を一つのグループにまとめ、背面にコピーし、若干小さくします。
heavychristmas_180310_06.jpg

前面、背面それぞれのロゴを選択し、「オブジェクト>ブレンド>作成」を実行します。まだ設定が適切ではないのでこんな結果ですが、ブレンドの結果を確認するのには分かりやすいかもしれません。
heavychristmas_180310_07.jpg

このブレンドで作成されるオブジェクトの数を増やしていくと中間が直線でつながっているように見えて、結果立体的っぽく見える、と言う訳です。限られた機能の中でうまいこと考えたなと思いますが、別に私が考えたわけではありません。下図はブレンドのステップ数「30(=中間オブジェクトを30個作成)」ですが、よく見ると頭のHの左下、お尻のSの右側にギザギザ感が残っています。
heavychristmas_180310_08.jpg

今度はステップ数「50」です。これくらいならよいと思います。また、この時点でも立体感が気に入らなければ、オブジェクトの位置や大きさを変えて、ブレンド具合を調整することも可能です。
heavychristmas_180310_09.jpg

次に、ロゴの黒い縁とグラデーションの間に段があるような表現を作って、より立体感を出したいと思います。レイヤーパネルで「HEAVY」又は「CHRISTMAS」のグループを選択し、アピアランスパネルで塗りを複製、前面の塗りに「効果>パス>パスのオフセット」を実行します。と言っても見た目的には何の変化もないので何を言っているのかさっぱり分かりません。
heavychristmas_180310_10.jpg

「オフセット」は指定値分オブジェクトを小さくしますが、「オフセット」なので縮小とは異なります。削り取られるイメージでしょうか。と言うよりも下の図を見ていただいた方が早いでしょう。色を赤くした方がオフセットを適用した塗りです。
heavychristmas_180310_11.jpg

実際に段差的な立体感を出すため、背面の塗りのグラデーションを180度回転させて前面の塗りとの対比を作ります。
heavychristmas_180310_12.jpg

最後にもう一工夫ほしい所なので、ブレンドの背面側のロゴの線を少し明るくして、色的に立体感を出してみました。ブレンドの効果により、グラデーションを適用したような結果になります。
heavychristmas_180310_13.jpg

とまあ、話がずいぶん長くなりましたが、これでも結構端折って書いています。長いわりに端折られているので分かりにくい、いつものクオリティーと言う訳です。

CLIP STUDIO PAINTいまさらメモ 08

bt_riho_03.jpg年度末は何かと忙しく、平日のそのツケが週末に回ってきてしまうため、ブログもサクッと書けるものをとネタ帳をあさったら、また「ファイルオブジェクト」が絡む話になりました。今回は「ファイルオブジェクトを利用したチェック用画像の作成」です。私は「ドラフト」なんて呼んでいるので、以下「チェック用画像」を「ドラフト」とします。

私は「時間をかけて描かないとダメなタイプ」なので、先日の「難所」のように2ヶ月近くのんきに描いていたりもします。いや、そんなに長い事はまれなんですが。

少なくとも週末描いて、終わらなかったので来週続きを、と言う事はよくあります。そんな時、平日の通勤電車や昼休みに、ふと「あの描画おかしくなかったか?」とか、「時間が経ったので改めて見るとどうなんだろうか」とか気になったりもします。そのため、ドラフトを書き出しておいてスマートフォンで確認する、と言う訳です。

ただ、スマートフォンの画面もそんなに大きくないので、作業中ファイルからそのまま書き出すと余白が邪魔だったり、キャンバスサイズを変えるのもちょっと怖かったり、書き出したものをトリミングするのもどちらかと言えばめんどくさかったりと感じます。

そこで考えたのが「ファイルオブジェクト」を利用したドラフトの作成です。具体的には以下のような手順です。

1. 都合の良い大きさ(例えばスマートフォンの画面サイズ)でドラフト用のCLIP STUDIO PAINT形式ファイルを作成します。ちなみに「難所」の時は、チェックする機会も多かったので、最終的に「全体用」と「等倍用」の2種類のファイルを作りました。
clip_studio_paint_180303_01.jpg

2. 作業中ファイルからファイルオブジェクトを作成する。

3. 都合の良い場所に保存する。保存したドラフトファイルはCLIP STUDIOポータルの「お気に入り」に登録してもよいでしょう。
clip_studio_paint_180303_02.jpg

そして、実際に描きだす際には、

4. ドラフトファイルを開く。

5. ファイルオブジェクトを更新する。

6. 画像を統合して書き出す。またその際、名前を変えて保存し、前回と今回の比較ができるようにするのも良いかもしれません。
clip_studio_paint_180303_03.jpg

そしてそのドラフトをクラウドストレージで管理すれば、スマートフォンからいつでも確認できる、と言う訳です。正に通信技術の勝利、化学忍者隊もビックリです。

しかしまあ改めて書いてみると、これはこれでそこそこ面倒くさいような気もしますが、

  • 作成中のファイルには影響しない。
  • 下描きレイヤー、文字等を使用していた場合でも書き出し時の非表示設定に影響なく、見たままの状態で書き出せる。
  • 常に同じ位置でトリミングされる。(個人的にはここが気に入っています)

と言うメリットがあります。

一応自分としては図々しくも「オゥ、イッツスマート!」くらいには思っていますので、何かのご参考になれば幸いです。

最新記事
最新コメント
月別アーカイブ
プロフィール

professor anne

Author:professor anne
少女マンガを描きたいなと考えています。

カテゴリ
検索フォーム
RSSリンクの表示