【LINE着せかえ】複雑なメニューボタンをちょっと楽に作る方法

LINEの着せかえづくりの中でも、メニューボタンの制作は少し複雑。

今回は私がLINEの着せかえを作るときに、メニューボタンを描くとき用のテンプレートを作ってみたらちょっと楽になったので記録しておきます✍

テンプレートは記事内でダウンロードできますので、よかったらご活用ください。

制作環境は、iPad Air4とAdobe Frescoです。

LINE着せかえのメニューボタンの分類

メニューボタンは、一見項目が多くて全部描くとなると大変そうなのですが、実際は共通したイラストを使っても大丈夫なところがありました。

公式の制作ガイドラインの「B メニューボタン画像」の表を確認してみると、同じアイコンを使っている項目がいくつかあることがわかります。

共通でOKのアイコンを分類してみると、共通のイラストを使っている箇所は8箇所。

それ以外の4箇所は一種類ずつイラストが使われていました。

iosとAndroidで同じ項目のメニューボタンは、同じイラストを使います。

メニューの項目とイラストの見た目のイメージが合うように作られていれば、必ずガイドラインと同じ共通項目だけ同じイラストを使わなければいけないということではなさそうです。

私は、iPadとAdobe Frescoというアプリを使って描くので、テンプレートもFrescoに手書きで書き込んでいます。

このテンプレートの目的は、共通、単独、OFF・ONのイラストの変化などの見分けを楽にすることです。

メニューボタンの項目以外に、パスコードの項目も入れちゃっています…！ズボラですみません🙇

▼ 出来上がったテンプレートを使ってみた感じ

イラストのサイズや色の調整は、LINE公式からダウンロードできるPhotoshopのテンプレートに移してから調整しました。

私はPhotoshopのテンプレート上でいきなり描くというのがどうも合わなかったので、このやり方になっています。

サイズ感や色が着せかえのスキンカラーを合うかどうかは、都度プレビューで確認して修正を繰り返すという感じだったのですが、数回作ってみるとサイズの目安が掴めそうです。

思いつきで作ったテンプレートでしたが、使ってみるとメニューボタンの構造が見やすくなってイラストのアイデアが出しやすくなりました✨

それと、アイコンのイメージが描いている途中でもパッと一覧が見れるので、全体のイメージの統一がしやすかったように思います。

何より制作にかかる時間を減らすことができたのが嬉しいです！

にしても、まだまだ効率がいいとは言い切れないです。

もっといい方法があるはず…🤔💭

他のアプリなどでも画像を取り込むことができれば使えると思いますので、よかったらお役立てください🌼

キャンバスサイズは、W1400px×H1600pxで制作しています。

使うときは、テンプレート画像の上にレイヤーを重ねてそこにイラストを描くという感じになるかと思います。

アプリによっては使えるものとそうでないものがあるかもしれませんが、グリッドガイドをつけるとサイズを揃えやすくなります…！

私もグリッドガイドをつけてイラストを描きました。

▼ ご自由にダウンロードしてお使いください

今更ですが、字が読みづらかったらすみません…！

ちなみに、今回このテンプレートを使って作ったLINE着せかえはこちらです🐰🌼

うさぎ年の一作目ということでうさぎが沢山います。

今年はぴょんっと跳ねるように楽しく、飛躍する年になる年になったらと願いを込めて作りました！

メニューボタンやパスコードは、調整を重ねてこんな感じになりました。

みなさんにとっても楽しい1年になりますように😊

今年もいろいろ作っていくぞ…！
それでは！