23.グラフィックツール応用【塗り分け】

f:id:AdobeAnimateFunya:20160302165304p:plain
選択ツールやシェイプについては詳しく勉強したね。 今回はそれを使った応用テクニックを教えちゃうよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
そういうのを待ってたふにゃよ〜!! どんな技なのにゃ!?

youtu.be

シェイプの線は塗りの上に描画されて、塗りを分割するよね。


f:id:funyamora:20190420222832g:plain 22.選択ツールダブルクリックで同じ色、太さ、線種の線のシェイプをすべて選択できるよね。

f:id:AdobeAnimateFunya:20160302165304p:plain
この2つを使ってシェイプを塗り分けるテクニックを教えちゃうよ。

----------------------------------------------------------------------------------------

シェイプの選択を応用した塗り

f:id:funyamora:20190422220221p:plain

youtu.be

f:id:AdobeAnimateFunya:20160302165304p:plain
イラスト上に輪郭線など他に線のシェイプがある場合、 塗り分け線はそれと違う色・線幅にしないと 選択するときにダブルクリックで一括で選択できなくなるよ。
f:id:AdobeAnimateFunya:20160302184715p:plain
それは注意にゃね〜。 この技を使えば影を簡単につけられそうにゃね!

22.グラフィックツール【矢印・なげなわツール】

f:id:AdobeAnimateFunya:20160302165304p:plain
今日は矢印・なげなわツールについて解説するよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
うーん…それはもうカンペキに使えてると思うけど…
f:id:AdobeAnimateFunya:20160302165304p:plain
たかが選択ツール、されど選択ツールだよ。

----------------------------------------------------------------------------------------

f:id:funyamora:20190508224152p:plain

選択

f:id:funyamora:20190420220904g:plain 基本中の基本。クリックして選択。
ちなみにほかのツールを使っているときもcommandキーを押せば
一時的に選択ツールになるよ。

ドラッグして選択

f:id:funyamora:20190420221336g:plain なにもないところからドラッグして選択ができるよ。
描画オブジェクトやシンボルは一部でもその範囲に入れば選択される。

+shiftで複数を選択

f:id:funyamora:20190420221725g:plain shiftを押しながら選択すると、任意に選べるよ。
解除したい場合はもう一度shift+クリックしよう。

シェイプを選択

f:id:funyamora:20190420220523g:plain シェイプの塗りをダブルクリックすると、その周りの線も選択されるよ。

f:id:funyamora:20190420222832g:plain シェイプの線をダブルクリックすると、その線と一続きになっている
同じ色、太さ、線種の線がすべて選択できるんだ。

なげなわツールで選択

f:id:funyamora:20190508222037p:plain なげなわツールボタンを長押しするとモードが選べるよ。

f:id:funyamora:20190508221503p:plain ・なげなわツール
なげなわツールはシェイプに使うことが多いよ。
シェイプをフリーハンドで好きな形に選択できるんだ。

f:id:funyamora:20190508221506p:plain ・多角形ツール
クリックした点で結んだ多角形で選択するよ。ダブルクリックで選択を決定できる。

f:id:funyamora:20190508223123p:plain ・自動選択ツール
分解したビットマップグラフィックから同一または類似の色を選択するよ。

選択したものをコピー

f:id:funyamora:20190420225157p:plain
選択したものは[編集]からコピー、コピー&ペースト、ペーストができる。
削除はdeleteキーだよ。

f:id:funyamora:20190420224720g:plain コピーしたいものを選択してoption+ドラッグしてもコピーできるよ。

移動

選択したものはカーソルキーで1ピクセルづつ移動できるよ。
カーソルキー+shiftキーだと10ピクセルづつ移動するよ。

シェイプの線端・交点を移動させる

f:id:funyamora:20190420230321g:plain
ツールバーにある[オブジェクト吸着ボタン]をオンにするとスナップするからおすすめだよ。

ポイントのない辺の部分を変形させる

f:id:funyamora:20190420225331g:plain

角を作る

f:id:funyamora:20190420225304g:plain

21.グラフィックツール【図形ツール】

f:id:AdobeAnimateFunya:20160302165304p:plain
今日は図形ツールについて解説するよ。
f:id:AdobeAnimateFunya:20160302165254p:plain
図形ツールなら使ってるふにゃよ〜!円や四角を描いてるふにゃ!!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフフ…きっとふにゃクンが知らない驚きの機能が、まだまだあるんだよ。 それじゃ紹介してくよ。

----------------------------------------------------------------------------------------

図形ツール

f:id:funyamora:20190422203740p:plain

[楕円ツール]と[矩形ツール]の基本

f:id:funyamora:20190420205951p:plain 楕円・矩形ツール、どちらもドラッグして描くよ。
普通にドラッグすると書き始めた点から描画され、
ドラッグ+optionキーだと始点が中心となり描画されるよ。
さらに+shiftキーで正円・正方形が描けるよ。

[楕円ツール]オプション

f:id:funyamora:20190422204510p:plain 数値を変更すればドーナツみたいな真ん中に穴の空いた円形や扇型も簡単に描けるよ。

[矩形ツール]オプション

f:id:funyamora:20190420212428p:plain [矩形ツール]を選択してプロパティ画面の[矩形オプション]の数値を変えると角が丸の四角形が描ける。

f:id:funyamora:20190420213233g:plain ドラッグした状態のままキーボードの上下矢印キーを押すと丸みの調整ができちゃうよ。

f:id:funyamora:20190420213013p:plain option+クリックするとダイアログが表示され、入力した数字の四角形が作れる。

[プリミティブ楕円ツール][プリミティブ矩形ツール]

f:id:funyamora:20190422212216p:plain [矩形ツール]・[楕円ツール]をそれぞれ長押しすると現れる。

f:id:funyamora:20190420212621p:plain [プリミティブツール]は図形を描画した後でも形を調整できるよ。
描かれた図形は描画モードのような状態で描画される。
ダブルクリックで中に入ると普通の描画オブジェクトになって形が変更できなくなるから注意してね。

[多角形ツール]の基本

f:id:funyamora:20190422211144p:plain 星形・多角形を選ぶには。[プロパティ/ツールの設定/オプション]の[スタイル:]からどちらか選べる。

f:id:funyamora:20190420214644p:plain 辺の数・星のポイント数を調整して形を作ろう。

20.グラフィックツール【描画オブジェクト】

f:id:AdobeAnimateFunya:20160302165304p:plain
「描画オブジェクト」については今までさんざん登場してきてたよね。
f:id:AdobeAnimateFunya:20160302165254p:plain
描画オブジェクトモードをオンにするとシェイプを重ねることができるにゃよね。 2.お絵描き機能の特徴 - 初心者のためのAdobe Animateブログ で習ったにゃ!
f:id:AdobeAnimateFunya:20160302165304p:plain
今日はもう少し詳しく紹介していくよ。

----------------------------------------------------------------------------------------

描画オブジェクト

[オブジェクトの描画]をオンにして描画ツールで描いてみよう

f:id:funyamora:20190414153717p:plain [オブジェクトの描画]をオン

f:id:funyamora:20190414170522p:plain 描いてみよう。

f:id:funyamora:20190414170554g:plain それぞれのシェイプがひとまとまりになっているので重なった部分の描画は消えない。
[修正/重ね順]でオブジェクトの重ね順を変えることもできるよ。


描画オブジェクトを選択して設定を変更する

f:id:funyamora:20190414155610g:plain [選択ツール]で描画オブジェクトを選択した状態で
プロパティから色や線幅など設定を変更することができるよ。

シェイプと同じように消しゴムツールが使える

f:id:funyamora:20190414160806g:plain ひとかたまりになっているけど中身はシェイプと一緒だよ。
消しゴムツールもバケツツールも同じように使えるよ。

描画オブジェクトの中に入ってみよう

f:id:funyamora:20190414161920g:plain [選択ツール]で描画オブジェクトをダブルクリックすると中に入れるよ。
中身を選択ツールで選択するとシェイプであることがわかるよ。
この状態ならペイントツール(オブジェクトの描画モードはオフで)を使って
描き足すことができるよ。

シェイプに分解する

f:id:funyamora:20190414162459g:plain 描画オブジェクトを選択して[修正/分解]すると描画オブジェクトが分解されて中のシェイプになるよ。

描画オブジェクトの結合

f:id:funyamora:20190414163447p:plain 描画オブジェクトを選択状態で[修正/描画オブジェクトの結合]を選択する

結合

f:id:funyamora:20190414170816p:plain  ↓

f:id:funyamora:20190414170826p:plain
複数の描画オブジェクトを選択した状態から[修正/描画オブジェクトの結合/結合]で
選択したオブジェクトが一つの描画オブジェクトに変換される。
中身のシェイプは重なりがなくなっているよ。

f:id:funyamora:20190414171556p:plain 結合を応用すれば色面の分割もカンタン。
色面の描画オブジェクトに線の描画オブジェクトを結合すると
 ↓
f:id:funyamora:20190414171607p:plain 色面が分割されてバケツツールで塗り分けができるようになるよ。
色面とは異なる色の線で結合して分割すれば、描画オブジェクトの中に入って、
分割した線をダブルクリックで一気に選択、消すことができるよ。

f:id:AdobeAnimateFunya:20160302165304p:plain
キャラクターの影を塗り分けたり、色々使えそうでしょ?
交差

f:id:funyamora:20190414172602p:plain  ↓

f:id:funyamora:20190414172605p:plain

選択した全てのオブジェクトが重なり合う部分のみが残るよ。

型抜き

f:id:funyamora:20190414172821p:plain  ↓

f:id:funyamora:20190414172824p:plain 上のオブジェクトで下のオブジェクトから抜き取るよ。
穴を開けるのにも使える。

切り取り

f:id:funyamora:20190414173106p:plain  ↓

f:id:funyamora:20190414173109p:plain

一番上のオブジェクトで下のオブジェクトを切り抜くよ。

シェイプを描画オブジェクトに変換

f:id:funyamora:20190414174919p:plain  ↓

f:id:funyamora:20190414174915p:plain

シェイプを選択して[結合]を使えば描画オブジェクトに変換できるよ。
描画オブジェクトを分解してもまた戻すことができる。

f:id:funyamora:20190414175444p:plain [結合][分解]は頻繁に使うからプロパティにショートカットボタンが付いているよ。

19.グラフィックツール【消しゴム】

f:id:AdobeAnimateFunya:20160302165304p:plain
今日は[消しゴムツール]について紹介するよ。 ブラシツールとほとんど同じで、オプションで消去したい箇所を設定したり、 筆圧をつけたりできるよ。

f:id:funyamora:20190331181928p:plain

f:id:AdobeAnimateFunya:20160302165254p:plain
はいにゃっ!

----------------------------------------------------------------------------------------

消しゴムツールのオプション

f:id:funyamora:20190407135039p:plain [ブラシツール]と同じようにモード、筆圧、傾きが設定できるよ。

1.消しゴムモード

f:id:funyamora:20190407135250p:plain

・消す(標準)

f:id:funyamora:20190407133637g:plain

・塗りを消す

f:id:funyamora:20190407133657g:plain

・線を消す

f:id:funyamora:20190407133724g:plain

・選択された塗りを消す

f:id:funyamora:20190407133802g:plain

・内側を消す

f:id:funyamora:20190407133932g:plain

2.蛇口ボタンをオンにしてクリックで消す

f:id:funyamora:20190407134009g:plain

3.ブラシと同期設定

設定をオンにすると[消しゴムツール]のブラシサイズを変更した時に
[ブラシツール]のサイズも変更される。

4.アクティブレイヤーで消去

f:id:funyamora:20190407134048g:plain 「アクティブレイヤーで消去」をオンにしていると選択しているレイヤーにのみ[消しゴムツール]が有効になる。

その他の消去法

f:id:funyamora:20190407140402g:plain [消しゴムツール]をダブルクリックするとロックされていないレイヤーに配置された全てのオブジェクトを消去するよ。
「アクティブレイヤーで消去」をオンにしていても全て消去するから気をつけてね。

f:id:funyamora:20190407140025g:plain 消したくないレイヤーはロックすれば消去されないよ。

18.グラフィックツール【塗り】

f:id:AdobeAnimateFunya:20160302165304p:plain
今日は[ブラシツール][バケツツール]や「塗り」について紹介するよ。

f:id:funyamora:20190331153509p:plain [ブラシツール][バケツツール]

f:id:AdobeAnimateFunya:20160302165254p:plain
[ブラシツール]はいろんなオプションがあるにゃね〜!
f:id:AdobeAnimateFunya:20160302165304p:plain
AnimateCC 独特のオプションなんだ。 ブラシなどを使ったシェイプで イラストを描く時には役に立つから覚えておくといいよ。

----------------------------------------------------------------------------------------

ブラシツールのオプション

f:id:funyamora:20190401104527p:plain ブラシツールを選択すると表示されるボタンを選択するとプルダウンメニューででてくるよ。
※このオプションはステージに描かれたシェイプが全て[オブジェクトの描画ボタン]がオフで描かれたものだけに有効だよ。 f:id:funyamora:20190331173332p:plain

・標準

f:id:funyamora:20190401104612g:plain 既存の線も塗りも塗りつぶすよ。

・塗りをペイント

f:id:funyamora:20190401104843g:plain 線は塗りつぶさずに塗りのみを塗りつぶすよ。

・背面をペイント

f:id:funyamora:20190401104712g:plain 何も描かれていない部分のみ塗りつぶすよ。

・選択範囲をペイント

f:id:funyamora:20190401104859g:plain あらかじめ選択ツールで選択した部分のみを塗りつぶすよ。

・内側をペイント

f:id:funyamora:20190401104928g:plain 最初にブラシを下ろした部分内を塗りつぶすよ。

・筆圧ボタン

f:id:funyamora:20190331172519g:plain 筆圧対応のペンタブレットを使っていればオンにした時に線の太さが変わるよ。

バケツ・ブラシツールでできること
・線で囲まれた部分を塗りつぶす

f:id:funyamora:20190331174126g:plain

・塗りで囲まれた部分を塗りつぶす、色を変更する

f:id:funyamora:20190331174544g:plain

・隙間があっても塗りつぶす

f:id:funyamora:20190331174240g:plain オプションが「隙間を閉じない」だときっちり閉じた部分にしか
バケツツールで塗りつぶすことが出来ない。
「大きい隙間を閉じる」にすると少しの隙間は無視して塗りつぶすことができる。
この設定にすると細かい塗り残しが出来てしまうので注意が必要だよ。

・選択した部分の色を変更する

f:id:funyamora:20190331174812g:plain 選択された塗りの部分の色を変更する。線は残る。

・選択した部分をカラーパネルなどで色を変更する

f:id:funyamora:20190331174950g:plain 塗りも線も選択した部分の色をカラーパネルから変更できる。

・グラデーションで塗る

f:id:funyamora:20190331175255g:plain

・ブラシでグラデーションを塗る

f:id:funyamora:20190331175834g:plain グラデーションの幅は塗った幅に合わせて塗られる。

17.グラフィックツール【線に関するツール】

f:id:AdobeAnimateFunya:20160302165304p:plain
Animate CC はイラストを描くのも便利なんだよ。 ボクたちの出演しているスマホゲーム「ふしぎな生き物ふにゃもらけ 」も 全て Animate CC で作画されているんだよ。

f:id:funyamora:20190323172541p:plain

(全部Animate CC で描いてます。)

f:id:AdobeAnimateFunya:20160302165254p:plain
illustrator じゃないのにゃね〜。
f:id:AdobeAnimateFunya:20160302165304p:plain
2.お絵描き機能の特徴 - 初心者のためのAdobe Animateブログで説明したように Animate CC の描画は「線」と「塗り」の2種類の概念があるんだよ。 そしてこれらを「シェイプ」と言うんだ。
f:id:AdobeAnimateFunya:20160302165254p:plain
鉛筆ツールで描くと「線」で、ブラシツールで描くと「塗り」ふにゃね!
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…よく覚えていたね。 今回は「線」に関するツール[線][鉛筆][ペイントブラシ][インクボトル]を解説するよ。

f:id:funyamora:20190324161119p:plain

----------------------------------------------------------------------------------------

線の特徴
f:id:AdobeAnimateFunya:20160302165304p:plain
この2つのシェイプは線と塗り、どちらだと思うかい?

f:id:funyamora:20190324162316p:plain

f:id:AdobeAnimateFunya:20160302165254p:plain
2つの線ふにゃね。
f:id:AdobeAnimateFunya:20160302165304p:plain
フフフ…。 一見すると線に見えるけど実は「線」と「塗り」なんだ。 レイヤーをアウトライン表示にしてみるとこうなるよ。

f:id:funyamora:20190324162433p:plain

f:id:AdobeAnimateFunya:20160302165304p:plain
上は[鉛筆ツール]、下は[ブラシツール]で描いたんだ。 見た目は同じだけど「線」は軸で、「塗り」は輪郭線で定義されているのがわかるね。

f:id:funyamora:20190324163758g:plain 選択ツールでシェイプを触ると違いがわかる。

f:id:funyamora:20190324170911g:plain シェイプの線は交わったところで分割ができ、新しいポイントが出来るので 選択ツールで移動することができる。

f:id:funyamora:20190324171015g:plain 線を交わらせたくない時は線ツールを選択した状態で「オブジェクトの描画」ボタンをオンにして描画する。

鉛筆ツールの設定

鉛筆ツールを選択するとオプション設定が選べる。 f:id:funyamora:20190324174215g:plain (上)ストレート…フリーハンドで描いた線を直線や円弧に調整してくれる。
(中)スムーズ …フリーハンドの線を少し補正してくれる。
(下)インク  …ほぼフリーハンドのままの線で描かれる。

f:id:funyamora:20190324175145p:plain 「スムーズ」はプロパティのスムージングで補正のかかり具合を調整できる。

インクボトルツール

f:id:funyamora:20190324180232g:plain 塗りの面をクリックすると縁に線を作る。
塗りの際(輪郭)をクリックするとシェイプの点と点の間だけに線を作る。
線をクリックすると設定を変更できる。

線の設定プロパティ

f:id:funyamora:20190324184819p:plain

1.線のサイズ

スライダーでも数字でも太さを変更できる。

2.スタイル

f:id:funyamora:20190324182729p:plain デフォルトで点線・破線・ラフな線などが用意されている。

3.線のスタイルを編集

f:id:funyamora:20190325104619p:plain 選択したスタイルをカスタマイズできる。

4.線幅

f:id:funyamora:20190324184240p:plain 入り抜きペンのように線の幅が変わっていく線になる。

5.ペイントブラシツール

f:id:funyamora:20190324185348p:plain ほぼ線のスタイルと同じ。 ブラシライブラリのパネルから選択して使おう。 illustratorみたいにチョークのような質感のものや矢印もある。