Piskel 素材作成例

1. 解説: Piskel 素材作例
~ 絵を描いてPNG画像を作ってみよう ~

2. 例として、Piskelで絵を描いて画像として保存してみる Boo。

3. まずは、これから作成するドット絵のサイズのチェックをして
おこう。

4. 色を変えて円を描いてみた Boo。

5. 円を描いた位置が気に入らなかったので ...、
ツールを使って位置を調整した Boo。

6. プレビューを見やすく調整した Boo。
プレビューは適時切り替えて確認すると便利だ Boo。

7. どんどん描いていくBoo。
部品ごとに分けて描きたい子は「 Layers」でLayerを切り替
えて描こうBoo。

8. Layerを分けると、部品ごとの編集が楽になる Boo。
Piskelになれてきたら、Layerを試してみようBoo。

9. Layerの重なり順は「↑」「↓」ボタンで調整するBoo。
たとえば、胴体は顔の後ろに調整してみる Boo。

10. Layerを増やして、手足を描いてみた Boo。
完成図は、右上のプレビューで確認できる Boo。

11. 顔を描いて... 、よし！完成だBoo。
顔と手足は、対象ツールを使って描いてみた Boo。

12. 絵が描けたので、「SAVE」でタイトル(ファイル名)を入力し
てデータを保存する Boo。

13. 保存したドット絵を、 PNGファイルに出力するBoo。
さぁ、出力されたファイルを確認しよう Boo。

14. PNGファイルが作成できた Boo。
このファイルをプログラムで使用するので、ファイルの場所
を覚えておこうBoo。