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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

画面

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

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

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

(1)ナビパーツをデザイン
01
(2)完成したらレイヤーパレット上でナビを構成するすべてのレイヤーを選択し[レイヤー] メニューの [スマートオブジェクト] /[新規スマートオブジェクトに変換]を選択します。またはレイヤーパレットで右クリックで[新規スマートオブジェクトに変換]を選択する。
02
(3)これを親としてインスタンスを必要数複製します。
レイヤーを選択し [レイヤー] メニューの [レイヤーを複製] を選択します。
または、スマートオブジェクトのレイヤーを、[レイヤー] パレットの下部にある [新規レイヤーを作成] アイコンにドラッグかAltを押しながら複製でも可。
03
(4)これで複製されたスマートオブジェクトは1つに対して変更を加えると、複製された全てのスマートオブジェクトにも編集内容が反映されるようになります。

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。