恵比寿あたりで、じっくりコトコト煮詰まるブログ

恵比寿あたりで、じっくりコトコト煮詰まるブログ

恵比寿を「地元」と呼べるようになるのを目指す精進ブログ。食べたり飲んだり考えたり煮詰まったりの日記など。

【時短ポイントまとめ】爆速★LINEクリエイターズスタンプの作り方をまとめたよ! [Photoshop+MediBang編]

f:id:gdgd_ebisu:20151207175228p:plain

 

先日LINEスタンプを立て続けに2つリリースしました!

関係ないですが将来、イラストを描いてちょこっとおづかい稼ぎができるおばあちゃんになりたい♡というプチ願望がありまして。その修行をかねてLINEスタンプを2つ同時リリースしてみました。

 

f:id:gdgd_ebisu:20151204004738p:plain  f:id:gdgd_ebisu:20151205012932p:plain

 

 

いやー1つ目は勢いで始めちゃって、あまり効率とか考えなかったもんで大変だったのですが、2つ目のほうは「いかに爆速で作れるか」 を目指しながらちょっと作ってみました。

 

ので、作り方とかまとめてみます!!

 

 

 

使うソフトは、PhotoshopとMediBangの2つ

Photoshopの操作になじみがある人にはこの2つのアプリの神コンボが最強ではないかと!Photoshopの弱点:線が描きづらい1回しか戻れない⌘Z(Ctrl+Z) というのをMedibangがカバーしてくれます。しかもショートカットがPhotoshopと共通のものが使えるというのが素敵すぎる!!!!!(しかもけっこう高機能なのに無料!神すぎる)

f:id:gdgd_ebisu:20151207062117p:plain

f:id:gdgd_ebisu:20151207062122p:plain

 

ちなみにこんな感じにアプリを使い分けてます。作業のメインはほぼPhotoshop

1. ガイドデータを作る f:id:gdgd_ebisu:20151207134909p:plain (事前に用意しとくと便利)

2. ラフ下書きを描く f:id:gdgd_ebisu:20151207134914p:plain
3. 線入れをする f:id:gdgd_ebisu:20151207134914p:plain

4. サンプルひとつ作って色を決める f:id:gdgd_ebisu:20151207134909p:plain
5. 一気にまとめて色塗りする。 f:id:gdgd_ebisu:20151207134909p:plain
6. ガイドに沿ってスライス f:id:gdgd_ebisu:20151207134909p:plain

7. stampersでチェック (→シミュレーター
8. 最後に余白を足す f:id:gdgd_ebisu:20151207134909p:plain

 

ざっくり効率化のポイントまとめ

どの作業を面倒くさいなと感じるかは人それぞれだったりするので(ショートカット派かどうかも関係あり)あくまで個人的な爆速ステップですが、先にポイントをまとめました。とにかく飽きる前に作り切るという目標のもと、サクサク作れることを重視しています。

 

① 4×10に並べた状態
最初から並び順とかも意識しながら最初に作っちゃったほうが、あとから調整する手間が省けるので楽!実際にダウンロードして使うとき、スタンプを選ぶのも、この並びから探すので、見やすい&選びやすいように。

 

② 1マスを余白抜きのサイズで作る(350x300)
個人的にはこれがいちばんのポイント!スタンプの指定サイズのうち上下左右の10pxずつは余白なので、それを抜いた350x300pxで作っていきます。最初に4x10で並べて、Photoshopでガイドを引いていくときもこのほうが数字のキリが良いので強いに計算しやすいし。余白気にせずマスいっぱいにイラスト描いていくほうが楽。

 

③下書き&線入れはMediBang
線を描くときは、⌘Z (Ctrl+Z) はめっちゃ使いますよね。これができないのがPhotoshopのつらいところ。なのでMediBangでサクサク描いていきます。いちばん楽しい作業♡
ちなみにMediBangはレイヤー作りすぎると挙動が重くなったりレイヤー作れなくなるので、下書き、線入れ、それぞれ1枚のレイヤーにザクザク描いていきます。

 

④ガイドに沿ってスライス
Photoshopで色塗りしたら「ガイドに沿ってスライス」機能を使って一気にpngデータを作成。これも爆速でめっちゃ楽!

 

⑤最後に余白を追加
Stampersシミュレーターであれこれチェックしてみて調整とかが終わったら余白を追加。windowsとかフリーツールで一発でできるのとかありそうだけど今回はmac環境だったので探すの面倒くさくてPhotoshopのアクションでやりました。

Photoshopの画面はこんな感じ。カラーパレットもあらかじめ登録しちゃうと楽。

f:id:gdgd_ebisu:20151207062254p:plain

 

 

1. ガイドデータを作る f:id:gdgd_ebisu:20151207134909p:plain

ひとつのLINEスタンプを作るときに用意してるデータセットはこんな感じ。

 

f:id:gdgd_ebisu:20151207062222p:plain

 

■mdpデータ…MediBangのデータ

■psdデータ …Photoshopのデータ(スタンプ一式)

■main.psd   …LINE登録するときに必要なアイコン用。ファイル名はmainで。

■tab.psd   …同じくLINE登録するときに必要なタブ用。ファイル名はtabで。

■images   …photoshopからweb書き出しすると画像が書き出されるフォルダ。

■sozai    …作る上で何か下書きデータがある場合。

 

まずはスタンプのpsdデータを作ります

先ほどのポイントにまとめたように

・4×10で40コをまとめて並べる
・余白なしサイズ(350x300)で作る

というやり方でガイドを作ります。MediBangでPhotoshopのPSDデータが開けます。が、ここで注意点が1つあって、なぜかMediBangではPhotoshopのガイドは消えちゃうため、連番と薄いグレー枠線はレイヤーを作って書いておく必要があります。(連番はなくてもいいんですが、何気に40コ描くのは大変なので、あと何コあるかわかったほうが気持ち的に楽です♪)

 

↓この状態のPhotoshopデータをあらかじめ作っておくと良いです。ガイドに隠れて見えないけど薄いグレー色で枠線が引いてあります。

f:id:gdgd_ebisu:20151207062325p:plain

 

 

2. ラフ下書きを描く f:id:gdgd_ebisu:20151207134914p:plain

「なんかそれっぽいから」というビギナー丸出しの理由で、薄い水色ペンで下書きを描いていきます。”爆速道”的には、いきなり本番の主線から描くのが理想なのですが、やはりまだバランスを取ったりするのに下書きが必要なので。修行して将来いずれは下書きなしでダイレクトに主線から描けるようになれば、爆速道をますます邁進できますね。

 

f:id:gdgd_ebisu:20151207062353p:plain

 

描いてて枠からはみ出してしまったり、バランスを調整したいときは、Photoshopと同じく範囲を選択して、移動したりサイズを調整したりできます。

f:id:gdgd_ebisu:20151207062431p:plain

 

⌘T (Ctrl+T) で選択範囲を自由変形できるので、拡大縮小など微調整しながらバランスをとっていきます。ちなみに選択範囲の解除も、⌘D (Ctrl+D) でOK!

f:id:gdgd_ebisu:20151207062451p:plain

 

ちなみにペンは「丸ペン」を使ってます。他をいろいろ試したわけじゃないのですが、これがなんとなく使いやすい気がしてます。

f:id:gdgd_ebisu:20151207062406p:plain

 

 

3. 線入れをする f:id:gdgd_ebisu:20151207134914p:plain

主線のアウトラインを描いていきます。

f:id:gdgd_ebisu:20151207062412p:plain

 

 

これで、MediBangは完了。

.mbp形式でも保存しておきつつ、.psdのPhotoshop形式で保存!
これでデータがPhotoshopで開けるようになります。

 

4. サンプルをひとつ作って色を決める f:id:gdgd_ebisu:20151207134909p:plain

色は一気に塗っていくので、まずは1つサンプルを塗り塗り。
肌、髪、服の色などを決めてパレットに登録していきます。

 

 

5. 一気にまとめて色塗りする  f:id:gdgd_ebisu:20151207134909p:plain 

時短のため、色はまとめ塗りがおすすめ。
あとから色を変更したくなることも想定してこういう感じに塗り分けてました。


キャラの主要カラー:
キャラクターの主要カラーは、肌色だったら肌色、髪の色だったら髪の色と、色別にレイヤーを分けて一気に塗っていきます。あとで、髪の色をもう少し濃くしようかなとか調整するのに色別にわけてあると一気に調整できるので便利!

 

その他カラー:
ハートとか涙とか、その他のアイテムの色については「other」というレイヤーなどで1枚にまとめて塗っていきます。レイヤー移動する時間も短縮短縮!事前にカラーパレットを作っておいてその中からなるべく選ぶようにすると、色が散らからずおすすめでつ。(このあたりも別途、いろいろ調べたので、また追ってまとめたいなと)

 

 ↓ ちなみにレイヤーはこんな感じ。

f:id:gdgd_ebisu:20151207062539p:plain

ちょくちょく赤背景と黒背景を表示させて、塗り残しをチェック!

 

ということでこんな感じで色塗り完成!!

 

f:id:gdgd_ebisu:20151207062254p:plain

 

 ↓ ちなみに、これのときは影とか入れてたからちょっと大変でした…汗

 

 

6. ガイドに沿ってスライス f:id:gdgd_ebisu:20151207134909p:plain

色塗りが完了したらスライスツールを選択して、上部メニューにある「ガイドに沿ってスライス」で一発スライス& 「Web用に書き出し」で一発書き出し!!!

★書き出すときは「ガイド」のレイヤーを非表示するのを忘れずに。

 

f:id:gdgd_ebisu:20151207152308p:plain

f:id:gdgd_ebisu:20151207152233p:plain

 

 

7. stampersでチェック

前回のスタンプづくりでも使い方をまとめたけど、作ったスタンプのチェックはこれ!このシミュレーターが本当に便利!!

「受信する側から見た」ときに、そっぽ向いちゃってる残念スタンプにならないように左側に表示される相手が送信してきたスタンプとして見たときとか。送受信で違和感がないか、背景色を切り替えて色がおかしくないか、とか。そのあたりをざっと確認。

シミュレーターは画像サイズが厳密でなくてもいいので、余白なしサイズで作ったままの書き出しデータで問題なく使えます〜。

 

8. 最後に余白を足す f:id:gdgd_ebisu:20151207134909p:plain

色や調整が決まったら、上下10pxずつ余白を足して、370x320にリサイズ。windowsで作る場合はフリーソフトとか探してもいいかも。Photoshopの場合であれば、アクションを作ってショートカットキーを登録!(調べてたら自動処理してくれるスクリプトとかあったんだけどよくわからなかったので私はアクション+ショートカットキーで)

 

f:id:gdgd_ebisu:20151207070935p:plain

 

「カンバスサイズの変更」→ 370x320pxにサイズを指定 → 保存 → 閉じる、までをアクションに保存。

f:id:gdgd_ebisu:20151207070941p:plain

 

ちょっとだけ手間かもですが、Photoshoppngデータを40コ放り込んで、ひたすら40回分、アクションに設定したショートカットキーを連打。アクションに「保存して閉じる」までを登録しておくのがポイント。保存→閉じる、の作業も40回繰り返すのはけっこう面倒いし、1アクションじゃないと連打できないしね。

 

 

main画像、tab画像の作成。 

あとはメイン画像とトークルームのタブ画像を作成して登録です。
スタンプとサイズが違うので注意。

 

main: 240 x 240px 

tab:   96 x 74px

 

↓ ちなみにここに使われる画像です。

 

ガイドライン - LINE Creators Market 参照

f:id:gdgd_ebisu:20151207163418p:plain

 

 

よかったらよろしくお願いします♥(*ˆωˆ*)

第1弾の「#はらぺこ鳥」が、10月中旬ぐらいから作り始めて(週末とか帰宅後の作業ベースで)1ヶ月ぐらいかかったのに対して「#ちびすけジミー」の方は、約1週間半ぐらいで作れたのでかなりスピーディ。しかも途中下書きまでしたところで、#はらぺこ鳥 の仕上げの方が途中だったので専念してたので、#ちびすけ だけの作業としては集中したら1週間で仕上げられたかなと。

 

11.13 fri 酔って帰宅後、家でさらにお酒飲みながらゆるゆる落書き
11.14 sat  下書きを始める
11.25 sun  スタンプ完成!
11.27 tue   スタンプ申請
12.4 fri  スタンプ承認&販売!

 

酔いながら落書きした最初のラフ。

f:id:gdgd_ebisu:20151207172532j:plain f:id:gdgd_ebisu:20151207172629j:plain f:id:gdgd_ebisu:20151207172609j:plain

f:id:gdgd_ebisu:20151207172705j:plain f:id:gdgd_ebisu:20151207172739j:plain f:id:gdgd_ebisu:20151207172819j:plain

 

 

そんなこんなで出来たかわいいわが子!!!

よかったらよろしくお願い申し上げます。

 

ちびすけジミー[毎日使えるセット/English] - LINE クリエイターズスタンプ

f:id:gdgd_ebisu:20151205012949p:plain

 

こちらも!
美味しいもの食べたくなる〜。個人的にお酒シリーズが好きです♡(哀愁ただよう日本酒スタンプとか)

 

今日なに食べる?【はらぺこ鳥】 - LINE クリエイターズスタンプ

f:id:gdgd_ebisu:20151204004334p:plain

 

あとがき

イラストの修行をかねたLINEスタンプづくり。だったので、イラストのバリエーションをいろいろ広げたいなと思っての2種類同時リリース。自分が飽きる前になんとか完成させて次も作ろうと思えるように編み出した爆速効率化の作り方。でもまだまだ修行あるのみです〜。今はちなみに、myソウルメイトの愛犬スタンプを作成中。

 

あとはイラレのアートボードを使う方法もあるみたいなので、今度はそっちもマスターしてみたいなと思う次第。やっぱり1度やってみてコツつかんで、2度目に効率化をめざした作り方を編み出す、という流れになりますね。

 

少ししたら今より忙しくなりそうなのでどこまで作れるかわからないけど、ぼちぼち引き続き作っていこうと思います♡