1

【これから Web制作をする人向け】Photoshopを使う前にしてほしい設定


PhotoshopはもともとWebデザイン専用のソフトではなく、最近では印刷物の制作、イラストの描画・彩色など、様々な用途で使用されています。

今回は、Webデザイン初心者の方向けに、Webデザインをする前にしておきたいphotoshopの設定等を紹介していきたいと思います。

※この記事では、Mac OS Xを基本に解説しており、photoshopのバージョンはPhotoshopCC2014です。ショートカットは、「command(Ctrl)」のように、Windowsの場合を括弧内で表記しています。

 

単位の設定

photoshopではinch、cm、mm、pointなど、様々な単位を設定できますが、Webデザインでは基本的には「pixel(ピクセル)」を使用します。

まず、メニューバーの[Photoshop]>[環境設定]>[単位・定規]を選択。

単位の設定1

 

開いた画面の[単位]の項目の単位と文字の両方を pixel にします。
単位の設定2

 

 

ガイドとグリッドの設定

ガイド・グリッドとは、デザインの図形や文字の配置のための補助線をつくる機能です。
グリッドの表示はメニューバーの[表示]>[表示・非表示]→[グリッド] ガイドはメニューバーの[表示]→[定規]で定規を表示して、定規の真上でクリック、ガイドを引きたいところへドラッグで引けます。

ガイド・グリッド1

 

 

1px単位でデザインするために最初にこのガイドとグリッドの設定をしておくと便利なのでご紹介します。

 

まずは先ほどと同じように、メニューバーの[Photoshop]>[環境設定]>[単位・定規]を選択。

ガイド・グリッド2

 

 

 

開いた画面でガイドの項目のカラーとスタイルはお好みで設定してください。
グリッドの項目のカラーとスタイルもお好みで大丈夫です。グリッド線と分割数は筆者は以下のように設定していますが、必ずしも10px/10pxでなくてもかまいません。ただし1px単位で設定してください。

ガイド・グリッド3

 

移動ツールの設定

移動ツールの状態で上部の設定を変更します。以下のように自動選択のチェックをはずし、”レイヤー”を選択してください。

移動ツール1

移動ツールでレイヤーを移動させる時、自動選択にチェックを入れていると、いちいちレイヤーを選択してから移動、という作業をせずとも、直接レイヤーをクリック&ドラッグで移動できるのですが、画面をクリックする度に選択しているレイヤーが変わってしまいます。これを防ぐために筆者はチェックをはずし、レイヤーを選択するときはcommand(Ctrl)を押しながらクリックしています。

”レイヤー”と”グループ”の設定はレイヤーを選択するときの選択範囲をレイヤーにするかグループにするかの設定です。

 

エッジを整列

Photoshopでは、描いた図形などを「オブジェクト」と呼びます。オブジェクトは色々なツールを使って描画でき、例えば、[長方形ツール]を使えば、「シェイプ」と呼ばれるオブジェクトができます。

長方形ツールを選択した状態で画面上部の”エッジを整列”にチェックをいれてください。ここにチェックをいれないと、シェイプのサイズが1px単位ではなく末尾が小数点になってしまうため、わずかに境界線がぼけてしまいます。

エッジを整列

 

 

 

カラーモードの設定

これはファイルを新規作成するときに設定できるのですが、後から変更する場合は以下のような手順で変更します。
Webデザインでは基本的にはRGBカラーでデザインします。

メニューバーの[イメージ]>[モード]>[RGBカラー]にチェックを入れて設定完了です。

カラーモード設定

 

 

photoshopの画面の色

photoshopの画面の色を変更したい場合は、以下の手順で設定できます。

 

[Photoshop]>[環境設定]>[インターフェイス]を選択

photoshopカラー1

 

立ち上がった画面のアピアランスという項目のカラーテーマを変更すると、画面の色を変更できます。

カラーテーマ2

 

 

レイヤーをコピーする時に自動で「〜のコピー」とつけないようにする

レイヤーをコピーすると、勝手に「○○のコピー」という名前のレイヤーになり、いちいち名前を変えるのが面倒です。
勝手に付かないように変更できるのでその方法を以下にご紹介します。

[レイヤー]パネルの右上のメニュー>[パネルオプション]を選択
でてきた画面で[コピーしたレイヤーとグループに「コピー」を追加]のチェックを外します。

コピー

 

 

カーソルの形状設定

メニューバーの[Photoshop]>[環境設定]>[カーソルの形状]を選択。

開いた画面で、まず[ペイントカーソル]では消しゴムツール・ブラシツールの設定、
[その他のカーソル]ではスポイトツール・塗りつぶしツールの設定ができます。

カーソル

それぞれの設定の詳細は以下のようになっていますので、制作するデザインにあわせてお好みで設定しましょう。

“標準”→カーソルは各種ツールの形状になります。
“繊細”→十字マークのカーソル形状になります。

”ペイントカーソル”の”ブラシ先端(標準サイズ)”→実寸の50%サイズのカーソルが表示
”ペイントカーソル”の”ブラシ先端(フルサイズ)”→実寸サイズのカーソルが表示

“ペイントカーソル”の”ブラシ先端に十字を表示”にチェックを入れる→カーソルの中心に十字が表示

 “ペイントカーソル”の”ペイント中は十字のみを表示”にチェックを入れる→ドラッグしているときはブラシ先端の形状が消え十字のみ表示

テキストの設定

文字の鮮明さはデザインのクオリティに影響します。そこで、はじめにテキストの設定を行っておきます。

文字ツールを選択した状態で上部の”aa”と書かれたマークの右横の選択肢から、”Mac”を選択しましょう。
※CS 6には「Mac」や「Mac LCD」はありません。photoshopCCから追加されました。CCでない場合は”滑らかに”を選択することをおすすめします。

アンチエイリアス

 

 

Retinaディスプレイの設定

RetinaディスプレイのMacBook Proを使用している場合は、画面解像度は「最適(Retina)」を使用しているか確認する必要があります。

OS Xの設定になるのですが、アップルマークから、
[システム環境設定] → [ディスプレイ]を選択し、”解像度の設定”が以下のようになっているか確認してください。

retina

 

 

 

まとめ

Webデザインを始める前の設定のなかでも、単位の設定はWeb制作の環境に直接影響するので、必ず行いましょう。
上記のほかにも、photoshopは様々な設定が可能ですので、お好みでカスタマイズしてクオリティの高いデザインを効率よく仕上げていきましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【初心者向け】まずはこれを覚えてほしい!Photoshopのショートカット基本編