初心者でも無料で簡単に自分でホームページが作れる「ホームページ作成ツール」が増えてきています。 有料プランでも毎月数百円~数千円程度とお手頃な価格なので、“とりあえずHPが欲しい!”という方にはおすすめです。 その中でも […]

2019.10.8
未経験でも分かる! Photoshop(フォトショップ)の使い方3
未経験でも分かる! Photoshop(フォトショップ)の使い方1、未経験でも分かる! Photoshop(フォトショップ)の使い方2に続いて、今回はフォトショップのレイヤーの仕組みやペンツールの使い方など、大事なツールの使い方を説明していきます。
なんとなくで理解していた部分も、深く勉強していくとより使いやすくなると思います♪
【目次】
1.レイヤーのしくみ
2.レイヤーの描画モード
3.ペンツール
4.写真の切り抜き/クリッピングパス
5.マスク
6.まとめ
1.レイヤーのしくみ
“レイヤー”とは、アニメのセル画のように、画像を何層にも分けて管理できる便利な機能です。
“レイヤーパネル”を使用すると、画像を効率的に管理したり複雑な合成も可能となります。
①フィルターの種類を選択
目的のレイヤーだけを抽出して表示できる
②描画モード
下のレイヤーとの合成方法を選択する
③透明ピクセルをロック
レイヤーの透明部分をロックする
④画像ピクセルをロック
レイヤーの画像編集をロック、移動はOK
⑤位置をロック
レイヤーにある画像の移動をロック
⑥すべてをロック
透明部分、画像、位置の全てをロック
⑦パネルオプション
レイヤーパネルのサブメニュー呼び出し
⑧種類を指定
レイヤーを絞り込む際、①の項目により変化する
⑨不透明度
不透明度を変更
⑩塗り
不透明度を変更する。特殊効果には不適用
⑪グループ
複数のレイヤーをセットにしてまとめる
⑫レイヤーの表示/非表示
表示・非表示の切り替え
⑬レイヤー
画像を別々に管理するための層
⑭レイヤーをリンク
複数選択したレイヤーのリンク、リンク解除
⑮レイヤースタイルを追加
選択したレイヤーにレイヤースタイル追加
⑯レイヤーマスクを追加
選択したレイヤーにレイヤーマスク追加
⑰塗りつぶし、調整レイヤー
新規に塗りつぶし、又は調整レイヤー追加
⑱新規グループを作成
新規グループを作成する
⑲新規レイヤーを作成
新規レイヤーを作成する
⑳レイヤーを削除
選択されているレイヤーを削除
2.レイヤーの描画モード
“描画モード”とは、複数の「レイヤー」がある場合、上にある「レイヤー」の画像を、下にある「レイヤー」に対し、どのように合成して表示させるかを指定するものです。
①“flower&sea.psd”を開きます。
②“レイヤーパネル”より、“flower”のレイヤーを選択し、“描画モード”をクリックすると下のようなメニューを表示します。設定を変えて、変化を確認しましょう。
“描画モード”の種類(抜粋)
モード | 効果 | |
---|---|---|
通常 | ![]() |
重ねたレイヤーのピクセル、あるいはブラシの場合、ブラシの描画色がそのまま表示され、下のレイヤーを隠します。 |
比較 | ![]() |
基本色(下のレイヤー)と合成色(上のレイヤー)の色をチャンネルごとに比較して、暗い方を優先して表示します。合成色が黒の場合は必ず黒となり、白の場合は何も変更されません。 |
乗算 | ![]() |
下の基調ピクセルに上のピクセルが掛け合わされ、画像が暗くなります。フィルムを重ね合わせると暗くなっていくイメージです。 |
焼き込みカラー | ![]() |
基本色(下のレイヤー)の明度を低くしコントラストを高めます。基本色(下のレイヤー)の暗い色ほどさらに暗く、明るい色はやや暗くなるためコントラストが高くなります。 |
比較(明) | ![]() |
基本色(下のレイヤー)と合成色(上のレイヤー)の色をチャンネルごとに比較して、明るい方を優先して表示します。合成色(上のレイヤー)が白の場合は必ず白となり、黒の場合は何も変更されません。 |
スクリーン | ![]() |
“乗算”の逆で、下の基調ピクセルの反転色に上の反転色のピクセルが掛け合わせられます。上のピクセルが白の場合は白となり、黒の場合は何も変更されません。 |
覆い焼きカラー | ![]() |
“焼き込みカラー”の逆で、基本色(下のレイヤー)の明度を高くしてコントラストを弱めます。基本色(下のレイヤー)の明るい色ほどさらに明るく、暗い色はやや明るくなります。 |
オーバーレイ | ![]() |
下の基調色の輝度が51%以上の場合は“乗算”、基調色の輝度が50%未満の場合は“スクリーン”が適用されます。 |
ソフトライト | ![]() |
合成色(上のレイヤー)がグレー50%よりも明るい場合は“スクリーン”、グレー50%より暗い場合は“焼き込みカラー”のように暗くなります。 |
ハードライト | ![]() |
合成色(上のレイヤー)がグレー50%よりも明るい場合は“スクリーン”、グレー50%より暗い場合は“乗算”が適用されます。強いスポットライトを照らしたような効果になります。 |
ハードミックス | ![]() |
合成色の各カラーチャンネルの値を、基本各色カラーチャンネルに加算し、合計が255以上のチャンネルはそのまま、255未満の場合は0に変換されます。すべての色が原色になります。 |
差の絶対値 | ![]() |
基本色(下のレイヤー)と合成色(上のレイヤー)をチャンネルごとに比較し、いずれかで明度の高い色から低い色を省きます。基本色と合成色が同じ場合は全体が黒になってしまいます。 |
※描画モードはそれぞれのレイヤー毎に設定できますが、配置している画像の兼ね合いによって、結果は大きく違ってきます。
3.ペンツール
ペンツールでは、パスで図形を描くことができます。
ペンツール | パスやシェイプを描けます。 |
フリーフォームペンツール | アナログ感覚でパスが描けます。 |
アンカーポイントの追加ツール | アンカーポイントを追加します。 |
アンカーポイントの削除ツール | アンカーポイントを削除します。 |
アンカーポイントの切り替えツール | 直線、曲線を切り替えます。 |
練習 「ペンツール」を使用してパスで図形を描き、保存してみよう。
①“ペンツール”を選択し、パスで下記のようなチューリップを描いてみよう。
※曲線から直線に切り替える場合は、アンカーポイントをOption+クリック。
②パスが描けたら、パスを保存します。→パスパネルより“作業用パス”を選択します。
③パスパネルのパネルオプションより、「パスを保存」を選択。※今回は“チューリップ”と入力します。
④先程、作成したチューリップのパスをパスパネルで選択し、下記のボタンを順に押してみよう。
❶パスを描画色で塗りつぶす。選択しているレイヤーにパスの計上で色が塗られます。
❷ブラシでパスの境界線を描く。ボタンを押して表示されるブラシでパスに沿って線を描きます。
❸パスを選択範囲として読み込む。選択されているパスから選択範囲を作成します。
❹選択範囲から作業用パスを作成。現在の選択範囲をパスに変換します。
❺レイヤーマスクを追加。
❻新規パスを作成。
❼現在のパスを削除。
“作業用パス”を“新規パスを作成ボタン(❻)”にドラッグすると自動的に“パス1”という名前で保存されます。
また、“作業用パス”が選択されていない状態で保存せずに新たなパスを描くと、以前のパスは削除されてしまいます。
“作業用パス”をダブルクリックして名前を変更することでも保存されたことになります。
4.写真の切り抜き/クリッピングパス
チャレンジ 「ペンツール」を使用して写真の切り抜きに挑戦!
写真を切り抜いてイラストレーターなどの書類に配置する場合には、
“クリッピングパス”という手法を用います。
①“beer.jpg”を開きます。
②“ペンツール”を選択。
③コントロールパネルより、“パスが重なる領域を中マド”を選択します。
④ビールジョッキの輪郭をトレースします。
⑤トレースができたら、パスパネルのパネルオプションより、“パスを保存”を選択し、“ジョッキ”という名前で保存します。
⑥同じくパネルオプションより、“クリッピングパス”を選択します。
⑦プルダウンの項目で“ジョッキ”が選ばれていることを確認し、OK。
文字表示が“フチ文字”に変わると、きちんと設定できています。
練習 “クリッピングパス”を設定した画像をイラストレーターに配置してみよう。
①メニューバーより、「ファイル」→「別名で保存」を選択します。
②フォーマットより、“Photoshop EPS”を選択。名前を“beer パス.eps”として保存。
EPSオプションは上記のように設定。
③<イラストレーターに配置>
イラストレーターを起動し、新規書類を作成。
メニューバーより、「ファイル」→「配置」し、保存した“beer パス.eps”を指定します。
切り抜かれた画像が配置されました。
5.マスク
“マスク”とは、画像を編集する場合に、一部を覆い隠し保護するような機能です。
マスクを使用すると、もとの画像を壊さずに画像を切り抜くことができます。
“レイヤーマスクを追加”を使用すると、選択範囲を使用してレイヤーをマスクすることができます。
マスクされた部分は透明となり、画像を切り抜いたように見えます。
①“wine-rose.psd”の画像を開きます。
②ペンツールでワイングラスの輪郭をトレースしたら、パス名を“ワイングラス”とします。
③レイヤーパネルで、“ワイン”レイヤーが選択されているのを確認し、
パスパネルの、“レイヤーマスクを追加”ボタンをクリックします。
マスクされてワイングラスの余白が透明になりました。
6.まとめ
今回の記事では、レイヤーのしくみやとても重要なペンツール、写真の切り抜きなど、写真を編集するうえで大事な部分を説明しました。
ペンツールは実践あるのみ!です!コツが分かれば何でも切り取れるようになるので頑張りましょう♪
最新記事
-
SEO
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
Illustrator
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
Illustrator
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
Web制作
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
おすすめ記事はこちら
-
- スタートアップ
- ツール
- ホームページ制作
- 無料
無料!簡単!ホームページ作成ツール5選
2021.9.13
-
- スタートアップ
- ホームページ制作会社
- 安い
安いには理由がある?ホームページ制作会社を上手く選ぶためのポイント
2021.8.10
「ホームページ制作 格安」などで検索をすると日本全国のいろいろな制作会社が出て来ます。 5ページ50,000円〜、初期費用0円で月々3,000円〜など、お得そうなキャッチコピーが並んでいるのをよく目にするかと思います。 […]
-
- reCAPTCHA
- プラグイン
- ワードプレス
- 初心者
【簡単スパム対策】Contact Form 7でreCAPTCHAを導入する方法
2021.8.2
WEBサイトのお問い合わせフォームから毎日大量に届くスパムメール… 対策のために検索すると必ずといっていいほど目にする”reCAPTCHA” 名前から察するに導入するのが難しそう…と思われる方もいらっしゃるかもしれません […]
-
- Zoom
- ツール
- 無料
アカウント登録不要!Zoomの使用方法
2020.10.5
【目次】1.Zoomとは2.アカウント作成なしのZoomミーティングの基本的な流れ3.【PCの場合】Zoomアプリのダウンロード方法4.【スマートフォンの場合】Zoomアプリのダウンロード方法 目次1.Zoom とは2. […]
-
- Zoom
- ツール
- 無料
簡単!Zoomアカウント登録&使用方法
2020.10.5
【目次】1.Zoomとは?2.Zoom使用に必要な環境3.PCで登録、使用する場合4.スマートフォンで登録、使用する場合 目次1.Zoom とは【Zoom使用に必要な環境】2.Zoomミーティングの基本的な流れ3.【PC […]
カテゴリー
最新記事
-
SEO
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
Illustrator
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
Illustrator
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
Web制作
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
お問い合わせ
・
資料ダウンロードはこちらから

お問い合わせ・資料ダウンロードはこちらから
頂いたお問い合わせに出来るだけ迅速に(24時間以内)に返信します。知識豊富な専門のスタッフが親切・丁寧にお答えしますので、お気軽にお問い合わせください。
LIHが運営する
お役立ちブログ配信中
Staff blog
LIHの最新情報や、耳よりなセミナー情報、webに関するノウハウをブログ形式でお届けします。
ぜひご覧ください。
-
- SEO対策
- WEB制作
- ブログ集客
SEO対策に強いWeb制作とは?SEOの基本、制作会社の選び方も解説
2022.5.18
インターネットが普及した現代において、ホームページは重要な集客手段となっています。 そして、ホームページで集客するためにはSEO対策が重要です。 本記事では、SEO対策に強いWeb制作の方法や、制作会社の選び方などについ […]
-
- Illustrator
- Photoshop
- WEB制作
- センス
デザインセンスの磨き方 その2
2022.5.9
過去の記事で、センスとは何か / どうしたら身につくのかを私なりに分析させていただきました。 今回は、自分のデザインスキルを向上させるのに有効な方法をご紹介します。 結論からいうとセンスを磨くには「言語化」 […]
-
- Illustrator
- Photoshop
- WEB制作
- センス
デザインセンスの磨き方 その1
2022.5.9
センスがある人ってかっこよくて羨ましい! デザインの勉強を始めたけど、どうすればセンスを磨いていけるかわからない! 私はデザインのキャリアをスタートして2年以上経ちますが、正直いまも同じような気持ちです(笑) 自分への自 […]
-
- スタートアップ
- ホームページ制作
- 安い
ホームページ制作費用を安く抑えるための4つのポイント
2022.4.28
「ホームページを制作したいけど予算が少ない・・・」「見積もりが想像以上に高かった・・・」 ホームページをつくる上で多くの人が気になることといえば、やはり制作費。 限られた予算の中で、なるべく安く費用を抑えたいところですが […]
-
- WEB制作
- 初心者
初心者必見!Webサイト制作に必要なスキルとは?
2022.3.25
近年の副業ブームも相まって、Webサイト制作に必要なスキルを独学で身に付けたい!という方を多く見かけるようになりました。 ドットインストールやProgateなど、独学でプログラミングを学習できるコンテンツは数多くあります […]
-
- WEB制作
- 初心者
【はじめてでもよくわかる】ホームページ制作の進め方
2022.2.28
「初めてホームページを作るんだけど、制作会社との打ち合わせって何を聞かれるの?」 「あらかじめスケジュールを立てておきたいんだけど、どのくらい期間が必要なの?」など、制作がどんな風に進んでいくのか心配な方も多いんじゃない […]