design Photoshopの基本操作を覚えよう!
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

Photoshopの基本操作を覚えよう!

WEBデザイン|2018年10月29日

2018年10月29日
  • このエントリーをはてなブックマークに追加

今回はWEBデザインに特化したPhotoshopの使い方を、動画を交えて解説していきます。
写真加工などのスキルについては、他の解説を見ることをオススメします。

また、出来ればデザインのステップ2〜ステップ4は「3周」繰り返しましょう。
ある程度、Photoshopの使い方を記憶してから先に進むと躓かなくてすみます。

なおもしPhotoshopが何らかの理由で使えない場合、Figmaというツールを使うこともできます。
Photoshopよりできることは少ないですが、シンプルなデザインやUIを作るには、Photoshopよりも使いやすいはずです。
シンプルなデザインだけ作る場合はFigma、もっとグラフィック的な表現をするならPhotoshopといった使い分けです。
もしFigmaを使ってみたい方は「Figmaの使い方カリキュラム」で学んで見てください。

では、こちらではPhotoshopを始めていきましょう。

Photoshopとは、Adobeが提供している写真加工をメインとしたソフトウェアでした。
しかし、細かいエフェクトをつけられたり、繊細なデザインが出来る機能も盛りだくさん。
結果的にWEBデザイン業界では、デザインツールとして使われるソフトウェアになったのです。
WEBデザインをするのであれば、今はまだPhotoshopは知っておく必要があります。

最近ではXDやIllustratorというツールも使われるようになりましたが、まだPhotoshop主体です。
一方で、Figmaというデザインツールもどんどんシェアを伸ばしています。
万が一Photoshopのシェアを抜くとすれば、Figmaかと予想はされます。
ざっくりと使い方を把握しておいても良いかもしれません。
今回は、WEBデザインの要であるPhotoshopについて習得していきましょう。

また、ここですべて使い方を「暗記する必要はありません」。
なんとなく全体として、ざっくり把握するだけでOKです。

というのも、実際の使い方は、やっているうちに覚えます。
制作しながら体が覚えていくものです。

理解しきっていなくても、とにかく進めましょう。
後から使う必要がある時に「この機能どこかで見たな」と見返すイメージです。
完璧を目指さず、進めていくことが大事です。

カンバスを開く

まず、Photoshopを開いたら「カンバス」を開きます。
デザインを描いていく土台のようなものです。
絵を書く紙のようなイメージだと認識してください。
カンバスのサイズは横幅1024pxに設定しましょう。

ガイドを引いて、コンテンツエリアを決める

※ 上記の説明動画には、音声がありませんのでご了承ください。

WEBデザインしやすいように、カンバスを調整しましょう。
最初に横幅1,024pxで開いたあと、左右に「ガイド」を引いて「コンテンツエリア」を決めます。

※もしカンバスを開いた時点で画面端の定規が見当たらなければ、画面上部にあるメニューの「表示」にある「定規」をクリックしてください。

コンテンツエリアとは「基本的な情報が入るエリア」のことです。

背景は別として、すべてのコンテンツを、なるべくエリア内に入れます。
どんな小さなサイズのパソコンでも、情報をディスプレイ内に収めるためです。
あまりにもコンテンツの横幅が大きいと、画面からはみ出してしまうでしょう。
そうすると見ずらいので「背景以外の横幅最大値」を決めます。

主体となるコンテンツは「ガイドの内側」に入れましょう。
画面を横幅いっぱいに使うパーツや背景のデザインは、ガイドを越えても構いません。

さらにカンバスそのものの横幅を1,224pxに設定しなおし横幅を広げます。
これで、WEBサイトをデザインする基本的なエリアの出来上がりです。

作るサイトによってサイズは様々ですが、今回はこれを基準としてください。

カンバスの横幅を1,224pxに広げるのは「本番に近い形」でデザインするためです。

まず、メインのコンテンツが入るエリアが1024px内となります。
1024pxの外は、背景などが左右いっぱいに突き抜ける際に活用するエリアです。

もし横幅を広げない場合、どうなるでしょうか。
例えば横幅1024pxいっぱいに画像や写真などを入れたときを考えてみてください。
左右に余白が無い状態になりますよね。

通常、左右に余白が無い状態でWEBサイトを閲覧することは、ほぼありません。
全体の印象として本番のデザインとは、やや印象が乖離してしまいます。

だからこそ、メインコンテンツの左右に余白を開ける必要があります。
これにより、本番に近い印象でデザインすることができます。

単位がpxでなければ設定する

また、最初に画面を開いた時、単位がmmになっていることもあります。
そんな時は、下記のように「px」に修正しておきましょう。
単位もフォントサイズも基本は「px」で作っていきます。

基本的な操作方法

ベースを作ったら、次は具体的な操作方法を習得しましょう。

ちなみに動画内で「何もクリックしていないのに動いている」ことが何度かあります。
それは「ショートカットキー」を使っているからです。
ショートカットについてはページの最後に記載してあります。
ぜひ、参考にしてみてください。

まず、何か図形を描いてみましょう。
基本は、左サイドバーからツールを選び、キャンパス上で使う、という流れです。
右サイドバーでは、描いたものに対して効果をつけたり、カスタマイズしたりします。

左サイドバーの「アイコン」は「長押し」すると様々なツールが現れます。
今使っているツールは「シェイプツール」と言いますが、こちらも長押しすると様々な形のツールが現れます。
長方形だけでなく、楕円や角丸、多角形、アイコンを作るものなど確認できるのではないでしょうか。

描かれた図形は「シェイプ」と呼ばれ、自由に色や形を変形できます。

まず、シェイプの概要を掴むために、長方形ツールを見てみましょう。
WEBデザインをする上で、最も使うと言っても良いツールです。
自由な長さや大きさの四角形を描くことができます。
shiftキーを押しながら描くと、正方形で固定されます。

よく使う操作ですので、ぜひ覚えておいてください。

さらに、右の「属性パネル」で数字を入れると、角を丸くできたりします。
ただし、初期状態だと「属性パネル」が表示されていない場合もあります。
その場合は、上部ナビゲーションの「ウィンドウ」から表示させることが出来ます。

他のツールも試してみよう

角丸ツールは、角の丸い四角形を描きます。
楕円ツールは丸い形を描きます。
多角形ツールは、画数を自由に変えられる他、設定によっては星も作れます。
線ツールは線を描きます。
カスタムシェイプツールは、様々なアイコンを描くことができます。

このように、様々な形をツールで描くことができるのえす。
適材適所でツールを使い、WEBサイトをデザインしていきます。

レイヤーについて学ぼう

右下はレイヤーと言い、パーツの重なりを意味しています。
上にあるレイヤーが重なりとして上になります。

レイヤーの右の「空白部分」をダブルクリックすると、様々なエフェクトがつけられます。

レイヤーのグループ化と透明度ついて学ぼう

また、レイヤーが増えてくるとごちゃごちゃして見辛くなってしまいます。
そんな時に使うのが、レイヤーのグループ化です。
command ( Ctrl )を押しながらレイヤーを選択すると、複数選択ができます。
複数選択したあとにcommand+g ( Ctrl+g )を押すと、グループ化ができます。
フォルダのアイコンが現れて、1つにまとめられるはずです。

さらにレイヤーは、その場に位置を固定することも可能です。
位置を固定したいレイヤーを選択し、レイヤー上部にある鍵アイコンをクリックしましょう。
すると、レイヤーの横に鍵マークが現れ、選択ツールで触れても移動しないようになります。

他にも、例えば、レイヤースタイルで枠線をつけた時。
枠線だけ残して、中の面を透明にしたい!ということもあります。
そんな時は、レイヤーの上部にある「塗り」を調整してみましょう。
「枠線」を残して面の部分だけを透明にすることもできます。

使い方は、学ぶより慣れが大事ですので、色々いじりながら、試してみてください。

移動ツール

移動ツールはオブジェクトを移動させるツールです。

上部の「自動選択」にチェックがある場合「カーソルで選択したオブジェクト」が移動します。
チェックが入っていない場合は「右下のレイヤーで選んだ箇所」だけが動きます。

文字ツール

定番ツールの1つ、文字ツールです。

普通に文字を描くことが出来る他、左や右に寄せたり、中央に寄せたりできます。
また「alt+左右キー」で文字幅を空けたり「alt+上下キー」で行間を空けたりできます。

ドラッグで範囲を決めて、範囲内で文章として作ることもできます。
もちろん、持っているフォントであれば、自由に変えられます。

スポイトツール

スポイトツールに切り替えて、対象のオブジェクトをクリックすると、色が取得できます。

取得した色は、左サイドバーのカラーエリアに反映されます。
カラーエリアから、色を意味する数字、カラーコードを取得できたりします。

なお、文字色などを指定する時や、レイヤーで効果をつける時など、色指定の際には必ず現れる「カラーピッカー」からマウスカーソルを外すと、自動的にスポイトツールに変化します。
オブジェクト上でクリックすることで、直接、色をシェイプに反映させることができます。

パス選択ツール / アンカーポイントの追加ツール

描いたシェイプは、自由に形を変更することができます。
パス選択ツールを使えば、それぞれのパスを引き伸ばしたりと自由な変更が可能です。

また、アンカーポイントの追加ツールもよく使います。
アンカーポイントとは、パス選択ツールで引っ張ると、形を変えられる「点」のことです。

アンカーポイントの追加ツールを使うことで、アンカーポイントが無い部分にポイントを作ることもできます。
アンカーポイントから伸びる線を動かしてみましょう。
シェイプの角度を変えられます。

また、altを押しながら線を動かしてみてください。
アンカーポイントを基準として先に伸びる線の角度だけを変更できます。

吹き出しのような形など、変形パーツを作る時にうってつけです。

なお、動画の途中で「拡大や縮小」をする動作がありました。
こちらは、commandキーとプラスボタンを押すことで拡大しています。
反対に縮小する時は、commandキーとマイナスボタンを押して縮小します。
WindowsだとCtrlキーにとプラス、マイナスキーですね。

よく使うショートカットですので、覚えておきましょう。

ブラシツール

シェイプはある程度決まった形を描くツールです。
一方で、ブラシツールは自由に絵を描くことができます。

ブラシのタイプを変えたり、太さを変更することで、自由に線を描きます。
WEBデザインで、ちょっとしたアクセントがほしい時などに利用します。

その他の操作と機能について

ほかにも、Photoshopには細かい機能がありますので、ご紹介します。

それぞれ、下記のショートカットと一緒に、試してみてください。
動画でいくつか「画面に何も表示されていないのに動いている」場合があるかと思います。
それは、全てショートカットキーを使っているからです。
なるべく普段からショートカットキーを練習し、いつでも自在に使えるようにしてください。
最初は難しいかもしれませんか、慣れてくると無意識で使えるようになってきます。
( Windowsの場合command → Ctrl )

  • command + Z : 1つだけ作業を戻す
  • command + alt + Z : 延々と作業を戻す
  • command + delete : すべてを塗りつぶす(左サイドバーの背景色で)
  • command + A : 全部を選択
  • command + C : コピー
  • command + V : ペースト(貼り付け)
  • command + T : オブジェクトの拡大縮小
  • command + S : 保存
  • command + G : レイヤーのグループ化

ひとまず、基本的なツールの使い方のご説明でした。
次回は、より踏み込んだPhotoshopの使い方をご紹介していきます。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら