このページの本文へ

急な依頼もこれで大丈夫!

動画:Photoshopで共通パーツを効率よく作る方法

2014年05月07日 13時00分更新

石嶋未来 + 神速デザイン編集部

  • この記事をはてなブックマークに追加
本文印刷

 「この間のデザインカンプだけど、やっぱりヘッダーの色を変更したいって。もう1回作り直してもらえる?」。えー、そこはもうFIXしたはずなのに……。そんなときも大丈夫。ヘッダーなどの共通パーツは、Photoshop CCの「リンクを配置」で作っておけば、一発で修正できちゃいます。

 以下はそのムービー。

トップページのヘッダーを共通パーツの画像として[ファイル]→[リンクを配置]で各ページに配置します。元の画像を青地に変更すると、自動的に各ページに配置された画像が変更されます。画面右下は、作業中のキーボード、マウス操作画面

1.png

4.png
上の図ヘッダー部分を切り出し別ファイルにしてリンクを設定したあと、カラーを変更すると自動的に下の図ようにヘッダーの色が変わる

 1つの画像をファイルを変更すれば、該当ページの画像すべてが自動的に変更されます。

 Photoshop CC(14.2)では、IllustratorやFireworksのように、別の画像ファイルをPhotoshopドキュメントにリンクできるようになりました。共通要素を別ファイルにすることで、修正や差し替えがラクにできます。

 面倒で時間がかかる単純作業は、便利な機能でサクサク済ませて時間短縮。余った時間はクリエイティブなことに使いましょう。


詳しい解説は『神速Photoshop[Webデザイン編]』で!

 『神速Photoshop[Webデザイン編] CC対応』は、忙しいプロのWebデザイナーのための時短テクニックを集めた本。記事で紹介した神速テクニックは、テクニック39『共通パーツをリンク配置して修正にスピード対応』(執筆=庄崎大祐氏)。これ以外にも、Webデザインに特化した基本的設定から、すばやいスライス方法、カンプの効率的な作成方法、ボタンやバナーのバリエーションをラクに作る方法まで、89本のテクニックを解説しました。人間わざとは思えないほど速い「神速<しんそく>テクニック」で、もっと“速いWebデザイナー”を目指してみませんか?

shinsoku_psw-cover.jpg
『神速Photoshop[Webデザイン編] CC対応』

神速Photoshop[Webデザイン編] CC対応

  • イシジマミキ、庄崎大祐、鈴置菜津女、鴇﨑亘、橋本和宏、ハマダナヲミ、細川富代 著
  • 定価:2,700円+税
  • 発売日:2014年3月26日
  • 形態:B5変型 (272ページ)
  • ISBN:978-4-04-866203-1
  • 発行:KADOKAWA

Web Professionalトップへ

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く