Webデザイナーが解説!Photoshopの起動から書き出しまで

ロードマップ

「WebデザイナーになるためにPhotoshopが必要と聞いたけれど、使いこなせるのか不安…」

「調べたり、勉強したいけれど、Photoshop用語とか分からないしな…」

いざWebデザイナーになるために、Photoshopの勉強を始めようとしたけれど、こんな悩みはありませんか?

そこで本記事では、以下についてまとめました。

  • Photoshopの操作画面の見方からPhotoshop用語の理解
  • Photoshopを起動してからデザイン作成までの解説
  • Webデザインで使用するデータ形式

この記事を見るだけでPhotoshopの操作画面の構成、パーツの呼び方をしり、簡単なデザインを作成出来るようになります。

画像付きで、なるべく分かりやすく解説しましたので実際に手を動かしながらぜひ最後まで見てください。

Photoshopの画面の構成とパーツの呼び方

Designed by Creativeart / Freepik

WebデザインをするのにPhotoshopを開いたけれど、初めて見る画面、画面の構成でパーツの呼び方もわからない…と、なっていませんか?

わからないことが出てきても、調べたいものの呼び方がわからないと調べることができずに困ってしまいますよね。

はじめに知っておきたい表示画面の構成や、それぞれのパーツの名前と機能を簡単に説明していきます。

操作画面の名称

Photoshopを起動しましょう。

起動すると、はじめに表示されるホーム画面から説明していきます。

ホーム画面

ホーム画面とは?

Photoshopを開くとこんな画面がでてきます。

開くと最初に出てくるこの画面がホーム画面です。

ここから新規作成の設定をしたり、最近使用したPhotoshopのデータを選択したりできます。

ワークスペース

Photoshopでデータを開いたり新規作成をすると、表示される画面をワークスペースと呼びます。

実際にPhotoshopで編集できる画面です。

ワークスペースのまわりには、たくさんのメニューやアイコンが表示されています。

1つ1つ名前がついているので、調べるときにはこの名前を頼りに検索してみてください。

①メニューバー
②ツールバー
③オプションバー
④アートボード
⑤サイドバーパネル
⑥パネル

Webデザイナーの第一歩!デザインを作成するための事前準備4選

Designed by Creativeart / Freepik

実際にデザインを作成するための事前準備4選をご紹介していきます!

  1. 新規ファイルの作成
  2. カラーパターンを選択
  3. カンバスサイズの変更
  4. パネルの設定

①新規ファイルの作成

  1. 画面左側、新規作成を押す
  2. 新規ドキュメントウインドウが表示されます。
  3. 上部のタブにある「Web」をクリック
  4. プリセットが表示される
  5. 目的に適したアートボードサイズを選択(※今回はWebデザイン用の一般サイズを選んでいます。)
  6. 右下の作成を押す
  7. ファイルが開きます

プリセットに希望のサイズがない場合は右側赤丸内の幅、高さを変更しても作成できます!

②カラーパターンを選択する

カラーパターン(カラーモード)とは?

画像の色を表現する方法のこと。

①新規ファイルの作成の画像を見ていただくとわかるように、右側のプリセット詳細の中にあるカラーモードのことです。

カラーモードは印刷用、Web用などそれぞれの用途によって種類があります。

カラーモードを適切に設定していない画像は、色がくすんだり、鮮やかすぎたりして制作物の品質をさげてしまいます。

デザインデータを扱う上でとても大切な設定になるので、必ず確認するようにしたほうが良いです。

【㊧RGPカラーモード・㊨CMYKカラーモード】

RGP

RGP(アールジーピー)とは、Web用のカラーモードで、PCのモニターやデザインなどで使用されています。

  • Red(赤)
  • Green(緑)
  • Blue(青)

の、頭文字を表したものでこの三色が重なって、重なれば重なるほど白に近づいていく

CMYK

CMYK(シーエムワイケー)とは、印刷用のカラーモードで、雑誌やポスターなどで使用されています。

  • Cyan(シアン)
  • Magenta(マゼンタ)
  • Yello(黄)
  • KeyPlate(キー・プレート)

の、頭文字を表したもの混ぜれば混ぜるほど暗くなり、黒色に近づいていく

③カンバススサイズの変更

カンバスとは新規ファイルの作成をしたあとに開かれたファイルワークスペースの事です。

絵を書くときにキャンパスの上に絵の具を乗せていくように、Photoshopではカンバス上に画像や文字を置いていきます。

カンバスはいつでも編集出来るところが便利です。

サイズの拡大、縮小、色の変更など簡単に調節できます。

  1. 画面上部メニューバーのイメージ
  2. カンバスサイズ
  3. ウィンドウが出てくるので希望の数値を入力
  4. OK

④パネルの追加設定

パネルとは?パネルというメニューがあるわけではなく、ワークスペースを自分好みにアレンジする一つ一つの項目の事をいいます。

Photoshopは、よく使用するパネルを集めて保存しておくことができます

Webデザインでは、使用するパネルがある程度決まっていますのでパネルを追加して自分好みのワークスペースにしておくと便利です。

実際に使用しているパネルもご紹介していますのでなにを追加したらいいかわからないという方は、まねしてみてください。

使用していくうちに自分好みのパネルを作成して使いやすいようにアレンジしてみて下さい。

パネルの追加・設定

  1. 画面上部メニューバーのウィンドウ
  2. 一覧がでてきます、一覧からブラシ、ヒストリー、文字など好みのパネルをクリック
  3. 右に小さいパネルが表示されるので好きな位置に置いていく

実際に使用しているパネルのご紹介

私は、アートボードを大きく使いたいのであまり機能は追加しずぎずに3つに絞っています

ワークスペースの設定をグラフィックとWebに設定し最低限のパネルのみ追加してます。

・グラデーション
・シェイプ
・ヒストリー

グラフィックとWebの設定

  1. 画面上部メニューバーのウィンドウ
  2. ワークスペース
  3. グラフィックとWeb

ワークスペースの保存

先程自分好みに使いやすいようにアレンジ作成した、ワークスペースはいつでも呼び出せるように保存しておくのがおすすめです!

  1. 画面上部メニューバーのウィンドウ
  2. ワークスペース
  3. 新規ワークスペース
  4. 保存

簡単なデザインを作成してみよう!

Designed by Creativeart / Freepik

Photoshopの画面の構成・パーツの呼び方からデザインを始めるための事前準備までできたので、実際に簡単なデザインを作成してみましょう!

図形の作成、色を付ける

  1. 左側のツールバーの□四角マークを選択
  2. アートボード上でマウスをクリックしながら左右に動かし任意の場所で離すと四角の図形ができます
  3. オプションバーの塗りを選択
  4. カラーピッカーのマークを押す
  5. 黒丸を動かして色を選択
  6. OK

オプションバーの□四角の下にある◯丸で同じように丸の図形が作成できるので実際に一人で作成してみてください。

レイヤーとは?

Photoshopでは「レイヤー」という単語が出てくる頻度が多いので理解することが必要です。

一枚の画像のように見えるものが、実は何階層ものレイヤーが重なって見えています。

この一枚一枚の層がレイヤーです。

Webデザインの勉強でPhotoshopを使用するには必須の用語です。

レイヤーが積み重なっている理由

あとで修正したいときに作業をしやすくするためです。

例えば、キャッチコピーが変更になったとします。

上の画像の「Yummy」が変更になった場合、上の画像のようにレイヤーが分かれていれば、テキストレイヤーにある文字を修正すれば簡単に文字だけ修正できます。

それがレイヤーが1つで構成されていた場合、画像の上に文字がくっついた状態になっているので文字だけの修正をするにも、文字の部分を消して、新しく文字を入力することになります。

そして、同じ画像が用意できない場合は、消えた画像の部分をいろんな方法を駆使して復元しないといけません。

もし、レイヤーが1枚だったとしたら、あとで修正したいときに、とても作業がしづらくなってしまいますよね?

あとからでも作業しやすいようにレイヤーは細かく分ける必要があります。

画像の書き出し

Designed by Creativeart / Freepik

PhotoshopでWebデザインを作成したあとはデータをWeb上にあげたり、他の人に共有したりすることがでてきます。

作成したデータの書き出し方法と、Webデザイナーが使用するデータ形式を説明していきます。

画像の書き出し方法

  1. メニューバーのファイル
  2. 書き出し
  3. Web用に保存
  4. 赤い四角のところでファイル形式を選択
  5. 完了

データ形式(拡張子)とは?

ファイルの名前の後ろに「.psd」や「.jpg」などと付いているので見かけたことがあると思いますが、これは拡張子といって、そのファイルがどんなファイル形式で保存されているデータなのか判断する目印のようなものです。

Photoshop(PSD)形式

Photoshopで編集できる状態のファイル形式です。

独自保存形式のうちの1つで、Photoshopで編集することに特化した形式です。

Photoshop(フォトショップ)形式と呼んだり、拡張子からPSD(ピーエスディー)形式と呼ばれたりします。

編集中のファイルの一時保存の時に利用します。

拡張子は「.psd」なので、Photoshop形式のファイルは「○○○.psd」というファイル名になっています。

Photoshop形式のファイルを開く場合は、基本はPhotoshopのソフトを使う必要があります。

JPEG形式

JPEG(ジェイペグ)形式は、圧縮形式の1つで、主に写真の扱いに適しています。

拡張子は「.jpg」です。

JPEG形式は何度も画像を保存しなおすと劣化する「不可逆圧縮」なので保存しなおす際は気をつけて下さい。

圧縮率が高く、フルカラーの画像を扱えるため、デジカメ写真の記録に使用されることが多いです。

初期設定では、直前に編集していたファイル名に番号がついた名前になっています。

そのまま保存しても後から変更できますし、任意のファイル名を入力して保存することもできます

GIF(ジフ)形式は、256色(8bit)までの制限された色を扱う画像形式で、色数の少ないロゴ、アイコン、イラストなどに向いています。

JPEG形式に比べ容量が軽くなりますが、写真などのグラデーションが多い画像は色の境目がはっきりしてしまうので向いていません。

拡張子は「.gif」です。GIF形式はアニメーション画像にすることもでき、最近ではアニメーションでの利用が多くなってきました。

PNG形式

PNG(ピング)形式の特徴は透明部分を保ったまま画像を保存できることです。

主に色数の少ない透明部分のあるロゴやイラストなどの保存に向いています。

拡張子は「.png」です。

また、PNG形式は何度保存し直しても画質が劣化しない「可逆圧縮」という画像形式です。

PNG形式で保存する場合、なるべく元の画像の品質を持ったまま圧縮しようとしてくれる画像形式なので、画質の劣化が少なく綺麗な状態になりやすいです。

その分、容量が大きくなりやすいので条件を比べながらうまくファイル形式を選択していくのが良いです。

PDF形式

PDF(ピーディーエフ)形式は、紙に印刷する状態と同じ状態を表示することができる電子版の紙のようなものです。

特徴がいくつかあります。

  • 文書フォーマット
  • 標準規格
  • 文字・画像・音声などを埋め込める
  • OSや機器の種類を問わず、同じに見える
  • パスワードなどのセキュリティ機能を搭載

まとめ|Webデザイナーが解説!Photoshopの起動から書き出しまで

Designed by Creativeart / Freepik

本記事では、Webデザイナーを目指してPhotoshopの勉強をはじめた方に向けて以下の内容をご紹介しました。

  • Photoshopの操作画面の構成とパーツの呼び方
  • Photoshopでデザインを作成するための事前準備4選
  • 簡単なデザインを作成してみよう!
  • 書き出しについて

いかがだったでしょうか?

機能を実際に使用してみると思っていたより難しくなかったですよね?

Webデザインで使用するPhotoshopの操作画面の構成やパーツの呼び方を知ったので、使いこなす為にも調べやすくなったと思います。

少しずつWebデザインで使用するPhotoshopの機能になれていき、簡単なデザイン作成から何回か繰り返していけば、もっとスムーズに楽しく作成できるようになります。

Webデザイナー目指して楽しく勉強していきましょう!

コメント

タイトルとURLをコピーしました