LINE自作着せ替え作成方法-パスコード画像OFF


LINEクリエイターズ着せ替え制作も『パスコード画像(ON)』で一気に8枚進んだので、49枚中19枚の画像制作が終わりました。

今回の『パスコード画像(OFF)』も簡単に8枚作れちゃうので、ささっと制作しちゃいましょう!




LINEクリエイターズ着せ替え『パスコード画像(OFF)』の着せ替え画像は、『パスコード画像(ON)』を元にして制作します。

前回の繰り返しになりますが、『パスコード画像』とは、4桁のパスコードを入力するときに、今何桁目を入力しているのかわかるように表示されるアイコンのことです。

入力した桁のアイコンが『パスコード画像(ON)』で、まだ入力していない桁のアイコンが『パスコード画像(OFF)』です。

つまり、最初は未選択時のアイコン『パスコード画像(OFF)』が4つ表示され、1桁入力するごとに選択時のアイコン『パスコード画像(ON)』に変わっていきます。

これも前回の繰り返しですが、『パスコード画像』は16個も作りますが、イラストの種類としてはたった2種類だけで完成します。

ここで作業時間を短縮すれば一気に制作が進みますので、ささっと作ってしまいましょう!

では、『パスコード画像(OFF)』の制作ガイドラインを確認します。

iOS用
横120px × 縦120px
ファイル名『i_12.png』『i_14.png』『i_16.png』『i_18.png』
Android用
横116px × 縦116px
ファイル名『a_12.png』『a_14.png』『a_16.png』『a_18.png』
共通のガイドライン
4桁を1種類の画像で表示、または4種類の画像で表示する方法がある
未選択時(OFF)と選択時(ON)の2パターンが必要

『パスコード画像(ON)』では、4種類のイラストを作る方法と1種類だけにする方法があり、時短と審査合格率向上のために1種類にして制作しましたが、『パスコード画像(OFF)』はそもそも1種類のみでOKです。

イラストの内容は、『パスコード画像(ON)』のイラストを単色で塗りつぶすだけでOKなので、あっという間にできます。

塗りつぶす色は、着せ替え登録時に指定するカラースキンとの関係を考えて設定するようにしましょう。

もちろん、塗りつぶさなくても、色を暗くするとか表情を変えるとかいうような手法もありだと思いますが、審査を短期間で確実にパスするには、制作ガイドラインのサンプルに合わせるのが一番安心です。

もし違う手法で作る場合は、ONとOFFであることが明確にわかるようなイラストにすることを意識すことが大事です。

なお、『パスコード画像(ON)』と『パスコード画像(OFF)』の画像を切り替えたときに画像の位置がずれないように、ひとつのファイルでレイヤー分けして実際にONとOFFの表示切替をしてみてからPNGファイルに書き出すことをおすすめします。

制作方法は、前回同様に、iOS用は、最初に『i_12.png』を作り、それを3つコピーしてファイル名をそれぞれ『i_14.png』『i_16.png』『i_18.png』にするだけです。

そして、Android用は、『i_12.png』を116px四方にリサイズして『a_12.png』のファイル名で保存し、それを3つコピーしてファイル名をそれぞれ『a_14.png』『a_16.png』『a_18.png』にするだけ。

これで8枚一気にできてしまいます。

私が制作した画像がこちらです。

iOS用
LINE自作着せ替え作成方法-パスコード画像OFF制作方法、作成例 LINE自作着せ替え作成方法-パスコード画像OFF制作方法、作成例 LINE自作着せ替え作成方法-パスコード画像OFF制作方法、作成例 LINE自作着せ替え作成方法-パスコード画像OFF制作方法、作成例
i_12.png i_14.png i_16.png i_18.png
120×120 120×120 120×120 120×120
Android用
LINE自作着せ替え作成方法-パスコード画像OFF制作方法、作成例 LINE自作着せ替え作成方法-パスコード画像OFF制作方法、作成例 LINE自作着せ替え作成方法-パスコード画像OFF制作方法、作成例 LINE自作着せ替え作成方法-パスコード画像OFF制作方法、作成例
a_12.png a_14.png a_16.png a_18.png
116×116 116×116 116×116 116×116

8枚ともすべて同じイラストで、iOS用とAndroid用でサイズが違うのみです。

解像度は72dpi以上、カラーモードはRGB、背景透過のPNG形式、ファイルサイズは1MB以下で制作するのは他の画像と同じです。

これでなんと49個中27個の画像制作が終わりました。

もう半分以上終わりましたよ!

次回は、『メニュー背景画像』の制作について解説します。




ガイドラインの詳細やクリエイター登録はLINE Creators Marketへ。

※ここで紹介している作成例は、あくまでひとつの例です。このとおりに制作しても審査で承認される保証はありません(まして売れる保証はありません)のでご了承ください。

Share