こんにちは、デザイナーのまきこです。
クリスマスイブはハロプロのイベントに参戦することが無事きまって、ほくほくしています。
さて今回は、PhotoshopでWebサイトをデザインするときにいつも使っている便利な機能、ショートカット、プラグインなどのTipsをご紹介します。新しいもの好きでめんどくさがりなわたしが実際に使っているものなので、便利さや手軽さはそれなりに信頼できるはず！ まずはデフォルトの機能からいってみましょう！
目次
使わないともったいない！デフォルト機能
1. Creative Cloud ライブラリ
PhotoshopというよりAdobeCreativeCloudの機能なんですが、よく使うカラー、文字スタイル、レイヤースタイルなどをライブラリに追加し、管理・共有できるというもの。わたしはプロジェクトごとにライブラリをつくって、文字スタイルには「本文」「h1」「注釈」のような名前をつけて管理したりしています。共有リンクも簡単に生成できる上にhtml上できれいに一覧化してくれるので、ちょっとしたデザインガイドラインのように使用することもできますよ〜！
△ 共有リンクはこんなかんじの見た目に生成されます
ここが便利！
- 新規のオブジェクトにすばやくデザインルールを適用できて、デザインのブレも防げる
- 共同作業するデザイナーやエンジニアに、デザインルールを共有しやすい
- SNSのロゴやブランドカラーなど、よく使うアセットを登録したライブラリを準備しておくと、いちいち調べなくてもよくなる
- 既存のPSDをもとに自動でライブラリを作ることもできるから、プロジェクトの進行途中でも導入できる
- Illustratorなど、Adobeの別アプリでも同じライブラリが使える
- 参考リンク
- Creative Cloudライブラリ
2. Device Preview
わたしは、この機能なしでスマホサイトのデザインするなんて考えられません！ PhotoshopCC 2015あたりから実装された、PSD上のデザインカンプをiPhoneなどの実機でリアルタイムに確認できるというハイパー便利な機能です。iOSデバイスに専用のアプリをインストールし、Wi-fiかUSBでPhotoshopを起動しているPCと接続するだけでOK。USB経由のほうが安定するのでオススメです。
ここが便利！
- PSDのデザインを、iPhoneなどの実機ですぐに確認できる
- PSDに変更を加えると、実機上の表示にもすぐに反映されるからデザインの微調整もラクになる
- お客さんの前で使うと、自分はすごくなくても「おお！すごい！リアルタイムで変わってる！」と驚いてもらえる
3. ガイドレイアウト
「GuideGuide」などの拡張機能をつかわずに、左右マージンやカラム、ガターなどを指定した複雑なガイドを引くことができる機能です。わたしはデザイン中にマージンサイズやカラム数によく迷うので、ササッとガイドを引いてくれるこの機能にすごく助けられています！
ここが便利！
- マージン、行や列の数・幅・間隔を指定したガイドをすぐに引けて、引きなおすことも簡単
- 「120pxのオブジェクトを4列で並べるなら、間隔は何pxにしたらいいの？」といった計算を自分でしなくてすむ
- よく使うガイドレイアウトをプリセットに登録しておくと、使いまわしもラクにできる
カスタマイズで効率化！キーボードショートカット
4. レイヤースタイルのコピー&ペースト
Fireworksでいう「属性のコピー&ペースト」みたいなことをショートカットでやりたくて登録しました。ショートカットに登録しておくと、「レイヤーパネルでレイヤーを探して右クリックして……」というわずらわしさから解放されて、カンバスで複数のオブジェクトを選んでレイヤースタイルを適用するといった直感的な操作がしやすくなりますよ！
| レイヤースタイルのコピー | Opt+Shift+Cmd+C |
|---|---|
| レイヤースタイルのペースト | Opt+Shift+Cmd+V |
| レイヤースタイルを消去 | Opt+Shift+Cmd+X |
5. スマートオブジェクト
可逆処理と一括変更で幸せになれる、みんな大好きスマートオブジェクト。私も隙あらばスマートオブジェクト化したいので、ショートカットに登録しています。そして、気軽にスマートオブジェクトを作っていると同じように気軽にスマートオブジェクトを解除したくなるので、解除のスクリプトを読み込んでショートカットキーを割り当てました。
| スマートオブジェクトに変換 | F1 |
|---|---|
| スマートオブジェクトを複製 | Opt+F1 |
| スマートオブジェクトを解除 | Shift+Cmd+F1 |
- 参考リンク
-
スマートオブジェクトを解除するステキなスクリプトの配布元はこちら
blog.darkwark.comcreative memomemoさんの参考になる記事はこちら
Photoshopでスマートオブジェクトを元のデータに素早く戻す方法(スクリプト使用)
6. 整列
整列関係のショートカットは、Opt+Cmd+テンキー、などで設定している人が多そうですよね。わたしの場合は、テンキーの位置が押しづらい上に、どの整列をどの数字に割り当てたか覚えられなかったという悲しい経験があり、Top/Bottom/Right/Left/Horizontal/Vertivcalの頭文字にしています。
| 上端揃え | Opt＋Cmd＋T |
|---|---|
| 下端揃え | Opt＋Cmd＋B |
| 左端揃え | Opt＋Cmd＋L |
| 右端揃え | Opt＋Cmd＋R |
| 垂直方向中央揃え | Opt＋Cmd＋V |
| 水平方向中央揃え | Opt＋Cmd＋H |
ほしかった機能を強化！プラグイン、スクリプト
7. Bootcomp
BootStrap使用サイトをデザインするときのためのエクステンションとのことですが、どんなサイトをつくるときでも便利に使える機能がパネルいっぱいにつめこまれていて、無料とは思えない充実感！ 特に「ガターサイズを空けて複製」のボタンは、よく使っています。
（でも、Photoshop2017にアップデートしてから私の環境では上手く使えなくなったりしてます……）
ここが便利！
- オブジェクトを等間隔で複製する操作がすごくラクになる
- 50px、30pxといった単位の移動がワンクリックでできる
- AdobeXDっぽく画像を一括で配置できたりもする
- 参考リンク
- くわしい機能や使い方は、配布元のDearpsさんのサイトから
Bootcomp
8. LayerRenamer
デザインしながらレイヤー整理をするのが苦手で、デザインFIXしてから整理したい…そんなわたしの強い味方！適当につけられた複数のレイヤーの名前を、サクッと一括で変更できるスクリプトです。名前を変更したいレイヤーをひとつまたは複数選択して、レイヤー名を置換したり、前後にテキストを追加したりできるから、面倒なレイヤー整理の作業も高速化できますよ！
ここが便利！
- レイヤーをいちいちひとつずつ命名する手間が省ける
- レイヤーパネルの検索と組み合わせるとさらに使いやすい
- 参考リンク
-
ステキなスクリプトの配布元はこちら
blog.darkwark.comhttp://cubelic3.jp/rename/さんの参考になる記事はこちら
【Photoshop】レイヤー名を一瞬で一括変更する方法
おまけ
他の人の作業環境を見るのってけっこう面白いので、頼まれてもいないのにわたしのPhotoshopのワークスペースを大公開しておきますね！ こんなかんじで各パネルを開いています。
わたしはふだん、メインモニタのiMac27インチいっぱいにPhotoshopのウィンドウを広げ、サブモニタにチャットワークやWebブラウザや資料などを表示させて作業しています。iMacはディスプレイが広大すぎて画面左のほうまでマウスを動かすのがつらいので、ツールバーなど主要なウィンドウは右側に寄せてるんですよ。でも、絶対もっといい配置がある気がしています……！
最後に
今回ご紹介した中に、みなさんが試したことのないTipsはありましたか？ どれも導入するのにそんなに時間がかからないので、ぜひ取り入れてみてくださいね！
2016年も残り少なくなりましたが、よいPhotoshopライフをお送りください。
それでは、また！
まきこでした。
キャリアアップ
「Studio上野でWebクリエイターを目指す！」
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
