今回はWEBデザインに特化したPhotoshopの使い方を、動画を交えて解説していきます。
写真加工などのスキルについては、他の解説を見ることをオススメします。
また、出来ればデザインのステップ2〜ステップ4は「3周」繰り返しましょう。
ある程度、Photoshopの使い方を記憶してから先に進むと躓かなくてすみます。
なおもしPhotoshopが何らかの理由で使えない場合、Figmaというツールを使うこともできます。
Photoshopよりできることは少ないですが、シンプルなデザインやUIを作るには、Photoshopよりも使いやすいはずです。
シンプルなデザインだけ作る場合はFigma、もっとグラフィック的な表現をするならPhotoshopといった使い分けです。 もしFigmaを使ってみたい方は「Figmaの使い方カリキュラム」で学んで見てください。
では、こちらではPhotoshopを始めていきましょう。
Photoshopとは、Adobeが提供している写真加工をメインとしたソフトウェアでした。
しかし、細かいエフェクトをつけられたり、繊細なデザインが出来る機能も盛りだくさん。
結果的にWEBデザイン業界では、デザインツールとして使われるソフトウェアになったのです。
WEBデザインをするのであれば、今はまだPhotoshopは知っておく必要があります。
最近ではXDやIllustratorというツールも使われるようになりましたが、まだPhotoshop主体です。
今回は、WEBデザインの要であるPhotoshopについて習得していきましょう。
また、ここですべて使い方を「暗記する必要はありません」。
なんとなく全体として、ざっくり把握するだけでOKです。
というのも、実際の使い方は、やっているうちに覚えます。
制作しながら体が覚えていくものです。
理解しきっていなくても、とにかく進めましょう。
後から使う必要がある時に「この機能どこかで見たな」と見返すイメージです。
完璧を目指さず、進めていくことが大事です。
カンバスを開く
まず、Photoshopを開いたら「カンバス」を開きます。
デザインを描いていく土台のようなものです。
絵を書く紙のようなイメージだと認識してください。
カンバスのサイズは横幅1024pxに設定しましょう。
ガイドを引いて、コンテンツエリアを決める
※ 上記の説明動画には、音声がありませんのでご了承ください。
WEBデザインしやすいように、カンバスを調整しましょう。
最初に横幅1,024pxで開いたあと、左右に「ガイド」を引いて「コンテンツエリア」を決めます。
※もしカンバスを開いた時点で画面端の定規が見当たらなければ、画面上部にあるメニューの「表示」にある「定規」をクリックしてください。
コンテンツエリアとは「基本的な情報が入るエリア」のことです。
背景は別として、すべてのコンテンツを、なるべくエリア内に入れます。
どんな小さなサイズのパソコンでも、情報をディスプレイ内に収めるためです。
あまりにもコンテンツの横幅が大きいと、画面からはみ出してしまうでしょう。
そうすると見ずらいので「背景以外の横幅最大値」を決めます。
主体となるコンテンツは「ガイドの内側」に入れましょう。
画面を横幅いっぱいに使うパーツや背景のデザインは、ガイドを越えても構いません。
さらにカンバスそのものの横幅を1,224pxに設定しなおし横幅を広げます。
これで、WEBサイトをデザインする基本的なエリアの出来上がりです。
作るサイトによってサイズは様々ですが、今回はこれを基準としてください。
カンバスの横幅を1,224pxに広げるのは「本番に近い形」でデザインするためです。
まず、メインのコンテンツが入るエリアが1024px内となります。
1024pxの外は、背景などが左右いっぱいに突き抜ける際に活用するエリアです。
もし横幅を広げない場合、どうなるでしょうか。
例えば横幅1024pxいっぱいに画像や写真などを入れたときを考えてみてください。
左右に余白が無い状態になりますよね。
通常、左右に余白が無い状態でWEBサイトを閲覧することは、ほぼありません。
全体の印象として本番のデザインとは、やや印象が乖離してしまいます。
だからこそ、メインコンテンツの左右に余白を開ける必要があります。
これにより、本番に近い印象でデザインすることができます。
単位がpxでなければ設定する
また、最初に画面を開いた時、単位がmmになっていることもあります。
そんな時は、下記のように「px」に修正しておきましょう。
単位もフォントサイズも基本は「px」で作っていきます。
基本的な操作方法
ベースを作ったら、次は具体的な操作方法を習得しましょう。
ちなみに動画内で「何もクリックしていないのに動いている」ことが何度かあります。
それは「ショートカットキー」を使っているからです。
ショートカットについてはページの最後に記載してあります。
ぜひ、参考にしてみてください。
まず、何か図形を描いてみましょう。
基本は、左サイドバーからツールを選び、キャンパス上で使う、という流れです。
右サイドバーでは、描いたものに対して効果をつけたり、カスタマイズしたりします。
左サイドバーの「アイコン」は「長押し」すると様々なツールが現れます。
今使っているツールは「シェイプツール」と言いますが、こちらも長押しすると様々な形のツールが現れます。
長方形だけでなく、楕円や角丸、多角形、アイコンを作るものなど確認できるのではないでしょうか。
描かれた図形は「シェイプ」と呼ばれ、自由に色や形を変形できます。
まず、シェイプの概要を掴むために、長方形ツールを見てみましょう。
WEBデザインをする上で、最も使うと言っても良いツールです。
自由な長さや大きさの四角形を描くことができます。
shiftキーを押しながら描くと、正方形で固定されます。
よく使う操作ですので、ぜひ覚えておいてください。
さらに、右の「属性パネル」で数字を入れると、角を丸くできたりします。
ただし、初期状態だと「属性パネル」が表示されていない場合もあります。
その場合は、上部ナビゲーションの「ウィンドウ」から表示させることが出来ます。
他のツールも試してみよう
角丸ツールは、角の丸い四角形を描きます。
※ 2021年Photoshopの最新バージョンには角丸ツールがありません。
下記のページを参考に習得してみてください。
■ シェイプを簡単に描画、編集、再編集する
https://helpx.adobe.com/jp/illustrator/how-to/live-shapes.html
楕円ツールは丸い形を描きます。
多角形ツールは、画数を自由に変えられる他、設定によっては星も作れます。
線ツールは線を描きます。
カスタムシェイプツールは、様々なアイコンを描くことができます。
このように、様々な形をツールで描くことができるのえす。
適材適所でツールを使い、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の使い方をご紹介していきます。