iPadでブログ用アイコンを作る方法

Digital

このブログを始めるに当たって、アイコンどうしようかなー。と思ったのですが、自分で描いてみました。

アイコンとはブログ右側にある【書いてる人】のイラストで、プロフィール画像のことです。

アイコン ブログ画面

では今回はイラスト制作について書いていきます。

事前準備

iPadmini2とスタイラスペンを使って描きました。(まだ5世代を買う前)

※使用したのはiPadmini2ですが、既に手元にないのでiPadmini(第5世代)上で説明していきます。

iPadmini2ではApplePencil使えませんので、ペン先が太いスタイラスペンで描きました。結構太いペンでも描けるので、タブレット持っていなくてもスマホで描けると思います。

スタイラスペン

そしてお絵描きアプリをダウンロードします。

私が使ったのは【メディバンペイント】です。無料でイラスト、スケッチなど色々描けます!

メディバンペイント

 

メディバンペイント
開発元:MediBang inc.
無料
posted withアプリーチ

スマホ、タブレットを持っていれば、ペンを手に入れて(¥100程度で十分)さぁ、お絵かきスタートです!

画面サイズと下書き

このブログはワードプレスで作成しています。

アイコンのサイズ240×240の正方形が推奨されていたので、推奨サイズで作っていきます。

使うテーマによって違うのか不明なのですが、推奨されているサイズを選ぶのがいいかと思います。

プロフィール画像アップロードのところに記載アリ。(見づらいですね、すみません)

ワードプレス プロフィール設定画面

アプリを開くとこんな画面が出ますので、【新しいキャンバス】→【新規作成】と進みます。

メディバンペイント 新しいキャンバス作成画面

キャンバスのサイズを幅240、高さ240にして、右上の完了を押します。

画像サイズ設定画面

キャンバスが開きます。

新しいキャンバス

左の赤で囲った箇所がパレット(上)とペンの選択(下)です。ペンは好きなのを選べばいいのですが、Gペンが描きやすかったのでGペンを使いました。

ちなみにこのパレットとブラシ画面が邪魔でしたら、アイコンを押すと隠せます。右のレイヤーも同様に隠せます。

試し描きして、ペンの太さを決めていきます。このサイズだとかなり細い設定で大丈夫です。2~3pxあたりが描きやすかったです。

スタイラスペン 試し描き

ペンが太いので、描きにくい場合は指2本でピンチアウトすれば拡大します。めっちゃ描きやすくなります!

それではテキトーに自画像的なイラストを描いていきます。(こんなんでも美化していますw)

ブログ用アイコン 下書き画面

描いたら画面右のレイヤーで念のためコピーを作成しておきました。別になくてもいいのですが、コピーしておくとうっかり何かあった時に安心です。

(既に完成画像がありますが、もう作成した後での説明ですのでご容赦ください・・・。)

そして不透明度を-にしていきます。テキトーに薄くしておけば大丈夫です。

ここまで終わったら+ボタンを押してレイヤーを1枚増やします。

下書きをトレースしていく

+ボタンでレイヤーを増やすというのは、下書きの上に紙を1枚置いてトレースする感覚です。

下書きを薄くして、ペンでなぞっていきます。下書きは雑で線がいっぱいですが、ここでは1本線でガッツリ描いていきます。(私は、どうしても線が多くなってしまいますが・・・。)

またしてもGペンを使いました。

ブログ用アイコン トレース画面

下書きの透明度を下げたことで、新しい線との区別がしやすくなっています。

これもまたレイヤーコピーします。こっちは絶対コピーします。

そして下書きとコピーは見えないようにしておきます。

目のマークを押すと画面が隠れます。あとは色を塗っていけばOK。

ブログ用アイコン レイヤー活用画面

色を塗っていく

レイヤーコピーしたら同じ画像が2枚出来上がるので、1枚に色を塗っていきます。

失敗してもコピー取ってあるし戻ればいいので、大丈夫です。どんどん塗っていきましょう。

ブログ用アイコン 色塗り画面

パレットから好きな色を選んだら上のバケツマークを使って、塗りつぶしていきます。

塗りつぶしは線が途切れていると思わぬところまで塗りつぶしてしまうので、もし変なところまで塗りつぶしちゃったら戻るボタンで戻って、線を書き足して再度塗りつぶしましょう。

そして細かいところは塗りつぶせていなかったりするので、ピンチアウトして拡大して塗りつぶすかペンで丁寧に塗っていきます。

ブログ用アイコン ピンチアウトして拡大

ズームして塗り塗り。

ブログ用アイコン 拡大して色塗り

私のように線が多くなっても、色ペンで上から塗っていけば仕上がるので大丈夫です。

画像がすごくカクカクしていますが、ピンチインしてみるとちゃんとした線になっています。

ブログ用アイコン ピンチインして縮小

そして色を塗り終えて完成!(写真だと色が鮮やかに写ってしまう件)

ブログ用アイコン 完成

ちょっと頭カクカクしてるけど、これも自前イラストの味ということで・・・。

写真ホルダーに移動

出来上がったイラストを保存します。

キャンバスを閉じる画面

キャンバスを閉じると【保存して移動】という項目が出るので必ず保存して移動します!

その後は好きなようにデータを扱えばいいのですが、ここでは写真ホルダーに移動しておきます。

【書き出しボタン】→【画像を保存】→【JPEG】で写真ホルダーに移動完了。

画像を書き出し JPEG

写真ホルダーにあればOK。

写真ホルダー

画像データはCloudで同期、ケーブルで同期、外付けメディアを使って同期、メールで添付して送信など好きなようにPCに移動させておきます。これでバックアップも取れますね。

ワードプレスの場合、【ユーザー】から【プロフィール画像のアップロード】で設定します。

ワードプレス プロフィール設定画面

まとめ

という感じで、自分でイラスト描いてアイコンにする方法でした。

最近のスマホは画面が大きいので、スマホでも描きやすいと思います。

ちなみにこのアイコン、着ている服が野暮ったいので近々お着替えしようと思っていますw