Animate 2020 My Brushes ブラシの作り方
こんにちは、nabuKOです。
今回はAnimate 2020の自作ブラシ(My Brushes)の作り方です。
（ペイントブラシで使えるパターンブラシを作ります）
早速作りましょう♪
まずは新規作成です
今回はブラシ作成の説明なのでフレームレートは気にしなくて大丈夫です。
サイズはLINEのアニメーションスタンプのサイズにしました。お好みで変更してください。
これで準備ができました。
※ 私はワークスペース をクラシックにして、他、使いやすいようにウィンドウを配置して使っています。
まだ保存していないので、ファイルに名前をつけていない状態です。
このままブラシを作るので、名称未設定-1というフォルダがブラシの保存（格納）先になります。
↑ ブラシを作って名称未設定-1のところに入れていきます。
ブラシライブラリはウィンドウ → ブラシライブラリにあります。
パターンブラシの元になる線を描きます
ブラシツール（B）で描きます。
ブラシツールにして、プロパティパネルで線の太さを3にしました。（お好みで変えてください）
線を描きました。両サイドを消しゴムか、選択ツールで不要部分を選択してして消します。
両サイドを消すのは、描いたときに線をきれいに繋ぎやすくするためです。
ペイントブラシに登録します
選択ツールで線を選択した状態で、
プロパティパネルの新しいペイントブラシを作成ボタンをクリックします。
パターンブラシにチェックを入れます。
ブラシ名は文字化けを防ぐために半角英数字で入力します。
コーナー部分はアートワークを脇に配置にしましたが、画面を見ながらお好みのものを選択します。
下部の追加を押します。
その後、Y（ペイントブラシ）を押し、プロパティパネルのペイントブラシを管理ボタンを押します。
そして、チェックボックスにチェックを入れブラシライブラリに保存ボタンを押します。
すると・・・
これでブラシが任意のフォルダに格納できました。
これで完成です。
↓ ペイントブラシ（Y）でブラシをダブルクリックしてから楕円形ツールで描いてみました。
参考に他に作ったブラシもスクショを載せておきます。
だいたいは描いたものをコピーして、半分を変形ツールでひっくり返した状態でブラシを作っています。
↓ Animate CCの備忘録です。
naabuKO_brushで描いたイラスト
Animate CCのグラデーションツールの使い方
今回はAnimate CCのグラデーションツールの使い方についてです。
私自身使う時に、あれ？って使い方を忘れてたことが何回かありました・・
(´..･ω･..`)
下の画像のような楕円形を作って、色をグラデーションにします。
↓ 参考までに、今回の制作サイズやワークスペースについては下記の記事と同じです。
1.楕円を作ります
まずはツールパネルから楕円形ツールを選択して楕円を描きます。
ここでは線をブラック、塗りをオレンジ系のカラーにしました。( あくまでも例なので、線はなくてもいいです )
楕円が描けました。
2.塗りをグラデーションにする
ダイレクト選択ツールで、
↓ 楕円のオレンジ色部分のみを選択します。
この状態で、カラーパネルから、グラデーションにする色のカラーコードをコピーしておきます。( ↓ 画像の水色部分 )
そのあと同じカラーパネル内から、単色 → 放射状グラデーションに変更します。
すると・・、
こんな感じになります。
とりあえずグラデーションが適用されました。
↓ 塗りを選択した状態でカラーパネルの色を変更します。
先ほどコピーしておいた、カラーコードをペーストします。( もしくは入力)
( 初期状態では白黒のグラデーションが設定してあります )
あとはグラデーションのつまみ位置を左右逆にすれば完成です。
グラデーションのつまみ部分の操作はIllustratorなどのグラデーションツールと同じです。
3.グラデーションの細かい設定
ここで、自由変形ツールの中にある、グラデーションの変形ツールを選択します。
すると、グラデーションの細かい設定が変更可能になります。
↓ グラデーションの変形ツールの動画です 。
#AnimateCC グラデーションの変形ツールの動画 pic.twitter.com/rG2tXy6rbw
— nabuKO (@nabuknockout) 2019年7月22日
↓ 私がAnimate CCで作った LINEスタンプです。
Photoshop用LINE絵文字40個用テンプレートの配布
こんにちは、nabuKOです。
LINE絵文字40個用のPhotoshop用テンプレートを自分用に作りました。
作ってみて、無事に審査に通り販売できましたので、作ったPSDファイルのテンプレートを配布します。《注意事項》をお読みください。
入っているのはtab画像用のPSDファイルと、スライス済みの40個の絵文字用PSDファイルです。制作サイズは原寸サイズになっています。
( ↑ tab画像は実際にとても小さいですが、ブログ用に大きく貼っています )
スライス表示が邪魔な場合は、表示から非表示→スライスのチェックを外して下さい。
↓ スライス表示を非表示にした場合はこのようになります。
ファイルの書き出しについて
イラストを描いたら、
下のガイドレイヤーを非表示にします。
ファイル → 書き出し → web用に保存します。
保存する部分(全体)をスライスツールで囲むように選択します。
tabのファイルは
ファイル → 書き出し → web用に保存します。
絵文字( tab画像以外 )ファイル名をBridgeで変更します。
Adobe Bridge CCを起動し任意のファイルを選択します。
↓ Mac ⌘ A、Windows Ctrl Aで全てを選択します。
ツール → ファイル名をバッチで変更を選びます。
するとこの画面が出てきます。私は余計な部分を消しています。下のマイナスの部分をクリックすると消えます。
すると、
このようにシンプルになり、わかりやすくなりました。
↓ 新しいファイル名がこのようになっていればOKです。
画像の並び順も最初の画面で気のすむまで変えられます。並び替えた変えた後はこの処理をしてツール → ファイル名をバッチで変更で順番が変わっているか、ファイルから確認してみましょう。
最後に
一つのフォルダにtab.pngと001~040.pngの全てのデータを入れて圧縮します。（作る数は8個から申請できます）
Macの場合はフォルダを選択して右クリックし”フォルダ名”を圧縮でZIPフォルダになります。
- テンプレートの二次配布は禁止です。尚ファイルの使用につきましては自己責任でお願いします。審査の通過などを保証するものではありません。
- バージョンはPhotoshop CC(2019最新)を使用しており、他バージョンとの互換性を維持してファイルを保存してありますが、他のバージョンでは試しておりません。また、Photoshop以外のアプリでPSDファイルを開くとスライスなどが無効となり、書き出しできなくなります。
↓ テンプレートのダウンロードはこちらからどうぞ。
↓ 私が作った絵文字はこちらからみていただけます。
LINE STORE アレン&とりふく 絵文字
↓ LINE CREARORS MARKET 絵文字の制作ガイドライン
Animate CCで文字にフチを付ける方法
今回はAnimate CCで入力した文字に白いフチを付けます。
Animate CCでフチ文字を作ります。
制作画像サイズなどは前回と同じ、今回も自己流の備忘録となります。
前回の記事はこちらです。
作り方
文字を入力します。
分解します。
更に分解します。
このレイヤーをコピーして、レイヤーロック、非表示にしておきます。
下のレーヤーの1コマ目のおはようを選択して、Chensmoothというアドオン(機能拡張ツール)でRegroupボタンを押します。
(記事最後にリンクを貼っておきます）
その後ブラシライブラリからブラシを適当に選びます。
線の色とバケツ(塗り)の色を白にします。
更に線のスタイルを変更します。
するとこのようになりました。
グループ化します。
非表示にしていた上のレイヤーを表示して選択し、グループ化してからコピーします。
下のレイヤーの1コマ目を選択しその場にコピーペーストします。
(Mac : ⌘ shift V、Win : Ctrl shift V)
コピーペーストしたら全てを選択してグループ化します。
上にあったレイヤーは不要なので削除します。
これで完成です！
途中で使用したアドオンはこちらです。
このアドオンは親切なことにリンク先にチュートリアルビデオもあります。
線のスムージングや、後から塗りに対してペイントツールが適用できたりと、とっても便利でオススメです。
Animate CCで手書き文字にフチ文字加工
今回はAnimate CCで手書き文字にフチ文字加工をする方法です。
完全に自己流の備忘録です。
※サイズについて
LINEクリエイターズスタンプのアニメーションスタンプ制作サイズになっています。用途によってサイズなどお好みで変えてください。
幅320px、高さ270px、フレームレート( fps )はとりあえず10にします。
※サイズやフレームレートは制作途中でいつでも変更できます。
( Mac : ⌘J、Win : Ctrl J )
↓ ワークスペースは個人的にクラシックが使いやすいです。(右上画面から変更可です。お好みのものを)
※私はペンなどの入ったツールパネルを右へ持っていっています。
ペイントブラシツール ( Y )で文字を描きます。
文字の太さを今回は6pxにします。
※この記事を制作中にAnimate CC 2019にアップデートしました。
文字を描きました。
この描いたレイヤーをコピーします。
念の為、レイヤーを鍵マークでロックしておきます ↓ 。
最初のレイヤーを選択します。
Yを押してプロパティパネルを見ながら変更を加えます。
- 線幅を12pxに、
- 色をここでは白にし、
- その後、塗りに拡張ボタンを押します。
すると、こうなります ↓ 。
この状態でグループ化します。(Mac : ⌘G、Win : Ctrl G)
※見えづらいのでステージ背景をグレーにしました。
( Mac : ⌘J、Win : Ctrl J )
続いてコピーしたレイヤーのロックを解除します。
この文字もグループ化します。
↑ グループ化したこのレイヤーをコピーします。
(Mac : ⌘C、Win : Ctrl C)
上のレイヤーにロックをかけ、非表示にします。ここで上のレイヤーは削除してもいいです。
下のレイヤ1コマ目にその場にコピーペーストします。
(Mac : ⌘ shift V、Win : Ctrl shift V)
レイヤー1の1コマ目を選択すると↓ 、
↑ このように全てが選択されます。これをグループ化してひとつにします。
(Mac : ⌘G、Win : Ctrl G)
これでフチ文字の完成です。
いらなくなったレイヤーを削除します。
シンボルにします。
シンボルにすることでアルファ値( 透明度の変化 )や効果を加えることができます。
今回はフィルターから光彩を選択します。
(Macの場合ですが、この画面が違うプロパティパネルの表示になっていたら、Yを押すとこの画面になります。)
このように設定してみました。
これで境界線のあるフチ文字の完成です！
ちなみにフィルターは気に入ったものがあれば歯車からプリセットとして保存できるので、次回からは保存した効果をすぐに使えるので便利です。
ひとつのレイヤーで作業する場合
描いた文字をグループ化をしてコピーしておいて、線幅と色の変更、線を塗りに拡張、グループ化し更にその場に最初の文字をコピペ、全選択しグループ化でもできます。
Photoshopで生成した木をイラスト風にする
今回はPhotoshopで生成した木をイラスト風にしたり、更にフィルターをかけてアレンジしてみました。
新規ドキュメントを作成します。
今回は幅 2000 pixel、高さ 1500 ピクセル、解像度350 pixelにしました。
空のレイヤーを追加します。
フィルター → 描画 → 木
好きな木を生成します。
↓ 細部を拡大したところです。
細かい枝を飛ばします。
フィルター → その他 → 明るさの最大値
1.5 を入力し、OKをします。（プレビューを見ながら、数値はお好みで）
↓ 細かい枝が目立たなくなりました。
このレイヤーを複製します。
Macはcommand + J、 Winは Ctrl + J です。
複製したレイヤーを選択し、フィルター → 表現手法 → 輪郭検出
↓ 輪郭が検出されました。
↑ このレイヤーのレイヤーモードをソフトライトにします。
下のレイヤーと統合します。
Macはcommand + E、 Winは Ctrl + E
完成です。
↑ 細部を拡大した部分です。
色々なバリエーション
更にフィルターをかけたり、レイヤーモードを変えてみました。楽しいです。
私は必要に応じて、最初の木の生成時点で根っこの部分を、ブラシツールやコピーツールを使いながら描き足してから加工して、マンガなどの背景に使用しています。
この他のアレンジです。
Photoshopの木生成に関する記事。こちらはスクリプトで生成されています。