カワハラ雑記

カワハラの、雑多な記録。

メディバンペイント(スマホ版)でLINEスタンプ用にリサイズしてPNGにエクスポートする方法

      2016/11/04

LINEスタンプを制作する方法 — 目次 — に戻る

LINEスタンプを制作する時、LINEが定めたフォーマットに沿って画像を作成する必要があります。
その中でも重要なのがスタンプの画像サイズと画像形式。

  • スタンプのサイズは最大で幅370px、高さ320px
  • スタンプの幅、高さの数値は偶数になること。
  • 上下左右10pxの余白を付けること。
  • 画像形式はPNG。

今回は、スマホで全てのイラストを作りきると言う趣旨で記事を書いていますが、スマホでスタンプを作ろうという方は、多分ですけど画像の編集に関してはそんなに詳しくないんじゃないでしょうか?
そこそこ詳しい人は、作業効率の高いPCで作業すると思いますので。

画像編集の初心者で、画像のサイズ変更や、余白の付け方、PNG形式で保存の仕方が分からないと言う人も、この記事を読めばできるようになります。
今回も使用するアプリは「メディバンペイント」を例に説明します。
スマホでお絵描きするならおすすめのアプリです。

線画のレイヤーが一つの場合

01_before

今回説明に使うのはこのネコ。

線画のレイヤーを選択

02_senga_layer_select

レイヤーパネルを出して、線画のレイヤーを選択します。
上の画像のように線画のレイヤーが一つの場合はOKですが、今から説明する方法では、線画が複数レイヤーにわけられている場合、うまくいかないことがあります。

選択メニュー「描画部分の選択」

03_byouga_bubun_select

選択メニューより、「描画部分の選択」をタップします。

04_select_complete

すると、こんな風になりました。
これは、線画レイヤーに絵が描かれているところが選択状態になっています。

トリミング

05_canvas_menu

メニューより「トリミング」をタップ。

06_triming

すると、先程選択した線画レイヤーがきっちり収まるサイズに画像が切り取られました。

キャンバスサイズ変更して余白を付ける

このままでは余白がない状態です。
LINEスタンプでは上下左右に10pxの余白を設けることが推奨されています。

05_canvas_menu_2

サイドメニューを出して「キャンバス設定」をタップ

07_canvas_setting

「キャンバスサイズ」をタップ

08_canvas_size_before

現在のキャンバスサイズが表示されています。
幅246px
高さ293px

上下左右10pxの余白ということはこの数値にそれぞれ20を足せば良いことになりますね。

すると
幅266px
高さ313px
になるわけですが、LINEスタンプの画像サイズは偶数じゃないといけないことを思い出してください。

高さが313pxと奇数のため、1足して314としてください。

09_canvas_size_after

変更するサイズが決まったので、これを入力して「OK」をタップします。

10_resize_complete

無事にサイズ変更が完了しました。
これで画像は完成となります。

スポンサーリンク

線画レイヤーが複数に分けられている場合

先程、線画レイヤーが複数に分かれている場合はうまくいかない場合があると書きましたが、そういう場合の対処方法を説明します。
線画レイヤーが複数じゃない場合も、この方法で大丈夫なんですが、少し手数が増えるのでどちらが最適かは都度判断してください。

01_before

今回の例はこれ。

02_layer_separate

さっきと同じイラストですが、見ての通り文字とネコが別のレイヤーになっています。

04_select_after

ネコのレイヤーを選択した状態で、先ほどと同じように「描画部分の選択」を実行すると、こんなことになってしまいます。
ネコだけ選択された状態で、文字は選択されていません。

05_triming

この状態でトリミングを実行すると当然、ネコだけ選択されているので文字は切れてしまいます。
これはダメだ。

01_before_2

そこで使うのが「自動選択ツール」。
このツールは、似た色の範囲を自動で選択してくれると言うもの。
今回はこれを、イラストを書いた部分ではなく、背景の何も描いていないところに使います。

06_auto_select

背景の透明部分(市松模様のところ)をタップするとこうなります。
透明部分だけが選択された状態で、文字やネコは選択されていません。
このままトリミングしても、背景全体が選択されているためサイズは変わりませんので、選択を反転してやる必要があります。

07_select_menu_hanten

選択のメニューから、「選択反転」をタップ。

 

08_hanten_after

選択の反転を実行すると、

  • 選択されていたところ → 非選択
  • 非選択のところ → 選択

と反転します。
これで、ネコと文字が選択されたことになります。

後は、さっきと同じですね。

10_triming_after

トリミングして…

11_canvas_size_henkou

キャンバスサイズを調整して余白をつければ出来上がり!

PNGへエクスポート

画像に余白を付けて完成したら、最後はPNGにエクスポートです。
PNGにエクスポートと言うのは、PNG形式で保存するということ。

PNG(ピング)と言うのは画像の形式の一種でJPG(ジェイペグ)とかBMP(ビットマップ)とかGIF(ジフ)とかの仲間です。
各画像形式の違いとか色々あるわけですが、LINEスタンプではPNGしか受け付けてくれないので、とにかくPNGにしないといけないわけです。

11_gallery

画像がクラウドじゃなくて端末に保存されているとして説明します。
メディバンペイントのホーム画面の「端末」をタップしてギャラリー画面に移ります。
そして右上の「共有」ボタンをタップ。

12_export
「ファイルを選択して…」と書かれています。
ファイルを選択してどうするの!?と思ってしまいますが、この続きは、
「ファイルを選択してエクスポート」だったかと思います。
画面の大きいタブレットではちゃんと読めたんですがスマホだと途切れちゃっててなんだかよく分からないですね。

13_file_keishiki_select

出力形式選択を選択するわけですが、PNGのなかでも「PNG(透過)」を選択します。
LINEスタンプの背景は透過(透明)している必要がありますので、PNG(透過)を選ぶと言うわけです。

14_file_select

画像を選択するんですが、エクスポートしたい画像にチェックマークを入れていくことで複数選択できます。
LINEスタンプは最大で40枚、メイン画像とタブ画像を入れると42枚で1セットになりますので、複数選択して一括処理できるのは助かります。

エクスポートが完了すると、スマホ内に「MediBangPaint」というフォルダが出来ていて、その中にPNGファイルが入っています。
あとはラインクリエイターズマーケットにアップロードするだけです。

クラウドに画像を保存している場合は…

先程の説明は作成した画像を「端末」、つまりスマホ内に保存していた場合のエクスポート方法です。
では、画像をクラウド(インターネット上)に保存していた場合は?

端末に保存していたら、エクスポートする画像を複数選択して一気に出来ますが、クラウドに保存していたらこれが出来ません。
ではどうするかというと、画像を開いて編集状態にし、メニューより「png/jpg形式でエクスポート」する必要があります。

つまり、エクスポートする画像を一回一回開いて、1枚ずつエクスポートしないといけないんです。
正直言って、これはすごい面倒臭い。

クラウド上の画像も、まとめてエクスポート出来るようになれば楽なんですけどね。
私はこれが嫌で、クラウド上に画像を保存するのをやめました。

まとめ

トリミングして、余白が上下左右10pxずつになるように調整するのは、手作業ではかなり面倒な作業です。
いっそ、全て幅370×高さ320で作っても良いんじゃないかなと思います。

試したことはないですが、この理由でリジェクトされるんでしょうか?
誰か試してみてください。

LINEスタンプを制作する方法 — 目次 — に戻る

スポンサーリンク

 - IT関連, その他