![見出し画像](https://assets.st-note.com/production/uploads/images/95068231/rectangle_large_type_2_ce0b474c00ed110c48f59c9ba1299608.png?width=800)
UIデザイナーのメモ帳(3)
レイヤーカンプを使おう
UIデザイナーにとって超絶便利なPhotoshopの機能です。
レイヤーカンプ
簡単に言うと「表示を切り替えられる」機能です。あらかじめ設定しておくと、下記のように表示を切り替えることができます。
![](https://assets.st-note.com/img/1673056684709-iOVJQRq2MO.png)
![](https://assets.st-note.com/img/1673056714802-j9JTuYThMs.png)
変わりました。
同じように他も切り替えてきます。
![](https://assets.st-note.com/img/1673056397933-kzKgxIAEiL.png)
他にもボタンの状態を変えたりもできます(アクティブ/ディセーブル/選択中)。
![](https://assets.st-note.com/img/1673057323380-MyAdB4oT0j.png)
画面全体の表示も切り替えられます(例:通常画面、金額不足時、確認画面など)。
作り方は簡単。色々な状態をレイヤーの表示非表示で作っておいて、各表示を登録するだけです。
【作り方1(画面全体)】
① 各状態をレイヤーごとに分ける
ここでは下記のように分けてみました。
・「OK」に選択されているレイヤー
・「CANCEL」に選択されているレイヤー
・「OK」がディセーブル状態
![](https://assets.st-note.com/img/1673060436525-VNvhQxpa8C.png?width=800)
② 現在の画面を新規レイヤーカンプで登録する
![](https://assets.st-note.com/img/1673060718924-Vfh7KtIp8j.png)
![](https://assets.st-note.com/img/1673060848726-gLoBRQtKvT.png)
レイヤーカンプ名を付けて決定すると、現在見えている表示が登録されます。
③ 表示を切り替えながら、全部登録したら完成
![](https://assets.st-note.com/img/1673061362166-5OV9MGSk4y.png)
![](https://assets.st-note.com/img/1673061388273-789WY8SG0P.png)
左側の赤い部分を押すと、画面が各表示に切り替わります。
※登録した内容を変更したい場合
下記のボタンを押すと、現在見えている表示に更新されます
![](https://assets.st-note.com/img/1673061862407-VPbXoF28fI.png)
【作り方2(アイコンなど)】
アイコンやボタンなど細かいものを切り替えたい場合。
① スマートオブジェクト化する
![](https://assets.st-note.com/img/1673145392129-02PKuJsI5d.png?width=800)
今回は属性アイコンをスマートオブジェクト化しました。
② スマートオブジェクト内で各属性アイコンをレイヤー分け
③ スマートオブジェクト内でレイヤーカンプを登録
【作り方(画面全体)】と同じ方法で登録します。
④ 元の画面に戻り、プロパティをチェック
元の画面に戻ったら、該当のスマートオブジェクトを選択した状態でプロパティを確認してください。
![](https://assets.st-note.com/img/1673145799418-EzPepsCd3P.png)
「レイヤーカンプを適用しない」という項目があると思います。
そこを開くと、登録したレイヤーカンプが選択できるようになっています。
![](https://assets.st-note.com/img/1673145906743-EfK6ie52HQ.png)
表示が切り替わったら成功です!
【補足】
画面全体の表示で、画面内のスマートオブジェクトのレイヤーカンプも含めて切り替えたい場合は、
![](https://assets.st-note.com/img/1673146307648-3zDq9Mc99r.png)
ここにチェックを入れると良いです。
もしくは赤枠のアイコンをONにするでも同じです。
![](https://assets.st-note.com/img/1673146416439-z2wzRWcphQ.png)
位置やレイヤースタイルなども適用できるので色々試してみてください。
この記事が気に入ったらサポートをしてみませんか?