ツクモガタリ

本サイトはプロモーションをふくみます!

素人が教える、素人でも描けるTwitterアイコン作成講座【最初で最後?】

スポンサーリンク

素人が教える、素人でも描けるTwitterアイコン作成講座

私、絵を描くことに関してはただのド素人です。
さて、そんな素人絵描きの私ですが
Twitterアイコンとかは個性を出したいがために
自分で作成したものを使用しています。
今使用しているのはこちらの「麒麟がくる」バージョンです。

f:id:tsukumoshigemura:20200301221236p:plain

たくさん褒めてもらってますけど
実はそんなたいしたことはしてません!

そこで、同じくずぶの素人さんたちのために
誰でも描けて
ぱっと見うまく見えちゃう
オリジナルアイコン作成講座を開きます。
続きがあるかはわかりません(笑)

ちなみに私の作成環境はWindows10マウスです。
タッチペンとかは使っておりません。
そういう環境であっても誰でも描けるテクニックです。

あくまでも素人なやり方で
アプリを完璧に使いこなしているわけでもないんですが
だからこそ『誰にでもできる』と思っています。
逆にプロ的な方からもっとこうするといいよ的なことがあるかもなので
そういったご意見は随時受付中です!

というわけで今回のお品書きはこちらになります。

1.私が使ってるアプリ「MediBang Paint」の紹介から

私が現在アイコンやらアイキャッチやらの作成で使用しているのは
「MediBang Paint(以下、メディバンペイント)」です。

medibangpaint.com

メディバンペイントの特徴は以下のとおり。

  • WindowsMacAndroidiPadiPhoneに対応
  • 全ての機能を無料で利用できる
  • もちろんレイヤー機能有り
  • ブラシの種類が多いし、画像を元にオリジナルのブラシも作れちゃう
  • 定規機能で直線や曲線も綺麗に描けちゃう
  • クラウド能を使うことでPCで作ったものとスマホで作ったものの連携も取りやすい
  • スクリーントーンや背景素材も豊富
  • 有料で見かけるようなフォントも無料で沢山使えちゃう
  • チームで制作する機能もあるから友人同士でデータを共有しながら描くことも

正直、これ無料で使えていいんですか?
ていうぐらい機能がふんだんにあります。

公式サイトにはメディバンペイントの使い方講座が
たくさん公開されています。
初心者からちょっと凝った使い方をしたい人まで
十分に役立つものばかりです。

medibangpaint.com

ちなみにこのアプリは私のTwitterのフォロワーさんで
イラストでブログも描いたりしている
とむこさん(@tomutomukooさんから教えてもらったアプリです。

tomutomuko.com

教えてもらって使ってみたら使い勝手が自分にあっていたので
それ以来ずっと愛用しています。

ちなみにプロ的な人とかだとクリスタ(CLIP SUDIO PAINT)
使ってる人が多いのかもしれませんね。

CLIP STUDIO PAINT PRO

CLIP STUDIO PAINT PRO

  • 発売日: 2012/07/06
  • メディア: DVD-ROM
 

こっちもさほど高くない価格でメディバンペイント以上に
機能が多彩なわけですが、とりあえず自分のアイコンや
ブログの素材でちょっと使うぐらいなので
当面メディバンペイントでいいかなって感じです。

2.オリジナルキャラクターでTwitterアイコンに個性を

Twitterのアイコンは無料で簡単に作れるサイトがたくさんあるし、
Twitter用アイコンとして使ってもいいフリーのアイコンも沢山あります。
もしくは少しお金を払ってイラストを生業としている方に
描いてもらうのも一つの手。

だけど、やっぱアイコンって自分の顔だし
他とは違う個性ってやっぱり欲しいなって。
そうなると下手でも自分で描いたアイコンの方が
自分らしさが出るかなってことで
私はずっと自分で作っています。

この辺は考え方人それぞれだとは思います。
ただ単に私は自己顕示欲が強いだけなのかもですし(笑)
なんでもかんでも自分でやりたがりなので(笑)

そんなわけで同じ気持ちではいるけど
自分じゃうまく描けないからなぁっていう人のために
簡単にオリジナルキャラを描けるテクニック伝授します!
本当に難しくありませんので今回の記事を参考に
同じようにメディバンペイントで作ってみてください。
世の中には私より隠れたセンスをお持ちの方で溢れていると信じているので
これをきっかけに覚醒する人もいるんじゃないかと思ってます。
※わりと本気(笑)

2.1.レイヤーを使いこなす

レイヤーをたくさん作る

レイヤーが何のことかよくわからない方のために
簡単に説明すると・・・
レイヤーっていうのは絵を描くキャンパスの上に
いくつも重ねられる画像の層です。
アニメーションでいうセル画がレイヤーにあたる感じでしょうか。

レイヤー同士は基本的に干渉しないので
レイヤー一つ一つを絵の部品のように使うことができるんです。

これは例えばなんですが私はこんな感じで
一つのキャラを作る上でも細かくレイヤーを分けています。

いろんなパーツにレイヤーを分割
細かすぎじゃね?とか思うかもしれませんが(笑)、
絵がさほどうまくない人間からすると
干渉されない絵で分割しておいた方が
いろいろ融通も利くんです。

たとえばちょっと目の位置ずらしたいなぁって時に
顔にそのまま目を描いちゃってたら
修正大変ですよね?

でもレイヤーで分割していたら
目だけ動かして顔の部分には何の影響も与えないようにできます。
各パーツで気に入らない部分があって
描き直したい時も、目や口のパーツを分割しておけば
その部分だけ他に影響を与えることなく描き直せますからね。

1枚の絵を描くにしても
その中の部分部分をパーツ化することで
柔軟に対応することができるわけです。
なので、このレイヤー大量生産は
絵があまり得意じゃない人には必須だと思ってます。

不要なレイヤーは非表示にすればいい

たくさんレイヤー作って部品を多く揃えても
このパーツ外したらどう見えるかな?とか
消すまではしたくないけど今回は見せたくないパーツ
なんかも描いてたら出てくるかもしれません。
そんな時はその対象のレイヤーを非表示にします。

たとえば作ったレイヤーを全部表示すると
こんな感じのイラストがあったとします。

レイヤー全部表示した場合のキャラ
でもちょっと背景これ全部あったらうるさいなぁ
ってことで
もうちょっとシンプルにしたかったら
表示したくないレイヤーをクリックしてやることで
簡単に非表示にできます。

非表示にしたいレイヤーをクリック

上の図で背景4以外の左端に〇がついていない状態になってます。
これが非表示の状態なんです。
そして一部非表示にした状態のイラストがこちらです。

レイヤーを一部非表示にしたキャラ

あとこのイラストだとピンクの髪飾り的なものがありますが
これもなくてもいいかなと思ったらこんな風に非表示に
簡単にできちゃいます。

ヘアピン非表示キャラ

これが簡単に出来るのもパーツをレイヤー毎に作っているからなのは
もうお分かりいただけることでしょう。

部品追加ももちろんレイヤーを追加で

ちょっと服に装飾増やしたいなぁとか
帽子かぶせたいなとか思ったら
それ専用のレイヤーを追加してやればいいのです。
既に描いた絵を破壊することなく追加できます。

ちなみに今の私のTwitterアイコンは前述したとおりこれなんですが

現在のつくもTwitterアイコン
この兜を先ほどの女の子のイラストに被せて
帽子っぽくするとこんな感じです(笑)

帽子をかぶった女の子

描くのが面倒だったからTwitterアイコンのを
コピって張り付けただけなんですが(笑)、
こうやって過去に作った作品のパーツも
有効活用できちゃいます。

ちょっとサイズがあわないなぁと思ったら
レイヤー単位でイラストの拡大・縮小も可能なので
変形したいイラストのレイヤーをきちんと選択した上で

変形したいレイヤーを選択

メニューの「選択範囲」から「変形」を選ぶと

変形を選んだ状態の画面

 

こんな風に対象のイラスト部分に枠ができるので
※ちょっとわかりずらいかも?w
その枠を拡げたり狭くしたり、あるいは回転することで
イラストを変形することができちゃいます。

大きな帽子をかぶった女の子

というわけで今回はちょっと大きめにしてみました。

レイヤーをふんだんに使いこなすことで
衣装の着せ替えだったり顔のメイクをするような感覚で
イラストに変化を与えることができるので
こういうのが好きな人はハマるかもしれません。

レイヤー使う上での注意点

今自分が描こうとしているレイヤーが
正しく選択されているかはちゃんと確認しましょう。
最初慣れてないうちはやってしまいがちなんですけど
間違って手を入れたくないレイヤーに描いてしまってた
なんてことがよくあります。

実は私が作成したTwitterアイコンでも
兜と目が同じレイヤーで描いちゃってて
多少面倒なことになりました(笑)

なので、今選択しているレイヤーがどれなのかは
常に確認しながら作業をする癖をつけましょう。
アナログで描く場合よりはやり直しも簡単ですけど
手戻り作業ってモチベ落としますからね(笑)

2.2.定規機能を使いこなす

定規で描けば曲線も綺麗に

レイヤーは
イラストをうまく描けないと思っている人たちが
ちょっとうまく描けるようになっちゃう魔法の機能
これ知るだけでも全然世界が変わると思うんですが
もうちょっと見栄え良くする機能が定規機能です。

ちょっと線を描くのが苦手だったり
そもそもマウスとかじゃうまく描けないし・・・
みたいな人たちには欠かせない機能になります。
もちろん手書き風の線もそれはそれで味があるので
この辺は好みが分かれるところでもあるかもしれません。

さて肝心の定規機能はどうすれば利用できるかというと
下の図のようにブラシツールを選択すると
上部のメニューに仕える定規のアイコンが出てきます。
ここでは曲線を描きたいので「曲線(楕円)」を選択。
すると、キャンパス上に赤色の楕円の枠が出現します。

ブラシツールで円定規を使う

この円定規上に沿って線を引くと
ふにゃふにゃした線にならず綺麗な曲線を描けます。

円定規で綺麗な曲線を描く

図形ブラシツールでも描けるけどやり直しが発生しやすい

もちろん円を描くだけなら
図形ブラシツールを使ってもいいんですが
図形ブラシツールを使った場合って
ある意味一発勝負みたいなところがあります。

図形ブラシツールの欠点は一発勝負なところ

描きたいイメージをしっかり頭の中で持っていたとしても
イメージ通りにうまく描けるかは、
描いてみないとわからないみたいな(笑)

でも円定規を使えば
描く前に円や曲線の形を決められるので
頭の中のイメージと一致した状態で
円や曲線を描くことができます。

描く前に円や曲線のイメージのすり合わせができる

私みたいに神経質なタイプだと(笑)、
ちょっとしたズレとか歪みも気になっちゃうので
やっぱり定規を使って引いた方が無難なのです。

一見複雑そうな髪型パーツも実は全部定規で描きました

基本的に何度か出ている女の子キャラは
全部曲線の組み合わせのみで描いています。
もちろんこの髪型パーツも全て曲線のみであり
曲線定規だけ使って描きました。

曲線定規のみで描いた髪型パーツ

塗りの時に多少調整している部分もあったりしますが
元の線画は全て曲線定規を当てながら描きました。

手ぶれ補正機能もあるので
それなりに真っ直ぐだったり
それなりにきれいな曲線を描くこともできるんですが
うまく線を引けなかったときに
結局やり直しが発生しちゃうので
それだったら定規を使って綺麗に引いたほうが
効率的でもあります。
単純に定規に沿って線を引くだけなので簡単ですしね!
スキルはまったくいりません(笑)
是非お試しあれ☆

2.3.その他オリジナルキャラ作成時のコツ

左右対称のパーツはコピペ&左右反転で

人間には目や眉毛、そして耳は2つあります。
当たり前ですけどw
こういうのを描く時は左目も右目も描くのではなく
片方を描いたらコピペすればいいのです。
例えばこんな感じのキャラを作っていたとします。

青い髪の男の子

左目と左の眉毛しか描いていない状態です。
右側も同じように描きたいけど
うまく描けないかもしれない・・・

これはきっと絵を描くのが苦手な人なら
誰しも思うはず(たぶんw

そんな悩みはコピペで解消

例えば左目を描いたレイヤーをクリックして選択した状態で
CTRL+C(コピーのショートカットキー)
さらに続けてCTRL+V(ペーストのショートカットキー)!
これでまず左目と同じものが複製されます。

同じパーツはそのパーツのレイヤーをコピペで

ただこのままだと左目が二つできただけなので
右目にしないといけませんね。
でもそれも簡単です。
コピペしてできた左目のレイヤーが選択されていますから
その状態のまま、
メニューの「レイヤー」「回転」「左右反転」を選びます。

メニューから左右反転を選択

するとこの通り!

右目追加された男の子

もしも位置調整したかったら移動ツールで
位置をずらせばいいぐらい。
そして左にしかない眉毛も同様に
コピペと左右反転をすることでこの通り!

眉もコピペで両方に

というわけで顔のパーツに関わらず
左右対称のものを描きたいときは
コピペ&左右反転で作っちゃいましょう!

イラスト全体の位置を調整したい時

さて髪型が気に入らなかったんで
ちょっと別の髪型に変更したり
色塗りをしたりして
背景もとりあえず白にしてみた男の子がこちらです。

位置がちょっとおかしい男の子

顔だけしかないけどそれはそれ(笑)

でもちょっと位置を全体的に真ん中寄りというか下にずらしたい・・・。
けどレイヤーいっぱいで動かすの大変じゃん・・・。

とか思っても大丈夫。

キャンパスサイズの変更をうまく使います。
単純にキャンパスサイズを変更して
不要な部分をカットするのでもいいんですが
全体のサイズは変更したくない場合
ちょっと姑息な手段を使います(笑)

メニューの「編集」から「キャンパスサイズの変更」を選びます。

メニューからキャンパスサイズの変更を選択

するとこんな感じの画面が出現します。

変更前のキャンパスサイズの変更画面

今回は高さの位置を調整したいので
イラストの全体を「上中央」にして高さを50削ってみます
あ、ちなみにこのイラストは
キャンパスサイズを600×600で作ってます。

キャンパスサイズの変更画面

「OK」を押すとこんな感じに。

キャンパスサイズが変更された男の子

ちょっと見た目分かりずらいかもですが(笑)、少し下の部分が削れました。
そしてもう一度キャンパスサイズの変更をします。
今度は「下中央」を選んで高さを元の600に戻します。

削った分を元に戻す

そして「OK」を押すとこんな感じに。

サイズを戻しつつ全体の位置をずらした男の子

背景で塗りが出来ていない部分が作られちゃうので
塗り直すか、別の背景を描きましょう。
※背景はこの辺の作業も終わってからやった方がいいでしょう。

背景を塗り直した男の子

これで位置調整完了です。
キャンパスサイズをうまく利用すれば
イラストの全体を移動するのも簡単ですね!

2.4.Twitterアイコン用にイラストを出力しよう

書き出しでイラスト作成完了

作成したイラストはTwitterアイコンとして使えるように
「書き出し」PNGファイルに出力します。
メニューの「ファイル」から「書き出し...」を選択します。

ファイルメニューから書き出しを選択

するとこのような書き出し設定画面が出現します。

書き出し設定画面

このままのサイズで出力してもいいんだけど
現状600×600でちょっと大きいし
300×300ぐらいにしときたい。
そんな場合は、この書き出し設定画面で
サイズを調整することができます。

出力サイズを書き出し設定画面で調整

「以下のサイズ内に収めて保存」にチェックを入れると
出力するサイズの幅と高さを変更できるので
これをそれぞれ300に変更。
他の設定は特に変更する必要ありませんので
「OK」を押して好きなファイル名で
好きなフォルダに保存すればいいだけ。

そして完成したものがこちらです。

完成した男の子

今回は顔以外描いてませんけど
これはこれで味があるのかも?(笑)

ちなみに、今回のこの男の子のイラストは
曲線以外にも使ってるように見えますが
曲線以外は直線を引いてるだけです。
眉毛もゲジゲジしてますが(笑)、
これはブラシでGペンを使って斜めに直線を引いただけ
ブラシもいろいろ種類があるので
場合に応じて使い分けるのがいいでしょう。
今回はブラシのことまでは触れませんので
詳しく知りたい方はメディバンペイントの使い方講座のページを
参照してみてください。

今回の「素人でも描けるオリジナルアイコン作成講座」はこれにて!

3.まとめ

素人が教える素人のためのオリジナルアイコン作成講座
いかがだったでしょうか。
最低限これ知ってるだけで作れちゃうんですよ
ていうのがうまく伝わってるといいんですが。

あと今回書いてはいないんですが
イラストの仕上げで各レイヤーにフィルタをかける
また違った味になります。
私の場合はモザイクをかけるのがなんとなくハマってます。
そうすると綺麗な曲線からちょっとギザってる感じになって
見た目にアクセントが加えられてうまく見えます(笑)

練りに練ってこの記事の構成を考えたわけでもないので
不足分はあるかもしれません。
ふと思いつきで書こうと思った記事なので、そこはご容赦願いたく(笑)

あとわからない部分とかあればコメントなどで残してください。
プロ的な方からすると、もっとこうするといいよとか
こういう便利な使い方・機能もあるよ
ていうのがあったら同じくコメント頂けると嬉しいです。
もっとうまく描けるようになりたいので(笑)

では今回はこの辺で。
ここまで読んでいただきありがとうございました!


ここからは当サイトの宣伝です。

ツクモガタリ
以下のランキングサイトに参加しています。
バナーをポチって頂けると今後の励みになります!
にほんブログ村
にほんブログ村 にほんブログ村へ
人気ブログランキング

また、ツクモガタリ歴史人物の記事を主戦場としつつ
ブログ運営関連の記事なども投稿している雑記ブログです。
こちらのINDEXページは各記事のカテゴリの説明と共に
ピックアップ記事やカテゴリの記事一覧へのリンクも
掲載しています。

tsukumogatari.hatenablog.com

このINDEXページを基点として頂くと
過去に投稿済みの記事へもアクセスしやすいです。
こちらから過去記事も読んで頂けると嬉しいです。