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

December 7th, 2008


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

【インスタンスの作り方】
(1)ナビパーツをデザイン

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

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

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

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

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

Posted in WEBデザイン

-->

About Lovwar窶冱 Design Note

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam justo tortor, dignissim non, ullamcorper at, lobortis vitae, risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Aenean mi pede, dignissim in, gravida varius, fringilla ullamcorper, augue