WEBデザイン

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

ピックアップ記事

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

関連記事

  1. WEBデザイン

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

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

  2. WEBデザイン

    「いらすとや」の素材を使ってマンガを作成しよう!

    どうも、イラスト大好きのぐっさんです。約1週間ぶりの記事更新となりますが、引き続き宜しくお願いします。このブログを読んでいるあなたは「いら…

  3. WEBデザイン

    投稿記事を複製しよう!Duplicate Postの使い方

    おはようございます、気圧にずっとやられています、ふきちゃんです。気象病を紛らわすために薬を飲むと今度は眠くなって寝てしまうし、Dead or De…

  4. WEBデザイン

    【illustrator】簡単トレース方法

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

  5. WEBデザイン

    ブログ内のリンク切れをチェックしよう!Broken Link Checkerの使い方!

    おはようございます、最近のお気に入りはYogi TeaのSkin DeToxです。ハーブティーですが、効果のほどは不明なので気休めに飲んでます。…

  6. WEBデザイン

    SNS共有ボタンを設置しよう!WP Social Bookmarking Lightの使い方!

    おはようございます、これを書いている間5回はchromeのブラウザが落ちたふきちゃんです。WordPressで記事を書いていると勝手に記事を下書き…

コメント

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

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

CAPTCHA


最近の記事

  1. レポート

    さくさく進める勉強会準備
  2. HTMLコーディング

    tableをCSSのみでレスポンシブ対応にする方法
  3. WEBデザイン

    Photoshopで水彩風画像を作成してみよう
  4. WEBデザイン

    よく見る方眼紙のようなパターンの作り方
  5. Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法

    WEBデザイン

    Photoshopで手軽に 人物の髪の毛をキレイに切り抜く方法
PAGE TOP