デザイン学部で学習を開始しよう!

まずは無料会員登録!デザインスキルや知識を得られる授業をオンラインで開講中。最新のWeb制作スキルを身につけましょう。

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/アスキー・メディアワークス)が発売中。

 


WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。

学部登録(無料)すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!


スクー教務課:山口
  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×