このページの本文へ

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

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

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

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

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

 以下はそのムービー。

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

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対応』

Amazon初回限定、特製「キーボードショートカットシール for Mac」プレゼント

 キーボードに貼り付けると作業がもっと速くなる! Photoshopのショートカットキーをまとめたシールを、Amazon.co.jpで本書を購入された方限定で差し上げます。キーボードからはがしてもノリが残りづらく、MacBookの黒いキーボードでも、はっきりと見える親切設計のシールです。先着1000冊限定、なくなり次第終了ですので、お早めにご購入ください。

特製「キーボードショートカットシール for Mac」プレゼントは終了しました

-->

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

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

Web Professionalトップへ

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