InkscapeLINEスタンプイラスト

【超簡単】手書きイラストを使ってLINEスタンプを無料で作成する方法(Inkscape)

linestamp Inkscape
スポンサーリンク

この記事の内容は、より分かりやすく編集してしてこちら↓の記事にまとめています。

「手書きで描いたイラストを使って無料でLINEスタンプを作りたい」という方向けに、手書きイラストをLINEスタンプにする手順をご紹介します。

この記事はこんな人におすすめです。

  • ちょっとLINEスタンプでも作ってみようかな
  • イラストを描くのは好き!でも、LINEスタンプは難しそう…。

この記事を読むと以下のことがわかります。

  • 無料でLINEスタンプを作成する方法
  • inkscapeでトレース機能を使う方法
  • inkscapeで図形に色塗りする方法
  • inkscapeで画像を出力(エクスポート)する方法
スポンサーリンク

LINEスタンプは無料で作成できる?

LINEスタンプの作り方を調べると、有料ツールを使った作り方も多くあって、「やっぱり有料じゃないとLINEスタンプは作れない」と思われた方もいるかもしれません。

そう思われた方はちょっと待って下さい。無料でもLINEスタンプは作れます

LINEスタンプを無料で作成する方法には、以下のようなものがあります。

  • inkscape(インクスケープ)
  • GIMP(ギンプ)

その中でも、今回はInkscapeについてご紹介していきます。

このアプリを使うことで、超簡単に手書きイラストを使ったLINEスタンプを作成できます。

はじめにLINEスタンプ作成の流れをざっくりまとめると以下のようになります。

  1. Inkscapeのインストール
  2. イラストを描く
  3. inkscapeに画像を挿入する(インポート)
  4. トレース機能を使って縁取り
  5. 好みの色に変更
  6. 画像の出力(エクスポート)

では順番に見てみましょう。

Inkscapeのインストール

まずは、Inkscapeのインストールしていきます。

具体的な手順は、こちらの記事でご紹介しています。

イラストを描く

Inkscapeのインストールが終わったら、イラストを描いていきます。

今回ご紹介する機能は、手書きイラスト画像から線を認識してその線をなぞるものです。

手書きイラストの描き方によって、うまくいくかどうかが変わってきます。おすすめの描き方をまとめると、こんな感じです。

おすすめの描き方
  • 太めでハッキリした線
  • 少し大きめにイラストを描く
おすすめしない描き方
  • 細いまたは薄い線
  • つぶれた文字

イラストが準備できたら、いよいよ本題に入ります。

inkscapeに画像を挿入する(インポート)

まずは、素材となる手書きイラストの画像をinkscapeに挿入します。画像の挿入手順については、こちらの記事でご紹介しています。

画像はなるべくトリミングして、余白があまりない状態で挿入(インポート)することをおすすめします。

なの
なの

余白が多くあると、トレースしたときに不要な点が多くできる可能性があるので…。

トレース機能を使って縁取り

画像を挿入したら、トレース機能を使って手書き画像を上からなぞっていきます。

トレース機能とは?

トレース」は「なぞる」という意味になります。その意味の通りで、画像の線をinkscapeで扱える線(パス)としてなぞってくれる機能です。

トレース機能にも様々な種類がありますが、今回は「オートトレース」という機能をご紹介します。

では、トレース機能を使う手順を見てみましょう。

手順1. 画像を選択

[選択ツール]を選択し、画像をクリック

手順2. 「ビットマップのトレース」を選択

メニューバー「パス」→「ビットマップのトレース」を選択

手順3. 「オートトレース」を選択

オートトレース」を選択し、「更新」→「ok」をクリック

stamp

おまけ:INKSCAPE 1.2の画面では旧バージョンと表示が若干変わっています(下画像)。

Inkscapeビットマップのトレース(オートトレース)

手順4. トレース完了!

stamp

トレースが完了したら、[ノードツール]を選択して、トレースしたイラストをクリックしてみましょう。

stamp


以下のように思われた方は、次の【点(ノード)の編集】をご確認ください。

  • イラストの周りに不要な点があり、消したい
  • 線がギザギザになっているので、きれいにしたい

全然気にならない方は、読み飛ばしてもらっても大丈夫です。

点(ノード)の編集

線を微調整したい場合は、[ノードツール]を使って編集していきます。

ノードとは?

ノード」とは「」のことです。
トレースしたイラストの周りに不要な点ができたり、線がギザギザになることがあります。
点を削除することで、イラストをきれいにしていきます。

では、具体的な手順をみてみましょう。

点(ノード)の表示

トレースが完了したら、[ノードツール]を選択して、トレースしたイラストをクリックしてみましょう。

stamp

次のように思われた方は、線の微調整を行いましょう。

  • イラストの周りに不要な点があるから、消したい
  • 線がギザギザになっているので、きれいにしたい

手順1. 不要な点をクリック

[ノードツール]を選択して不要な点をクリックして、キーボードの「Delete」キーで削除します。
ドラッグしてまとめて選択もできます。

stamp

手順2. 点を削除

キーボードのDeleteキーを押すことで、削除できます。

ギザギザになっているところの点(ノード)を選択して、削除してくいくだけで、きれいな線にすることができます。文字部分を同じ要領でやってみました。

stamp

文字の位置を微調整したい

今回、文字とイラストを一緒にトレースしたので、何もしなければ文字だけを移動させることができない状態となっています。

でも、文字だけを動かして微調整したい場合もあると思いますので、具体的な手順をご紹介します。

手順1. 文字だけを選択する

[ノードツール]でイラストをクリックすると全体の点が表示されます。その状態で文字部分だけを選択します。

stamp

手順2. 切り取ってペーストする

文字部分だけを切り取ってペーストすると、文字とイラストを分けることができます。

キーボードの[Ctrlキー]+[x]で切り取って、[Ctrlキー]+[v]でペーストします。

stamp
なの
なの

フィル」タブ左下の「スポイトマーク」を選択すると、選択した色と同じ色にすることができます。

線色の変更

ここからは線色の変更を行います。

手順1. イラストを選択

[選択ツール]でイラストを選択

手順2. 線色の変更

メニューバー「オブジェクト」から「フィル/ストローク」を選択します。
フィル」タブで線の変更を行います。今回は、そのまま変更せずに進みます。

stamp

色の変更については、こちら↓の記事で具体的な手順をご紹介しています。

なの
なの

線の太さは、ノードツールを使って調整もできますが、大変なのでもう一度書き直してスキャンしたほうがいいと思います。

図形の色塗り

イラストの線色が決まったら、次は色塗りをしていきます。

手順1. 図形を選択

[選択ツール]で図形を選択

手順2. 塗りつぶし色を選択

[塗りつぶしツール]を選択して、画面下のカラーパレットから好きな色をクリックします。
これで、クリックしたところを塗りつぶしできる状態になりました。

stamp

手順3. 色を塗る

塗りつぶしたいところをクリックします。
今回は3か所塗りつぶしたいので、それぞれクリックします。

stamp

手順4. 色の調整

[選択ツール]で塗りつぶしたところをクリックすると、「フィル/ストローク」の画面がでますので、色の調整をしていきます。

今回は、塗りつぶしが半透明になっていたので、「A:」の数値を「100」へ変更して、透けないようにしました。特に何も変更がなければ、そのまま次の工程へいきましょう。

stamp
なの
なの

クリックしても画面が出なかったら、メニューバー[オブジェクト]→「フィル/ストローク」を選択してみましょう。

塗りつぶしできない…!!という方は、こちら↓の記事をチェックしてみてください。

規格に合わせてエクスポートする

今までの工程では、inkscapeの用紙サイズを意識していませんでしたが、LINEスタンプとして出力するには、規格に沿って作る必要があります

LINEスタンプの規格は、公式サイトによると「横370px×縦320px(最大)」とあります。

今回は、最大サイズでLINEスタンプを作っていきます。

画像の出力(エクスポート)

完成したイラストを「.png」として出力(エクスポート)していきます。
出力する前に「上書き保存」しておくことをおすすめします。

エクスポートの手順については、こちら↓の記事でご紹介しています。

用紙サイズの変更やイラストの縮小の仕方等から丁寧に解説しています。

まとめ

この記事では、手書きイラストを使った無料のLINEスタンプ作成方法をご紹介しました。

今回ご紹介した方法は、初心者の方でも簡単にできますので、ぜひ試してみてください。

他のLINEスタンプ作成の方法については、こちら↓の記事でご紹介しています。

こちらの記事もおすすめ[Inkscapeチュートリアル]

もっとInkscapeの記事をみる>>

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