いいとこすぎて移住しちゃいました / LAMP壱岐
いいとこすぎて移住しちゃいました / LAMP壱岐
2015.09.04

PhotoshopでWebデザインを効率化するための便利な使い方

LIGブログ編集部
(編集部注*2014年5月29日に公開された記事を再編集したものです。)

こんにちは。LIGブログ編集部です。いつも「時間が足りない!」「忙しい」「寝たい……」と思っているデザイナーの皆さん、作業の時間短縮をしていますか?

WEBデザインを効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Photoshopを毎日使うデザイナーさんならぜひ使ってほしい、WEBデザインを効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、効率できる要素がないかぜひ確認してみてください。

目次

  1. ショートカットを使い倒そう
  2. 共通パーツはスマートオブジェクトをリンク配置しよう
  3. スライスより便利な画像アセットを使おう
  4. アクションでフォントを素早く変更する
  5. 文字スタイル・段落スタイルでテキストデザインを適用
  6. プラグインで整列・分布を楽チンに
  7. 「GuideGuide」で面倒なガイド引きを簡単に
  8. CSSからカラーを抽出して一発でスウォッチ登録
  9. PSDからテキストやフォント情報を抽出
  10. おまけ・とても大事な初期設定について

WEBデザインを効率化するPhotoshopの機能まとめ

1. ショートカットを使い倒そう

作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。

ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「あなたが知らないかもしれないPhotoshopの超絶便利なショートカット!」をご参照ください。

2. 共通パーツはスマートオブジェクトをリンク配置しよう

WEBデザインをしているとよくあるのが、苦行ともいえる共通パーツの修正。「headerを全ページ直して!」「ボタンはやっぱり全部赤にして!」といった突然の指示にも、Photoshopの新機能を使えばあっという間に対応できます。

どういう機能なの?

外部にあるファイルをリンク配置することで、1つのファイルを修正した際に全ページ自動的に修正が反映されるという優れものです(※CCのみの機能)。リンク元のファイルを更新すると、リアルタイムでリンク配置されたスマートオブジェクトも更新されるますし、外部ファイルを参照することで、1ファイルの容量を大幅に軽減することが可能となります。

リンク配置の仕方

photoshop_01

「ファイル」→「リンクを配置」で、配置したいpsbファイルやpsdファイルを選択します。

 

photoshop_02

すると、このようにスマートオブジェクトが配置されます。

 

photoshop_03

属性が「リンクされたスマートオブジェクト」と表示されていれば、きちんとリンク配置されています。レイヤーのアイコンも通常のスマートオブジェクトと異なるのでわかりやすいですね。

修正したいときには

リンク元のファイルを開いて編集すると、配置されたスマートオブジェクトが自動的に更新されます。試しに、リンク元となる「header.psd」のロゴカラーを青に変更して保存してみました。
photoshop_04

すると、保存と同時に「index.psd」にリンク配置したスマートオブジェクトもリアルタイムで更新されました。

 

photoshop_05

リンク配置したスマートオブジェクトのレイヤーを右クリックして「コンテンツを編集」からも編集が可能です。双方のファイルから編集ができるのが良いですね。

注意点

外部ファイルをリンク配置したPSDをCC以外で開いた場合、レイヤーを保持するか統合するか尋ねるダイアログが表示されます。「保持する」を選択した場合、リンク配置したスマートオブジェクトはスマートオブジェクトでないただのレイヤーになってしまうので注意しましょう。