Webデザイン

Webデザイン初心者必見!Photoshopの基本設定について解説

この授業は次のような方におすすめです。

・これからWebデザインを始めようと思っている方

・Webデザインを始めるにあたってPhotoshopについて基本的な設定などについて知りたい方

この授業を受けていただくと、上のような疑問を解消することができ、Webデザイナーへの第一歩を踏み出すことができるようになりますよ。

どうぞ最後までご覧になってください。

Photoshopとは

デザイニャー
デザイニャー
Photoshopは、高い機能をもっている、Adobe社が提供している画像編集ソフトだニャン。

先生
先生
Photoshopの主な機能には次のようなものが挙げられるよ。

・レイヤーカンプ機能 ⇨ 複数のデザイン案を管理できる

・スライス機能 ⇨ 画像を複数に分割する

WebデザインをするときにPhotoshopを使う3つのメリット

先生
先生
Photoshopは画像の編集の他にも色々なWebデザインに役に立つ機能を備えているんだ。Webデザインをする時にPhotoshopを使うメリットには次の3つが挙げられるよ。

・レイヤーカンプ機能

・スライス機能

・強制的なフォント変更を行わない

レイヤーカンプ機能

先生
先生
レイヤーカンプ機能というのは、デザインパターンをボタン1つで簡単に切り替えることができる機能だよ。

デザイニャー
デザイニャー
Webデザインをする場合には、複数の案やページを作るから、それをボタン1つで切り替えることができるということかニャン。

先生
先生
Photoshopのレイヤーカンプ機能を使うことで、何パターンでも登録することができて、書き換えることも自由にできるからすごく便利なんだ。

デザイニャー
デザイニャー
表示非表示を切り替えるパーツの階層が深くても、レイヤーカンプを上手に利用することで、切り替えることができるんだニャン。

スライス機能

先生
先生
スライス機能というのは、オーソドックスな画像書き出しをする方法なんだ。

デザイニャー
デザイニャー
1つのデザインデータをパーツごとに切り分けて、それらをそれぞれファイルとして保存する機能のことで、Web制作をする時には多く用いるんだニャン。

先生
先生
スライス機能には次の3つの方法があるんだ。

・スライスツールに切り替えて手動で行う方法

・定規からガイドをドラッグして切り分ける方法

・レイヤーに基づく新規スライス

強制的なフォント変換を行わない

デザイニャー
デザイニャー
Photoshopでは、強制的なフォント変換は行われないんだニャン。

先生
先生
Webデザインをする時には、デザイナーやコーダーなど多くの人たちがチームを組んで同時に作業を行う場合もあるんだ。その場合、それぞれの作業者のフォント環境が異なっている場合があっても、Photoshopなら、強制的なフォント変換が行われないから、見た目のスタイルを保ちながら作業を進めていくことができるんだ。

WebデザインをするときにPhotoshopを使うデメリット

先生
先生
PhotoshopだけでWebデザインを作ることはできはするけれど、複雑な加工やページ数が増えてくると、データが重くなってくるよね。

デザイニャー
デザイニャー
ヘッダーの追従やホバーの動き、そして画面遷移したりするときに、デザインを表現することが難しいという問題もあるニャン。

先生
先生
それに、Photoshopは有料ソフトで、共有したり共同編集をするには、チームのみんながツールをインストールする必要があるから、デメリットになることもあるんだ。

WebデザインではPhotoshopとIllustratorのどちらを使う?

デザイニャー
デザイニャー
Photoshopには便利な機能が揃っていることがわかったけれど、Webデザインをするときに、Photoshopの他にもIllustratorも必要なスキルだと聞くけれど、どちらを使った方が良いのかニャン。

先生
先生
Webデザインをする時にはPhotoshopもIllustratorもどちらも使うんだ。Illustratorを使ってWebデザインをすることもできるけれど、Photoshopの機能と使い分けをすることで、より効率的にWebデザインを行うことができるようになるよ。

WebデザインをするときのPhotoshopとIllustratorの使い分け方

先生
先生
Webデザインをする時には、PhotoshopとIllustratorの使い分けは次の通りだよ。

・WebデザインカンプはPhotoshopで

・WebデザインのパーツはIllustratorで

WebデザインカンプはPhotoshopで

デザイニャー
デザイニャー
Photoshopは、全体の色合いを統一したり、オブジェクトを配置するときに便利なソフトで、画像の編集やWebデザインカンプを作る際に使われているんだニャン。

先生
先生
全体のデザインが完成したら、前に話したスライス機能で、デザインデータを傷つけずにパーツの切り出しをすることができるし、その後にするコーディング作業にスムーズに移ることもできるんだ。

デザイニャー
デザイニャー
だから、Photoshopは全体的なデザイン作りをする時に多く使われているんだニャン。

WebデザインのパーツはIllustratorで

デザイニャー
デザイニャー
Illustratorは、アイコンやロゴといった、Webサイトのパーツを作るのに向いているんだニャン。

先生
先生
Illustratorは、画像のサイズを変えても画質が変化しないことが特徴なソフトだから、図柄を描いていくのに向いているんだ。

Webサイト制作には

・大まかなデザインを作ったり画像編集をするのにはPhotoshop

・細かいパーツ作りはIllustrator

というのが一般的な方法です。

WebデザインではPhotoshopとAdobe DXをどう使い分けたらいい?

先生
先生
最近ではWebサイトを制作するのに、Photoshopだけでなく、Adobe XDというソフトを使うデザイナーが増えてきているんだ。

デザイニャー
デザイニャー
PhotoshopとXDをどう使い分けたら良いのかニャン?

先生
先生
Photoshopでデザインカンプを作ってからXDを使うのがおすすめだよ。

デザイニャー
デザイニャー
XDにはPhotoshopにはついていない機能がたくさんあって、Webサイトを実装していく時にXDを使うと効率的なんだニャン。

先生
先生
XDの機能には例えばこんなものがあるんだ。

・プロトタイプ機能 ⇨ いくつかのアートボードの間を繋いで、実際にWebサイトを通じてするユーザーの体験(UX)を確認できる。また、タッチジェスチャーやトランジションなどの動きも、プロトタイプ機能を使って実際と同じようにデザインすることができて、自分のイメージを具体的な形にしやすくなる。

 

・共同編集機能 ⇨ 同じファイルを何人かで共同で編集できて、変更もすぐに同期されるので、ストレスを感じずに作業を進められる。

先生
先生
スタータープランで無料でDXをすることができるので、まだXDを使ったことがない人は、体験してみたらどうかな。
【おすすめ】Webデザインの新ツールAdobe XDの使い方や機能この授業は次のような方におすすめです。 ・最近Webデザインの仕事でAdobe XDを使うことになったけれどまだよくわからない...

Photoshopの設定で気をつけておくべき5つのこと

デザイニャー
デザイニャー
PhotoshopでWebデザインをし始めてみたら、細かいところでつまづきがちなんだニャン。

先生
先生
ここでは、Webデザインを制作していく上で役に立つ、Photoshopの初期設定で気をつけておくべきポイントについて5つお話ししていくね。

・単位はpx(ピクセル)で

・フリックパン機能とアニメーション機能をオフにしておく

・レイヤー名を「〜のコピー」のままにしない

・カラーモードはRGBで

・保存設定をする

単位はpx(ピクセル)で

デザイニャー
デザイニャー
Photoshopを起動した最初はデフォルトで「mm」の単位で設定されているニャン。

先生
先生
Webデザインではpx(ピクセル)を使うから、編集⇨環境設定⇨単位・定規から、「定規」と「文字」のところの単位を「pixel」にしておこう。

フリックパン機能とアニメーション機能をオフにしておく

デザイニャー
デザイニャー
Photoshopにはアニメーションがつけられているのだけれど、このアニメーションがパソコンに負担をかけて、作業を遅くしてしまうことにも繋がるんだニャン。

先生
先生
そんな場合は、編集⇨環境設定⇨ツールで、「フリックパンを有効にする」と「アニメーションズーム」のチェックを外しておくことで、パソコンの負担がだいぶ軽くなるよ。

レイヤー名を「〜のコピー」のままにしない

先生

 

デザイニャー
デザイニャー
レイヤーというのは、加工したい画像に重ねていく層のことだニャン。

先生
先生
レイヤーを重ねることで、元の画像を傷つけずに、色々と変更を加えていくことができるんだ。その時、レイヤーをコピーして使うことが多いんだけれど、「〜のコピー」という言葉が目障りだから、この言葉を入れないような設定にするのがおすすめだよ。

デザイニャー
デザイニャー
どうやってそんなふうに設定するのかニャン?

先生
先生
レイヤーパネルの右上にある4本線をクリックして、「パネルオプション」⇨「コピーしたレイヤーとグループに「コピー」を追加」のチェックボックスを外しておこう。

カラーモードはRGBで

デザイニャー
デザイニャー
Photoshopは、カラーモードというカラーの表示方法を設定することができるニャン。

先生
先生
カラーの表示方法にも色々あるけれど、Webデザインだったら、RGBに変えておこう。ツールバーの「イメージ⇨モード」から変更することができるよ。

保存設定をする

デザイニャー
デザイニャー
Photoshopをやっていると、途中でパソコンがフリーズして、これまでの作業が全部ダメになってしまったなんてこともあるけれど、保存設定を変えておくことでこれを防ぐことができるんだニャン。

先生
先生
「編集⇨環境設定⇨ファイル管理」で、「復元情報を次の感覚で自動ほぞん」にチェックを入れておこう。それと合わせて、「ファイルの拡張子」を「必ず追加」にして、「小文字を使用」にチェックを入れておこう。そうしておくことで、ファイルを間違った形で保存するということも防げるよ。

Webデザインの仕事をするためのPhotoshopのおすすめの3冊の本

先生
先生
Photoshopを習得したい方におすすめの本は次の3冊だよ。

・デザインの学校 これからはじめるPhotoshopの本

・Photoshopレッスンブック

・世界一わかりやすいIllustrator&Photoshop&XD Webデザインの教科書

デザインの学校 これからはじめるPhotoshopの本

Photoshopの全くの初心者のかたにおすすめの本で、非常に初歩のところから丁寧に解説してくれています。

写真の合成やPhotoshopを使ってポストカードを作るという実践編まで解説してくれているので、Photoshopのことをまだ何も知らなくて、とにかくわかりやすい本が欲しいという方は、この本から始めてみてはいかがでしょうか。

Photoshopレッスンブック

初心者レベルよりももう一歩踏み込んだ本が欲しい方には、こちらの本がおすすめです。

入門書ながら、プロが使うような実践テクニックまで解説されています。

初心者でも、Photoshopでもっと本格的な作業ができるようになりたい方は、こちらの本から始めてみてはいかがでしょうか。

世界一わかりやすいIllustrator&Photoshop&XD Webデザインの教科書

Webデザインで使うソフトを一通り使えるようになりたい人なら、この本がおすすめです。

Photoshopだけでなく、IllustratorやXDの使い方も載っているので、一通りのWebデザインの基本を学ぶことができます。

Photoshopを学ぶには動画で学ぶのもおすすめ

デザイニャー
デザイニャー
Photoshopを勉強するなら、本も良いですが、動画で学ぶ方がもっとおすすめなんだニャン。

先生
先生
Photoshopは暗記するのではなくて、体で覚えるものだから、動画の方が、手を動かしながら学べる分習得しやすいからね。

デザイニャー
デザイニャー
だから、動画の方が本で学ぶよりも10倍も早く習得すると言われているんだニャン。

先生
先生
YouTubeで、検索してみたら、色々とPhotoshopの使い方の動画が出てくるよ。また、Udemyなどで学ぶのも良いよ。



PhotoshopでWebデザインをしてみよう

先生
先生
Photoshopの基本が身に付いたら、次のようなことをしてみよう。

・自分のデザインサイトをデザインしてみる

・好きなWebサイトを模写してみよう

自分のデザインサイトをデザインしてみる

デザイニャー
デザイニャー
初めは何をデザインしてみれば良いのかわからないニャン。

先生
先生
そうだよね。そこで、Webデザインのスキルを上げていくために、自分の勉強サイトをデザインしてみよう。

自分の勉強サイトは自由にデザインできるし、楽しみながら勉強を進めていくことができます。

先生
先生
Webデザインの勉強は楽しみながら効率的に進めていくことが上達のポイントだよ。

好きなWebサイトを模写してみよう

デザイニャー
デザイニャー
自分が好きなWebサイトをPhotoshopで模写してみるのも良いようだニャン。

先生
先生
その時には次の5つのことをポイントとして同時にチェックしてみよう。

・どうしてそのWebサイトが好きなのか

・どうしてそのWebサイトは印象が良いのか

・何色をメインにして使っているのか

・どんなレイアウトになっているのか

・文字の大きさはどれくらいか

デザイニャー
デザイニャー
優秀なWebサイトの模写をすることで、スキルアップしていくことができるんだニャン。

先生
先生
真似てデザインを勉強することは悪いことでは決してないし、短期間でデザイン力を上げる効率的な勉強方法と言えるから、ぜひ試してみてね。
Webデザインの練習に効果的な模写の6つの流れと注意点について解説この授業は次のような方におすすめです。 ・模写をしてWebデザインのどのようなことを学べるか知りたい方 ・Webデザイン...

おすすめの記事

先生
先生
最後に良い記事があったのでご紹介しておくね

まとめ

先生
先生
この授業では次のようなことについてお話ししてきたよ。

・Photoshopとは

・WebデザインをするときにPhotoshopを使う3つのメリット

・レイヤーカンプ機能

・スライス機能

・強制的なフォント変更を行わない

・WebデザインをするときにPhotoshopを使うデメリット

・WebデザインではPhotoshopとIllustratorのどちらを使う?

・WebデザインをするときのPhotoshopとIllustratorの使い分け方

・WebデザインカンプはPhotoshopで

・WebデザインのパーツはIllustratorで

・WebデザインではPhotoshopとAdobe DXをどう使い分けたらいい?

・Photoshopの設定で気をつけておくべきこと

・Photoshopの設定で気をつけておくべき5つのこと

・単位はpx(ピクセル)で

・フリックパン機能とアニメーション機能をオフにしておく

・レイヤー名を「〜のコピー」のままにしない

・カラーモードはRGBで

・保存設定をする

・Webデザインの仕事をするためのPhotoshopのおすすめの3冊の本

・デザインの学校 これからはじめるPhotoshopの本

・Photoshopレッスンブック

・世界一わかりやすいIllustrator&Photoshop&XD Webデザインの教科書

・Photoshopを学ぶには動画で学ぶのもおすすめ

・PhotoshopでWebデザインをしてみよう

・自分のデザインサイトをデザインしてみる

・好きなWebサイトを模写してみよう

・おすすめの記事

私たちは頑張るあなたを応援しています。