2014.10.08(Wed)

【初心者向け】誰でも簡単!パソコンでLINEスタンプを自作する方法

【初心者向け】誰でも簡単!パソコンでLINEスタンプを自作する方法

この記事を執筆した人

ぬー
ぬー(@Nuteeeen
デザイナー
毎日雑務こなしています。

 現在、LINEで自作スタンプ「クリエイターズスタンプ」を販売出来るマーケットである、LINE Creators Marketにて、自作スタンプを制作する方がとても増えています。

 LINEスタンプの制作方法を調べていると、フリーソフトや、スマートフォンの携帯アプリで制作する手法がよく目につきます。

 しかし、フォトショップやイラストレーターでのラインスタンプ制作方法が見当たらず、四苦八苦している方も多いと多いのではないでしょうか!? 私がそうでした・・・。

 そこで、パソコンのグラフィックソフトを使用して、ラインスタンプを作りたい方に向けて、ラインスタンプの作成方法をご紹介しますっ!

 誰でも簡単!と謳っていますが、ここでは作業環境としてAdobe PhotoShopとAdobe Illustratorを使用することを前提としています。

 こちらの記事を読む前に、保存版!LINEスタンプ制作にあたって気をつけるべき5つのポイントを必ずチェックしてくださいねっ!
 LINEスタンプの申請手順も必ずチェックしましょう。


画像の背景透過方法について

 LINEスタンプ制作にあたって、画像の透過処理は必須です。
 Photoshop、イラストレーターでの画像透過方法について、しっかり説明をしてくれているサイトが見つからなかったので、透過処理の説明ページを用意しました。

【初心者向け】LINEスタンプ制作に絶対必要な透過処理の方法


※ラインスタンプ制作の前の注意事項

 LINEスタンプの作成をはじめる前に、しっかりと注意事項を読みましょう。ラインスタンプ制作は、とにかく時間がかかります。
 ラインスタンプ販売の流れは、スタンプ制作→LINE株式会社にスタンプ申請→審査→承認→販売開始といったフローになっています。
「審査」の段階で、リジェクト(拒否)されてしまうと、制作にかかった時間すべてが無駄になってしまいます・・・・。

特に、「審査」には2~3か月かかる事が多いので、リジェクトされた日には泣くに泣けません。

※ラインスタンプの制作にあたっての注意事項は、保存版!LINEスタンプ制作にあたって気をつけるべき5つのポイントをご覧ください。


LINEスタンプの制作テンプレートを配布してますっ!

 ラインスタンプ制作をスムーズに行えるように、スタンプ制作用のテンプレートを作りましたっ! このテンプレートを使うと【手順8】から【手順14】まで行わなくて済みます!

 イラストレーターはないけどフォトショップはあるという方のためにフォトショップデータのテンプレートも作成してみました!

※テンプレートの使用方法
 全てのテンプレートは、2つのレイヤーで構成されています。一番下に【ガイド】、上には【オブジェクト】レイヤーがあります。

 【ガイド】レイヤーはロックをかけていますが使用しないでください。使用するのは【オブジェクト】レイヤーのみです。

 【オブジェクト】レイヤーにガイド内で自由にスタンプを作成してください。

 フォトショップの場合は画像データをオブジェクト化することなくそのまま【自動選択ツール】などを使いデータを綺麗したり色を入れて作成してください。

 データ1つで1スタンプ作成出来るようになっていますのでこちらをコピーして40コ作成してください。申請時に必要になる【メイン画像】用と【トークルームタブ画像】用も作成いたしましたので併せてお使いください。


【手順1】

 まずは適当な紙にお好きなようにスタンプにしたいイラストを描いてください。

PCに取り込むので出来るだけゴミのない綺麗な白い紙にはっきりとわかるペンで描いてください。

※今回の出来上がりスタンプはモノクロのスタンプですがカラーのスタンプを制作したい場合もここでは着色しないでください。



【手順2】

 イラストを携帯カメラやデジカメで写真を撮ってください。

カメラとイラストが描かれた紙が出来るだけ平行になるように気をつけることと影が入らないようにすることを心がけてください。



【手順3】

 撮った画像をPCに取り込み、フォトショップで開いてください。


【手順4】

 綺麗な白と黒のデータにするために【2階調化】をかけてください。
メニューから【イメージ】→【色調補正】→【2階調化】を選択してください。


【手順5】

 2階調化のメニューが出たら表示画像を確認しつつ【2階調化する境界のしきい値】をゴミがなく綺麗な白と黒の画像になるよう選択してください。
大体【128】のままかゴミが出るようでしたら【100】くらいがちょうどいいかと思います。


【手順6】

 フォトショップでの作業はこれで終わるので保存してください。
メニューから【ファイル】→【別名で保存】をクリック。


【手順7】

 後で変更が出来るように【ファイル形式】は【Photoshop】を選択してください。※PSD形式です。
【ファイル名】は任意でOKです。
【保存する場所】の選択はご自身できちんとわかる場所に保存してください。
全てできましたら【保存】をクリック。


【手順8】

 イラストレーターを開きます。メニューから【ファイル】→【新規】を選択してください。


【手順9】

 新規でドキュメントを作ります。
幅、高さはラインスタンプの申請サイズである、幅【370px】高さ【320px】にします。
【裁ち落とし】はないので全て【0】にしてください。【名前】は任意のデータ名に変更してください。
全て終わりましたら【OK】をクリックしてください。


【手順10】

 ラインスタンプには余白を上下左右10pxずつ取らなければなりません。
ですので先に余白分をガイドで取っておいてください。
ツールボックスから【長方形ツール】をクリックしてアートボード上のどこでもいいのでクリックしてください。


【手順11】

 長方形ツールのメニューが表示されるかと思いますので上下左右の余白分を抜いた幅【350px】高さ【300px】に設定して【OK】をクリックしてください。



【手順12】

 アートボード上に長方形が出来ているかと思いますがきちんとアートボードの中心に置きたいので出来ている長方形をクリックして選択しください。
【整列パネル】の【整列】をクリックして【アートボードに整列】を選択し、図の②のように【オブジェクトの整列】の【水平方向中央に整列】【垂直方向中央に整列】をクリックしてください。
長方形がアートボードの中心に配置されたかと思います。

※【整列パネル】が表示されていなかった場合はメニューから【ウィンドウ】→【整列】を選択して表示させてあげてください。


【手順13】

 このままですと長方形が動いてしまったりするのでガイドラインに変更させます。

長方形をクリックで選択し、1pxも多く取ったりしたくないので長方形の【塗り】と【線】を図のように【斜線】を選択してください。



【手順14】

 長方形を選択したままメニューから【表示】→【ガイド】→【ガイドを作成】を選択してください。
長方形がガイドラインに変更されたかと思います。
制作する時はこのガイドからはみ出さないように気をつけてください。


【手順15】

 フォトショップで作った画像を配置します。
メニューから【ファイル】→【配置】を選択し作った画像データを選択し配置してください。


【手順16】

 画像が表示されたらガイドからはみ出さないように拡大、縮小してレイアウトしてください。


【手順17】

 画像からオブジェクト化したいので画像をクリックして選択しメニューから【埋め込み】をクリック【画像トレース】をクリックしてください。


【手順18】

 このままだと一体化したままなのでそのままメニューから【拡張】をクリックしてください。


【手順19】

 これで画像からオブジェクトに変更されていますがグループになっていますのでグループの解除を行ってください。
メニューから【オブジェクト】→【グループ解除】を選択。
オブジェクトが一つ一つ選択出来るようになったかと思います。


【手順20】

 オブジェクトをクリックしていらないものを排除したり色をつけたりしてください。
※ここでは背景を透明にしたいのでキャラクターのまわりの白い背景を消しました。
※ここまでで一度データ保存をしておくと後々変更する場合にいいと思います。


【手順21】

 あとは保存するだけですが綺麗に鮮明に保存するために画像化するとよりいいです。
メニューから【オブジェクト】→【ラスタライズ】を選択。


【手順22】

 ラスタライズのメニューが出るかと思います。
カラーモード【CMYK】に、解像度【スクリーン】に、背景【透明】を選択。
全て選択できたら【OK】をクリック。画像化出来ているかと思います。


【手順23】

 最後のデータ保存です。メニューから【ファイル】→【Web用に保存】を選択してください。


【手順24】

 最後のデータ保存です。これで1データ完成です。
Web用に保存のメニューが出たら、名前を【PNG-24】に選択して【透明】にチェックを入れ【保存】をクリック。
ラインスタンプのイラスト枚数は、メイン画像・タブ画像を含めて42枚です。
残り41枚、完成まで頑張ってくださいね!


最後に

ざーっと作成手順をご紹介いたしましたが、いかがでしたでしょうか?

手順が多く見えますが、一度慣れてしまえば、サクサク作れるかと思います。
最後までお読み頂き、ありがとうございました!

この記事を執筆した人

ぬー
ぬー@Nuteeeen)デザイナー
毎日雑務こなしています。

この記事へのコメント

  1. 手順20で背景(白の部分)を透明にするのはどうやってやるのですか?

    • 佐藤 雅俊

      背景透過方法は、いろいろなやり方があるので「背景 透過 photoshop」などでGoogle検索してみてください(^^)

  2. 各サイトの中で一番わかりやすい。
    絵心はあるのですが「さあ書こう」とまではいかなかった。
    このサイトを見てやれそうな気がしました。

  3. 上の質問でもある透過の仕方は一例として載せたほうがいいと思いますよ。
    ここまで親切に説明されているのに、もったいないと思います。

    • 佐藤 雅俊

      お読み頂きありがとうございます!
      そうですね、時間がある際に掲載検討します(^^

  4. LINEスタンプを自作する方法をみて、Adobe Phto shop & Illustrator を購入して、
    手順書どうりにイラストレーターまで進みましたが、
    イラストレーターの手順15から進めずにいます、手順16の画像縮小を試みると、
    アートボード上の長方形も縮小されイラストがサイズ設定した長方形と同じサイズに出来ず埋め込みが出来ない状況で困って居ます、何度も手順を繰り返し試みましたが、
    何を間違えてるのか分からずに居ます、アドバイス宜しくお願い致します。

    • 佐藤 雅俊

      はじめまして、佐藤と申します。
      【手順14】で作成して頂いた長方形は【ガイド】になっているので
      メニューから【表示】→【ガイド】→【ガイドをロック】にチェックを入れてください。
      これをすることによって長方形のガイドはロックされ一緒に選択されることはないので
      拡大縮小や動かすことも出来なくなります。
      またチェックを外せば再度編集することが可能になります。
      これを機に、イラストレーターの使い方を勉強されても楽しいと思います(^^)

      • こんにちは佐藤さん、アドバイス有難う御座います、
        その後佐藤さんのアドバイスを受け色々試みましたが、状況の改善が得られずに居ます、
        せっかくのアドバイスを有難く思い乍も無駄にした様で恐縮して居ます、
        私はどうやら縮小のメニューを間違えてるようです、イラストレーターのメニュー欄の表示vからのズームインとズームアウト以外の拡大縮小方法が分からずに居る事にも一因が有るのではとも考えてます?言い訳に成りますが、年寄りのアナログ人間の私には、どのメニューからも拡大縮小を探しかねてる状況です、申し訳御座いませんが再度のアドバイスをお願い出来ましたら幸いに存じます、
        アドバイスを感謝致し、出来ましたならまたのアドバイス宜しくお願い致します。
        有り難う御座いました。

        • 佐藤 雅俊

          abeさん

          返信が遅くなりました。佐藤です。

          イラストレーターの拡大縮小方法についてです。
          ツールボックスにある【選択ツール】(黒矢印)をクリックして
          マウスで拡大もしくは縮小したいイラスト全てを囲んで選択をしてください。
          きちんと選択出来ていれば四つ角に□マークが表示されるかと思います。
          これをバウンディングボックスと言います。
          もし選択しているのにバウンディングボックスが表示されない場合は
          メニューから【表示】→【バウンディングボックスを表示】をクリックしてください。
          このバウンディングボックス(□マーク)の上にマウスカーソル(黒矢印)を乗せると
          マウスカーソルが両端に矢印があるマークに変化すると思います。
          その状態でキーボードの【Shiftキー】を押しながら
          (【Shiftキー】はキーボード上に2つ存在しますがどちらか1つで構いません)
          マウスをクリックしたまま拡大したい場合は選択したイラストよりも外側へマウスカーソルを移動させ
          縮小したい場合はイラストよりも内側へマウスカーソルを移動させてください。
          拡大縮小させたい大きさになりましたらマウスとShiftキーから指を離して頂ければOKです。
          結構重要なのが【Shiftキー】を押したまま行うことです。
          押さないで行うと慎重にマウスを移動させなければイラストを等倍のまま拡大縮小されませんので
          せっかく作ったイラストが歪んだりなんてことにならないように気をつけてください。

  5. 幅、高さはラインスタンプの申請サイズである、幅【370px】高さ【320px】、ガイドラインを【350px】高さ【300px】に設定して全てのスタンプを作成したのに保存したものは1040×907になってて…どういうことなのかさっぱりわからず。助けてください。なにをどこで間違えたのでしょうか?なぜサイズ通りに保存ができないの??

    • 佐藤 雅俊

      よっしーさん

      佐藤です。

      【手順9】のイラストレーターの新規ドキュメント作成画面で
      ①の箇所に幅【370px】高さ【320px】と入力してください。
      おそらく【px】とまできちんと入力していなかった可能性が高いです。
      幅【370】高さ【320】ですと元々の設定が【mm】ですので
      幅【370mm】高さ【320mm】となってしまい
      最後の保存で画像化しますので自動的に【px】に変更され
      幅【1040px】高さ【907px】になってしまったのだと思います。

      すでに全てのスタンプを作成済とのことですので
      イラストレーターで新しくきちんとしたデータを作り直して
      【手順14】のガイドラインの作成までを行って頂き
      そこに既に作ったイラストデータを持って来るのが良いかと思います。

      イラストデータの持って来方は
      画像化した(【手順22】のラスタライズまで行った)持って行きたいイラストをクリックして選択し
      メニューから【編集】→【コピー(C)】をクリック。
      新しいデータの方を開いて頂きメニューから【編集】→【ペースト(P)】をクリックしてください。
      無事にイラストデータの移行が出来ているかと思います。
      その後はきちんとガイドライン内にイラストがおさまるよう調整して
      【手順23】【手順24】の保存を行ってください。

      40個ガイドラインまで作った新しいデータを作り直すのは大変なので
      最初に新しいデータを作ったらイラストを入れずに40個データをコピーして作っておき
      そこにイラストを1個ずつ移行して保存をするのが良いかと思います。

  6. 佐藤さんお久しぶりです、
    しばらくネット環境の都合で休んでましたので、
    アドバイスの確認も出来ずに居りました、
    再度のアドバイスを頂けました事に感謝致します。
    これからアドバイスを有難く試みさせて頂きますが、
    まずは感謝の連絡が遅れました失礼をお詫び申し上げ。

  7. 素人丸出しの質問をします。
    「スタンプ画像が40個思いつかないし・・・。
    てか、3つくらい自分好みのスタンプ作りたいだけなんですが。」
    というときは、作れないということなのでしょうか?

    • ぬー

      みかのすけさん

      ご質問有難うございます。
      スタンプは最低でも40個作って頂かないと申請できません。。
      販売しなくてもいいようであれば【スタンパーズ(Stampers)】というサイトの【非公式スタンプ(http://www.stampers.me/about/unofficial)】というものにアップしてみてはいかがでしょうか?

  8. 初めまして。いくつも作り方のサイト見ましたが、ここの作り方が私には一番わかりやすかったです!
    おかげさまで一つ作れました。ありがとうございます。
    また参考にさせて頂きます。

    • ぬー

      有難うございます!!
      初めて投稿した記事ですので何かとご不便な点もあったかと思いますが、そう言って頂けますと凄く嬉しいです!
      もし何かわからない点がございましたらまたコメント頂けますと幸いです!
      スタンプ作り頑張ってください!!

  9. はじめまして。
    参考にさせていただいています。
    フォトショップもイラレも初心者すぎて使い方にどぎまぎしています
    初歩的すぎる質問なんですが
    『手順11』の長方形が幅高さのサイズがpixではなくmmで表示されているので350×300に合わせるにはどのように入力したらよろしいでしょうか。よろしくお願いいたします

    • ぬー

      ご質問、有難うございます。

      早速ですが、ご質問についてです。
      【手順11】の入力箇所に幅【350px】高さ【300px】と【px】とまできちんと入力してあげると【mm】の表示はされなくなるかと思います。
      一度試してみてください。

  10. 初めまして。
    こちらのサイトを参考にさせて頂いています。
    質問です。
    ①フォトショップからの画像をイラストレーターで配置する際ですが、サイズが大きすぎるので一括でサイズ変更したいのですが方法はありますか?
    ②取り込んだ画像をパスに変更した後、線の太さは変えれるのでしょうか?
    ③取り込んだ画像は回転して位置変更可能ですか?
    初心者な質問ですみませんが、よろしくお願いします。

    • ぬー

      にゃむさん

      ご質問、有難うございます。
      1つ1つお答えさせて頂きます。

      >①フォトショップからの画像をイラストレーターで配置する際ですが、サイズが大きすぎるので一括でサイズ変更したいのですが方法はありますか?
      あります!
      同じデータ内に全て配置させ、それら全てを選択させた状態で縮小せさせてください。
      【拡大・縮小ツール】を使って数値入力による縮小でも問題なく出来るかと思います!

      >②取り込んだ画像をパスに変更した後、線の太さは変えれるのでしょうか?
      できます!
      メニューから【オブジェクト】→【パス】→【パスのオフセット】で数値を入力することにより変更できます。
      細くしたい場合は必ず【-(マイナス)】を入れてから数値を入力してください。

      >③取り込んだ画像は回転して位置変更可能ですか?
      できます!
      【回転ツール】を使えば自由に回転することが可能です。
      数値入力での回転をしたい場合は【回転ツール】をダブルクリックするとポップアップで入力メニューが出て来ますのでそちらに入力してください。

      少し難しいかもしれませんが慣れると簡単に出来ますのでぜひぜひ使ってみてください♪

  11. はじめまして。
    参考にさせていただいております。

    web用ツールなのにCMYKで保存するのには理由がありますか?RGBだと何かしらの不具合が起こるなど。
    悶々としております。

    • ぬー

      山下さん

      参考にして頂き、とても嬉しく思っております!
      有難うございます!

      何故CMYKで保存するのかということですが
      山下さんの仰る通り、本来であればRGBがいいと思います。
      しかしイラストレーターで色を選択する際、CMYKの方がわかりやすいと思ったからです。
      ただそれだけの理由で今回はCMYK保存にさせて頂きました。
      最終保存時はPNG保存するので自動的にRGBに変換されます。
      悶々とさせてしまい申し訳ないです。。

  12. Illustratorからpng形式で保存するのはどうすればいいのですか?

  13. ラインスタンプの本にカラーモードはRGBでとなっていましたが
    ぬーさんはCMYKに設定にとありますが・・・
    教えてください。
    何度もすみません、上記2つは削除お願いします。。。

    • ぬー

      ぎんネコさん

      ご質問、有難うございます!
      本来であれば間違いなくRGB形式です!
      では何故、CMYKにしたかというとイラストレーターで色を選択する際、CMYKの方がわかりやすいと思ったからです。
      最終保存時はPNG保存するので自動的にRGBに変換されるので問題ないです!
      紛らわしい作成方法で申し訳ないです。。

  14. はじめまして。
    ラインスタンプができるなんて・・・嬉しくて早速挑戦しました。
    PCにはフォトショップとイラストレーターがあるので、手順どおりにやると出来ました。
    ・・・が、1枚では駄目なんですね。
    同じ手順であと41枚を作成と言うことなんでしょうか?
    出来あがった後は、どうやってラインにもっていけば宜しいのでしょうか?
    それともテンプレートをダウンロードした方が宜しいのでしょうか?

    初心者なので変な質問になり申し訳ございませんが、ご指導を宜しくお願いします。

    • ぬー

      ganbaさん

      ご質問、有難うございます!
      最低40枚は違うイラストが必要です。
      【メイン画像用】と【タブ画像用】は作成された40枚の中から選んでも大丈夫です。
      ですので申請するにはあと【39枚】作成して頂く必要があります。

      申請方法については【保存版!もう迷わない!自作LINEスタンプを申請・登録する時の6つのポイント(http://enjoynet.co.jp/line_sticker_matome/linestamp_demand_signup/)】をご参考ください。

  15. ぬーさん、おはようございます。以前から、クリエイターズスタンプには凄く興味があったんですが、何分今現在lineをしていません。携帯電話は、がら系でline出来ない機種です。パソコンでフェイスブックはしていますが、スタンプ登録制作申請は、無理でしょうか???何か別の方法があれば教えて頂けないでしょうか?よろしくお願いいたします。lineが出来る機種に変更しないと無理だろうなぁと思いつつ・・・すみません;;

    • ぬー

      こんにちは!ぬーです!
      ガラケーでもLINEを入れることは可能です。
      下記のページの【QR cord】をクリックしてみてください。
      https://line.me/ja/download
      登場したQRコードをケイタイから読み込ませてみてください。
      LINEの登録画面へ飛ぶと思いますので手順に従って登録してみてください。
      アカウントが取得できるかと思います。

      アカウントが取得できましたら早速自作したLINEスタンプを申請・登録してみましょう!
      【保存版!もう迷わない!自作LINEスタンプを申請・登録する時の6つのポイント】
      http://enjoynet.co.jp/line_sticker_matome/linestamp_demand_signup

  16. テンプレートありがたいです。頂戴します!!
    余白の10pxはイラストの背景(影とか模様とか)も含んでの余白なんでしょうか?
    つまり10px内は必ず何も色のない透明のみ余白として残すということでしょうか??

    • ぬー

      Piyoさん

      お役に立てて嬉しいです!
      余白の10px内についてですがイラストの背景や影、模様なども含め全てNGです。
      何もない状態で透明の余白のみ残すかたちであっています。

  17. ぬーさん

    ありがとうございました。。。
    おかげさまで、スタンプ無事販売できました^^

    売るというより
    自分で作ったスタンプが使える醍醐味
    最高です。。。

    • ぬー

      ぎんネコさん

      無事販売出来たとのこと、本当に良かったです!
      ご連絡、有難うございます。
      確かに自分で作ったスタンプが使えるというのは楽しいですよね!
      ぜひ色々なスタンプを作ってみてください!

  18. 絵をpng形式でファイルに取り込んでzip形式縮小して、スタンプ画像で開くとエラーになってしまいます? zipファイルの中にpng形式の絵が含まれて居ないとのメッセージが出て来ます?何でしょうか?

    • ぬー

      デンちゃんさん

      一度、圧縮せずに1枚ずつ申請してみて欲しいです。
      それでもダメだった場合は、そのpngデータをPhotoshopで開いて再度pngにしてみて欲しいです。
      メニューから【ファイル】→【Web用に保存】で【PNG-24】で保存してみてください。

コメントへの返信

入力エリアすべてが必須項目です。※メールアドレスが公開されることはありません。


更新情報


Twitter



合同会社ジョイネットは、神奈川県相模原市でホームページ制作を行う専門会社です。

ホームページ制作、システム開発、ウェブマーケティング、リスティング、SEO対策などのインターネットに関わるお仕事をしております。

合同会社ジョイネットTel/Fax: (042) 711-7218

〒252-0231 相模原市中央区相模原6-26-12 マリノビル4F