Dearps ～Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです～

2008年12月07日（日）

Adobe Photoshop
「スマートオブジェクト」活用法

WEBサイトのナビゲーション等を作る際のスマートオブジェクト活用法

スマートオブジェクトというとPhotoshop 上で写真やIllustratorのベクトルデータなどのデータの画質を劣化させずに拡大縮小、変形、移動する機能としてしられています。
その機能に隠れてあまり知られていないようですが [スマートオブジェクト]でFlashやFireworksにあるようなシンボルとインスタンスの親子関係をもったパーツををつくることができます。
WEBサイトのナビゲーション等同じパーツが連続するものをデザインする際は[スマートオブジェクト]を活用することによってメンティナンス性が向上します。

【インスタンスの作り方】

(１)ナビパーツをデザイン

(２)完成したらレイヤーパレット上でナビを構成するすべてのレイヤーを選択し[レイヤー] メニューの [スマートオブジェクト］ ／［新規スマートオブジェクトに変換］を選択します。またはレイヤーパレットで右クリックで［新規スマートオブジェクトに変換］を選択する。

(３)これを親としてインスタンスを必要数複製します。
レイヤーを選択し [レイヤー] メニューの [レイヤーを複製] を選択します。
または、スマートオブジェクトのレイヤーを、[レイヤー] パレットの下部にある [新規レイヤーを作成] アイコンにドラッグかAltを押しながら複製でも可。

(４)これで複製されたスマートオブジェクトは１つに対して変更を加えると、複製された全てのスマートオブジェクトにも編集内容が反映されるようになります。

※[レイヤー] メニューの [スマートオブジェクト]/ [スマートオブジェクトを複製]を選択すると関係を切った独立したスマートオブジェクトとして複製することができます。

参考用にサンプルPSDデータを用意しましたので下記からどうぞ。

Tweet