CGメソッド

CG制作に関してのヒント

MENU

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

f:id:min0124:20160828093050p:plain

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

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

「画像アセット」もそうですが、CCの機能はちゃんと知っておいたほうが良いです。

min.hatenablog.jp

やり方

  • UIパーツを作成(PSD)

f:id:min0124:20161118080909p:plain

  • レイアウト(PSD)も作成

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

f:id:min0124:20161118081001p:plain:w300

  • 複製して並べたり

f:id:min0124:20161118080921j:plain:w300

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

f:id:min0124:20161118081106p:plain

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

f:id:min0124:20161118081135p:plain:w300 

参考

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

応用

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

www.youtube.com