WEBデザイン

【Photoshop】レイヤーを上手く使い回そう Vo.2リンクオブジェクト編

どうも僕です、テイクフォー谷口です。
ここ週末2週連続で悪天候が続きますね。来週は週末が3連休になっているので、どうにか晴れになって欲しい気持ちです。

さて、レイヤー使い回し術について前回は「スマートオブジェクト編」をご紹介しましたが、今回は「リンクオブジェクト」による方法をご紹介します。
リンクオブジェクトは外部からPhotoshopデータを呼び出し、そのデータを一つのレイヤーとして扱う機能です。

リンクオブジェクトの作成

今回も引き続きこのデザインを用いながら説明していきます。
ページデザイン
まずナビゲーションのレイヤーグループ(gnav)を選択し、新規PSDデータとしてグループを複製します。
レイヤーグループ(gnav)を選択し、新規PSDデータとしてグループを複製し保存


このPSDデータを『gnav』と名前をつけて保存します。

保存が完了したら、ウィンドウを閉じます。

リンクオブジェクトの設置

ページデータに戻り、基にした「gnav」のグループレイヤーを削除します。
先程作成した「gnav」のPSDデータを設置します。
メニューバー:ファイル>リンクを配置

外部PSDデータを一つにしたレイヤーが設置されました。

(レイヤーのサムネイルはリンクオブジェクト仕様になります。)
リンクオブジェクトレイヤー

リンクオブジェクトの編集

リンクオブジェクトを編集する場合、スマートオブジェクトと同様にレイヤーのサムネール部分をダブルクリックします。
クリックするとリンクオブジェクトの新規ウィンドウが開きますので、編集した後保存して終了します。
(ここでは「HOME」のボタンの文字を「TOP」に変更します。)

すると先程の編集がリンク先に反映されます。

今回はページデザインデータは一つでしたが、例えば今後これを基にした下層ページを作成した際、もし後から変更が必要になったとしても、リンクしている全てのデータは一括で変更することが可能です。
またリンクオブジェクトとスマートオブジェクトを組合せることも出来ますので、これらの機能を上手く利用しながらPhotoshopの作業を進めていきましょう。

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編

    どうも僕です、テイクフォー谷口です。季節もいよいよ秋到来ですね。ただこの時期はまだ昼と夜の寒暖差があるので、体調管理には注意したいものですね。…

  2. WEBデザイン

    【illustrator】簡単トレース方法

    こんにちは!ゆかちんです(^^)/あっという間に寒くなってきましたね。コーヒーが美味しい季節です。グランフロントの中にあるDOWNSTAIRS…

  3. WEBデザイン

    問い合わせフォームを追加しよう!Contact Form 7の使い方!

    おはようございます、最近はインスタグラムのおすすめ動画でひたすらポメラニアンの子犬の動画を見てひたすら癒されているふきちゃんです。韓国だけかはわか…

  4. WEBデザイン

    Photoshopでオシャレなネオンサインのような文字を作る方法

    おはようございます、新入社員のふきちゃんです!私はライブハウスに行くのが好きなのですが、バーカウンターに飾られてるレッドブルやハイネケンのネオ…

  5. WEBデザイン

    よく見る方眼紙のようなパターンの作り方

    おはようございます、ふきちゃんですふきちゃんです、と書いている時高確率で安田大サーカスのクロちゃんで再生されております、小春日和のうららかな季節で…

  6. WEBデザイン

    【Photoshop】ボタントレース方法

    こんにちは。ゆかちんです!すっかり寒くなってきましたね。ローソンのMACHIcafeで買ったココアがカップかわいくってほっこりします。入社…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使…
  2. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム…
  3. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法
  4. WEBデザイン

    問い合わせフォームを追加しよう!Contact Form 7の使い方!
  5. HTMLコーディング

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの…
PAGE TOP