情報/CLIP STUDIO PAINTのベクターレイヤーの基本(線修正ツール)

【講座/イラスト01_キャラクター1/2 ラフ画→線画編】で少し触れましたベクターレイヤーに関して、基本的な事柄に留まりますが書こうと思います。
コンピュータで扱う画像データには大きく分けてラスター形式とベクター形式の2つがあり、その後者の特性を活かした機能になります。
両者の違いについての説明は【情報/画像データにおけるラスターとベクターの違い】をご参照ください。

C

LIP STUDIO PAINTのレイヤーでブラシや図形で任意の形状を描画できるものには、ラスターレイヤーとベクターレイヤーがあります。それ以外に色調補正レイヤー、べた塗りレイヤー、グラデーションレイヤー等それぞれの用途に特化したレイヤーもあります。

その名の通り、ラスターレイヤー上に描かれたものはラスター形式として、ベクターレイヤーはベクター形式で保存されます。
ただしそれはCLIP STUDIO PAINT独自のデータフォーマットであるlip形式での場合のみで、Photoshopのpsd形式等他の保存ではラスタライズ(ラスター形式に変換)されベクターの情報は失われます(psdのパスに変換されるような仕様はありません)
※lip形式でないと失われるCLIP STUDIO PAINT独自の機能の情報は他にも色々ありますが、ここでは省略します。
d024_0
▲ラスターレイヤーとベクターレイヤー、それぞれのアイコン。

クターレイヤーに描画された像は、制御点(点)とベクター線(線)に座標、方向、強さ、ブラシも形状等の情報を持っており、その点と線を編集することにより修正が可能です。
例えば線画を修正する時、ラスターの場合は現実の絵画と同様に線を消しゴムや上塗りで消してから描き直しますが、ベクターでは線そのものを操作できます。
また大きな曲線を描く場合など、制御点とベクター線を操作する特性上、基本的に迷い線は発生しないので素早く完成できます。
他にベクター消しゴム等、これならではの便利なツールの使い方も可能です(別の機会に書こうと思います)

※ペイントツールSAIをお使いの方には、ペン入れレイヤーと似たようなものと捉えていただければ良いかもしれません。
 それに比べるとCLIP STUDIO PAINTの方が図形にある程度強い等、違いもあります。
d024_1
▲制御点とベクター線で形状を制御(左:ブラシストローク、右:図形)
 Photoshopの用語に置き換えると、制御点=アンカーポイント、ベクター線=セグメントといったところでしょうか(役割が微妙に違うのでイコールではありません)

こで制御点とベクター線の修正方法の基本として、線修正ツールのサブツールについて触れます。
サブツールそれぞれにはツールプロパティによって詳細設定が可能ですが、そのあたりはまた別立てで記事にしようかと思います。

線修正ツールのサブツール(並び順は自分の使いやすいように変えています)
d024_2
▲各サブツール。[]で囲まれている文字や記号はショートカットキーのメモ。

A.cs_icon00(p)a制御点(制御点の移動、追加、削除等々)
 制御点一つずつについて編集できます。
d024_3
▲制御点ごとに操作可能。制御点が多いと編集が大変。

B.cs_icon00(p)bベクター線描き直し(既存の線の軌跡を修正) 
 直感的に線の軌跡を描き直し出来ますが、ツールプロパティが無設定だと制御点がとても増えてしまいます。
d024_4
▲ベクター線を紐をいじるように操作可能。

C.cs_icon00(p)cベクター線つなぎ(離れたベクター線を連結)
 ブラシ状のカーソルでなぞった範囲(ブラシサイズ設定可能)内にある離れたベクター線同士を連結。
d024_5
▲単純に線端の制御点同士をつなげると言うわけでなく、適宜制御点が追加されるようです。

D.cs_icon00(p)d線幅修正(軌跡を変えずに線の幅を修正)
 ブラシ状のカーソルでなぞった範囲(ブラシサイズ設定可能)内にあるベクター線の太さを、指定幅(絶対値)、指定倍(相対値)、一定の太さで増減が可能。
d024_6
▲修正した制御点と修正のなかった制御点の間は自然に均されます。

E.cs_icon00(p)eベクター線幅描き直し(軌跡を変えずに線幅の描き直し)
 D.と似ていますが、こちらは線をなぞって筆圧による幅の描き直しができます。
d024_7
▲線幅修正と違い、感覚的な修正が可能。要使い分け。

F.cs_icon00(p)fベクター線単純化(制御点を減らします)
 ブラシ状のカーソルでなぞった範囲(ブラシサイズ設定可能)内にある制御点を減らします。
d024_8
▲自ずとそれなりにベクター線の形状が変化しますが、大きなカーブなどはこれを行ってから操作したほうが手間がかからないかと思います。

G.cs_icon00(p)gベクター線つまみ(文字通り線をつまみます)
 ブラシ状のカーソルでなぞった範囲をつまめますが、前述違って「ブラシサイズ」ではなく「効果範囲」としてサイズをコントロールします。
d024_9
▲「ブラシサイズ」ならサイズ変更のショートカットキー(他のブラシ系ツールと共通)は効きますが、ここでは使えません。

H.cs_icon00(p)h枠線カット(漫画を描くときのコマの枠線の編集に使います)
 漫画作成支援機能につき、ここでは省略します。

のようにベクターを利用することによって、ラスターに比べ時間の短縮(時短)になる場面は多いですが、それによって画力やセンスが上がるわけではないので、時短になった分を自己向上に当てるような不断の努力は必要かと思います。
それでもなお誰でも出来るようになるわけではないのが、この業種に限らずですが厳しいところですね。

asobi_pic

情報/画像データにおけるラスターとベクターの違い

【講座/イラスト01_キャラクター1/2 ラフ画→線画編】で少し触れましたCLIP STUDIO PAINTのベクターレイヤーについて記事にする前に、画像データのラスターとベクターの形式の違いについて書いておこうと思います。
既に色々な情報源で触れられている事柄なので、ご存知の方は読み飛ばしていただければと思います。

ンピュータで扱う画像データには、
大きく分けてラスター形式とベクター形式の2つがあります。
ラスター形式
ブラシストロークや図形作成等の結果出来上がったピクセルの集まりで構成され、ピクセル一つずつの、
座標、色(や不透明度)等を記録してある形式で、
現実の絵画と近く、後述のベクター形式に比べ直感的で理解しやすいかと思います。
webブラウザで取り扱うことが多いデータフォーマットのjpeg、gif、pngが代表的でしょうか。
※ベクターの情報も内包して扱えるフォーマットもあります。PhotoshopのpsdやCLIP STUDIO PAINTのlip等。
d023_0
▲ラスター形式はピクセルの集まり。

ベクター形式
対してこちらは、ブラシストロークや図形等自体の、
座標、方向、強さ、ブラシも形状等を、アンカーポイント(点)とパス(線)に情報を持たせて記録している形式になります。
pdfやTrueTypeフォント、ポリゴン等がそうです。
※ラスターの情報も内包して扱える形式もあります。ポリゴンのテクスチャ等。
d023_1
▲ベクター形式のアンカーポイントとパス(Photoshop)

ただしベクター系式であっても、今日多くの場合、私達はラスターで出力されるディスプレイやプリンターの表示や印刷されたものを目にするので、ラスター形式に変換(ラスタライズ)されたものを見ています。
グラフィックソフトのツール機能の「ラスタライズ」をしなくても、OSなりがラスタライズしています。

れそれの形式には、得手不得手があり基本表裏のような関係ですが、
主だったものは以下、
ラスター形式
・実際の絵画と近く、直感的に描ける。
・広い面の塗りやグラデーションに優れ、写真や絵画を取り扱いやすい。
・拡大するとボケてしまう等、変形する度に像が崩れていく。
 ※昨今は高品位な拡大(アップサンプリング)が出来るソフトもありますが完全とはまだ言いがたいかと。
・ベクター形式への変換の精度が悪い。
d023_2
▲利点例。微妙な塗り加減を直感的に調整しやすい。

ベクター形式
・変形に強く、数値変更の結果を再ラスタライズするので基本的にアウトラインがボケない。
・後からストローク軌跡を帰る等、デジタルならではの編集ができる。
・その裏返しで現実にはないアンカーポイントやパスの集合なので、直感性に乏しい事がままある。
d023_3
▲利点例。ペン先の形状を変えずにストロークの軌跡を変更できる(CLIP STUDIO PAINT)

の呼び方として、主にラスター形式を取り扱うソフトをペイントソフト、ベクター形式はドローソフトと分けることもあります。
由来の一説として以下、Wikipedia引用

これは、画像編集ソフトがいち早く充実していたMacintoshにおいて、ビットマップ画像を編集するソフトの初期の代表格が「MacPaint」、ベクターイメージを編集するソフトが「MacDraw」という名前であったことに由来する。

 
前述のとおり、それぞれの形式をお互い内包することもできるようになって来てはいますが、別系統であることは変わりないかと思います。

代表的なペイントソフトは、やはりAdobe Photoshopでしょうか。私が使っている(いた)中では、Corel Painter、SYSTEMAX ペイントツールSAI、セルシス CLIP STUDIO PAINT、TAKABO SOFT EDGE2等もそうですね。
ドローソフトでは、やはりこれもAdobeのIllustratorでしょうか。
Illustratorはその「イラストレーター」という名前からいわゆるお絵描き用に感じるかもしれませんが、ペイント系のソフトのほうが直感的に描けますね。

以上を踏まえた上で、次回はCLIP STUDIO PAINTのベクターレイヤーの基本、パスの操作に関して書こうかと思います。
アップしました→【情報/CLIP STUDIO PAINTのベクターレイヤーの基本(線修正ツール)】

asobi_pic

ボードゲームの思い出

ここで触れるボードゲームとは、玩具メーカーが発売していた(している)プレイ人数2人以上を対象としたゲームの事です。
このボードゲーム(や、その後のウォー・ゲーム(ウォー・シミュレーションゲーム)やテーブルトークRPG)の体験が、ゲーム業界に入ってからの仕事に少なからず役立っていると思います。

私の歴代ハマったゲームは、
・小学低学年、高学年 トランプ、将棋、チェス、花札、双六、ポンジャン、野球盤
・小学高学年、中学 ボードゲーム
・中学、高校 LSIゲーム、ウォー・ゲーム、テーブルトークRPG
・高校から現在 テレビゲーム
と、主だったものはこんな感じでしょうか。
今後それぞれの思い出話をと思っていますが、今回はこの中のボードゲームについて書きます。

えている限り一番始めに遊んだボードゲームと言えるものは双六で、
小学低学年あたり、当時は正月の定番でしたのでその時期だと思います。
大手のメーカー製ではなく、キャラクターものでも無かったと思います。雑誌の付録だったかもしれません。
d022_0
▲手元にある双六(ショウワノート)これはご覧の通りキャラクターものですね。
 「闘将ダイモス」、「無敵鋼人ダイターン3」

その流れからゲームデザインが似ているタカラ(現タカラトミー)の「人生ゲーム」へ、さらにそこから各種玩具メーカー製のボードゲームへと移っていったように思います。
「人生ゲーム」の初代と2代目(「NEW人生ゲーム」)はアメリカ製の日本語版で、よく遊んだのはこのどちらかもしくは両方、その後の3代目(これも「NEW人生ゲーム」)からは日本オリジナルの内容になったようです。今日でも様々なバリエーションが発売されている定番ですね。
d022_1
▲「NEW人生ゲーム」(3代目?)現物はすでに無いので手持ちの雑誌広告から。

ードゲームの中で、
特に遊んだものを挙げますと、
・「人生ゲーム」
・「億万長者ゲーム」
・「社長ゲーム」(「代表取締役 社長ゲーム」というのもありますが、そちらでははありません)
でしょうか。くしくも全てタカラ製ですね。
この他にも、以前の記事【「はりはり仮面」等、おまけ付き菓子の思い出】で登場した上級生の家には特に色々ありよく遊びましたが、個別のタイトルはよく覚えていないのと、記事が長くなってしまうので、別の機会を作れればそちら触れたいと思います。

この中の「社長ゲーム」は、小学校の同級生の友人が持っていて、よく遊びに行っては2人でプレイしていました。
その友人にはお兄さんが居て小学校6年生のあたりから兄弟でウォーゲームをやるようになり、私も混ぜてもらいそちらに移行することになりますが、そのあたりはまた別途書きたいと思います。

d022_2
▲その他1。手元にあるボードゲーム「ダービー予想ゲーム」(エポック社。元は海外のもの)
 パッケージイラストは松下進さん。

d022_3
▲その他2。手元にあるキャラクターものボードゲーム各種(エポック社、ツクダオリジナル)
 「ふたり鷹」、「ゴッドマジンガー」、「綿の国星」

asobi_pic

「はりはり仮面」等、おまけ付き菓子の思い出

「はりはり仮面」とは、おまけとして下の写真のようなシールが付いていたチョコバーのお菓子(いわゆる食玩)です。
それを始めとした食玩の思い出を書こうと思いますので、「はりはり仮面」自体の詳細は他のサイト様をご参照願います。

れまでのおまけシールではあまり見かけなかったコミカルな内容が受けたのか、小学生の頃にちょっとしたブームがあり、テレビコマーシャルも放送していました。
自分でも何枚か集めていましたが、当時よく遊んでもらっていた上級生に何枚も譲り受け、現在残っている多くはその時のものです。

※余談ですがこの上級生の家には、人生ゲームのような玩具メーカー製のボードゲームがいくつもあり、よく遊ばせてもらっていて、それが後にボードゲームメーカー(玩具メーカーもあり)製のシミュレーションボードゲームいわゆるウォーゲームにハマる土台になったと思います。
 ボードゲームやウォーゲームに関しては、また別の記事で書きたいと思います。

d021_0
▲現在手元にあるシール。30年以上経っていますが今でもほのかにチョコの香りがする気がします(刷り込み?)

れ以前あるいは同時期に集めていた食玩には、
グリコキャラメル、スポロガム、ジョイントロボフーセンガム、ビックリマン(大ブームになった天使AS悪魔シリーズより数年前のの写実絵のどっきりシールの頃)、チョコボール(これは直接おまけが付いているわけではありませんが)等があり、
これ以降では、
ビックワンガム(これ系統としてデラックスビックワンガム、装甲騎兵ボトムズガム、銀河漂流バイファムガム?、機甲界ガリアンガム)等がありました。

忘れているものも多々あるかとは思いますが子供の頃の食玩はこんな感じで、大人になってからのものはまた別です(あまり買わない方だとは思いますが)

d021_1
▲おまけ。「ジョイントロボフーセンガム」の下敷き(パッケージはスポロガムにそっくりです)ですが、すっかり劣化退色しています。

asobi_pic

情報/文字フォントのベースラインとHTMLのimg(イメージタグ)の関係

前記事の【情報/文字フォント(書体)と各種ライン】で触れたベースラインは、ご覧のようなブラウザのHTML文章中に画像を入れる際(d016_icon3(T) ←例えばこんな感じ)にも関連があります。
d019_1
▲ベースラインの位置。

今回はそのことと、CSS(カスケーディングスタイルシート、通称スタイルシート)によるそれの調整について書きます。
(HTMLとそのタグやCSSに関する全般的なことは他サイト様にゆずり、文字フォントのベースラインがらみの部分のみさわりだけ触れます)

 

H

TML文書中に画像を入れる時、ベーシックな方法としてHTMLタグの<img>を利用します。
例えば当サイトのバナーを利用した↓このようなソースなら、

abcdefghijklmnopqrstuvwxyz<img src=”http://kane-to.com/wp-content/uploads/2015/03/kane-to_banner0.gif” />かねト商店バナー(200x40px)

↓このように表示されます。

abcdefghijklmnopqrstuvwxyzかねト商店バナー(200x40px)

もう一つ、もっと天地が小さい画像では、↓このようになります(ソースは省略)

abcdefghijklmnopqrstuvwxyzかねト商店バナー(88x31px)

さらにマニュアルやヘルプ文書でありがちですがアイコン程度の大きさを文書に内に入れ込むと、冒頭でも挙げたように↓こちら

abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)

※お使いのブラウザの設定等それぞれの環境により見え方がまちまちなので、私の環境のスクリーンショットを貼ります。
d020_0
▲書体はWindowsの「メイリオ」、サイズは16px程度です。

もうお分かりかも知れませんが、imgタグの属性やCSSのプロパティで特に何も指定しないと文字フォントのベースラインと画像の下辺が揃います。

 

C

SSによって、この画像の天地の位置を調整することが可能です。
前述のツールアイコンのように文書中にその文字フォントと同等の大きさの画像を入れ込みたいときに(完璧ではありませんが)便利で、vertical-alignプロパティを使います。
先の↓、
abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)
これに対して、

.note_icon {
vertical-align: -2px;
}

このようなCSSを適用すると画像が2px下がり↓こうなります(0pxでベースラインの位置)

abcdefghijklmnopqrstuvwxyzd016_icon3(T)ツールアイコン(Photoshopの文字ツール)

※これも見る側の環境によって変わるので、私の環境のスクリーンショットを貼っておきます。
d020_1
▲同じく書体はWindowsの「メイリオ」、サイズは16px程度です。

しかしこのCSSでの微調整は、前述のとおり見る側の環境によって位置やサイズが変わるので絶対的なものではありません。
ある程度そういうものだと妥協するか、容量(読み込み時間)が増え且つ検索にヒットしにくくなりますが上のスクリーンショットのように文字フォントも含めて画像にするのが良いでしょう。

 
ちなみにvertical-alignにはmiddleというプロパティがありこれを利用し、

.note_icon {
vertical-align: middle;
}

とすれば美しくセンター揃えに出来そうですが、実はこれは前記事にも出てきたエックスハイトに対しての天地センターなので、(「-」(ハイフン)と同じように)画像は和文フォントに対しては基本下がってしまいます。
d019_3
▲和文フォントは(書体にもよりますが)基本キャップハイトの大きさなので。

asobi_pic