オンラインサービスの需要が高まる中、同人誌即売会のオンラインサービスを利用してみました。
それがこちら、オンライン即売会サービス pictSQUAREです。
今回私は出品側としてサークル参加しました。
pictSQUAREではサークル参加、一般参加ともにアバターを操作して、他参加者との交流や頒布物の購入等を行うことができます。
アバターは自作も可能！今回はオリジナルアバターの自作方法について解説します。
| 当記事におけるオリジナルアバター素材はご自由にお使いいただけます。使用報告も不要です。
また当記事はリンクフリーですので、報告無しでリンクを貼っていただいて構いません。もちろんコメントを頂けると泣いて喜びますし、モチベーションup、ブログの更新率upに繋がります！ |
【関連記事】
pictSQUARE(ピクスク)ドット絵初心者が作る！スマホで店舗外観の作り方
当記事が好評だったので、店舗外観の作成方法の記事も作りました。
閲覧並びにコメントや問い合わせからの応援メール、本当にありがとうございます。
pictSQUAREで使えるアバターの概要
pictSQUAREのイベント会場では、ドット絵のアバターを操作して会場内を動き回り、他参加者との交流や頒布物の購入等を行うことができます。
こちらがpictSQUAREで用意されているアバターです。126種類ものアバターの中から選ぶことができます。
pictSQUAREで使用できるアバター一覧
試しに左上のアバターで会場に入ってみました。中央のキャラクターがアバター、茶色い建物がサークルのスペース(店舗)です。
pictSQUAREのイベント会場内でのアバター
昔のレトロゲームのような、懐かしい気持ちになる空間です。
pictSQUAREのイベント会場内でのアバター
前述の通りこれだけたくさんのアバターが既に用意されていますが、自作アバターを操作することも可能です。
折角参加するのなら、推しや思い入れのあるキャラクターのアバターを自作して、イベントを目一杯楽しみたい！
というわけで、作ったオリジナルアバターがこちら。
私が自作したアバター
この記事のためだけに作りました。制作時間16分のスライムです。雑。
ドット絵に挑戦するのは二度目ですが、完成度は兎も角として意外と簡単に作れます。
というわけでこのスライムアバターを元に、オリジナルアバターの作り方を解説します。
スポンサーリンク
pictSQUAREのアバター制作で使用するアプリ
- ペイントソフト(CLIP STUDIO、ibisPaint、その他キャンパスサイズを指定できるお絵描きアプリ等)
- ドット絵制作アプリ
今回はスマホの容量を圧迫したくなかったことと、使い勝手のわかっているアプリで作りたかったため、ibisPaintを使用しました。
そのためこのページではibisPaintをベースに作り方を解説しています。
pictSQUAREで使用するオリジナルアバターの作り方
アバターの画像サイズ
アバターは縦32×横32ピクセル(px)のサイズを1コマとします。前後左右12コマを縦128×横96pxの画像にまとめて、アバター画像として使います。
pictSQUAREにおけるアバターの規格
左右のドット絵は反転すればいいので、9コマ分のドット絵を描くことになります。
必要なドット絵はこちらの12コマ。
アバターの画像配置
動いている様子をイメージしながら作っていきます。
オリジナルアバターをペイントソフトで描く
①ペイントソフトを起動、32×32pxのキャンパスを立ち上げます。
アバターのキャンパスサイズ
②「デジタルペン」を選択
サイズは1pxです。消しゴムも「デジタルペン」1pxに設定します。
デジタルペン1pxで描画します
③絵を描く
ドットなので普段と勝手が違いますね。
実際に描いたアバターの画像
あ、私はお絵描きにはiPadを使用しているので、同じibisPaintの画像でも時々規格が違います。
簡単に描いたら、描きたいものの画像を参考にしながら点描画のようにぽちぽちとドットを打ったり消しゴムで消したり。
他の方のドット絵を参考にしたい時は「ドット絵 32×32 キャラチップ」とかで検索すると、たくさんの作品を見ることができます。
イメージでスライムを描き、1枚目のドット絵が完成！
完成したドット絵は、透過png保存します。
④同様に9コマ分のドット絵を作る
右向きのコマは左右反転させて透過png保存し、計12コマのドット絵を準備します。
実際に描いたアバターの画像
描く時は同じキャンパスにどんどんと足していっています。前の動作に合わせて描くことで、繋がりのある動作となります。
描いたドット絵を1枚の画像にまとめる
12コマ分のドット絵を96×128pxの画像にまとめます。
下の画像は32×32pxごとにガイドラインを引いた、96×128pxの画像です。アバター制作の目安に、ご自由にお使いください。
(実際に使ってみたところ数pxのズレがあります。実用には問題ないかと)
96×128pxの画像
下の配置図の通りにドット絵を配置します。
アバターの画像配置
配置すると、このようになります。
実際に描いたアバターの画像
ガイドのレイヤーは消しておきます。
作った画像は透過pngで保存します。
スポンサーリンク
pictSQUAREに登録する
①pictSQUAREにログインし、ダッシュボードからアバター設定を選択する
アバター設定を選択
②「ファイルを選択」からアバター画像を選択し、「アバター設定を保存する」をクリックする
ファイルを選択
③登録したアバター画像が表示されます
登録したアバター画像が表示されます
④会場に入る際のアバター選択画面のトップに、自作したアバターが追加されています
可愛い！
自作したアバターが追加されています
⑤イベントホールに入り、アバターの動作をチェックします
気になるところを修正して、完成です！
私が自作したアバター
| 登録状況がすぐに反映されないことがあります。数時間経てば反映されますが、キャッシュをクリアすることで即時反映されることもあるのでお試しください。 |
スポンサーリンク
pictSQUAREでのアバターの作り方まとめ
以上、pictSQUAREでのアバターの自作方法でした。
今回ibisPaintでの解説となりましたが、同様のペイントソフトやドット絵作成でも同じように作れるかと思います。
サークル参加者はもちろん一般参加の場合でも、オリジナルのアバターで会場を歩くとより楽しい！
たくさんの同士と出会えるオンライン即売会。楽しい一時のお供、自作アバターを作る一助となると幸いです。
店舗外観の作り方はこちら↓
コメント
こちらの記事で紹介されていた作り方でアバターを作らせていただきました！ありがとうございます！！
わかりやすくまとめられていてとても助かりました。
実はピクスクでとあるBLカップリングのwebオンリー主催をしておりまして、アバターの作り方でこちらの記事を紹介させていただきたいのですが、リンクをツイートしてもよろしいでしょうか…？
BLカップリングのイベント告知アカウントなんですけれども…。お返事いただければ幸いです。
ご訪問やコメントありがとうございます！
アバター完成おめでとうございます。当記事が参考になりまして、私も嬉しいです。
当ブログ内の記事は、ご自由にリンクしていただいて構いません。みなさんのアバター作りの参考になりますと幸いです。
よろしくお願い致します。
お返事ありがとうございます！
ありがたく使用させていただきます。
よろしくお願い致します。
（返信不要です。ありがとうございました！）
はじめまして。
今度ピクスクでWEBオンリーを主催するものです。
そらさまのブログのこちらの自作アバターの記事がとてもわかりやすかったので、ぜひ企画サイトにてご紹介させていただきたくご連絡させていただきました。
ぜひご検討いただけますと幸いです。どうぞよろしくお願いします。
初めまして、ご訪問並びにコメントありがとうございます。
当記事をご活用いただきありがとうございます！
当ブログ内の記事はリンクフリーですので、ご自由にリンクしていただいて構いません。楽しい同人活動のお手伝いができますと幸いです。
よろしくお願い致します。
ご返信ありがとうございます。
早速紹介リンクを貼らせていただきしました（https://haruiro0832.com/avatar/）
お忙しい中、ご対応いただきありがとうございました。
ご報告ありがとうございます。
お役に立てましたら嬉しいです！