![](https://daigonozin.com/wp-content/uploads/2021/05/54e35cd2cc1a03e5533708741df81841-23-800x450.png)
このページでは、
クリスタでWebサイトやソフトのUIなどに使えるアイコンを”ドット絵”で作成していきます。
このような方に向けたページです
・ドット絵でアイコン・ロゴ作成をクリスタで練習したい方
・アドビ製品を持っていないのけどクリスタで頑張りたい方
過去に描いたこちらの記事のドット絵バージョンです。
それではぜひご覧ください。
資料集め
今回はWindowsの指マークを作るので、資料を集めます。
アイコンやロゴ作成では資料があると作りやすくなるので、ぜひ集めてください。
今回はこの画像を用意しました。
![](https://daigonozin.com/wp-content/uploads/2021/05/1-23.png)
適当にカーソルを合わせてそれをスクリーンショットしました。
そのままこれを使ってもいいのですが、
今回は少しカクカクにしていきたいと思います。
実作業
1.キャンパスを作成
今回はドット絵を作るので、低解像度の25×25pxでいきたいと思います。
![](https://daigonozin.com/wp-content/uploads/2021/05/2-16.png)
2.グリッドを表示
作業をやりやすくするためにグリッドを表示させます。
【クリスタ】グリッド表示方法|模写に使えます←こちらを参考にして下さい。
設定内容は以下とうり
・グリッド・ルーラの原点を中央に
・グリッドの設定の間隔を1px、分割数を1に
![](https://daigonozin.com/wp-content/uploads/2021/05/3-16.png)
3.線のドットを打つ
資料を元にまずは外側の線を打っていきます。
そのまま打つのではなく、自分なりのいい感じに打っていきます。
![](https://daigonozin.com/wp-content/uploads/2021/05/140fb47efa34e94a37a6e7cb8ba7cafd-800x386.png)
4.中を塗りつぶし、終了
中を塗りつぶしひとまず完成とします。
影を塗ってみても面白いかもしれません。
![](https://daigonozin.com/wp-content/uploads/2021/05/f8db11917aa5e47d0cda5a0ed5ec7b12-800x369.png)
完成品
![](https://daigonozin.com/wp-content/uploads/2021/05/eccb4857b7ee95ce66c8297f730e4d18.png)
25×25px
![](https://daigonozin.com/wp-content/uploads/2021/05/66d6373ccef7b70568b5b784fef9a872.png)
250×250px
サイズ変更のやり方はこちらの記事を参考にして下さい↓
コメント