Photoshop初心者のための使い方・基本設定まとめ

こんにちは、LIGブログ編集部です。こちらは「Photoshopをはじめて使う人が、自分で撮った写真を加工できるようになる」ところまでを目標とした全5回の超初心者向けPhotoshop講座です。

第1回は「Photoshopって何？」というところから、ダウンロードしたPhotoshopを写真加工やWebに適した環境に設定するところまで説明していきます。初心者ではない方は、おさらいのつもりで確認してみてください。

Photoshopとは？

Photoshopとは、アドビが販売をしている写真編集をメインとしたとした有料の画像加工ソフトのことです。

利用にあたっては、まずPhotoshopのライセンス契約をおこないます。学割や法人契約、年間契約といった料金体系の違いや、Adobeの他のソフトも一緒に使えるセットなどもあるので、自分に適したプランで契約をするようにしましょう。

ちなみに7日間の無料体験もできるので、最初はこちらで試してみるのもいいかもしれません。

写真、画像、デザインエディター | Adobe Photoshop

Photoshopでできること

Photoshopでは、主に以下のような作業を行うことができます。

• 写真加工・編集
• デザイン
• Web制作（デザイン制作）

その中でもメインとなるのは、やはり「写真加工・編集」です。編集部でも、撮った写真の色調整・サイズ調整・合成などはPhotoshopでおこなっています。

PhotoshopとIllustratorの違い

初心者だと混同してしまうことも多いのが、PhotoshopとIllustratorという2つのソフト。両者の機能や用途の違いを把握して、適材適所で利用していきましょう。

ビットマップ画像とベクター画像の違い

Photoshopはビットマップ画像と呼ばれる、ドット絵のような小さな四角形の集まりで画像を表現します。拡大すると、ドットの集合体であることがハッキリわかるようになります。

一方、Illustratorはベクター画像と呼ばれる、点座標や線の方程式で画像を表現します。ビットマップ画像と違い、拡大しても粗くなることはありません。

特性の違い

大ざっぱに言えば、写真の編集・加工に向いているのがPhotoshop、イラストやロゴなどの作成に向いているのがIllustratorです。

たとえば、写真を使ったポスターを作成する場合であれば、一般的には……

1. Illustratorでロゴを作成
2. Photoshopで写真の編集・加工
3. Illustratorでテキストなどを配置

というように、それぞれのソフトの特性を活かしながら作成されます。また、職種によってどちらのソフトを主に使用するかという違いもあります。

Photoshopを主に使用する職種例

• Webデザイナー
• フォトグラファー
• グラフィックデザイナー
• 水彩画や油絵のような塗り重ねて書くテイストのイラストレーター

Illustratorを主に使用する職種例

• DTPデザイナー
• キャラクターなどのイラストレーター
• ロゴ制作

もちろんこれらは一般的な例であって、両方使えることが必須！ という場合もたくさんあります。

Photoshopで作成する場合の注意点

Photoshopはビットマップ画像となるので、あまり拡大してしまうとギザギザの画像になってしまいます。そのため、何かを作成するときは原寸大で作成することを強くおすすめします。

指定サイズよりも小さく作ってしまった場合、拡大されて粗い画像となってしまうので、サイズには注意してください。

Photoshopをダウンロードしたら環境を整えよう

以下でおすすめ初期設定の操作方法をお伝えします。

※以下、Macをベースとした記載となっております。Windowsの方は“メニューバーから「Photoshop」を”という部分を“メニューバーから「編集」を”に置き換えて操作いただければ大丈夫だと思います。

単位の設定

まずは画像のサイズを決める際に必要な「単位」の設定から始めましょう。

Photoshopには、mm、inch、pointなど複数の単位があり、初期設定では「mm」になっています。Webの世界では基本的に「pixel」でサイズを表すので、変更しておきましょう。

1. 「環境設定」⇒「単位・定規…」を選択

メニューバーから「Photoshop」を選択し、「環境設定」⇒「単位・定規…」を選択します。

2. まとめて「pixel」に設定

単位の設定が必要なところをまとめて「pixel」に設定しておきましょう。

これで、「画像は横幅600pxにしてください」など言われても大丈夫ですね。

ガイド（定規）の設定

物体が並行に配置されているか、左右対称になっているか、目でなんとなく確認しただけではズレていることが多いですよね。

そんなときはガイド（定規）を使うようにしましょう。細かい設定はしていなくても使える機能ですが、自分が使いやすい環境にあらかじめ設定しておくことで、作業を効率化できます。

1. 「環境設定」⇒「ガイド・グリッド・スライス」を選択

メニューバーから「Photoshop」を選択し、「環境設定」⇒「ガイド・グリッド・スライス」を選択します。

2. 「グリッド線」「分割数」を「10pixel」に設定

100px四方あたりを、どれくらいの間隔で分割するかを設定します。また、グリッド線は画像の上に重なって表示されるため、線は見えやすい色に変更しておきましょう。

10pixelに設定した場合、上記の間隔でグリッド線が表示されます。グリッド線は「command」+「＠」で表示・非表示を切り替えられますので、邪魔になってもすぐに非表示にできます。

「自動選択」でレイヤーを選択する設定

Photoshopには「レイヤー」という概念があります。

透明のフィルムのようなものを重ねて、その1枚1枚に絵を書いたり、写真を載せたりしていくイメージになります。

下の図でいえば、見た目は「背景＋猫＋テキスト（下町ぶらり）」という画像ですが、実際は「背景」「猫」「テキスト（下町ぶらり）」の3つのレイヤーが重なっていることになります。

 
次に、各レイヤーをそれぞれ動かすことができるよう「レイヤーの選択」を設定しておきましょう。

1. 「移動ツール」を選択

ツールパネルの一番上にある矢印「移動ツール」を選択します。

2. 「自動選択」にチェックを入れ「レイヤー」を選択

画面上部ツールオプションバーに「自動選択」というチェックボックスがあるのでチェックを入れ、「自動選択」の隣のプルダウンを「レイヤー」に設定します。

こうすることで、「移動ツール」を使う際にレイヤーごとの選択ができるようになります。今は画面上の変化はありませんが、実際の作業をするときに役に立つ設定です。

プレビューアイコン・拡張子の設定

Photoshopで保存したファイルをわかりやすく管理できるよう、こちらも最初に設定しておきましょう。

1. 「環境設定」⇒「ファイル管理」を選択

メニューバーから「Photoshop」を選択し、「環境設定」⇒「ファイル管理」を選択します。

2. 「プレビュー画像」を「必ず保存」に設定

「ファイルの保存オプション」という囲いの中の「プレビュー画像」を「必ず保存」に設定します。このように設定しておくことで、画像のアイコン表示が以下のようになります。

保存した画像をイメージ画像で探すことができるようになり、とても便利です。

レイヤーサムネイルの設定

デフォルトのレイヤーパネルの表示が、全体に対するサムネイルが表示されるようになっているため、パッと見てなんの要素なのかがわかりづらくなっています。

1. レイヤーのパネルオプションを開く

レイヤーパネル右上のメニューから「パネルオプション」を開きます。

2. 「レイヤー範囲のみ」を選択

オプションの真ん中あたりにある「サムネイルの内容」項目で、「レイヤー範囲のみ」を選択します。

これで、要素そのものがサムネイルとして表示されるようになりました。

コピーしたレイヤー名の設定

レイヤーを複製すると、元となったレイヤー名のあとに「〜のコピー」と入ってしまいます。まったく気にならないという方は大丈夫ですが、わたしは気になってしまう質なので、同じ性質をお持ちの方は設定することをおすすめします！

1. レイヤーのパネルオプションを開く

レイヤーパネル右上のメニューから「パネルオプション」を開きます。

2. 「コピーを追加」のチェックをはずす

オプションの下部にある「コピーしたレイヤーとグループに「コピー」を追加」のチェックをはずします。

これで、元となったレイヤー名で複製されるようになりました。

バウンディングボックスを表示させる

こちらはPhotoshopでデザインを行う際に便利な設定です。

デフォルトではバウンディングボックスが非表示になっていて、メニューバーの「編集」から「自由変形」を選択しないと、要素の変形ができません。

1. 変形させたい要素を選択する

ツールバー「選択ツール」を使って、変形させたい要素を選択します。

2. 「バウンディングボックスを表示」をチェック

オプションバーの左側にある「バウンディングボックスを表示」にチェックをいれます。

バウンディングボックスとは？

バウンディングボックスとは、要素を囲む四角のことで、要素の四隅にある小さい四角をドラッグして画像やシェイプなどを変形させることができます。

よく使うパネルを表示させる

こちらもデザインを行う方向けの設定です。

「フォントの修正をしたいのにパネルが見当たらない……！」という事態にならないように、あらかじめ使用頻度の高そうなパネルは表示させておきましょう。

メニューバーの「ウィンドウ」で、表示させたいパネルをクリックします。パネル名の前にレ点が入っていたら、現在表示されているという状態です。

使用頻度の高い下記のパネルを表示させておくのがおすすめです。

 
▼働きながら♪ 授業の合間に♪ Webデザインを勉強するなら……

Photoshopに関する記事まとめ

いかがでしたか。今回は設定までで一旦終了ですが、次回からは各ツールの使い方を紹介しつつ、実際に写真加工をレクチャーしていきます。

最後までお付き合いいただきありがとうございました。全5回のこのシリーズでPhotoshopの基本をマスターし、写真加工を自分で手軽にできるようになりましょう。

超初心者向けPhotoshop講座（この講座）

Photoshop初心者のための使い方・基本設定まとめ

Photoshop初心者が写真加工や編集をおこなうための必須ツール20選・前編

Photoshop初心者が写真加工や編集をおこなうための必須ツール20選・後編

【Photoshop基本操作編】初めて写真加工をするときに知っておくべき基本となる手順まとめ

Photoshopを使いこなすためのテクニック集「ショートカット」「カスタマイズ」など

Photoshopを使った写真の補正・加工テクニック

Photoshopデザイントーンにあった人物写真加工の仕方〜ひよっこデザイナーえびちゃんが学んだこと#1〜

【初心者向け】Photoshopで簡単にできる、絶対バレない加工方法！

Photoshopでヴィジュアル系メイクを施す方法

ポーズを自由に変えられる！ Photoshopのパペットワープの便利な使い方

PhotoshopとIllustratorで画像をポリゴン風に加工する方法

Photoshopのパペットワープで自由自在に写真加工する方法

Photoshopで斜めになった写真を補正する方法

自動でできるPhotoshopのお手軽HDR合成方法

Photoshopで人物を綺麗に可愛くサギる方法

Photoshopで女性を別人に変えるアイメイクを施す方法

Photoshopでセピア調にワンクリックで加工する方法

Photoshopのプロが教えるレタッチ・エフェクト・切り抜きテクニック

Photoshop&Illustratorでネオンサイン風ロゴを作る方法

PhotoshopCC2017の「選択とマスク」機能を使ってスピーディに髪の毛を切り抜く方法

LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中（1）社員編

LIGブログで1,000個も作ってきたアイキャッチのPSDデータを大放出中（2）アニメーション編

Photoshopを使ってシネマグラフを作る方法

Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法

Photoshopで“水しぶき”などの背景が透けた画像をカンタンに切り抜く方法

Photoshopのハイパスフィルターを使った凄技レタッチを解説

Photoshopでカッコいいグランジ風ロゴを簡単に作る方法

Photoshop CCを使ってよりリアルで美しくシャドウを作る方法

Photoshopの3D機能でロングシャドウエフェクトを簡単に作る方法

Photoshopで簡単にギザギザしたアイテムを作る方法

Photoshopで簡単でキレイに物体を増減させる方法

Photoshopでシームレスでオシャレな斜めストライプをサクッと作る方法

Photoshopで継ぎ目のないマーブル模様・柄を作る方法

Photoshopのお悩み解決・お役立ちテクニック

これは効いた！Photoshopが重いときの対処法7選

【初心者向け】ひと手間でデザインの物足りなさを解消する方法まとめ

デザインがしっくりこないときに試すこと10選【新米デザイナー向け】

【初心者向け】Photoshopのショートカットを覚えて倍速で作業をする

これはよく使うやつ！Web制作が捗るPhotoshopのプラグイン3選