creatersnest11

簡単便利!photoshopのテクニック・小技おすすめ50選


目次

Photoshopって何?

Photoshopとは、アドビシステムズが販売をしている写真編集をメインとしたした有料の画像加工ソフトのことです。主に以下のような作業を行うことができます。
・写真加工や編集
・デザイン
・Web制作(デザイン制作)
・イラスト制作

今回は、便利なPhotoshopのショートカットや小技・テクニックを紹介します。ショートカットは慣れるまでが大変ですが、一度覚えてしまえばそれ無しには作業できなくなるほど、便利なものです。使ったことがない人は是非積極的に作ってみてください。
紹介するのはPhotoshopCS4からのショートカットキーやテクニック・小技になりますので、それ以前のバージョンでは対応しない場合があります。※ここでは、Macのショートカットキーを紹介しますが、MacとWindowsでは、キーボードの使用が異なりますので注意してください。

知っておきたいテクニック・小技

基本のショートカットキーは覚えておくと便利その一

command+N 新規作成
command+O 開く
command+S 保存
command+shift+ S 別名保存
command+shift+option(alt)+S WEB用PNGに保存(従来)
command+P プリント
command+W ファイルを閉じる
command+Q ソフトを終了する
command+C コピー
command+V ペースト
command+X カット
command+Z 一つ戻る(一つ前の操作にしか戻れない)
command+option(alt)+Z 一つ戻る(2つ3つ前の操作に戻れる)

基本のショートカットキーは覚えておくと便利その二

command+A 全てを選択
command+D 選択を解除
command+shift+ D 再選択
command+shift+ I 選択を反転
command+R 定規を出す
command+T 自由変形
command+F フィルターを繰り返す
command+E レイヤーを結合
command+B カラーバランス
command+M トーンカーブ
command++ 拡大
command+ー 縮小
command+0 画面サイズに合わせる

保存はこまめに

5分〜10分程度とある程度自分ルールで保存はこまめにしましょう。ふいに大きな負荷をかけるような作業をしてソフトが強制終了『あぁ!!今までの最高の作業が!!!!』って泣くことになります。色んな方が、作業中にソフトが強制終了になって最初からやり直しになって嘆いていらっしゃるつぶやきがそこかしこにネット上に存在しています。かくゆう私もそんな一人です。必ず、保存をしましょう。かなり凹みますから・・・・・

ブラシのサイズとぼけ具合を変更

ブラシサイズの変更:control+option 押しながら左右にドラッグ
ブラシのボケ足のサイズ変更:control+option 押しながら上下にドラッグ
クリッピングマスク作成:レイヤーとレイヤーの間「alt」+クリックレイヤーとレイヤーの間を「alt」を押しながらクリックすると簡単にクリッピングマスクが作成できます。

ドキュメント間の移動で同じ位置に移動

shift+ドラック:移動前のドキュメントと移動後のドキュメントが同じサイズのときのみ有効です。

複数のレイヤーを非表示/表示

レイヤーパネルの目のマークをクリック&ドラック
どのレイヤーになんの情報を入れたかどうかがわからなくなったときに便利です。

選択範囲を作成中に移動

選択範囲を作成中にSpace+ドラックで移動
特に円(だ円)の選択範囲を作るときに便利です。

同じウインドウを2つ開く

ウインドウ→アレンジ→ファイル名の新規ウインドウ
アイコン等の細部を詰めているときなどに常に100%表示を確認できます。リアルタイムで編集した状態が見えるので便利です。

既存テキストの近くに新しいテキストを作成

shift+テキスト作成:新しいテキストを作ろうとしたら近くのテキストボックスを選択してしまって困ったときに、回避する方法です。

不透明度と塗りの%の変更

レイヤーの不透明を変更:変更したいレイヤー選択+数字
レイヤーの塗りを変更:変更したいレイヤー選択+shift+数字
慣れると便利ですが、最初はちょっと訳が分からなくなるかもしれません。

オブジェクトのサイズ変更繰り返し

command+shift+T
あまり使う機会が少ないですが、等間隔で変わっていきます。

段落揃えの変更

左揃え:テキスト選択中に command+shift+L
右揃え:テキスト選択中に command+shift+R
センター:テキスト選択中に command+shift+C
これはもしかしたら、知ってる人もいるかもしれませんね。

意外と知らない複製したレイヤーに「◯◯のコピー」と付けない方法
レイヤー複製

1レイヤーパネルの右上の部分を押す
2パネルオプションを選ぶ
3『コピーしたレイヤーとグループに「コピー」を追加』のチェックを外す
チェックを外すことによって、「◯◯のコピー」と付かずに快適にレイヤーをコピーしまくることができます。別についてても問題ない方は気にしなくていいかもしれませんね。

幾重にも重なっているレイヤーから任意のものを簡単に探し出す方法
簡単探す

レイヤー作成時にレイヤーに名前をつけておくと便利です。選びたいレイヤー名を選択するとそのレイヤーが選ばれます。クリックする場所は厳密でなくてもその周辺にあるレイヤーを表示します。
このやり方に、上記の「複数のレイヤーを非表示/表示」を組み合わせると最強です。
注意点は、「非表示にされたレイヤーは表示されない」ということです。

ヒストリーの数を増やしておくと便利
ヒストリー

Photoshop CC→環境設定→パフォーマンス→ヒストリーの数
作業に熱中していると、どうしても「command+option(alt)+Z」では戻せない状態になる場合があります。ここで、あらかじめ任意の数に設定しておくことで、ずいぶん前に作業した操作に戻れることがあります。
※作業環境によっては、負荷がかかることもあるのであまり大きな数字にしないほうがいいでしょう。

 

コンタクトシートの作成
コンタクトシート

1ファイル→自動処理→コンタクトシートⅡ
2ソース画像で使いたい画像ファイルを選びチェックボタンを外しておく
3サムネールで配置・縦・横を入力(写真の場合は・縦5・横6)
コンサンプル

たくさんの写真をお客様に見ていただく。そんな時のためのいわゆる「写真一覧表」です。もちろん写真以外でも使えます。たくさんの画像データから、選んでもらうときに一枚一枚紙にプリントすると紙がもったいないですよね?そんなときに使えます。※処理に時間がかかるのであまり多くの画像を一気にやろうとは考えない方がいいかもしれません。

アクションを使って一気に画像を保存する方法
アクション

1アクションパネル→新規アクション
2アクション名&セットを入力。記録をクリック→アクションパネルの下部に赤い●が出現
3用意しておいたPSDデータを1つ開いてJPEG形式で別名保存→閉じる→アクションパネルの下部の■ところを押して停止する
バッチ
1ファイル→自動処理→バッチを選択
2ソース:元の画像の位置※失敗に備えてバックアップをとっておきましょう。
3実行後:出来上がる画像の位置
OKを押すと勝手に実行後のファイルに自動処理されていきます。
この方法は、「大量の写真をすべて縮小する」とか、「画像をすべて同じように加工してバナーを量産する」とか、たくさんの画像を扱うという時に知っておくととても便利です。一度設定すればいつでも使うことができるので、作っておくといいでしょう。

ブラシに自動で線が描写される方法
ブラシ線

線画が面倒くさいもの、服飾デザイン、パッケージデザイン・イラスト制作など応用範囲が広いブラシの使いかたです。※右上のイラストはこの画像の設定で描いたものになります。
1レイヤー名を選択しないように赤い枠の部分をダブルクリック
2境界線にチェック
3サイズや不透明度など、お好みで設定を変える
線の内側を塗りたいな。と思った際には、新しくレイヤーを作りそこに統合すると編集することができます。

 

スキャンした下絵や線画から1クリックで主線を抽出するアクション
ワンクリ

http://coliss.com/articles/build-websites/operation/design/photoshop-action-lineart-separate.html
これは、このURLの記事を書いた方から教えてもらった方法ですが、とてもとても便利です。

 

描写・背景色を一瞬で黒・白に戻す
D

描画色と背景色をリセットしたい時に「D」を押すと一瞬でリセットすることができます。

 

指定した範囲で整列をさせる方法
整列

1整列させたいレイヤーすべてを選択
2任意の整列ボタンを押す。ここでは、縦横の中央揃えを選択してます
3背景レイヤーの中心に揃えられました
背景レイヤーを選択しない場合は、二つのレイヤーの中心に左揃えは四角の左に、右揃えは丸の左に揃えになります。

 

グラデーションマスクの線状のかけ方

1マスクを線状(一方向)にかける
一方向
・レイヤーにベクトルマスクをかけ、グラデーションツールの「線形グラデーション」を選択
この時、「黒→白(描画色から背景色)」を選ぶのもよいですが、私は「黒→透明(描画色から透明に)」をよく選びます。これは次に説明する「二方向にかける」に関係します。

2マスクを線状(二方向)にかける
二方向
・グラデーションツールの「線形グラデーション」を選択したまま反対側にグラデーションをかけます。この時、「shift」を押しながら線を引くと綺麗にひくことができます。「shift」を押さなくてもいいですが、綺麗に均等にひけるのでとても楽です。
※「描画色から背景色」にすると、先にグラデーションを引いた部分を上書きし、グラデーションを消してしまいます。

グラデーションマスクの円状のかけ方

マスクを円状にかける
円状
・グラデーションツールの楕円形選択ツールを選択して、上部の「ぼかし」にお好みの数値を入力して、ベクトルマスクをかけます。
円形グラデーションを使う。という手もありますが、グラデーションの掛かり方が微妙で私は好んで使いません。

 

Photoshopで作るHDR写真を作る方法

割と簡単に作る方法を紹介しています。私はCS5から機能として追加されているHDRProの機能を使うより、こちらの方が便利な気がします。もちろん、Photoshopの機能を使う方がより細かく設定できますが。
http://photoshopvip.net/archives/8377
CS5からの機能の方→http://shuffle.genkosha.com/software/photoshop_navi/cs5_features/7494.html

 

簡単にコルクボードっぽいテクスチャを作る方法
コルク

1任意のサイズで塗りつぶします(大きく作ってPSDとJPEG・PMGとそれぞれ作っておくと便利)
2背景にノイズを加える(ガウス分布+グレースケール)
3レベル補正で少し濃くして完成
好みでぼかしを少し加えたり、ノイズの量を変更するなどして、数種類作っておくと便利になります。なくてもいいけど、あったら便利なコルクボード風のテクスチャです。

簡単に布地のテクスチャを作る方法

布地
基本はコルクボードを作る工程と似ています。
1任意のサイズで好みの色で新規作成する
(大きく作ってPSDとJPEG・PMGとそれぞれ作っておくと便利)
2新規レイヤーを白で塗りつぶしノイズを加える(50%+グレースケール)
3ノイズの入れたレイヤーを2つ複製して乗算します
・ぼかし移動角度0:距離40
・ぼかし移動角度90:距離40
4最後に新規レイヤーを作成してグラデーションを引いてオーバーレイで加えて完成です。

 

英数字や記号を縦書きの文章の中で横書きにする方法

1文字を入れたら文字パネルの「縦中横」を選択
2真ん中四角の部分のままでは少し違和感があるので、文字パネルの両向き矢印のついたV/Rのトラッキングを使用して文字間をつめます。英字は一つずつ回転させたほうがよいので、「縦中横」の上にある「縦組み中の欧文回転」を選択すると横向きになっている英字が縦になります。

 

画像を左右反転にする方法

・画像全体を反転する
画像反転
イメージ→画像の回転→カンパスを左右に反転

・画像の一部を反転する
特定
反転させたいところだけ選択→編集→変形→水平方向に反転
・特定のレイヤーだけを反転する
レイヤー
反転させたいレイヤーを選択→編集→変形→水平方向に反転

 

すぐに取り掛かれる!GIFアニメをPhotoshopで作る小技集

TwitterがGIFアニメ対応になってからは、需要が伸びていますね。いろんな動きのGIFアニメの作り方を紹介されているので、参考にしてみてはいかがでしょう?
http://blog.nanapi.co.jp/tech/2014/07/16/gif_animation_tips/

 

Vanishing Point(ヴァニシングポイント)を使ってハメコミ合成を作る

はめこみ1
iMacの画像のピンクの部分に違う写真をはめ込んでみましょう
てばさき
美味しそうな手羽先の写真をはめこみします。全体を選択してコピーしておきましょう。元の画像は削除しておきてもOKです。
VP
1「フィルター」メニュー > Vanishing Pointを選択(Vanishing Pointフィルタが別画面で立ち上がります。)
2「面生成ツール」を選び、ハメコミたい画面の4隅を選択します。
貼り付けた画像を画面内にドラック&ドロップすれば設定した範囲に自動的にパースが設定されます!
完成
ポイントは新規レイヤーを作りそこに Vanishing Pointをかけること。これで別々レイヤーになって差し替え修正が楽になります

 

Photoshopで気軽に配色を確認する方法1

配色
Web用に保存を選択
1ファイルを「GIF」か「PNG-8」に設定「カラー」にて何色抽出するか選択
2続いて「カラーテーブル」の右端にある逆三角形のボタンを押し、「カラーテーブルを保存」を選択して、actとしてファイルを保存
3スウォッチから保存したactファイルを読み込めば完了!
デメリットはありますが、気軽にチェックしたい時は有効なやり方だと思います。

 

気軽に配色を確認する方法2

「PHOTOCOPA」というオンラインツールでURLから画像をロードするだけで配色を分析してくれる優れものです。併用して使いたいですね。
http://www.colourlovers.com/photocopa

 

おすすめしたい知っておくと便利なあれこれ

 

人物レタッチの小技集

http://commte.net/blog/archives/3374
人を編集するのってとても大変。そんなときの小技集。肌の質感や唇など、大きな画面で人物を使う際に最も有効な小技がたくさん入ってます。

チャンネル&レイヤーマスクを使用したテクニック

http://www.iwashi.org/archives/3492
背景の色はいじりたくないけど人物をいじりたい。そんなときのこのテクニック。応用がいっぱい効くので覚えておいても損はないかも。

 

超簡単に写真の絵画・イラスト風加工ができる

http://photoshop76.blog.fc2.com/blog-entry-90.html
いろんなイラスト風加工がありますが、これは一番おすすめ。

 

使い勝手のよい絵の具ブラシまとめ

http://liginc.co.jp/web/design/photoshop/92861
あまり使い所がないかもしれないけど、必要なときに限って探さなくちゃいけない。そんなときに前もってしっておくと便利ですよね。

 

Photoshopで初めて写真加工するときに知っておくべき手順

http://liginc.co.jp/web/design/photoshop/111213
基本中の基本がまとめられています。筆者は独学で覚えてしまったので、この中の何点かは実践してないですね・・・・・。

 

簡単に写真をレトロっぽくする方法

レトロ
1画像を用意→塗りつぶしまたは調整レイヤーを新規作成を選択
2色相・彩度を選択→プリセットのセピアを選択
(古いバージョンだとない場合がありますので、色相35:彩度25:色相を統一にチャックを入れるよいです)
3新規レイヤーを作成→グラデーションツールで「描画色から透明に」を選択して四方にグラデーションを入れ乗算にして完成。

高級感のあるプラチナ文字

http://abduzeedo.com/chrome-effect-photoshop
プラチナのような透明感のある銀色が印象的な文字をつくるテクニックです。

2014年のPhotoshopテクニックのまとめ

http://photoshopvip.net/archives/71865
海外サイトが多いですが、画像付きだったり動画付きで説明しててわかりやすいです。

便利で使い易いベクターphotoshopブラシ集

http://design-develop.net/design/250-useful-vector-photoshop-brushes.html?utm_source=twitterfeed&utm_medium=twitter

WEB色見本サイト

http://www.colorpallets.jp/p/
あらゆる色の色見本を掲載・ダウンロードすることができるサイトです。ものすごく便利です。お世話になっています。

写真加工に利用したいPhotoshop用のアクション・PSD素材

http://photoshopvip.net/archives/28031?utm_source=twitterfeed&utm_medium=twitter
特に「Vintage Photoshop Action 14」はおすすめです。簡単にビンテージ風の写真に加工出来ます。

覚えておくといいPhotoshopのブラシ

http://www.2expertsdesign.com/photoshop/50-free-photoshop-brush-sets-everyone-should-have
雲や水滴、草のブラシなどは、便利です。紹介されている記事は2011年ですが、PhotoshopCCでも使用できているので、問題ないです。

おすすめPhotoshopのブラシ30選

https://schoo.jp/minute/article/18
こちらのブラシ集もおすすめです。ブラシデータは入れすぎると重くなってきますので、厳選して使うといいかもしれません。

自分でテクスチャ作るのめんどくさい!と思ったらここ!

https://ferret-plus.com/1368
いろいろなテクスチャを紹介しています。微妙な色のグラデーションとかクシャクシャにした紙の質感とか、自分で作って保存しておくのもいいけど、リストとして外部HDなどに保存しておくと本体PCを重くせずに使用することが出来ます。

日本の伝統色を紹介

http://minagi.p-kit.com/page69881.html
先に紹介したWEB色見本と違い、色の名前や着物に関する情報を載せたサイトです。そんなに日常的に知る色ではないですが、知っておくと便利かも?筆者が日本的な色をデータ化してる時に参考にしたサイトです。16進表記とRGB表記がついて色の意味までついている優れものです。

快適作業のプラグイン特集

http://photoshopvip.net/archives/69352
Photoshopでは中々ガイドを使うことがない筆者ですら、QuickGuideはすごいです。便利!!

Photoshopでやってしまいがちな間違いを紹介してくれる記事

http://designreviver.com/inspiration/10-photoshop-mistakes-to-avoid/
(日本語翻訳http://photoshopvip.net/archives/51798
年々Photoshopの機能はレベルアップして作業がとても簡単にかつ楽になってきましたが、もしかしたら、「そこまでやらなくて大丈夫だったの!?」ということがあるかもしれません。そんな!?を教えてくれる記事です。最後のこまめに保存は本当に大事です・・・・・

眩しいほどに美しい490種類のPhotoshop用のグラデーション素材

http://coliss.com/articles/freebies/freebies-photoshop-gradient-gold-and-silver.html
銀と金色のグラデーション素材のまとめです。

 

最後に

ここには、初心者から上級者まで、もしかしたら知ってるかもしれないけど知らないこともあるかもしれないテクニックや小技を入れました。筆者が実践している項目も多々あります。おすすめのあれこれは、筆者が便利だと思ったサイトを掲載してみました。Photoshopはデザイナー・イラストレーターのみならず、お絵描きツールとして使用している方まで多岐に渡ります。そんないろんな人に知ってて得する記事になってるといいな。と思います。

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next ArticleSEO対策のためのプラグイン「All in One SEO Pack」の効果的な使い方