WEB制作に役立つ！Photoshop効率化ノウハウ
2017.11.24
こんにちは。あっという間に年末がやってきましたね。年末締めの案件にデザイナーさん達は 忙しくしていることと思います。今日はそんなデザイン業務で多忙なデザイナーさん達に役立つ、photoshopの効率化ノウハウを紹介します！
ショートカット機能を活用しよう
photoshopに限らず、ショートカットキーは様々な場面で役立つTipsですね！
ショートカットキーの設定
よく使う機能をショートカットキーに設定することで、デザインがとても捗ります！
方法は、 photoshopを開き“編集”＞”キーボードショートカットとメニュー” から自分の設定したい機能を選び、ショートカットキーを押して登録するだけです。
レイヤーの整列
デザインをする時に特に使うのがレイヤーの整列機能です。
キーボードショートカットを設定する際はこの整列機能だけでもショートカットを設定することで、デザイン作業の大幅な時間短縮が可能です。
10px単位で移動ツールを動かす
要素を移動ツールで動かす時、キーボードの▲▼で移動ができますが、1px単位でしか動かすことが出来ません。 しかしShift+▲または▼▶︎◀︎を押すことで10px単位での移動が可能です！ 余白を60pxとりたい時などはわざわざ60px測り、グリッドを引いて合わせたりすることなく、上記コマンドを6回押すだけで可能になりますね。
Photoshopにデフォルトで設定されているショートカットキーの一覧は下記リンクに記載されてあります！ これで作業効率が劇的に上がる！ Photoshopのショートカットキー早見表
スライスで要素のサイズ計算を短縮！
![]()
デザインをする際に、コンテンツを3分割にしたり、4分割にしたい時があると思います。 例えば、コンテンツ幅が980pxのサイトを、4分割にしたいと思った時、一つの要素は980÷4で・・といちいち計算していませんか？計算が得意な方を除き、少し効率の悪いやり方と思います。
ここではスライス機能を使って、要素の縦横計算を省く方法を紹介したいと思います！
STEP1：分割したい部分をスライスする
まず分割したい部分をスライス機能を使ってスライスします。
STEP2：右クリックでスライスを分割する
スライスした部分を右クリックし、”スライスを分割”を開きます。縦に分割したい時は水平方向、横に分割したい時は垂直方向に分割を選択し、分割する数字を入力すると、分割されます！これで、計算をする手間が省け、後は長方形ツールなどでスライスのサイズに合わせて要素を作っていくだけですね！
共通パーツは外部リンク化
ヘッダーやフッターなどの共通部分に、修正が後から来てしまった時、トップページや下層ページなど 沢山のファイルを一つづつ修正していかないといけません・・・。
でもそんな時、共通ファイルを外部リンクにして埋め込んでしまえば、一度修正するだけで、全てのデザインに修正が反映されますね！外部ファイル化の方法を書いていきます。
STEP1：共通化するレイヤーを新規ファイルに移動しよう
外部リンク化したいレイヤーグループを右クリック＞”グループを複製”から、ドキュメントを新規にして、ファイル名をつけてOKにします。新規ドキュメントに複製したので、共通化した元のレイヤーは削除して大丈夫です。
STEP2：共通化ファイルのリンクを埋め込もう
元のファイルに戻り、“ファイル”＞”リンクを配置”から先ほど作成したファイルを選択し”配置”をクリックして、外部リンク化の完成です。
画像の書き出しはアセット機能を使おう
画像の書き出しにはスライス機能を使っていますか？
スライス機能で書き出そうとすると、一つ一つ要素をスライスして、透過の部分やレイヤーが重なっている部分はレイヤーを一時非表示にしたりしないといけません・・。
画像アセット機能というものを使うと、レイヤーを非表示にすることも、いちいちスライスする必要もなくあっという間に画像を書き出せてしまいます。
STEP1：ファイル名をつけよう
書き出したいレイヤー、またはレイヤーグループに拡張子を含めて名前をつけましょう。
STEP2：ファイルを書き出そう
“ファイル”＞”生成”から”画像アセット”を選択します。これで、画像の書き出しが完了しました！
まとめ
以上、photoshop効率化に繋がる必要最低限のノウハウをご紹介しました！
photoshopはプラグインなども入れることが出来ますし、使いこなす程、作業スピードが上がってくると思います。作業スピードを上げてディティールに凝ったり、その分デザインについて考える時間を増やしたりして、より良いもの作りができるといいと思います！
関連
SEO対策コンテンツSEO
SEO基礎SEO対策
Google関連SEO対策
Webサイト制作Webデザイン
