pictSQUARE(ピクスク) スマホで簡単人型アバターの作り方とアバター素体配布

自作したアバター PictSQUARE講座
自作したアバター

スポンサーリンク



前回の記事ではpictSQUAREで使用できるアバターの基礎的な解説とスライムの使い方を解説したので、今回は人型のアバターを作ってみました。

 

管理人
管理人

そのまま描き込んで使えるアバター素体も置いてありますので、アバター作りにご活用いただければと思います。

当記事におけるオリジナルアバター素材はご自由にお使いいただけます。使用報告も不要です。

また当記事はリンクフリーですので、報告無しでリンクを貼っていただいて構いません。もちろんコメントを頂けると泣いて喜びますし、モチベーションup、ブログの更新率upに繋がります!

 

関連記事

ピクスクのアバター作成についての基礎的な解説及び、簡単なアバターの作り方はこちら↓

pictSQUAREで使える!ドット絵初心者が解説する スマホでオリジナルアバターの作り方 ibisPaint使用
スポンサーリンクSオンラインサービスの需要が高まる中、同人誌即売会のオンラインサービスを利用してみました。それがこちら、オンライン即売会サービス pictSQUAREです。今回私は出品側としてサークル参加しました。pictSQUAREではサ

 

ふたりで手を繋いで歩くペアアバターの作り方はこちら↓

pictSQUARE(ピクスク) 2人で手を繋いで歩くペアアバター素体と作り方(クリスタ使用)
pictSQUAREでのオンラインイベントで使用できるアバター素体を作りました。今回はペアアバターです。二頭身くらいの可愛らしいサイズ感を目指しました。仲良く手を繋いでもらっています。素体を元に作成したアバターがこちら。本来ひとりのスペース

 

ピクスクの店舗外観の作り方はこちら↓

pictSQUARE(ピクスク)ドット絵初心者が作る!スマホで店舗外観の作り方
スポンサーリンクSpictSQUAREでサークル活動を行ううえで必要となるのは以下の3つ。 頒布物(もちろん一番大事!) アバター 店舗外観今回は店舗外観の概要や作り方について解説します。また、店舗外観の種類と各メリット・デメリットに

 

pictSQUAREで使用可能なアバター素体

私が作成したアバター素体

アバター素体

こちらが自作したアバター素体です。縦128px、横96px。背景は透過してあります。

こちらは配布しますので、保存してご自由にお使いください。描き足し・色変え等の加工をしていただいて構いません。

自作発言や二次配布はご遠慮くださいね。

加工した画像を配布する際は当サイト https://www.soramade.info/ の記載をお願いします。

以下の項目で紹介するアバターの作り方でも、こちらの素体を使用します。

 

自作したアバター素体

自作したアバター素体

ピクスクにアバター登録するとこんな見た目。

自作したアバター素体

自作したアバター素体

横顔

自作したアバター素体

自作したアバター素体

背面。

管理人
管理人

ピクスクに搭載されているアバターよりもやや頭を大きめにし、丸っこいフォルムにしてみました。

 

 

スポンサーリンク


 

pictSQUAREアバター作成用ガイドライン

アバター作成用ガイドライン

アバター作成用ガイドライン

こちらはアバター作成の際に便利なガイドラインを引いたものです。

縦128px 横96px。黒のラインが縦32px 横32pxのアバター1つ辺りのサイズ、更にオレンジのラインで中心線を表しています。

こちらも背景透過済み。保存してご自由にお使いください。自作発言や二次配布はご遠慮くださいね。以下の項目で紹介するアバターの作り方でも、こちらの素材を使用します。

 

今回作成するアバター

自作したアバター

自作したアバター

上のアバター素体を使用し、制作時間は約1時間でした。

自作した神崎颯馬アバター

自作した神崎颯馬アバター

ピクスクにアバター登録するとこんなかんじ。前面。

 

自作した神崎颯馬アバター

自作した神崎颯馬アバター

横から。

 

自作した神崎颯馬アバター

自作した神崎颯馬アバター

背面。見え方の参考にどうぞ。

 

 

当サイトで作成されたアバター画像について できること・できないこと

できること

  • 当サイトのアバター素体に描き加える形で、オリジナルのアバターを作成する(人型に限らず、動植物や無機物も問題ございません)
  • 当サイトのアバター素体を元にご自身で作成したアバター画像をpictSQUAREに登録し、オンラインイベント会場で活動する
  • 当サイトのアバター素体を元にご自身で作成したアバター画像のスクリーンショットの撮影や、撮影した画像をSNSやサイトにて公開する
  • 当サイトのアバター素体を元にご自身で作成したアバター画像を無償で配布する(当サイト https://www.soramade.info/ のURLの記載の程、よろしくお願い致します)
  • 当サイトのアバター素体を元にご自身で作成したアバター画像で、ご自身での使用または無償での配布(プレゼント企画・有償作品のおまけとしてのノベルティ等)のためにグッズを作成する

 

できないこと

  • 当サイトのアバター素体及びガイドラインの画像の自作発言・他サイトやSNS等で配布する(二次配布)
  • 当サイトのアバター素体を元にご自身で作成したアバター画像を有償(金銭のやり取りが発生する形)で配布する
  • 当サイトのアバター素体を元にご自身で作成したアバター画像でグッズを作成し、有償で頒布(販売)する

 

なお、この素体を使用した際に発生したいかなる問題においても、一切の責任を負いかねますのでご了承ください。

 

それではこちらのアバターを元に、次項にて人型アバターの作り方を解説していきます。

スポンサーリンク



 

pictSQUAREで使える人型アバターの作り方

IbisPaintで作成しています。その他お絵描きアプリでも同様に作ることができるかと思います。

 

①アバター素体の画像を読み込んでキャンパスを開く

アバター素体の画像を読み込んでキャンパスを開く

アバター素体の画像を読み込んでキャンパスを開く

ガイドラインの画像も読み込み、素体の下に重ねました。逆に素体の上に重ねて不透明度を下げて使用しても使いやすいです。

 

②新規レイヤーを上に重ね、デジタルペン1pxで描き足す

デジタルペン1pxで描き足す

デジタルペン1pxで描き足す

基本的にペン・消しゴム共にデジタルペン1pxで描いていきます。

デジタルペン1pxで描き足す

デジタルペン1pxで描き足す

絵の全体像を掴みやすいので、髪から描き足しました。まずベースの色で髪を描き、影とハイライトをざっくりと足します。小さなアバターなので細かく描いても見えないため、簡単に描きます。

 

③レイヤーを複製して隣の素体に髪を乗せる

レイヤーを複製して隣の素体に髪を乗せる

レイヤーを複製して隣の素体に髪を乗せる

隣の素体にも髪を生やします。髪が風になびいて揺れているような表現がしたくて少し調整しましたが、実際に動かしてみると変化が少なくてあまりわかりませんでした。アバターのサイズが小さなこともあり、細かな変化はわかりにくいかもしれません。

 

④同様に全ての素体に髪を乗せる

全ての素体に髪を乗せる

全ての素体に髪を乗せる

②の髪の長さを参考にしながら、横から見た髪と後ろから見た髪を描きます。2段目と3段目は左右反転すればいいので、9マス分描くことになります。

③と同様に髪をなびかせてみましたが、動かしてみると変化は感じられず…横3コマは全く同じでも良かったかなと思いました。

 

全ての素体に髪を乗せる

全ての素体に髪を乗せる

また、顔に髪の影を描き足しています。これも自己満足レベルですが、多少髪と肌が馴染むかなと。

 

全ての素体に髪を乗せる

全ての素体に髪を乗せる

髪レイヤーのみを表示すると、このようになっています。

 

⑤服を描く

服を描く

服を描く

服を着せます。素体の手足の動きを参考に。服の面積が小さいので、デフォルメしながら。

 

⑥全ての素体に服を描く

服を描く

服を描く

髪と同様に、⑤を参考に全ての素体に服を着せます。

2段目を描いたら、レイヤーを複製して左右反転し3段目に被せます。

服のデザインが前後で同じ場合は、1段目の服レイヤーを複製して4段目の素体に着せると楽です。

また、髪の光源に合わせてハイライトも入れました。今回の光源は左上です。

 

全ての素体に服を描く

全ての素体に服を描く

服レイヤーのみを表示するとこのようになっています。

 

⑦透過pngで保存する

透過pngで保存する

透過pngで保存する

ガイドラインのレイヤーを非表示にし、透過png形式で保存します。

これでアバター用の画像が完成です。

管理人
管理人

その他、目の形を変える・口を付ける・その他持ち物を持たせる等…作りたいキャラクターに合わせて自由に作ってくださいね

 

pictSQUAREにアバター登録する

それでは作った画像をアバター登録して実際に動かしてみます。

①ピクスクにログインし、左上の三本線をタップ、「アバター設定」を選択する

「アバター設定」を選択する

「アバター設定」を選択する

 

②アバター画像を保存する

アバター画像を設定する

アバター画像を設定する

「アバター画像」の「ファイルを選択」にて作った画像を選択し、「アバター設定を保存する」をクリックして保存する

 

アバター画像を設定する

アバター画像を設定する

このように作成した画像がアバター画像として登録されます。

 

③アバターの動作確認をする

アバターの動作確認をする

アバターの動作確認をする

「イベントに参加」の「テスト出展」からアバターの動作確認をします。テスト出展機能は2020年11月に実装された機能で、自分だけが入場できる仮スペースでアバターの確認や店舗設定の確認を行えます。

それ以前はイベントに参加申し込み後にできる時間外入場でアバターを動かせたので、イベントの参加申請の有無に関わらずアバターを動かせるテスト出展機能はとっても便利です。

もちろんイベント参加申し込み後であれば、時間外入場でアバターを動作確認しても問題ありません。時間外入場の場合は他の参加者が入場している場合があるので、作りかけのアバターを誰にも見られたくない等ありましたら、テスト出展で確認すれば他参加者と会う心配がありません。

今回はテスト出展よりアバターの動作確認をします。入場ボタンが違うだけで、アバターの選択や会場での操作は変わりありません。

 

④入場する

入場する

入場する

「テスト出展」下部の「テスト出展会場を確認する」から入場します。

 

⑤イベントホールに入る

イベントホールに入る

イベントホールに入る

作成したアバターが左上にいるため、そちらを選択して「イベントホールへ」を押します。

アバターを設定してから反映されるまで数分~数時間程度のラグがある場合があるので、左上に表示されない場合はアバターがきちんと登録されているか確認したうえで、少し待ってみるのもいいかもしれません。

 

⑥アバターの動作を確認する

自作したアバター

自作したアバター

無事アバターが表示するされました!やったー!上下左右にアバターを歩かせてみて、おかしなところがないかを確認します。必要に応じてアバター画像を修正・再登録すれば、アバターの完成です。

 

以上、pictSQUAREで使用できるアバターの作り方でした。

管理人
管理人

意外と簡単に作れるので、ぜひチャレンジしてみてくださいね!

人型より簡単!スライムアバターの作り方はこちら↓

pictSQUAREで使える!ドット絵初心者が解説する スマホでオリジナルアバターの作り方 ibisPaint使用
スポンサーリンクSオンラインサービスの需要が高まる中、同人誌即売会のオンラインサービスを利用してみました。それがこちら、オンライン即売会サービス pictSQUAREです。今回私は出品側としてサークル参加しました。pictSQUAREではサ

ふたりで手を繋いで歩くペアアバターの作り方はこちら↓

pictSQUARE(ピクスク) 2人で手を繋いで歩くペアアバター素体と作り方(クリスタ使用)
pictSQUAREでのオンラインイベントで使用できるアバター素体を作りました。今回はペアアバターです。二頭身くらいの可愛らしいサイズ感を目指しました。仲良く手を繋いでもらっています。素体を元に作成したアバターがこちら。本来ひとりのスペース

 

PictSQUAREの店舗外観の作り方はこちら↓

pictSQUARE(ピクスク)ドット絵初心者が作る!スマホで店舗外観の作り方
スポンサーリンクSpictSQUAREでサークル活動を行ううえで必要となるのは以下の3つ。 頒布物(もちろん一番大事!) アバター 店舗外観今回は店舗外観の概要や作り方について解説します。また、店舗外観の種類と各メリット・デメリットに

スポンサーリンク


コメント

  1. こんにちわ、ピクスク アバター から検索してこちらの講座にたどり着きました。
    素体をお借りしてアバターを作成させていただきました、わかりやすい説明と素敵な素体ありがとうございます!

    作成したアバターを、自分以外の人にもピクスク設定の練習で配布したく、
    ページ上部に「加工した画像を配布する際は当サイトの記載をお願いします」とありましたので、URLを記載した状態で公開させていただきました、

    https://twitter.com/cccc_only/status/1476371686052495360

    自分でドット絵など細かい作業が大変だったので、本当に助かりました、重ね重ねありがとうございました!
    もし問題がありましたら、お手数ですが記載のメールアドレスまでお知らせください。

    • こんばんは、ご報告と嬉しいコメントありがとうございます。
      ご報告の通り、素体を使用して自作されたアバターの配布は問題ありません。URL先のツイートも拝見しました。ありがとうございます!

      自分でアバターを作った際にも、1からのアバター作りは大変だと感じたので、アバター素体がお役に立ててよかったです。気軽にアバターを作るための一助となりましたら幸いです。

  2. はじめまして。
    突然のコメントを失礼致します。
    貴サイト様の丁寧なご説明と可愛らしい素体のおかげではじめて自分の想像通りのお気に入りのドット絵を作成することができました。
    本当にありがとうございました!

    そこでご質問なのですが、作成したドット絵を用いてグッズを作成してもよろしいでしょうか…?
    配布はサイトのリンクを記載すれば可能との記載がありましたが、この場合は領布するページに貴サイトのリンクを記載するという理解でよろしいのでしょうか…?

    お手数をおかけして申し訳ございませんが、ご回答のほど頂けますと幸いです。
    どうぞ宜しくお願い致します。

  3. 先ほどはこちらでのコメントを失礼致しました。表ではお答えしにくい内容かもしれないと思い当たりましたので、先ほど改めてメールでお問い合わせをさせて頂きました。
    ご返答はこちらのコメントでも、メールでもどちらでも結構です。

    ご確認のほどお願いできましたら幸いです。
    どうぞ宜しくお願い致します。

    • 初めまして、サイトのご利用ならびにコメントありがとうございます。
      お気に入りのドット絵ができたとのことで、お役に立てましてとっても嬉しいです!創作活動を行ううえでの一助となりましたら幸いです。

      さて、ご質問の回答ですが
      当サイトのアバター素体を元にお作りいただいたアバター画像を使用したグッズの作成につきましては、以下とさせていただいております。

      ・グッズの作成は可
      ・金銭のやり取りが発生する活動は禁止

      今回の場合ですと、ひよこさんが個人で楽しんだり、プレゼント等の無償でのやり取りを行うためにグッズを作成されることは問題ございませんが、そのグッズの頒布はご遠慮いただいております。
      また、個人で楽しむためにグッズを作成された場合のSNSへの写真画像の投稿につきましては、当サイトURLの記載は任意です。

      以上、よろしくお願い致します。お問い合わせいただきましてありがとうございます。

      • 丁寧かつお早いご返答をありがとうございます…!
        グッズ作成は可能、プレゼントなら譲渡も可能とのこと了解致しました。

        それを踏まえてもう一つご質問を失礼致します。
        領布するグッズ①におまけとしてそのドッド絵のグッズをつけるというのは可能でしょうか…?
        ①のお金は頂くという形なのですが、その方法もアウトになりますでしょうか…?

        大変お手数と存じますが、お手すきの時にご回答頂けましたら幸いです。どうぞ宜しくお願い致します…!

        • こちらこそご確認ありがとうございます。

          有償で頒布されるグッズに、ノベルティやおまけのような形で、当サイトをご利用のうえで作成されたドット絵を使用したグッズを無償で付けられることに関しては問題ございません。
          素敵なグッズになりますと幸いです。
          どうぞよろしくお願い致します!

  4. 再度、丁寧なご返答をありがとうございます…!
    貴サイト様の素体のおかげで本当に大好きなドット絵ができましたので、グッズ①を購入してくださった方におまけとして付けようと思います…!

    この度は迅速かつ丁寧なご対応と、ドット絵を作成できるという素敵な体験をさせて頂きありがとうございました…!

    • こちらこそ、丁寧にご確認いただきありがとうございました。
      嬉しいお言葉も励みになります。
      ご訪問、ご利用ありがとうございました!

  5. こんにちは、はじめまして。
    ピクスク アバター作ってみたくて、検索して、こちらにたどり着きました。
    丁寧に解説くださり、初心者にもわかりやすく、アイビスの機能も知ることができました。
    かわいく手を繋いだアバター作れました。
    本当にありがとうございます泣
    次回のイベントでは、この子達で参加します。
    ありがとうございます!

    • 初めまして。ご訪問・ご利用ありがとうございます。
      嬉しいご報告もとっても嬉しいです。
      素敵なイベントになりますと幸いです!

  6. はじめまして。ピクスクで初めてweb即売会に参加するにあたり、貴サイトの素体とガイドラインをお借りしてアバターを作成しました。何から何まで無知な状態でしたが、丁寧で親切な説明と素材のおかげでとても作りやすかったです。本当にありがとうございます。

    • 初めまして。サイトのご利用ありがとうございます。
      アバターがお役に立ちまして嬉しいです。ご報告ありがとうございます!
      楽しいイベント活動の一助となりますと幸いです。

  7. 初めまして ピクスク アバター 作成で検索からこちらにたどり着きました!
    非常に分かりやすい説明で無事アバターが作成出来ました。 ありがとうございました。
    規約にもありましたが、確認のため質問をしたいのですが
    今回ピクスクのオンラインイベントの主催をやることになりアバター配布を念頭においてます。
    今回そら様の素体をベースに2体アバターを作りました。
    アバター配布するのは告知Twitter、pixivにて配布しようと考えてますが
    この場合、告知Twitter、pixivにて配布する際
    こちらのサイトのURLを記載する…という感じで大丈夫でしょうか?
    無償での配布を検討しております。

    配布する際に、注意書きとして二次配布は禁止とします。
    間違っているようでしたらこの話は無かったことにしますので よろしくお願いします。

  8. コメント出来てるか分からず再度コメント致します。
    初めまして あわおどりと申します
    この度ピクスクにてWebオンリーを開く事になりまして
    そら様のブログの素体をベースに2体アバターを作成しました。

    確認のためなのですが
    無償での配布はURL記載が義務…であっていますでしょうか?

    イベント1週間前にpixiv、Twitterにて参加者向けにアバターを配布する予定です。

    あと、告知イラスト等にもアバターが入り込んでるイラストを作成しましたが
    こちらもURL記載したほうがよろしいでしょうか?
    お返事待っています。

    • お返事が遅くなり申し訳ありません。
      お問い合わせいただいたメールへのお返事と重複致しますが、こちらにもお返事させていただきますね。

      >確認のためなのですが
      無償での配布はURL記載が義務…であっていますでしょうか?
      イベント1週間前にpixiv、Twitterにて参加者向けにアバターを配布する予定です。

      はい、あわおどり様の書かれている通りで問題ございません。当サイトのアバター素体を元に作成された画像を、ツイートに掲載する形で配布されるのであれば、そのツイート本文もしくはツリーにてサイトURL https://www.soramade.info/ の記載をお願いしております。
      Twitterでは告知のみで、pixivにて配布されるのであれば、リンクはpixivのみで構いません。

      >あと、告知イラスト等にもアバターが入り込んでるイラストを作成しましたが
      こちらもURL記載したほうがよろしいでしょうか?

      アバターの画像自体にはサイトURL記載の必要はございませんので、掲載していただいて問題ございません。

      以上をご返答とさせていただきます。
      楽しい創作活動の一助となりますと幸いです。

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