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

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

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

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

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

デザインする前の準備

まず、Photoshopを開いたら「ドキュメント」を開きましょう。
Photoshopはドキュメントを開いて、そこからデザインを描いていきます。

ドキュメントを開くと、中央に白い紙のようなエリアが現れます。
これを、カンバスと言います。

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

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

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

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

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

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

横幅をなぜ広げるかですが、より「本番に近い形」でデザインするためです。

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

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

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

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

また、最初に画面を開いた時、単位が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サービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら