pictSQUEREで使える!ドット絵初心者が解説する スマホでオリジナルアバターの作り方 ibisPaint使用

私が自作したアバター イラスト
私が自作したアバター

オンラインサービスの需要が高まる中、同人誌即売会のオンラインサービスを利用してみました。
それがこちら、オンライン即売会サービス pictSQUAREです。

pictSQUARE - オンライン即売会サービス
pictSQUAREでは、オンラインで即売会に参加できます。オンライン会場では、アバターでチャットでき、その場で頒布物を注文することができます。

今回私は出品側としてサークル参加しました。
pictSQUAREではサークル参加、一般参加ともにアバターを操作して、他参加者との交流や頒布物の購入等を行うことができます。

管理人
管理人

アバターは自作も可能!今回はオリジナルアバターの自作方法について解説します。

当記事におけるオリジナルアバター素材はご自由にお使いいただけます。使用報告も不要ですが、コメントを残していただけると励みになります!

 

pictSQUAREで使えるアバターの概要

pictSQUAREのイベント会場では、ドット絵のアバターを操作して会場内を動き回り、他参加者との交流や頒布物の購入等を行うことができます

こちらがpictSQUAREで用意されているアバターです。126種類ものアバターの中から選ぶことができます。

pictSQUAREで使用できるアバター一覧

pictSQUAREで使用できるアバター一覧

試しに左上のアバターで会場に入ってみました。中央のキャラクターがアバター、茶色い建物がサークルのスペース(店舗)です。

pictSQUAREのイベント会場内でのアバター

pictSQUAREのイベント会場内でのアバター

昔のレトロゲームのような、懐かしい気持ちになる空間です。

pictSQUAREのイベント会場内でのアバター

pictSQUAREのイベント会場内でのアバター

前述の通りこれだけたくさんのアバターが既に用意されていますが、自作アバターを操作することも可能です。

管理人
管理人

折角参加するのなら、推しや思い入れのあるキャラクターのアバターを自作して、イベントを目一杯楽しみたい!

というわけで、作ったオリジナルアバターがこちら。

私が自作したアバター

私が自作したアバター

この記事のためだけに作りました。制作時間16分のスライムです。雑。

ドット絵に挑戦するのは二度目ですが、完成度は兎も角として意外と簡単に作れます。

というわけでこのスライムアバターを元に、オリジナルアバターの作り方を解説します。

 
スポンサーリンク


pictSQUAREのアバター制作で使用するアプリ

  • ペイントソフト(CLIP STUDIO、ibisPaint、その他キャンパスサイズを指定できるお絵描きアプリ等)
  • ドット絵制作アプリ

今回はスマホの容量を圧迫したくなかったことと、使い勝手のわかっているアプリで作りたかったため、ibisPaintを使用しました。

管理人
管理人

そのためこのページではibisPaintをベースに作り方を解説しています

 

pictSQUAREで使用するオリジナルアバターの作り方

アバターの画像サイズ

アバターは縦32×横32ピクセル(px)のサイズを1コマとします。前後左右12コマを縦128×横96pxの画像にまとめて、アバター画像として使います。

pictSQUAREにおけるアバターの規格

pictSQUAREにおけるアバターの規格

左右のドット絵は反転すればいいので、9コマ分のドット絵を描くことになります

必要なドット絵はこちらの12コマ。

アバターの画像配置

アバターの画像配置

動いている様子をイメージしながら作っていきます。

 

オリジナルアバターをペイントソフトで描く

①ペイントソフトを起動、32×32pxのキャンパスを立ち上げます。

アバターのキャンパスサイズ

アバターのキャンパスサイズ

 

②「デジタルペン」を選択

サイズは1pxです。消しゴムも「デジタルペン」1pxに設定します。

デジタルペン1pxで描画します

デジタルペン1pxで描画します

 

③絵を描く

ドットなので普段と勝手が違いますね。

実際に描いたアバターの画像

実際に描いたアバターの画像

あ、私はお絵描きにはiPadを使用しているので、同じibisPaintの画像でも時々規格が違います。

簡単に描いたら、描きたいものの画像を参考にしながら点描画のようにぽちぽちとドットを打ったり消しゴムで消したり。

他の方のドット絵を参考にしたい時は「ドット絵 32×32 キャラチップ」とかで検索すると、たくさんの作品を見ることができます。

イメージでスライムを描き、1枚目のドット絵が完成!

完成したドット絵は、透過png保存します。

 

④同様に9コマ分のドット絵を作る

右向きのコマは左右反転させて透過png保存し、計12コマのドット絵を準備します。

実際に描いたアバターの画像

実際に描いたアバターの画像

描く時は同じキャンパスにどんどんと足していっています。前の動作に合わせて描くことで、繋がりのある動作となります。

描いたドット絵を1枚の画像にまとめる

12コマ分のドット絵を96×128pxの画像にまとめます。

下の画像は32×32pxごとにガイドラインを引いた、96×128pxの画像です。アバター制作の目安に、ご自由にお使いください。

(実際に使ってみたところ数pxのズレがあります。実用には問題ないかと)

96×128pxの画像

96×128pxの画像

下の配置図の通りにドット絵を配置します。

アバターの画像配置

アバターの画像配置

配置すると、このようになります。

実際に描いたアバターの画像

実際に描いたアバターの画像

ガイドのレイヤーは消しておきます。

作った画像は透過pngで保存します

 
スポンサーリンク



pictSQUAREに登録する

①pictSQUAREにログインし、ダッシュボードからアバター設定を選択する

アバター設定を選択

アバター設定を選択

 

②「ファイルを選択」からアバター画像を選択し、「アバター設定を保存する」をクリックする

ファイルを選択

ファイルを選択

 

③登録したアバター画像が表示されます

登録したアバター画像が表示されます

登録したアバター画像が表示されます

 

④会場に入る際のアバター選択画面のトップに、自作したアバターが追加されています

可愛い!

自作したアバターが追加されています

自作したアバターが追加されています

 

⑤イベントホールに入り、アバターの動作をチェックします

気になるところを修正して、完成です!

私が自作したアバター

私が自作したアバター

登録状況がすぐに反映されないことがあります。数時間経てば反映されますが、キャッシュをクリアすることで即時反映されることもあるのでお試しください

 
スポンサーリンク


pictSQUAREでのアバターの作り方まとめ

以上、pictSQUAREでのアバターの自作方法でした。

今回ibisPaintでの解説となりましたが、同様のペイントソフトやドット絵作成でも同じように作れるかと思います。

サークル参加者はもちろん一般参加の場合でも、オリジナルのアバターで会場を歩くとより楽しい!

管理人
管理人

たくさんの同士と出会えるオンライン即売会。楽しい一時のお供、自作アバターを作る一助となると幸いです。

 

 

 

コメント

  1. より:

    こちらの記事で紹介されていた作り方でアバターを作らせていただきました!ありがとうございます!!
    わかりやすくまとめられていてとても助かりました。

    実はピクスクでとあるBLカップリングのwebオンリー主催をしておりまして、アバターの作り方でこちらの記事を紹介させていただきたいのですが、リンクをツイートしてもよろしいでしょうか…?
    BLカップリングのイベント告知アカウントなんですけれども…。お返事いただければ幸いです。

    • そら そら より:

      ご訪問やコメントありがとうございます!
      アバター完成おめでとうございます。当記事が参考になりまして、私も嬉しいです。

      当ブログ内の記事は、ご自由にリンクしていただいて構いません。みなさんのアバター作りの参考になりますと幸いです。
      よろしくお願い致します。

      • より:

        お返事ありがとうございます!
        ありがたく使用させていただきます。
        よろしくお願い致します。
        (返信不要です。ありがとうございました!)

タイトルとURLをコピーしました