LINEスタンプを作ってみました
誰でもスタンプを作って申請、審査で承認されると販売ができるLINEクリエイタースタンプ。とりあえず今回は、制作のみについてざっくり書いてみます。
スタンプ制作の前にLINEクリエイターズスタンプの詳しい内容、ガイドラインなど下記URLを読んでおく事をおすすめします。
個人の制作環境（持っているソフト）によって作り方はいろいろあるようです。
自分の環境に合わせてつくってみましょう。
ざっくり制作に関してだけ言うと、
スタンプ画像
「01.png」～「40.png」までの透過PNGの画像ファイル
画像サイズからイラストまでの上下左右に10pxのスペースがあること。（最大幅370px高さ320px、解像度72dpi以上）
mainとtab画像
スタンプ画像同様透過pngだが、サイズのみ違う。（「main」幅240px 高さ240px 「tab」幅96px 高さ74px）
では制作開始。
現在の自分の環境：Illustrator9、FireworksCS3
Fireworksで直に描けば使用ソフトがFireworksのみで作業を完結できるので、速いのですが、個人的にFireworksに慣れていないのでイラレで作ってFireworksでスタンプ用画像にする方法でつくります。
Fireworksにイラレファイルを読み込む事もできるのですが、イラレを複数ファイル作って1つずつ読み込むのも面倒そうだったので、結局１つのイラレファイルに40個（mainとtab画像入れると42個）描きました。
（illustratorのCS4以降なら１ファイルでアートボードを複数持たせる事ができるようなので、おそらくFireworksの複数ページへの反映が一気にできそう）
とりあえず、Illustrator9でキャラクターを描いてみます。
イラレで作ったものを画像ファイルにコピペしていきます。
Fireworksは、あらかじめテンプレートとして使え回せるようにページを複数作りました。
Fireworksで、サイズを幅370px高さ320pxのファイルを作成。
LINEスタンプは、最大幅370px高さ320pxで、イラストと画像の間に10pxの隙間が無いといけないらしい。
ギリギリなのもはみ出しそうなので、20pxでガイドを付けて、ガイド内にイラストが収まるようにしました。
（最終的に370✕320pxの画像が出来上がります。中身のイラストは上下左右に20pxスペースが空いてる状態です。）
なお、LINEスタンプをアップする際は、「01.png」～「40.png」というファイル名を付けるルールがあります。後から１つずつファイル名を付け替えるという手もありますが、面倒なので先にページ名を修正しておきます。
ページの部分をクリックして「01」と名前を変えました。（要半角）
こうすることで、PNG書き出しの際、01.pngというファイル名で書き出されるので、ファイル名を付け替える手間が無くなります。
また、二作目を作る際に、テンプレートとして活用できます。
「ページ」と書いてある右上をクリックするとオプションが表示されるので、「ページを複製」、合計40個のページにします。
そして、40個のページに「01」、「02」、「03」と言った具合に「40」まで名前を変更していきます。
最後に新規ページとして「main」と「tab」を追加します。（計42個のページとなります）
「main」と「tab」は40個のスタンプ画像とサイズが違うので、それぞれキャンバスサイズ（画像のサイズ）を変更します。
（「main」幅240px 高さ240px 「tab」幅96px 高さ74px）
ちなみに、解像度はすべて72dpi以上必要です。自分は72dpiで作って書き出したら、書き出し後ファイルが、わずかに72dpi以下になってしまったので、80dpiにしました。
透過PNGにイラレからコピペしました。
コピペの際のイラレデータは、別名保存したアウトライン化データを使ってます。（パスのアウトライン化）
（アウトライン化してないと、ソフトによって、違った感じのパスになってデザインが微妙に変わったりする事があるため）
40個のページに、40個ペーストしていきます。
そして、mainとtabにもペーストします。
（tabの画像はサイズが比較的小さいので、シンプルなデザインでないと見づらくなるので要注意。）
注意点イラストの一部が塗り無しだと、透過PNGの場合もちろんその部分が透過してしまうのでリジェクト（審査に落ちる）になる可能性大なので、透過チェックをしておきましょう。（ちなみに、Illustratorの時点でチェックする場合は、レイヤーを一番下に作って、デザインに使ってない色で、大きな四角を作って下敷きのようにすると、塗り忘れのチェックが簡単です。Fireworksでチェックする場合は、キャンバスに一時的に色を付けるとチェックしやすいです。）
「ファイル」から「書き出し」でPNGで書き出します。
ちなみに、自分はPNG32で書きだしています。
（書き出しの設定は「ファイル」→「書き出しウィザード」→「続行」→Web「続行」→「終了」で設定画面が開きます。）
書き出しをクリックすると下のような表示がされます。
「現在のページのみ」のチェックが入っているので外します。
「保存」をクリック。
01～40.pngとmain.png、tab.pngが書き出されました。
これで、LINEスタンプが出来上がりました。
透過ミス、書きだされたpngファイルの解像度72dpi以上を注意しましょう。（設定によって書き出し前ファイルで72dpiなのに、書き出し後のファイルが72dpi以下になる場合があります。）
今回、個人の環境上Fireworksを使用しましたが、透過PNGの扱える画像編集ソフトであればスタンプ用画像は作れます。
フォトショップやフリーソフト、手描き＋アイフォンアプリといった方法で制作もできるようです。
余談ですが、LINEでは「着せ替え」ができるので、背景色が個人個人でちがっていたりします。
大抵、水色、薄いブラウン、薄いピンクと割と白っぽい背景なので、スタンプ制作の際、気にすることはあまりなかったのですが、最近「ブラック」の着せ替えが出来ました。
この黒っぽい背景だと、スタンプで黒い文字を使ってたり、黒い輪郭が見えなくなったりします。
黒い文字がそのままだと、ほとんど見えない事態に・・。
なので、対応策として、文字を吹き出しに入れて背景を付ける、黒い文字に白フチを付ける。輪郭部分の黒にも白フチで対応が必要なようです。
広告
この記事へのトラックバック
広告
この記事へのコメント