LINEスタンプ作りはこわくない!「テンプレート」と「自動処理」での作業効率化

LINEスタンプ/2015/02/01
20150201stmp

久々にLINEスタンプに関する記事です。クリエイターズマーケットにはお世話になりまくってるので書きたいことはたくさんあるのですが今回はとりあえずツール的な作業効率化の話をさせていただきたいと思います!

 

 

管理人がメインで使用するアプリケーションがPhotoshopなので今回の「ツール的な話」はそれによりがちですが、他のソフトをご使用の方にも似た機能があれば参考にして頂けるような記事を目指します!よろしくお願いいたしますん(●´`●)

 

あくまで管理人視点での自分勝手自己流理論なので、やわらかいお気持ちでどうぞ。

 

今回の記事での筆者使用ソフト:Adobe Photoshop CS5.1(Mac)
コンピュータ:MacBook Pro 13inch(2012)
(今回の内容と直接は関係しないですが、タブレット:WACOM BAMBOO FUN CTH-661)

 

もくじ

  • 最大限のテンプレートを作る。
  • Photoshopのバッチ(自動処理)機能を活用する。
 

最大限のテンプレートを作る。

ひな形、型番…言い方はいろいろありますが、スタンプを作っていくにあたって「かならずベースになるもの」を揃えてしまおうゼ!ということでございます。
私が用意するのは以下のものです。

 

 
A- ファインダー(エクスプローラ)に用意するもの2つ
A-1、そのとき制作するスタンプに関するデータをまとめるフォルダ
「LINEスタンプ-◯◯」
A-2、申請する完成データ(png)をまとめるフォルダ
「data」と名付けたフォルダを、前述の「LINEスタンプ-◯◯」の中に作ります

 

スクリーンショット 2015-02-01 14.00.25
スタンプ制作に限ったことではありませんが、必要なフォルダの作成を事前に行っておくと意外と時間短縮になり、また作業に対する気持ちもかなりラクになります。

 

「data」フォルダは最終的にZIP圧縮をかけて「data.zip」というファイルにします。
「data」フォルダの中には「01.png」〜「40.png」の40個のスタンプ画像と、main.png、tab.pngを格納します。
中に入れる画像について具体的には次の項目から書きますが、この規定のファイル名で42個のPNGを格納しておくことでZIPファイルでの一括アップロードができるのでヒッジョーにラクチンです。

 

 
B- Photoshopで用意するもの3つ
B-1、メイン画像のベースとなる240×240px(72dpi)のpsdデータ

  (main.psd)
B-2、スタンプ画像のベースとなる370×320px(72dpi)のpsdデータ

  (◯◯スタンプ.psd)
B-3、トークルームタブ画像のベースとなる96×74px(72dpi)のpsdデータ

  (tab.psd)

 
B-1、メイン画像のベースとなるpsdデータ
B-3、トークルームタブ画像のベースとなるpsdデータ
スクリーンショット 2015-02-01 14.02.18
この2つは単純にPhotoshopを開いた状態で「新規作成」(command+N)でキャンパスサイズを指定して白い背景レイヤーが在るだけの状態で保存しておきます。
カラーモードがRGBで解像度が72dpiであることだけ気にしておきます。
それと付け加えるなら…ファイル名を「main.psd」「tab.psd」にしておくと、最終的にpng書き出しをする際にタイピングを減らせるので手間が省けます。
(これはZIPファイルで一括アップロードする際のLINE側の規定ファイル名がmain.pngとtab.pngのため。
書き出しするのは最後の1回きりだからpsdはなんでもいーやと思うかもしれませんが、
修正をかける際にpsdから再度書き出しすることになるので、ここでファイル名にこだわっておくとあとで非常に楽と思われます)

 

 
B-2、スタンプ画像のベースとなるpsdデータ
こちらに関しては、LINE側の制作ガイドラインページに
「トリミングされた画像とコンテンツの間にはある程度(10px程度)の余白が必要ですので、上下左右のバランスを考慮のうえデザインしてください。」

 

とあるので、Photoshopを活用して「ガイド機能」で10pxの余白を確保しておくことにしています。

スクリーンショット 2015-02-01 14.03.35
メニューバーの[表示]-[定規](command+R)でルーラーを表示できます。普段はこれを表示させてドラッグでガイドを引いていますが、今回はスタンプ制作であり、正確に確実に外側4辺に10pxほしいので使いません。

スクリーンショット 2015-02-01 14.04.36
メニューバー[表示]-[新規ガイド…]で、【垂直方向】【10px】【360px】(370-10)のガイドを、【水平方向】【10px】【310px】(320-10)のガイドを引きます。

スクリーンショット 2015-02-01 14.05.11
こんなかんじになります。
Photoshopのガイド機能は、同じく[表示]の中にある[スナップ]をオンにすることによって、描画や選択範囲、移動範囲などを大雑把に扱っても引いたガイドにうまく沿わせてくれるのでとても便利です。手放せません…!
今回はパパパっと作業しても外枠10pxに飛び出さないようにかなりの仕事をしてくれます!
(有名な無料のイラスト系ソフトについて軽くぐぐってみましたがGIMPには似た「ガイド機能」があるようです。「FireAlpaca」「Pixia」「PictBear」「ペイントツールSAI」「AzPainter2」にはそういった機能があるのかわかりませんでした。ご自分の使用されてるソフトについてよく調べてみるといいと思いマス!)

 

 
ちなみに
ここまでの空っぽな2つのフォルダと、空っぽなPSDデータをテンプレートとして空っぽなままで取っておくと今後もスタンプを作るときに便利です。
新規スタンプを作る際に、その空っぽな大元のフォルダ「A-1、そのとき制作するスタンプに関するデータをまとめるフォルダ」を複製すれば用意したテンプレートが一式できあがり!という都合のいい状況を作れるので(^O^)

スクリーンショット 2015-02-01 14.06.32
 

たとえ何度スタンプの40個セットを作っても、「空っぽなテンプレート一式」は消したり上書きしたりしないでおくのがおススメってことですね。

 

 

 

 

筆者は第1作目のスタンプで「私はきっと1回きりだから〜」と思ってたのですが、自分の描いたイラストがLINE上で使えるようになる・多くの人に使ってもらえるというLINEスタンプ制作の魅力に魅了され、一回に留まらなかったひとりです。

19

 

 

Photoshopのバッチ(自動処理)機能を活用する

Photoshopにおける最高の機能のひとつと思っているのですが、自分のまわりのフォトショユーザにも意外と知ってる人が少ないのがこの「バッチ機能」
「あらかじめ登録しておいた一連の作業」をクリックひとつで「自動処理」してくれるこの機能は、まさにLINEスタンプづくりにはモッテコイです。計40個の、作り始めると割と多い画像データの作成での「無駄」をとことん省いてしまいましょう〜!

スクリーンショット 2015-02-01 11.53.44
これが、メニューバーの[ファイル]-[自動処理]-[バッチ…]で開いたバッチウインドウ。
一番上のプルダウンリストに「初期設定のアクション」とあります。
バッチでは「アクション」というパネルで登録した「一連の作業」を使うことになります。

 

つまりまずは自作のアクションを新規設定します!
アクションパネルが出ていない時はメニューバーの[ウインドウ]-[アクション]で表示させます。

スクリーンショット 2015-02-01 11.59.33
筆者がLINEスタンプ作りの上でよく使う自作アクションは名前で書くと
  • 「色調」
  • 「せんが」
  • 「最適サイズ保存」
の3つです。「最適サイズ保存」はLINEスタンプ制作専用に作ったアクション。
「色調」「せんが」は普段のイラスト制作などにもよく使う、スキャンデータ用に作ったアクションです。
ネーミングからいろいろと大雑把加減が伝わってきますね。
かなり前に、使っていたアクションがなんかの拍子に全て消えてしまった事件からのあとはあまりたくさんのアクションをパネル上に保存しなくなりました…。Photoshopで作成したアクションは「ファイル名.atn」という形でデータファイルとして保存もできるので、必要性を感じたらバックアップを取ることもオススメします(´`)

13

 

 

 

参考までに、それぞれの内容を画像で紹介します。
色調
スクリーンショット 2015-02-01 12.10.08
せんが
スクリーンショット 2015-02-01 12.10.37
最適サイズ保存
スクリーンショット 2015-02-01 12.17.55
 

 

画像を載せてみたけれど作業内容は具体的には参考にしづらいと思うので雰囲気だけ見ていただければ( 、‥)

 

 

 

 

「色調」はスキャンしたそのままの、写真のような画像の明暗(白黒)をはっきりさせて、彩度を0にする作業。
「せんが」はその画像を線画レイヤー(白い部分を透明にして黒い線部分だけにしたレイヤー)にする作業を登録しています。
ここでの「せんが」はふだん描いている4コマまんがのためにもともと作ったので「ペースト」あたりは今回は要らない工程ですが、このまま「せんが」アクションを使っても支障はないので、スキャンデータの処理にはいつもコレに頼っています。(新しく登録すればいいのに…)

 

そしてスタンプ制作用の「最適サイズ保存」アクションですが…こうしてみるとなんか無駄な工程を挟んでいるような…??まぁイイヤ!気になったら直そう!

 

 

 

「最適サイズ保存」はスタンプ個体ごとにトリミングするために設定したアクションです。
370×320pxの固定サイズでのPNGデータ仕上げで登録することも多いですが、私が連作で作っている「ちょっぴりおしゃべりなどうぶつシリーズ」のスタンプはそれぞれのイラストの形に合わせたピクセルサイズに仕上げているので、このアクションがとっても重宝します。

08

 

 
スタンプ画像を「トリミング」するか、「370×320」で仕上げるかの選択
LINEスタンプのトリミングの有無については、トーク上の見栄えに大きく影響します。

stamp-size01 stamp-size02
前者の画像が筆者の処女作「ワタクシ?ひつじですけど」。
370×320pxの固定サイズで作った場合がこれです。
後者の画像が「ちょっぴりおしゃべりなどうぶつシリーズ」の二作目、「ちょっぴり愛の重いヒヨコ」。
こちらはイラストそれぞれに合わせてファイルのピクセルサイズ自体を一個一個調整しているので、白い文字で表示される「時間」と「既読」の位置がバラバラにずれることになります。

 

 

 

どちらがいいかというと、そのスタンプによりけり、かなぁと思います。
いま「既読」の位置がどうのと横サイズの話をしましたが、スマホでLINEを見ている際には縦サイズのほうが影響すると思います。縦に小さければそれだけスタンプがトーク画面を占める幅が減る、事にはなる…んですが、最近のスマホは画面も大きいし別にいっかな!と思って最近はトリミングしないことも多いです。

ハリネズミ
「どうぶつシリーズ」はいっちばん最初のハリネズミを作った際にトリミング仕上げで申請したので、このあとのどうぶつたちもトリミング仕上げしていますが、はっきり言って「370×320px」で揃えたほうが作業は格段にラクです。(ドーン)

 

 

それはというのも、スタンプのデータは縦横両方のピクセルを偶数の数値にする必要があるので、筆者はこの「最適サイズ保存」の自動処理のあとにひとつひとつの画像のピクセルを1px単位で調整する手作業を入れています。

 

(これもPhotoshopではショートカットキーのみでできるので大したことではないのですが…)

 

 
ところでどうして奇数ピクセルはだめなのか?
LINEスタンプの画像サイズが偶数ピクセルでないといけない理由は、スマートフォンで表示される画像はPCで見た時の倍の解像度であるから…だと思います。たとえばスマホ用のWebサイトを作る際にも、PC用に作った画像の倍の大きさを用意する必要があるのです。PCと同じサイズWebパーツの画像をスマホで見たら「ボケて」しまうんですね。
そしてLINEスタンプも見た目の「二倍」の大きさであるため、「2の倍数」でないと見た目の表示が「にじむ」ことになります。LINEクリエイターズマーケットでは奇数ピクセルはエラーになりアップロード出来ないようになっています。

 

 

 

あ、ちなみにメイン画像とトークルームタブ画像は240×240pxと96×74pxで固定なのでトリミングはできませんよ!

 

 
フォトショ様、あなたが神か…!「フォルダ」への自動処理
ここまででアクションの魅力はまだ半分も説明できておりません。
ここからがPhotoshopの「ヤバい」ところ!

 

 

 

 

バッチの自動処理はフォルダ単位に行えるのです!

スクリーンショット 2015-02-01 14.14.02
つまり、私が登録した「最適サイズ保存」のアクションは、「01.png」〜「40.png」の40個のスタンプ画像へ「ワンクリック」のみで実行できてしまうということ。

 

 

 

【筆者の手順】
  1. とりあえず370×320pxのままで40個のPNGデータを次々に「data」フォルダへ保存する。
  2. 「data」フォルダを複製する。(これはなんかミスった時のためのバックアップです)
  3. 「data」フォルダに「最適サイズ保存」アクションの自動処理を行う。
  4. Photoshopが頑張ってる間にお茶でも飲む。
  5. 「data」フォルダ内にイラストに合わせた大きさでトリミングされた40個の画像が完成する。
  6. 自動処理内で、トリミングに合わせた「外側10px」も確保済み。
  7. Photoshopで開いてる、自動処理後の40個のPNGをすべて偶数ピクセルサイズに調整する
    (この工程は画像ひとつひとつに対して手作業ですが、ショートカットキーのみで行っています。alt+command+Cで「カンバスサイズ」を表示させ、幅と高さを目でチェック→奇数になっていたら上矢印キーのワンタッチで1px増やす(入力欄移動はtabキー)→command+Sで上書き保存。アクションをもっと理解すればさらに効率化できるかも…)
 

 

 

 

こんなかんじで、自動処理…バッチのおかげで、作業時間の大幅短縮が実現できます。

08

 
自分なりの「工程」を登録すること
今回は「バッチ」の素晴らしさについて語ってみました。(脱線もしましたが)
370×320pxからトリミングしない場合でも、40個もあるデータなので、なにかしら「自動処理」は役に立つのではないかと思います!

 

 

 

もともとこの記事自体が自己流ノウハウの紹介ですが、バッチに使うアクションの内容に関してはほんとうに自己それぞれと思います。
アナログ線画をスキャンして作る人もいれば、もともとPhotoshopで描いてる人、イラストレーターと連携させている人もいらっしゃることでしょう。
仕上がる作風や、縁取りなどの効果もスタンプによって全く違うものと思いますので、自分なりの「作業効率化」をPhotoshopに助けてもらうことを、オススメします!

10

効率化っていうのはズルでも怠慢でもないのですよ!!

 

 

おわりに

以上、
  • 最大限のテンプレートを作る。
  • Photoshopのバッチ(自動処理)機能を活用する
をお送りしました。

 

 

この記事に
「・透過ミスによるリジェクトをゼロにする。」も載せたかったのですが意外にふたつの項目でボリューミーになってしまったのでまた次回にします。

 

【LINEスタンプ作りはこわくない!】シリーズ、

今後も少し続けます( o `´ o)

今週はこんな記事が人気です

santnoreは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)