Photoshopで特定のレイヤーを別ファイルにする

この記事は鷹野雅弘によって執筆されました。
公開日:2015年3月27日、更新日:2015年7月 6日

PSDファイルのリンク配置

Photoshop CCでの最大の進化は、PSDファイルのリンク配置が可能になったことだと思う。特にWeb制作のワークフローにおいてこれは画期的。

「ペライチ」的なWebページが増えつつあるが、やはり、Webサイトは複数ページで構成されることが多い。一方、Photoshopには、Illustratorの複数のアートボードのように「複数のカンバス」機能がない。レイヤーカンプを使って“やりくり”することはできるが、やはり、カンバスそのものの大きさをIllustratorのように変えることはできない。

Webページはページによって縦方向の長さが変わることはもちろん、マルチデバイス対応を想定すると、単純にPC/タブレット/スマホといった大きさ変更はもちろん、タブレットとスマホの場合には、縦置き/横置き(ポートレート/ランドスケープ)にも対応しなければならない。

とりあえず、複数ページに話を戻そう。Webページの場合、ページ上部には「サイトID(ロゴ)」「ナビゲーション」、ページ下部には「フッター」といった共通パーツが存在する。構造によっては共通の「サイドバー」が存在することもある。これらを別ファイルにしてリンク配置することでファイル容量の節約になるだけでなく、一括置換が可能になる。これはワークフロー全体が変わる大革命だ。

なお、リンクファイルは「パッケージ」機能によって収集できる。リンク配置を行う場合には、受け取った相手が困らないように「パッケージ」機能を必ず使うように習慣づけたい。リンクファイルがないと次のようなアラートが表示される

特定のレイヤーを別ファイルにする

「リンク配置」のワークフローについて考えてみよう。たとえば、ナビゲーション部分を最初から別ファイルで作ることことは考えにくい。おそらく、基本となるページを作りこんでから、リンクしたいパーツごとに別ファイルにするだろう。

そこで、考えたいのが「特定のレイヤーを別ファイルにする」方法。これには3つの方法がある。

  • [A]リンクされたアイテムに変換
  • [B]レイヤーを複製
  • [C]スクリプト「ぶっこ抜き」を使う

結論からいうと、ワークフロー上、優れているのは[A]だが、それぞれを解説していこう。

保存形式再リンクカンバスサイズファイル名
リンクされたアイテムに変換PSB/PSDOKフィットレイヤー名が使われる
レイヤーを複製PSDNG元のまま入力する
スクリプト「ぶっこ抜き」PSDNGフィット名称未設定

リンクされたアイテムに変換

  1. 別ファイルにしたいレイヤー(またはレイヤーグループ)をスマートオブジェクトに変換する
  2. [属性]パネルに表示される[リンクされたアイテムに変換]ボタンをクリックする
  3. [保存]ダイアログボックスが開くので、書き出し先、ファイル名を指定する

このとき、拡張子は「.psb」になる。「.psd」に強制的に変更することは可能。

[属性]パネルでリンク先の“パス”を確認できる

レイヤーを複製

  1. 別ファイルにしたいレイヤー(またはレイヤーグループ)を選択し、コンテキストメニューから[レイヤーを複製]をクリック([レイヤー]メニューの[レイヤーを複製]でもOK)
  2. [グループを複製]ダイアログボックス(または[レイヤーを複製]ダイアログボックス)が表示されるので、[保存先]の[ドキュメント]に「新規」を選択し、[名前]にファイル名を入力する
  3. 新しいドキュメントが作成されるので保存する(カンバスは元のドキュメントと同じサイズ)
  4. 別ファイルにしたレイヤーは残ったままなので削除し、別ファイルをリンク配置を行う

スクリプト「ぶっこ抜き」を使う

Dearpsからスクリプトをダウンロードします。

このスクリプトを実行します。以上。

  1. 抜き出したコンテンツは「名称未設定」になっているので、任意の場所にファイル名を設定して保存する
  2. また、別ファイルにしたレイヤーは残ったままなので削除し、別ファイルをリンク配置を行う

Photoshopでのスクリプトの実行

  • 所定の位置にスクリプトファイルを移動してPhotoshopを再起動。[ファイル]メニューの[スクリプト]のサブメニューの表示されるのでクリックして実行する
  • [ファイル]メニューの[スクリプト]→[参照]をクリック。スクリプトファイルを選択して実行(スクリプトファイルがどこにあってもよい)

セミナーを開催します。

『Webデザインの現場ですぐに役立つ Photoshop仕事術』の出版記念を兼ねたセミナーを開催します。

Adobe Creative Stationで「ベテランほど知らずに損してるPhotoshopの新常識」と題して連載しています。

『10倍ラクするPhotoshop仕事術』

2016年に発売予定。

お知らせメール登録

『Webデザインの現場ですぐに役立つ Photoshop仕事術』

2015年3月『10倍ラクするIllustrator仕事術』の兄弟本としてソシムから発売。

  • 1章 制作をはじめる前に(鷹野 雅弘)
  • 2章 Photoshop CC以降でのカンプ作成のベストプラクティス(黒葛原 道)
  • 3章 モバイルにも通用するデザインカンプ制作のイロハ(牧下 浩之)
  • 4章 効率化のためのTips(三浦 将)
  • 5章 見落としがちな基本機能(鷹野 雅弘)

書名の通り、Web向けの内容です。

『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』(増強改訂版)は、2011年発売の『10倍ラクするIllustrator仕事術』の改訂版。2014年に技術評論社から発売、現在5刷です。2011年版と合わせて35,000部のロングセラーとなっています。

詳しくはサポートサイトにて。

画像:『10倍ラクするIllustrator仕事術』改訂版

『10倍ラクするIllustrator仕事術』全都道府県縦断セミナーツアー、 47都道府県すべての県での開催が終了しました。ご参加ありがとうございました!

画像:『10倍ラクするIllustrator仕事術』改訂版

5つの「く」

画像:『10倍ラクするIllustrator仕事術』改訂版

DTP Transitのコアとなっている制作へ考え方「ムラなく、モレなく、直しに強く、手数を少なく、美しく」を5つの「く」としてまとめてみました。

オススメのスライド

お問い合わせ

メールマガジン

サイトの新着情報などを、月1回程度、メールマガジンでも配信しています(まぐまぐから配信。無料です)

オススメ記事

Illustrator

InDesign

Photoshop

その他

 

リンク

このページの上部に戻る