LINEスタンプを作るんだ!でもぼくLINEやらないから、Viberステッカーを作るんや!!え、Viberご存知無い?ほんとに?わかるー……。

らくがき

嫁ちゃんさんとの連絡は、メッセンジャーアプリ「Viber」を使っています!
海外だとある程度有名らしいですけど、日本だと使ってる人ぜんぜんいなさそうですよね。シェアどんくらいなんだろう……。
Viberにも「ステッカー」という、ちょっとした定形画像を送れる機能があります。いわゆるスタンプ。
自作の画像を取り込んで、気軽に使えるんですよね。この辺の敷居はLINEより低いイメージがあります。
んでまあ、基本的には私用というか家庭内利用なんですけど、せっかくソレ用の画像を作るなら、どっちにも使えるのを作り貯めといて、数が溜まったら販売すればお金持ちになれる!!やったね!!!
みたいな皮算用ですし、まあそういうネタなのですが、それはそうと

サイズ感は把握しとこうかな、という話。

まず、みんな大好きLINEからです。ぼくはそうでもないです。分かるでしょ?
ガイドライン」によると、スタンプの基本的なサイズは横370×縦320(ピクセル)との事。ただし、「上下左右10ピクセルあけろ」という指示がでていますので、実質350×300で作り、完成した後にキャンバスサイズを変更するのがよいのですかね。

また、実際はもっと大きいサイズで元画像を作り、のちに適宜縮小する……という手順で作られてる方が多いかと思います。元の解像度はある程度高いほうが無難ですよね。たとえば700×600とか、1400×1200とか、2800×2400とか。環境次第すね。

Viberはここですね。こちらは横490×縦490(ピクセル)の正方形。こちらは10ピクセルの枠がどうこうとかは無さそうですかね。
うん、意外にサイズ感違いますね。
というかメッセンジャーアプリのデザイン的には、縦長よりは横長の方がおさまりがいいような気はします。縦横比をLINEスタンプに合わせておいて、490px以上で作ればなんとかなるのかな?

LINEスタンプの縦横比は、(厳密には横縦比ですが)外枠を除いた場合は7:6、1.1666… :1という事になります。
横を490pxにした場合、縦は420……おや、割り切れました。これは都合がいい。
とりあえずのところ、「横490×縦420」をベースに作れば縦横比はあまり気にせずに済みそうです。
「横1470×縦1260」あたりで作っておけば、LINEスタンプにはすぐ適合できそうですし、Viberの方も「どうしても正方形じゃなきゃイヤ!!」という事でなければ、ひとまずこれで対応できるかな。なんか妥協感がある。本当はちゃんとデザインしなおすのが理想なんでしょうけどね。家庭内利用なのでそこまでは、ねえ?

というわけで、まず1470×1260の画像ができました。いいね。いいの?
次は画像解像度とサイズを変更します。元画像は解像度高いまま残しておきたいので、ここで2つ複製を作っておくカンジですね。

LINEで使う場合、最終的に370×320にするのですが、現状は490×420を3倍に拡大したサイズになっています。
まず、外枠というか余白なしのサイズ、350×300にします。

ぼくの使ってるアイビスペイントだと、左下の「キャンバス」→「画像解像度変更」から変更できますね。縦横比維持にチェックが入っていると、縦か横のサイズ数値を入れればもう一方も変えてくれますね。

続いて余白をいれるので、同じく「キャンバス」から「キャンバスサイズ」を選びます。こっちは「縦横比維持」のチェックを外します。

これで上下左右に10ピクセルずつ余白が入った状態になり、LINEスタンプ指定の画像サイズ・横370×縦320になりましたよっと。

Viberの方も同様に、解像度変更で「490×420」に変更します。こちらは余白いらないみたいなので、キャンバスサイズの変更はしません。

そしたら、透過PNGとして保存します。

LINE用はこんな、

Viber用はこんなカンジになりました。まあ違いわかりませんね、これだと。
しかも一応ちゃんと透過したんですけど、うちのサイトだと背景が白だから分かりませんね。

実際にViber上で見るとこんなカンジでした。なるほど。
白縁、境界線が必要すね。まあ要練習という事で。

ちなみに最終的な確認を怠ったので、実は

こうなってます。これだから素人は。

というわけで、流れとしてはこんなカンジですかねー。気が向いたら……いやなるべく頑張って作ります。がんばれがんばれ。

ちなみにアイビスペイントはめたくそフォントたくさん入ってるんですけど、あれって商用利用して大丈夫なんすかね?
ibis よくある質問
だそうです。なるほど、フォントの公式を見ろと。めんでえ……

今回使ったフォントは、調べてみたら商用利用可との事でした。安心。
んでリンク貼ろうと思ったのですが、なんかこう、なんとなく不適切な雰囲気を感じたのでやめておきます。次からは別のフォント使おう……罠だ。

でもやっぱ貼っちゃう。今後もたぶん使わせて頂く気がします……。

コメント

タイトルとURLをコピーしました