ドット絵講座2018

春にやったドット絵講座をアドカレ用に少し訂正したものです

Transcript

1. ドット絵講座2018 使用ツール:EDGE (TAKABO SOFT) (http://takabosoft.com/edge)
2. 本日の予定 ▪ 自己紹介 ▪ ドット絵？？ ▪ ドット絵ツールEDGEを使ってみよ～ ▪ GIFアニメを作ってみよ～ ▪ 自由にちょっと作ってみよ～ ▪ 宣伝！！！！
3. 自己紹介 おいなり ▪ 51代CG研 ドット絵班 ▪ 情報通信学科表現工学専攻(?) Twitter: @oinari_pic
4. ドット絵？？ ▪ 簡単に言うと・・・ 小さなマス目に色を並べて表現してる絵 ▪ 昔の制約の大きいPC上でできるだけ頑張ってみようと発展した技法の1つ →色、サイズなどが限定されてる！ 約３日 約５分
5. ドット絵ツールEDGEを使ってみよ～
6. １．ツールのインストール 1.1 ドット絵ツールEDGEのダウンロード 次のURL（http://takabosoft.com/edge）からダウンロードしてください 赤い枠内をクリック！ Macの人は追記を見てね～
7. １．ツールのインストール 1.2 ダウンロードの確認 「ダウンロード」フォルダ内に「edge1.29b」フォルダがあるか確認 1.3 実行してみよう！ 「edge.exe」をクリック！
8. ２．準備 2.1 必要なウィンドウの準備 STEP１ EDGEを開くと左図のような 画面が出てきます
9. ２．準備 2.1 必要なウィンドウの準備 STEP２ 「表示」→ 「レイヤ管理ウィンドウ」 をクリックすると 黄枠の小さいウィンドウが 開きます
10. ２．準備 2.2 新規作成 STEP１ 「ファイル」→「新規作成」 をクリック
11. ２．準備 2.2 新規作成 STEP２ （サイズ指定） 横幅：３２ 縦幅：３２ （カラーパレット選択） カラーパレット：すべて黒（０,０,０） （背景色選択） 背景色：黒 としてください
12. ２．準備 2.2 新規作成 STEP３ OKをクリックすると 左図のような画面が出ます （「EDGE１」というウィンドウ）
13. ２．準備 2.3 パレットづくり（色の選択） STEP１ 一番右上の黒いマスを クリックしてください
14. ２．準備 2.3 パレットづくり（色の変更） STEP２ 左下の赤、緑、青の所を 赤：２５５ 緑：０ 青：０ にしてください （打ち込むかバーをスライド）
15. ２．準備 2.3 パレットづくり（グラデーションを作ろう１） STEP３ 左図赤枠内の「領域の選択」というアイコンを クリックしてください （選択ツールに切り替わります）
16. ２．準備 2.3 パレットづくり（グラデーションを作ろう２） STEP４ 上一列をドラッグして選択してください
17. ２．準備 2.3 パレットづくり（グラデーションを作ろう３） STEP５ 「パレット」 →「グラデーションを作成」 を選ぶとグラデーションが・・・！
18. ２．準備 2.3 パレットづくり STEP６ 点線で囲まれた領域の上で左クリック →「選択範囲解除」 で点線の枠を消し、 矢印のアイコンをクリックします
19. ３．ドットを打ってみよう 3.1 描画色と背景色 左クリックすると描画色、 右クリックで が選べます 左：描画色 右：背景色
20. ３．ドットを打ってみよう 3.2 ウィンドウの拡大、縮小 STEP１ 赤枠内の虫眼鏡マークが 押されていることを確認します
21. ３．ドットを打ってみよう 3.2 ウィンドウの拡大、縮小 STEP２ 赤枠のウィンドウの上で 左クリック→拡大 右クリック→縮小 するので、好みのサイズにします （左図は8倍）
22. ３．ドットを打ってみよう 3.3 〇を作ってみよう STEP１ 上のバーの 「〇」 をクリックします
23. ３．ドットを打ってみよう 3.3 〇を作ってみよう STEP１ 上のバーの 「〇」 をクリックします
24. ３．ドットを打ってみよう 3.3 〇を作ってみよう STEP２ 左図の赤枠のウィンドウ上で ドラッグして 適当な丸を作ります Tips 戻る：黄枠の「戻る」アイコン or Ctrl + z etc… やり直し：黄枠横の「進む」アイコン or Ctrl + y etc…
25. ４．保存しよう 4.1 EDGE形式での保存 STEP１ 「ファイル」 →「名前を付けて保存」 をクリックします
26. ４．保存しよう 4.1 EDGE形式での保存 STEP２ ファイル名：（自由に入力） ファイルの種類：EDGE形式 を選択して 「保存」を押します
27. ５．PNGで出力しよう 5.1 PNGでの出力（背景透過しない） STEP１ 「ファイル」 →「エクスポート」 →「PNG形式で保存」 をクリックします
28. ５．PNGで出力しよう 5.1 PNGでの出力（背景透過しない） STEP２ 透過色設定：「透過情報を保存しない」 になっていることを確認して 「保存」 をクリックします
29. ５．PNGで出力しよう 5.1 PNGでの出力（背景透過しない） STEP３ ファイル名：（自由に入力） ファイルの種類：PNG形式 を選択して 「保存」を押します
30. ５．PNGで出力しよう 5.2 PNGでの出力（背景透過） STEP１ ５．１と同様に 「ファイル」 →「エクスポート」 →「PNG形式で保存」 をクリックします
31. ５．PNGで出力しよう 5.2 PNGでの出力（背景透過） STEP２ 透過色設定：「背景色を透過させる」 になっていることを確認して 「保存」 をクリックします
32. ５．PNGで出力しよう 5.2 PNGでの出力（背景透過） STEP３ ５．１と同様に ファイル名：（自由に入力） ファイルの種類：PNG形式 を選択して 「保存」を押します
33. ５．PNGで出力しよう 5.3 背景透過の重要性 透過してない 透過している
34. GIFアニメを作ってみよ～
35. １．差分を作ろう 1.1 コピー 赤枠のウィンドウをクリックして （アクティブにして） Ctrl + A で選択し Ctrl + C でコピー
36. １．差分を作ろう 1.2 貼り付け 「編集」 →「貼り付け」 →「新しいレイヤに貼り付け」 をクリック レイヤが増えた！
37. １．差分を作ろう 1.3 変形 STEP１ 「イメージ」 →「拡大縮小」 をクリック
38. １．差分を作ろう 1.3 変形 STEP２ 横幅：３２ 縦幅：２６ 倍率指定：１．００ と設定し、OKをクリック
39. １．差分を作ろう 1.3 変形 STEP３ 左図のようにつぶれるので 十字キーの↓で移動します
40. １．差分を作ろう 1.4 2つ目 STEP１ Ctrl + D で選択解除 Ctrl + A でもう一度選択 Ctrl + C でもう一度コピー 「編集」 →「貼り付け」 →「新しいレイヤに貼り付け」 をクリック
41. １．差分を作ろう 1.4 2つ目 STEP２ 「イメージ」 →「拡大縮小」 をクリック 横幅：３２ 縦幅：２６ 倍率指定：１．００ と設定し、OKをクリック
42. １．差分を作ろう 1.4 2つ目 STEP３ １．３と同様に 十字キーの↓で移動します
43. １．差分を作ろう 1.5 それぞれのレイヤを滑らかにしよう 赤枠の鉛筆アイコンをクリックして 黒くなってしまったところを埋めます
44. ２．アニメーションを作ろう 2.1 必要なウィンドウを出そう 「表示」 →「アニメーション」 →「アニメーションフレーム」 をクリック
45. ２．アニメーションを作ろう 2.2 フレームを読み込もう STEP１ 「フレーム」 →「取り込み開始」 をクリック
46. ２．アニメーションを作ろう 2.2 フレームを読み込もう STEP２ 赤枠のウィンドウ内で ドラッグ 勝手に右の方に追加されます
47. ２．アニメーションを作ろう 2.2 フレームを読み込もう STEP３ 他のレイヤーを選択して 赤枠のウィンドウをクリックすると またまた増えていきます
48. ２．アニメーションを作ろう 2.2 フレームを読み込もう STEP４ 順にクリックして ここまで増やします
49. ２．アニメーションを作ろう 2.3 アニメーションを確認しよう 赤枠のアイコンをクリックして 黄枠のウィンドウを出します ▲のボタンで再生できます
50. ２．アニメーションを作ろう 2.4 アニメーションを書きだそう STEP１ 「ファイル」 →「動画をアニメーションGIF形式で保存」 をクリック
51. ２．アニメーションを作ろう 2.4 アニメーションを書きだそう STEP２ 保存をクリックします
52. ２．アニメーションを作ろう 2.4 アニメーションを書きだそう STEP３ ファイル名：（自由に入力） ファイルの種類：GIF形式 を選択して 「保存」を押します
53. ではでは、自由に作ってみよ～
54. 最後に宣伝 SUAN君企画 ファミコンなRPG企画です Twitter @MISWJP slackチャンネル #rpg2018 みなさんドット一緒に打ちましょ～～う！
55. ありがとうございました！
56. 追記 １．Macでの使用方法 EasyWineを用いた記事(https://qiita.com/musaprg/items/e7d63603df96d31cf060) を参考に入れてください Aviutlについての記事ですが、同様にしてEDGEも動作するようです お手数おかけします・・・
57. 追記 ２．拡大の仕方 ドット絵は普通に拡大すると 輪郭がぼやけてしまいます 普通の とある方法
58. 追記 ２．拡大の仕方 方法1：Pixel Art Resizer （https://gifmagazine.net/converters/pixel_art）を使う 方法2：CLIP STUDIO, Photoshop, FireAlpacaなどを使う クリスタ：「編集」 → 「画像解像度を変更」 → 補間方法：ハードな輪郭 フォトショ：「イメージ」 → 「画像解像度」 → 再サンプル：ニアレストネイバー法 （Ctrl + Alt + I で「画像解像度」まではできる） アルパカは使ってないので分からないです・・・すみません・・・