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

2019.9.3
未経験でも分かる! Photoshop(フォトショップ)の使い方1
撮影した写真を加工して思い通りの見栄えに仕上げたい。画像や文字を使ってWebページやバナーなどをデザインしたい。水彩画や油絵のような手描きのタッチをデジタルで表現したい。それなら、Adobe Photoshop CCが最適です。Photoshopは、プロも使用する世界最高峰の画像編集ソフトウェアで、精度の高い写真の編集はもちろん、高品質なデザインやイラストを作成するためのさまざまなツールが備わっています。
Adobe Photoshop→https://www.adobe.com/jp/products/photoshop.html
Photoshopは、主に写真の加工や合成、変換などを行うソフトです。
写真の色味を変えたり、複数の写真を合成したりできます。また、WEB用の画像や動画、アニメーションなども作成でき、プロの写真家はもちろん、映像業界でも幅広く使われています。
初心者でもPhosotshopの基本をマスターできる方法をまとめました。
ツールを使いこなせば、写真加工・バナー作成などが全部フォトショップでできます。
ぜひ参考にしてください。
【目次】
1.ドキュメントを作成、開く
2.Photoshop(フォトショップ)の画面
3.ファイルの保存
4.Photoshopがサポートするファイル形式
5.画像解像度
6.まとめ
1.ドキュメントを作成、開く
新規ドキュメントを作成 Mac(⌘+N) / Win(ctrl+N)
①メニューバーより、「ファイル」→「新規」を選択。
②ファイル名を入力。
③サイズ、用紙方向を選択。
既定の用紙サイズを選びたい場合はプリセットより各用紙サイズを選択。
④解像度、カラーモードを選択。
【印刷用の場合】解像度:300~350dpi カラーモード:CMYK(RGB)※1
【画面表示やインターネットのホームページ使用する場合】解像度:72dpi カラーモード:RGB
※1 RGBに比べ、CMYKは表現できる色数が少なく、操作(フィルター効果など)に制限がかかる為、最初はRGBで作業をし、最終段階でCMYKに変換するとよい。
既存の書類を開く Mac(⌘+O) / Win(ctrl+O)
①メニューより、「ファイル」→「開く」を選択。
②開きたいデータを選択。
③“開く”をクリック。
2.Photoshop(フォトショップ)の画面
Photoshopを起動し、書類を開くと下記のような画面が表示されます。
メニュー、パネルなど、各部の名称と役割を確認しましょう。
①メニューバー・・・作業中に必要な操作を実行するためのコマンド(命令)が収められています。
②コントロールパネル・・・選択したツールによって内容が変化します。
③ツールボックス・・・Photoshopで頻繁に使用するさまざまなツールが収められています。
④ドキュメントウィンドウ・・・写真や画像を開くとこのように表示されます。このウィンドウを“ドキュメントウィンドウ”と言います。
⑤パネル・・・使用するパネルを表示し、切り替えながら作業します。組み合わせも自由に変える事ができます。
プリントの方法 Mac(⌘+P) / Win(ctrl+P)
①メニューバーより、「ファイル」→「プリント」を選択。
②印刷範囲を変える時は、“プリント設定”をクリック。
③“プリント”をクリック。
3.ファイルの保存
書類の上書き保存 Mac(⌘+S) / Win(ctrl+S)
①メニューバーより、「ファイル」→「保存」を選択。
※「ファイル」→「保存」を選択すると、使用中の書類が上書き保存されます。
※保存されている画像を開いた場合は、その画像に変更を加えるまでメニューの「保存」はグレーで表示され選択できません。
書類の別名保存 Mac(⌘+Shift+S) / Win(ctrl+Shift+S)
①メニューバーより、「ファイル」→「別名で保存」を選択。
「ファイル」→「別名で保存」を選択すると、使用中の書類を上書きせずに、別に書類を作成し、保存します。
②ファイル名を入力。
③保存する場所を選択。
④フォーマットを選択。※詳しくは4.Photoshopがサポートするファイル形式を参照。
⑤“保存”をクリック。
4.Photoshopがサポートするファイル形式
Photoshopがサポートする画像のファイル形式には20種類を超えるさまざまな形式があります。その中でも特に重要で使用頻度の高いものをピックアップしてみました。
Photoshop(.psd)※フォトショップ 作業中
Photoshop専用のファイル形式。フォトショップ独自の機能を使用したデータや、作業中のデータはこの形式で保存します。
EPS(.eps)※イーピーエス 配置 印刷
Photoshop EPSファイル形式。イラストレーターに写真や画像を配置する場合は基本的にEPS形式で保存します。DTPで一般的に使用され、出力安定性の高い画像形式です。印刷会社などにデータを渡す場合にもこの形式を使用します。
JPEG(.jpg)※ジェイペグ インターネット
インターネットなどでよく利用される圧縮ファイル形式。色はフルカラーに対応しているため写真の圧縮に向いています。現在主流となっているデジタルカメラの保存フォーマットとしてもスタンダードとなっています。
GIF(.gif)※ジフ インターネット
インターネットを中心に使用される圧縮ファイル形式。GIFファイルは8ビットカラーのファイル形式で、色数が256色と少ないため、イラストやアニメーションの圧縮に向いています。写真等をGIF形式で圧縮すると画像が荒れてしまいます。GIFの特徴としては透明色が使えることに加えて、動画を作成することができ、広告用のバナーなどに多く使われています。
PNG(.png)※ピング インターネット
インターネットなどでよく利用される圧縮ファイル形式。透明色を用いた画像を作るのに適しています。PNGにはGIFのような8ビットカラー画像と、JPGのように24ビットカラーRGB画像もサポートしており、可逆圧縮で、画像の質を落とすこともありません。ただPNGはJPEG、GIFのファイル形式の中ではファイルサイズが1番大きくなりがちです。
PDF(.pdf)※ピーディーエフ
MACとWindows共通のファイル形式。ファイルを表示する為にはAdobe社がインターネット上で無料配布している“Adobe Reader”というソフトが必要です。
※カッコ()内は拡張子、拡張子はPCが書類のタイプを判別する為に必要です。必ずつけましょう。
5.画像解像度
画像解像度とは、画像のきめ細かさや、滑らかさを表す尺度です。
1インチあたりのドット数で表され、単位として「dpi」が用いられます。「画像解像度」とは、その画像がどのくらいの密度で構成されているかを表す数字のことです。
1インチの中にいくつのピクセル(ドット)が並んでいるのかを表しており、1インチあたりのピクセル数が多いほど画像解像度が高いと言えます。WEBに適した画像解像度は72dpi、印刷では300dpi~350dpiです。解像度が十分でない画像は、印刷時に粗くぼやけた印象になります。
画像解像度:72dpi
解像度が72dpiで印刷した場合、解像度が低いため、ジャギー(ギザギザ)となったり、細部のディティールが失われ、ぼやけた印象になり、画像のクオリティは落ちてしまいます。
画像解像度:300dpi
解像度が300dpiで印刷した場合、解像度が十分にあるため、印刷物に細かいディティールが再現され、美しい仕上がりとなります。
画像解像度を変更してみよう
“画像解像度”を表示するには、メニューバーより、「イメージ」→「画像解像度」を選択。
①画像サイズ・解像度の変更前と変更後のピクセル数。ピクセル数が多いほど画像のファイルサイズは大きくなります。
※「画像の再サンプル」にチェックを入れない状態だとファイルサイズとピクセル数は一定のままになります。
②現在の画像のサイズ
③印刷用であれば、300~350pixel/inch、Webや画面表示用は72か96pixel/inch
④チェックを入れると縦横比が固定されます。
6.まとめ
Photoshop(フォトショップ)を習得するのに知っておきたい基本の機能や使い方を分かりやすく解説しました。基本的な使い方を学ぶことで、よりスムーズなPhotoshopによるデザイン制作を行うことができるようになります。
最新記事
-
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
「初めてホームページを作るんだけど、制作会社との打ち合わせって何を聞かれるの?」 「あらかじめスケジュールを立てておきたいんだけど、どのくらい期間が必要なの?」など、制作がどんな風に進んでいくのか心配な方も多いんじゃない […]