Piskelでドット絵を描く！ 〜応用編〜

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


#Piskelとは？

サイト：<a href="https://www.piskelapp.com">Piskel</a>
概要：簡単にドット絵を描ける環境
推奨ブラウザ：Google Crome / Microsoft Edge

アプリやゲームを作る際の <b> <font color="red">オリジナルのキャラクター</font></b> や <b><font color="green">アイコン</font></b> を作る時におすすめです。

Piskelを初めて使う方は、「<a href="https://qiita.com/umi_mori/items/28f048986f2215a32192" target="_blank">Piskelでドット絵を描く！〜基本編〜</a>」を参照してみてください。

#・2色を同時に使いわける技
色を選択する際、四角が二つあります。
<img width="90" alt="Color.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/85ac7b1c-a4b0-e444-8dff-ce5dffdbafa1.png">

これらの四角の内、
<b>手前の四角（Primary）</b>は、<b>左クリック</b>でドットを描くことができ、
<b>奥側の四角（Secondary）</b>は、<b>右クリック</b>でドットを描くができます。

| 使いたい色の四角 | コマンド |
|:---:|:---:|
|手前の四角|左クリック|
|奥の四角|右クリック|

#・ドットの明るさを変える（Lighten）
すでに描いたドットの明るさを調整するには次のツールを使います。（画面左下）
<img width="90" alt="Lighten.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/622d0b0e-a1e6-d5ba-408c-de9eb1b53c50.png">

やり方は、このアイコンをクリックしてから、ドットをクリックするだけです。
この時、次のコマンドが成り立ちます。

| 目的 | コマンド |
|:---:|:---:|
|明るくしたい|`クリック（左右どちらでも可）`|
|暗くしたい|`Command + クリック`|

このツールを使うと、<b>光沢</b>や<b>影</b>などを表現することができます。
例えば、りんごに光沢をつけると次のようになります。
<img width="900" alt="ChangeApple.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/46a1e93f-14c2-ed0a-aa7c-27c3c607ef56.png">

#・画像に含まれる色を読み込む
何かしらの<b>画像の色をまとめて抽出</b>し、一つのパレットにセットとして読み込むことができます。
主な手順は次の通りです。

1. "<b>Palettes</b>" のプラスボタン（＋）をクリックします。
<img width="200" alt="Palettes.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/a48ff22f-9066-e634-cf03-1167ddec83db.png">

2. "<b>Import from file</b>"をクリックします。
<img width="300" alt="NewPalettes.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/38d61a4d-d222-e8f3-afab-dbd1af108e34.png">

3. 色の抽出をしたい画像を選択します。
選択すると、その画像に含まれる色が全てリストアップされます。
<img width="300" alt="AfterImport.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/df6be1a9-28d9-1e0f-0342-4d2189824335.png">

4. "Save"をクリックし、パレットの作成が完了です。
<img width="200" alt="AfterPalettes.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/4c2114fc-8eb7-e4a0-87ca-0bf50267e4cf.png">

今回の例では、以下のロケットの画像の色を読み込みました。
 <img width="200" alt="Rocket.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/9fcbf1a3-071f-e5cf-7097-23af9ee7d53e.png">

#・GIFアニメーションの作成
GIF："<b>Graphics Interchange Format</b>"の略で、画像が何枚も入った画像データ。
GIFアニメーション：パラパラ漫画のように画像を早く切り替えることを用いたアニメーション。

主な手順は次の通りです。

1. "<b>Add new frame</b>" か "複製ボタン"を用いて、複数の画像を用意します。
<img width="500" alt="AddnewFrame.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/5ce2e3aa-65aa-06ba-1638-c74d3fddb64a.png">

2. パラパラ漫画をイメージしながら、動きのある絵を描いてみます。
<img width="100" alt="gifMaterial.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/345b30b3-77f8-97ff-037b-2e875ce00cc4.png">

3. 画面の右上に連続的に、画像が切り替わり、アニメーションが再生されます。

<img width="500" alt="Afterwrotegif.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/0f265563-a106-3566-e47c-beab54078559.png">

今回のGIFアニメーションは次のようになりました。
<img width="300" alt="RocketBig.gif" src="https://qiita-image-store.s3.amazonaws.com/0/240280/9154ef7b-5822-a2c7-ff3d-487ec5c02a87.gif">

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)
# 参考文献

https://www.piskelapp.com

http://e-words.jp/w/GIF.html