WEBデザイン
Adobe Photoshop｜2章 環境設定をしよう
INDEX
目次
前の章に戻る 次の章に進む
Photoshopの環境設定を適切に行うことで、Webデザイン制作の効率と品質を向上させることができます。

以下は、Webデザインの制作における推奨される環境設定です。
✅ OSによる違い

【2-1】 環境設定の開き方

  • Windowsの場合
    • メニューから「編集」 > 「環境設定」 > 「一般」を選択

  • Macの場合
    • メニューから「Photoshop」 > 「環境設定」 > 「一般」を選択
(7200)

【2-2】環境設定画面

【重要メニュー一覧】
・一般
・インターフェイス
・テーマカラー
・ワークスペース
・タブでドキュメントを開く
・単位・定規
・ガイド、グリッド、スライス
(7207)

一般

作業の基本的な挙動をカスタマイズするための設定を行うことができます。

これらの設定を行うことで、自身の扱いやすい配置にカスタマイズを行い、操作性の向上に繋げることができます。
✅ 「従来の自由変形を使用」をする

オブジェクトの変形を行うときは、「オブジェクトを選択ツール」をクリックするとバウンディングボックスが表示されます。

また、バウンディングボックスをクリックしドラッグを行うと、縦横比を固定された状態で自由に変形することができます。
（※比率を固定したくない場合はShiftキーを押しながらバウンディングボックスをクリックしてドラッグしてください）


「従来の自由変形を使用」に変更すると、上記の設定を逆にすることができます。
(7216)

具体的には以下の内容になります。
  • 縦横比を維持したい場合
    • Shiftキーを押しながらバウンディングボックスをクリックしてドラッグ
  • 縦横比を維持したくない場合
    • Shiftキーを押さずバウンディングボックスをクリックしてドラッグ
(12679)

インターフェイス

このツールでは、ワークスペースやパネルの表示、ツールバーの設定など、Photoshopの操作画面に関する設定を行うことができます。
(7225)

テーマカラー

テーマカラーはダークテーマが初期設定になっています。

これはライトカラーよりも目の疲れが軽減されると言われています。

▼ ライトカラーに変更するとワークスペース全体の色が変更になります。
(7229)

ワークスペース

ワークスペースの表示や配置をカスタマイズすることができます。

自分の作業スタイルや好みに合わせた最適なワークスペースを構築し、効率的に作業することができます。
(7234)

タブでドキュメントを開く

✅ タブでドキュメントを開く状態
設定にチェックを入れておくと、タブをクリックすることで作業ファイルを切り替えることができます。
(7241)

✅ 複数画像を並べて表示した状態
タブで「ドキュメントを開く」のチェックを外した状態で、ファイルを開くとパネルに独立した状態で表示されます。

柔軟に配置ができ、同一の画面で複数の画像を表示させることができます。
(7246)

単位・定規

単位設定を行うことで、Webデザインにおけるサイズや間隔の指定が正確になり、ブラウザ上での表示と一致させることができます。

単位の推奨設定

  1. 定規単位
    • ルーラー単位｜ピクセル（px）

      Webデザインではピクセル単位が最も一般的です。各種要素のサイズや間隔をピクセル単位で設定することで、ブラウザ上での表示と一致させやすくなります。

  2. 文字単位
    • タイプ｜ピクセル（px）

      フォントサイズもピクセル単位に設定することで、デザインの一貫性を保ち、実際のブラウザ上での表示と一致させやすくなります。

(7251)

ガイド・グリッド・スライス

ガイド・グリッド・スライスは制作において、レイアウトの配置や素材のエクスポート（書き出し）を効率化し、正確性を向上させるのに役立ちます。

各機能の説明

■ ガイド (Guides)
  • ガイドは、キャンバス上に引くことができる垂直または水平の線です。
  • 主にレイアウトの整列やデザインの配置を補助するために使用されます。
  • ガイドはドラッグ＆ドロップでキャンバス上に配置し、必要に応じて削除することができます。
  • 表示/非表示の切り替えが可能です。
(7255)

■ グリッド (Grid)
  • グリッドは、キャンバス上に規則正しい格子状のパターンを表示するものです。
  • 主にデザインの整列やオブジェクトの配置を補助するために使用されます。
  • グリッドの表示/非表示や間隔の調整が可能です。
(7258)

■ スライス (Slices)
  • スライスは、画像などのパーツをエクスポートするために使用されます。
  • また、スライスはキャンバス上の特定の領域を指定し、指定した領域を個別に選択をしエクスポートすることができます。
  • 使用例として、ウェブページのボタンやバナーなどの要素を別々の画像としてエクスポートする際などがあげられます。
(7260)

カンバスに定規を表示する

機能

  • 定規は視覚的なガイドとなり、要素の正確な配置や寸法の測定を助けます。
  • 特にピクセル単位での作業が重要なWebデザインでは、定規を活用することでデザインの一貫性と品質を保つことができます。
  • Webデザインにおいては、正確な寸法や配置が求められるため、定規の表示は非常に有用です。
(7264)

  • ガイドの作成
    • 定規からドラッグしてガイドラインを作成できます。ガイドは要素の配置を補助し、デザインの整合性を保つのに役立ちます。

定規の表示方法

  1. 定規の表示をオンにする
    • メニューから「表示」 > 「定規」を選択するか、キーボードショートカットのCtrl+R（Windows）またはCmd+R（Mac）を使用します。
  2. ガイドの作成
    3. 　
    • 定規からガイドをドラッグするには、定規上でクリックし、ドラッグしてキャンバスにガイドを引っ張ります。
    • 水平ガイドは上部定規から、垂直ガイドは左側定規からドラッグします。
(7267)

【2-3】ツールパネルで設定しよう

スクリーンモード

各スクリーンモードを適切に使い分けることで、作業に合わせた最適な環境を整えることができます。
(12682)

  • 標準スクリーンモードの特徴
    • ツールバー、パネル、メニューがすべて表示される通常の表示モード。
    • ウィンドウの枠やタブも表示され、複数のドキュメントを開いている場合はタブ間の切り替えが可能。
(12684)

  • 全画面モード（メニューバーを表示）の特徴
    • ツールバーとメニューバーは表示されるが、ウィンドウの枠がなく、キャンバスが画面ff全体に広がる。
    • パネルは表示されるが、必要に応じて非表示にすることも可能。
(12686)

  • 全画面モードの特徴
    • ツールバー、メニューバー、パネルがすべて非表示になるモード。
    • キャンバスが画面全体に広がり、作業スペースを最大限に利用できる。
    • メニューバーやパネルにアクセスするには、ツールバーを表示するためにカーソルを画面の端に移動するか、キーボードショートカットを使用する必要がある。
(12689)

  1. スクリーンモードの切り替え方法
    • スクリーンモードは、Photoshopのインターフェースの左下にあるスクリーンモードボタンをクリックして切り替えることができます。
    • また、キーボードショートカットを使用することも可能です。
    　
    • 定規からガイドをドラッグするには、定規上でクリックし、ドラッグしてキャンバスにガイドを引っ張ります。
    • 水平ガイドは上部定規から、垂直ガイドは左側定規からドラッグします。

レイヤーパネルオプション

レイヤーパネルの表示や操作方法をカスタマイズできます。

Photoshooの作業で使用頻度が高いレイヤーパネルを効率的に使用できるように設定を行うことができます。

サムネイルサイズ

■ 「大」または「中」

サムネイルサイズを大きくすると、レイヤーの内容が視覚的に把握しやすくなります。

特に多くのレイヤーを扱う場合や、レイヤーの内容を頻繁に確認する場合に便利です。

レイヤーバウンティングボックス

サムネイル内にレイヤーの境界を表示することで、レイヤーの内容がどこまで広がっているかを一目で確認できます。

これにより、レイヤーの編集や配置が容易になります。

こちらを利用するためにはレイヤーサムネイルの内容を「レイヤー範囲のみ表示」に変更する必要があります。
注意事項
  • サムネイルサイズを「大」に設定することで視認性が向上しますが、多数のレイヤーを扱う場合は、Photoshopの使用中の動作に影響を与える可能性があります。
  • パフォーマンスが低下した場合は、サムネイルサイズを「中」または「小」に調整を行いましょう。作業効率とパフォーマンスのバランスを保つことができます。
前の章に戻る 次の章に進む
WEBCOACH | キャリアチェンジまでの全てを学ぶマンツーマンWEBスクール
© 2020 by WEBCOACH