開発コストを削減「BiTT開発」って?
開発コストを削減「BiTT開発」って?
2015.09.04

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

LIGブログ編集部

3. スライスより便利な画像アセットを使おう

MacユーザーだとSlicyというアプリを利用して画像の書き出しをされている方が多いかと思うのですが、今回PhotoshopCCに同じような機能が搭載されました。

画像アセットの使い方

photoshop_07

まず、書き出しを行いたいレイヤーに「画像名.拡張子」という形式で名前をつけます。複数レイヤーをまとめてひとつの画像として書き出したい場合は、まとめたいレイヤーをグループ化して、上記形式の名前をグループ名につけます。
photoshop_06

メニューの「ファイル」→「生成」→「画像アセット」にチェックを入れます。
photoshop_08
photoshop_09

すると、PSDのディレクトリと同階層に「PSD名-assets」というディレクトリが自動的に作られて、その中に名前をつけた画像が書き出されます。

PSDを上書きした場合は、自動的にフォルダ内の画像も作り直されます。
※ファイルは追加されていくわけではないので、レイヤーを削除してPSDを保存し直すと、以前書き出した画像も無くなってしまいます。

画像アセットの画質の指定

「画像名.拡張子」のみで特に指定がない場合、PNGは32bit(フルカラー24bit + 透明部分)、JPEGは画質80%で書き出されます。

レイヤー名の後に指定を加えることで画質などは変更できます。

JPEGアセットの画質を指定する

必要な出力画質を1~10、1%~100%のようにアセット名の最後に追加します。たとえば、JPEGの画質を100%にしたい場合は、「image.jpg10」もしくは「image.jpg100%」とつけます。

PNGアセットの画質指定

必要な出力画質を8、24、32のようにアセット名の最後に追加します。たとえば、PNG 8bitで書き出したい場合は「image.png8」のように最後に8をつけます。

GIF アセットの画質を指定する

GIFアセットでは画質パラメーターは使用できません。

出力画像のサイズ設定

相対値(%指定)または px、in、cm、mm などのサポートされている形式をアセット名の最初に追加します。これに応じて画像が拡大・縮小されます。

※接頭文字とアセット名の間には必ずスペースを追加してください。
※ピクセル指定の場合は単位を省略できます。

たとえば、Retinaディスプレイ用に2倍の大きさで出力したい場合は「200% image-retina.jpg」とします。

「250×150 image.png」のように指定すると、幅250ピクセル、高さ150ピクセルの画像が書き出されます。縦横比は指定したサイズに合わせて伸び縮みします。

1つのレイヤー・グループから複数の画像を生成する

名前を「,」で区切って複数入力すると、複数の画像を生成することができます。
photoshop_11

たとえば、Retinaディスプレイ用と通常サイズを同時に生成したい場合は「200%gnav@2x.jpg10,gnav02.jpg」のように名前をつけます。
photoshop_12

こうすることで、フォルダ内に「image-retina.jpg」「image.png」の2つの画像が生成されます。
※「200% image.png, image.png」のように同じファイル名を付けないように注意してください。後ろに書いた名前で上書きされてしまいます。

その他

photoshop_10

間違った設定をした際には、フォルダ内に「errors.txt」が作られ、間違っているファイルを教えてくれます。もしフォルダにこのファイルができていたときは、何かしらのエラーで画像が書き出されていないときなので、スルーせず内容を確認しましょう。

画像アセットの注意点

画像アセットでは、カンバスサイズからはみだした部分も書き出されてしまいます。
マスクした場合は書き出されませんので、あらかじめレイヤーやグループにマスクをかけることで解決できます。

4. アクションでフォントを素早く変更する

フォントを変更する際、毎回スクロールして探すのは大変だし、地味に時間がかかってしまいますよね。フォントを選択する操作をアクションに登録することで、楽にフォントを適用できておすすめです。

 

photoshop_13

適当なフォントレイヤーを選択した状態で、アクションの新規作成ボタンを押します。

 

photoshop_14

アクション名はフォント名などにしておくとわかりやすいです(後からでも変更できます)。

 

photoshop_15

そのまま文字ウィンドウで変えたいフォントを選択します。

 

photoshop_16

記録を終了します。

5. 文字スタイル・段落スタイルでテキストデザインを適用

フォントの種類やサイズ、行間などがスタイルとして保存でき、いつでも簡単に呼び出して使える機能です。これにより、テキストデザインの統一や使い回しが楽に行えます。

スタイル設定方法

「ウィンドウ」→「段落スタイル」にチェックを入れます。

 

photoshop_18

段落スタイルパネルが表示されたら「新規段落スタイルを作成」をクリックします。

 

photoshop_17

新しくできた「段落スタイル1」をダブルクリックします。

 

photoshop_19

スタイルの設定をします。細かい設定もできるのがうれしいところです。

他のPSDドキュメントにスタイルを適用する

文字スタイルと段落スタイルは他のPSDには継承されません。

他のドキュメントで同じ設定を使用したい場合は、過去に作ったスタイルを読み込む必要があります。
photoshop_21

パネルオプション→「文字(段落)スタイルを読み込み」をクリックします。

 

photoshop_20

適用したい文字スタイルのあるPSDを読み込みます。

6. プラグインで整列・分布を楽チンに

「整列」や「分布」の機能を使うには、メニューから選択するか、わざわざ「移動ツール」に切り替えてオプションバーから選択するかのどちらかでした。プラグインを入れることで、どのツールにしていても「整列」や「分布」を利用できてとても便利です。

整列・分布パネルのインストール

  1. 後述する整列・分布パネル配布元のサイトからファイルをダウンロードして、解凍します。
  2. 下記フォルダ内に、先ほど解凍したフォルダをまるごとコピーします。
    ※「Panels」フォルダが存在しない場合は自分で作成してください。
    Windows : C:¥Program Files¥Adobe¥Adobe Photoshop CC¥Plug-ins¥Panels
    Mac : Macintosh HD/Applications/Adobe Photoshop CC/Plug-ins/Panels
  3. Photoshopを再起動します。
  4. 「ウィンドウ」→「エクステンション」内に「整列・分布」と表示されていればインストール成功です。

整列・分布パネル配布元:Photoshopの整列・分布パネルを作りました(CS6/CC用)

対応バージョン(2015年9月現在):CS6 / CC

インターフェース

photoshop_32

「移動ツール」にしたときにオプションバーに表示されるものとほぼ同じ感じですが、「カンバス中央に整列」という機能があるのが特徴です。カンバス中央にしたいときって結構多いんですが、地味に面倒ですよね。でもこれを使うとワンクリックで揃いますよ。

2