2/16(Sat)

今日の生放送

Photoshop 初期設定

今回はPhotoshopを始めたばかりな方に設定して欲しい「Web用素材に適した初期設定」をまとめました。

「Photoshopを始めたばかり…」「初期設定は何をしたらいいかわからずそのまま…」

という方はぜひ下記の設定を試してみてください!

◆目次◆


1.Web用素材の作成で作業しやすい環境設定
・カラーテーマを変更する
・バックアップ用ファイルの自動設定
・Web用に合った単位設定
・デザインしやすいガイド設定

2.ショートカットの設定
3.新規ファイルをWeb用に設定する方法

4.図形の選択方法
5.レイヤーを見やすくする設定
6.レイヤーのコピーに「コピー」と付けない方法

※このまとめではMacで設定を行っております。Windowsの方はcommandキーではなく、controlキーで設定してください

1.Web用素材の作成で作業しやすい環境設定


まずはじめに「環境設定」を開きましょう。command+K、または、「Photoshop」→「環境設定」で「環境設定」を開きます。

※下記の設定は全て「環境設定」の中で行う作業です


■カラーテーマを変更する


カラーテーマ(Photoshopで作業する際の背景色)を好みの色に変更することができます。

【設定方法】「環境設定」→「インターフェース」→「カラーテーマ」 

Photoshop 初期設定

Photoshop 初期設定 カラーテーマ
 

バックアップ用ファイルの自動設定


この設定により、Photoshopのファイルを一定時間ごとに別途保存してくれます。
Photoshopが落ちた場合でも、復元した時にそのバックアップデータを開いてくれるので、5分間ごとに設定しておけば、保存を何回もする必要がなくなります。

【設定方法】「環境設定」→「ファイル管理」→「復元情報を次の間隔で自動保存」→時間を設定

※これはCS6、CC、CC2014に付いた新しい機能です

Photoshop 初期設定

Photoshop 初期設定 自動保存

 

Web用に合った単位設定


「mm、point」になっている設定を、Webデザインの時は「pixel」に変更しておきます。

【設定方法】「単位・定規」→定規と文字を「pixel」に変更します

Photoshop 初期設定
Photoshop初期設定

 

デザインしやすいガイド設定


【設定方法】「環境設定」→「ガイド・グリッド・スライス」→「スタイル」→「点線」に変更/「グリッド線」の単位→「pixel」に変更/「グリッド線」→「100」に、「分割数」→「20」に変更

※グリッドが表示されていない方はメニューバーの「表示」→「表示・非表示」→「グリッド」を選択してください。

Photoshop 初期設定 ガイドグリッドスライス

Photoshop初期設定ガイドグリッドスライス

グリッドとは?
→ 方眼紙の方眼のようなもので、薄い線が表示されます

Photoshop 初期設定 グリッド

なぜ20分割なの?
→ 20分割にすることで、グリッドに表示される「widthとheight」が5pixelづつになり、図形などをつくりやすくなります。

Photoshop 初期設定 グリッド

【応用編】
★1pixelもずれないようにするために★
【設定方法】「環境設定」→「一般」→「ベクトルツールと変形をピクセルグリッドにスナップ」にチェック
そうすると、1pixelもずれない設定にすることができます。

Photoshop 初期設定

 

2.ショートカットキーの設定


自分の好きなショートカットを設定することができます!
【設定方法】「編集」→「キーボードショートカット」

今回は「1段前に戻る:command + alt + Z」というショートカットキーを、「command + Z」に変更してみましょう!

【設定方法】「編集」→「キーボードショートカット」→「1段戻る Opt+command+Z」を選択→白く選択されたら「command+Z」をキーボードで押す→警告がでますが、無視してOKボタンを押します

Photoshop 初期設定

Photoshop 初期設定 ショートカットキー

Photoshop 初期設定 ショートカットキー

Photoshop 初期設定 ショートカットキー

以上でショーカットの設定が完了しました。
「command+Z」でどんどん作業を前に戻せるか試してみてくださいね。

3.新規ファイルをWeb用に設定する方法


プリセットを「Web」に設定するだけで、新規ファイルがWeb用の設定に変わります。

【設定方法】「command+ N」で、新規ファイルを出す→「プリセット」→「Web」

Photoshop 初期設定 web用

※Web用の画像を作る際は、単位とカラーモードに気をつけてください。
単位=pixel
カラーモード=RGB(解像度=72)
(※ Photoshop CC までは必要ありませんでしたが、CC 2014 からこの設定が必要になりました)

 

4.図形の選択方法


図形を移動する時、選択したはずの図形が動かない…なぜか違う図形が動いてしまう…
そんな時にレイヤーを気にせず選択したものを動かすことができる設定をご紹介!

<方法1>
commandキーを押したままの状態で図形を選択しドラッグすると、マウスカーソルが置いてある図形を移動することができます。

<方法2>
上にあるオプションバーの設定を変更します。
【設定方法】「自動選択」/レイヤー/「バウンディングボックスを表示」をチェック

Photoshop 初期設定 自動選択
 
 

5.レイヤー内の画像を見やすくする設定


初期設定では、下の図のようにレイヤーの表示が、カンバスと同じように表示されてしまい、見えにくくなっています。

Photoshop 初期設定 レイヤー設定

そこで、レイヤーの各範囲だけ表示できるように設定することができます。

Photoshop 初期設定 レイヤー設定

【設定方法】レイヤーの一番右にある4本線をクリック→「パネルオプション」→「ドキュメント全体を表示」から「レイヤーの範囲のみを表示」にチェックを変更

Photoshop 初期設定 レイヤー設定

Photoshop初期設定/レイヤーパネルオプション

 

6.レイヤーをコピーした際に「のコピー」表示をなくす方法


レイヤーをコピーした際に、「〇〇のコピー」ではなく、レイヤーの名前のみでコピーを作成することができます。

Photoshop 初期設定 レイヤーコピー設定

Photoshop 初期設定 レイヤーコピー設定

【設定方法】レイヤーの一番右にある4本線をクリック→「パネルオプション」→「コピーしたレイヤーとグループに「コピー」を追加」のチェックを外す

Photoshop 初期設定 レイヤー設定

Photoshop 初期設定 レイヤー設定

以上で初期設定は終了です!

さらに「レイヤーカンプ/パターン/切り抜き」などのよくある疑問にWebデザイナー庄崎大祐先生が「PhotoshopでWebデザインするときの悩みに答えます」の授業で丁寧に解説しています。ぜひチェックしてみてください!庄崎先生は渋谷でデザインスクールを主催されているので、もし興味があればそちらもチェックしてみてくださいね。

庄崎大祐 Photoshop 入門

庄崎大祐先生

下北沢でうさぎと暮らすWebデザイナー。
渋谷で社会人向けのWebデザインスクールPHP入門講座WordPress講座を開講中。

PhotoshopとIllustratorを使ったWebデザイン入門書『プロになるためのWebデザイン入門講座 実践で役立つPhotoshop&Illustrator徹底ガイド』(技術評論社)や、『神速Photoshop [Webデザイン編]』(KADOKAWA/アスキー・メディアワークス)が発売中。

 

Photoshopを学びたい人必見!Photoshopを学ぶためのオンライン動画授業3選

デザイナーにとって必須なスキルであるPhotoshopに興味のあるあなたにPhotoshopを学ぶための授業3選をご紹介します!これらの授業を通じて、Photoshopの基礎知識から、「写真補正」などの具体的な編集方法について理解することができます。ぜひこれらの授業を受講し、Photoshopに関する知識を身につけましょう!

 

1.Photoshop入門

本授業はPhotoshopをこれから使えるようになりたい、もう一度基礎から学びたいという入門者の方向けの授業です。
具体的に画像ファイルで作業しながら、手順、機能の役割、基本概念などを身につけることで、今まで、謎だった事も理解出来るようになります。まずは基本から学んでいきましょう。

 

2.C CHANNEL流 Photoshopを使った写真補正とタイポグラフィ実践

本授業では「C CHANNEL」デザイナーの本末 英樹先生をお招きし、Photoshopを使った「写真補正」や「タイポグラフィ」、C CHANNELだから教えられる“カワイイ”トレンドの加工テクニックについても学習していきます。
さらにデザイナーの新卒時代の苦労や体験談など、これからデザイナーを目指す方や新米デザイナーの方にオススメの授業です。

 

3.最新Photoshopで高機能デザインカンプ制作

本授業ではPhotoshop画面をミラーリングできるAdobe公式アプリAbobe Previewや、タッチデバイズのUIのためのPhotoshopCCの進化した機能を使ってデザインカンプを制作する手法を学ぶことができます。しっかり学んでWebやアプリのUIデザイナーを目指していきましょう。

 

いかがでしたでしょうか?
これらの授業を受講することで、Photoshopに関する基本的な知識を身につけることが出来るでしょう。さらに、これらの授業を通じて、自身がこれからPhotoshopをどのように実践していこうかを考えることも出来たのではないでしょうか?
スクーではこれら3つの授業以外にPhotoshopに関する授業を多数開講しています。ぜひスクーでさまざまな授業を受講し、Photoshopに関する知見を深めていきましょう!

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

デザイン学部の記事一覧