デザイナー不在でも!超カンタン!初心者でも使えるPhotoshopテクニック!基本設定&ショートカット編

    
2017/02/08
    

photoshop_kouza1

はじめに

「デザイナーがまだいないから、ちょっとした画像加工くらいなら自分でやりたい」「デザイナーが忙しすぎて手がまわらないので、簡単な画像加工なら自分でやりたい」こんなこと思ったことありませんか?

一見難しそうに見えますが、手順さえわかっていれば、誰でもカンタンにPhotoshopで加工することができるんです。最近では、無料で使えるスマホアプリ版「Adobe Photoshop Express」(iOS / Android)も出てきて、ますます身近になってきました。

今日は、そんなPhotoshopの基本設定とよく使うショートカットをご紹介します!

※今回使用するソフトは、Windows版Adobe Photoshop CC 2015です。CC以前のバージョンとは、使い方が大きく異なることがありますので、ご了承ください。

 

まずは基本的な知識から!

1.Photoshopでできること

Photoshopは、写真の加工だけのソフトだと思われがちですが、実際は、広い用途で使用することができます。写真や画像などの2Dだけではなく、3Dまで対応しています。非デザイナーであれば、画像のリサイズや画像を切り取って文字を載せるなど、バナーを作る作業で使うことが多いかと思います。
具体的には以下の通りです。

■写真の加工&合成
サイズの変更、色味の調整、レタッチ(美肌、輪郭・体型・顔立ちの修正など)、カラー写真をモノクロやセピアに変更する、写真に写り込んだ不要なものを消す、など

■2D画像の制作&加工
イラストの着彩、色味の調整、文字入れ、バナーやボタンなどのWeb素材制作、特殊効果の付与 など

■3D画像の制作
3D文字の制作、3Dモデリング、CG画像の制作 など

■アニメーションの制作
イラストのアニメーション など

 

2.最低限押さえておきたい用語

Photoshopを使う上で知っていた方がいい最低限の用語です。これさえわかれば、ちょっとした作業は余裕でできます!

 

■レイヤー(layer)とは

レイヤーとは、英語ではlayerと書く「層」のことです。基本的に、レイヤーパレット(右の黒いメニュー画面)の上に来るレイヤーが、一番前面に表示されます。それぞれのレイヤーは独立しているので、レイヤー1にあるオブジェクトの色を変更しても、背景や他のレイヤー上にあるオブジェクトは変わりません。
Photoshopでは、レイヤーを何枚も重ねて、作業を進めていきます。

layer
以下のように、レイヤーパレットの目のマークをクリックしてOFFにすると、非表示にできます。

layer2

■ツールパネル

画面左側に表示されているツールパネル(メニュー画面)のそれぞれの名称です。

tool
 

基本設定をしよう!

画像を加工する前に、まずは、Photoshopの設定を整えましょう。ここをしっかりしておけば、作業が大分楽になります。めんどくさいなぁ~と思う気持ちにそっと蓋をしつつ、Let’s 設定!

 

1.定規を設定

◆定規の表示

画像を作成する際に、目安になるのが定規です。編集したい画像を画面に表示した状態で「Ctrl+R」を押すと、上と左側に定規が出現します。

上部メニューの「表示」→「定規」クリックでも表示させることができます。

定規
 

◆定規の単位を設定

定規の上にポインタを合わせ、右クリックします。単位の一覧が出てくるので、好きな単位を選択してください。Webで使用する画像の場合、単位は「pixel」で大丈夫です。

定規_単位設定
 

◆定規の始点を移動する

定規の始点(0になっている位置)を変更することができます。画像の真ん中を0にしたい場合などに使用します。以下画像の赤丸の始点をクリックし、ドラッグした状態で0にしたい位置まで持っていき、指を離します。

定規_始点移動1
1

 

2.グリッド線

画像を調整する際に、グリッド線を表示させると作業がしやすくなります。

「編集」⇒「環境設定」⇒「ガイド・グリッド・スライス」
メニューでは、グリッド線の色や間隔などを変更することができます。

grid1
grid2
grid3
グリッド線の表示・非表示の切り替えは、「Ctrl+@」で行うことができます。

 

3.自動選択ツールを設定

以下の写真は、会議室の写真と猫の写真が別のレイヤーになっています。机の上に乗っている猫だけを動かしたい場合、ネコをクリックしても、以下のようなアラートが出て、動かすことが出来ません。

※Windows版Adobe Photoshop CC 2017では、アラートは出ません

2
この場合は、「□自動選択」にチェックを入れてください。そうするとレイヤーごと移動することができるようになるので、便利です。

 

Automatic2
この他にも、ネコのレイヤーを指定(クリック)したあとに「Ctrl+T」を押すことで選択できます。

 

設定が出来たら、ショートカットを覚えよう!

Photoshopを使う上で、ショートカットを覚えると操作が格段に楽になります。ここでは、よく行う操作のショートカットをご紹介します。慣れてきたら使ってみましょう!
動作 ショートカットキー
上書き保存 Ctrl+s
別名保存 Ctrl+Shift+s
ズームイン Ctrl++
ズームアウト Ctrl+-
サイズを100%で表示する Ctrl+1
新規レイヤーの作成 Ctrl+Shift+n
レイヤーをコピーする
(コピー元のレイヤーの上に作成)
Ctrl+j
レイヤーを削除する Delete
レイヤーをグループ化する Ctrl+g
レイヤーのグループを解除する Ctrl+Shift+g
レイヤーを統合する Ctrl+e
自由変形 Ctrl+t
消しゴム e
文字 t
背景色で塗りつぶし Ctrl+Delete
 

最後に

いかがでしたでしょうか。

ここまで設定しておけば、あとは実践あるのみ!です。ショートカットキーについては、使いながらおいおい覚えていくのが良いかと思います。

次回は、画像の「切り抜き」と「付け足し」についてお伝えします!

(執筆 / 編集:マツイ)

Find Job! Startupを購読する

職種から求人情報を探す
Webエンジニア・Webプログラマ |  Webデザイナー・HTMLコーダー |  グラフィックザイナー・クリエイター |  Webディレクター・Webプロデューサー |  スマートフォンエンジニア |  ネットワークエンジニア・サーバーエンジニア |  フロントエンドエンジニア
スキルから求人情報を探す
PHP |  Perl |  Ruby |  Python |  Java |  JavaScript |  C言語 |  C++ |  MySQL |  PostgreSQL |  iPhoneアプリ |  Androidアプリ
企業名から求人情報を探す
 |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |   |  A |  B |  C |  D |  E |  F |  G |  H |  I |  J |  K |  L |  M |  N |  O |  P |  Q |  R |  S |  T |  U |  V |  W |  X |  Y |  Z
Copyright (C) 2015 mixi recruitment, Inc. all rights reserved.