自作ツール&スクリプト

【Photoshop】リンクを配置!リンクされたスマートオブジェクトでUI素材とレイアウトを作成する方法

「リンクを配置」機能の存在は知ってたけど、ちゃんと使ったことなくて今まで損してました。

リアルタイム更新はもちろん、レイヤーカンプも読み込めるので、うまく使えばかなり効率化できそうです。

[基本]リンクを配置

ファイル>「リンクを配置」から画像を配置。

Photoshopで開いている時に素材を差し替えると自動で更新されます。

開いていない時に素材を差し替えて、データを開くと更新されていない場合は、「!」マークが点灯しています。 
その場合はレイヤーを右クリックして、「変更されたすべてのコンテンツを更新」ボタンを押すと更新されます。



リンクされたスマートオブジェクトでの画像配置

  • UIパーツを作成(PSD)

  • レイアウト(PSD)も作成
  • ファイル>リンクを配置からUIパーツを読み込み(属性ウインドウから状態確認できる)

  • 複製して並べたり

  • UIパーツの(PSD)の修正。色を青に

  • レイアウトもリアルタイムで修正が反映



参考

PhotoshopでWebデザインを効率化するための便利な使い方 | 株式会社LIG



応用

UIパーツ(PSD)で複数UIパーツを作成してレイヤーカンプで登録しておけば、レイアウトの方で切り替えることもできます。

www.youtube.com



画像アセットの紹介

「画像アセット」もそうですが、CCの機能はちゃんと知っておいたほうが良いです。
【Photoshop】書き出し超便利!「画像アセット」機能の使い方と注意点


以上、すいみん(@cg_method)でした!