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> を作る時におすすめです。

#始め方
1. <a href="https://www.piskelapp.com"> Piskel </a>にアクセス
2. "Create Sprite" を選択

結果的に、次のような画面になったら、書き始められます。
<img width="500" alt="Main.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/2a93b626-78ac-0e28-4818-d5cb447db32f.png">

#基本的な使い方

###・ピクセル数（サイズ）の変更
右側の<b>Resize</b>ボタンからピクセル数を変更できます。
<img width="500" alt="Resize.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/08e5c0ff-3410-550d-5118-8212d3091e7a.png">

###・基本ツール（Pen / Paint / Erase）
Pen - ドットを描く
Paint - 特定の色で塗りつぶす
Erase - ドットを消す

これらのツールは全て、画面の左側にあります。
<img width="50" alt="BasicTool.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/bcb3a12b-dfb2-3a1d-115b-a0a62a674b95.png">

###・ペンの太さと色
ペンの太さは左上の4つ並んだ四角から選べます。
<img width="90" alt="Scale.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/390c3aa9-fd06-101e-0911-5e0fec687d09.png">
色は、左下の四角をクリックして、選択します。
<img width="90" alt="Color.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/a7e73334-c2c9-cb9d-f9d4-dd12f263548a.png">
実際に、描いてみると次のようになります。
<img width="500" alt="PenSize.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/1ee817eb-b1e1-4fe2-249d-7315754f63c8.png">

###・図形ツール（直線 / 四角 / 円）

これらのツールは全て、画面の左側にあります。
<img width="90" alt="Shape.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/8cb153f6-d4be-78d1-6056-be46fe1512b4.png">
実際に、描いてみると次のようになります。
<img width="500" alt="ShapeZentai.png" src="https://qiita-image-store.s3.amazonaws.com/0/240280/413152a6-251e-8d43-d4f9-dc4d347f2330.png">

#〜応用編について〜
もしも裏技やもっと色々な使い方を知りたい方は以下のサイトをご参照ください。
リンク：<a href="https://qiita.com/umi_mori/items/221b389abac3ca391638">Piskelでドット絵を描く！ 〜応用編〜</a>

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

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

:::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