INDEX
目次
前の章に戻る2章 環境設定をしよう
Photoshopの環境設定を適切に行うことで、Webデザイン制作の効率と品質を向上させることができます。
以下は、Webデザインの制作における推奨される環境設定です。
以下は、Webデザインの制作における推奨される環境設定です。
【2-1】 環境設定の開き方
OSによる違い
- Windowsの場合
- メニューから「編集」 > 「環境設定」 > 「一般」を選択
- Macの場合
- メニューから「Photoshop」 > 「環境設定」 > 「一般」を選択
【2-2】環境設定画面
メニュー一覧
- 一般
- インターフェイス
- テーマカラー
- ワークスペース
- タブでドキュメントを開く
- 単位・定規
- ガイド・グリッド・スライス
一般
作業の基本的な挙動をカスタマイズするための設定を行うことができます。
これらの設定を行うことで、自身の扱いやすいようにカスタマイズし、操作性の向上に繋げられます。
これらの設定を行うことで、自身の扱いやすいようにカスタマイズし、操作性の向上に繋げられます。
従来の自由変形を使用
オブジェクトの変形を行うときは、「オブジェクトを選択ツール」をクリックするとバウンディングボックスが表示されます。
また、バウンディングボックスをクリックしドラッグを行うと、縦横比を固定された状態で自由に変形することができます。
（※比率を固定したくない場合は、Shiftキーを押しながらバウンディングボックスをクリックしてドラッグしてください）
「従来の自由変形を使用」に変更すると、上記の設定を逆にすることができます。
また、バウンディングボックスをクリックしドラッグを行うと、縦横比を固定された状態で自由に変形することができます。
（※比率を固定したくない場合は、Shiftキーを押しながらバウンディングボックスをクリックしてドラッグしてください）
「従来の自由変形を使用」に変更すると、上記の設定を逆にすることができます。
具体的には以下の内容になります。
- 縦横比を維持したい場合
- Shiftキーを押しながらバウンディングボックスをクリックしてドラッグ
- 縦横比を維持したくない場合
- Shiftキーを押さずバウンディングボックスをクリックしてドラッグ
この設定を使用するメリットとしては、
- Illustratorのオブジェクトの縦横比固定にはshiftが必須なので、一貫した方法で作業できるため、操作の混乱が少なくなります。
- 以前のバージョンのPhotoshopを使用していた方にとっては、この設定をオンにすることで従来の操作感（Shiftキーを押しながらで縦横比を固定）を保つことができます。
インターフェイス
このツールでは、ワークスペースやパネルの表示、ツールバーの設定など、Photoshopの操作画面に関する設定を行うことができます。
テーマカラー
テーマカラーはダークテーマが初期設定になっています。
これはライトカラーよりも目の疲れが軽減されると言われています。
ライトカラーに変更すると、ワークスペース全体の色が変更されます。
これはライトカラーよりも目の疲れが軽減されると言われています。
ライトカラーに変更すると、ワークスペース全体の色が変更されます。
ワークスペース
ワークスペースの表示や配置をカスタマイズすることができます。
自分の作業スタイルや好みに合わせた最適なワークスペースを構築し、効率的に作業することができます。
自分の作業スタイルや好みに合わせた最適なワークスペースを構築し、効率的に作業することができます。
タブでドキュメントを開く
設定にチェックを入れておくと、タブをクリックすることで作業ファイルを切り替えることができます。
複数画像を並べて表示した状態
タブで「ドキュメントを開く」のチェックを外した状態でファイルを開くと、パネルに独立した状態で表示されます。
柔軟に配置ができ、同一の画面で複数の画像を表示させることができます。
柔軟に配置ができ、同一の画面で複数の画像を表示させることができます。
単位・定規
単位設定を行うことで、Webデザインにおけるサイズや間隔の指定が正確になり、ブラウザ上での表示と一致させることができます。
単位の推奨設定
- 定規単位
- ピクセル（px）
Webデザインではピクセル単位が最も一般的です。各種要素のサイズや間隔をピクセル単位で設定することで、ブラウザ上での表示と一致させやすくなります。
- 文字単位
- ピクセル（px）
フォントサイズもピクセル単位に設定することで、デザインの一貫性を保ち、実際のブラウザ上での表示と一致させやすくなります。
ガイド・グリッド・スライス
ガイド・グリッド・スライスは制作において、レイアウトの配置や素材のエクスポート（書き出し）を効率化し、正確性を向上させるのに役立ちます。
-
ガイドのキャンバスカラー
- ガイドの色を変更し、視認性を高めます。
-
グリッドの設定
- グリッドの間隔と設定したグリッド間隔の数値を何分割するかを設定します。
- 配置するときに分割のマスに沿って移動させることができます。
※ グリッド線を100px 分割数を10にすると、10ピクセルずつ移動させることができます。（イメージは以下）
各機能の説明
ガイド (Guides)
- ガイドは、キャンバス上に引くことができる垂直または水平の線です。
- 主にレイアウトの整列やデザインの配置を補助するために使用されます。
- ガイドはドラッグ＆ドロップでキャンバス上に配置し、必要に応じて削除することができます。
- 表示/非表示の切り替えが可能です。
グリッド (Grid)
- グリッドは、キャンバス上に規則正しい格子状のパターンを表示するものです。
- 主にデザインの整列やオブジェクトの配置を補助するために使用されます。
- グリッドの表示/非表示や間隔の調整が可能です。
スライス (Slices)
- スライスは、画像などのパーツをエクスポートするために使用されます。
- また、スライスはキャンバス上の特定の領域を指定し、指定した領域を個別に選択してエクスポートすることができます。
- 使用例として、Webページのボタンやバナーといった要素を、個別の画像として書き出す際などが挙げられます。
キャンバスに定規を表示する
- 定規は視覚的なガイドとなり、要素の正確な配置や寸法の測定を助けます。
- 特にピクセル単位での作業が重要なWebデザインでは、定規を活用することでデザインの一貫性と品質を保つことができます。
- Webデザインにおいては、正確な寸法や配置が求められるため、定規の表示は非常に有用です。
定規の表示方法
- 定規の表示をオンにする
- メニューから「表示」 > 「定規」を選択するか、キーボードショートカットのCtrl+R（Windows）またはCmd+R（Mac）を使用します。
- ガイドの作成
- 定規からガイドをドラッグするには、定規上でクリックし、ドラッグしてキャンバスにガイドを引っ張ります。
- 水平ガイドは上部定規から、垂直ガイドは左側定規からドラッグします。
【2-3】ワークスペースの表示設定
スクリーンモード
各スクリーンモードを適切に使い分けることで、作業に合わせた最適な環境を整えることができます。
-
標準スクリーンモードの特徴
- ツールバー、パネル、メニューがすべて表示される通常の表示モード。
- ウィンドウの枠やタブも表示され、複数のドキュメントを開いている場合はタブ間の切り替えが可能。
-
全画面モード（メニューバーを表示）の特徴
- ツールバーとメニューバーは表示されるが、ウィンドウの枠がなく、キャンバスが画面全体に広がる。
- パネルは表示されるが、必要に応じて非表示にすることも可能。
-
全画面モードの特徴
- ツールバー、メニューバー、パネルがすべて非表示になるモード。
- キャンバスが画面全体に広がり、作業スペースを最大限に利用できる。
- パネルなどを再表示するには、カーソルを画面の端に移動させるか、キーボードショートカットを使用する必要があります。
スクリーンモードの切り替え方法
スクリーンモードは、Photoshopのインターフェースの左下にあるスクリーンモードボタンをクリックして切り替えることができます。
また、キーボードショートカットを使用することも可能です。
また、キーボードショートカットを使用することも可能です。
- 標準スクリーンモード: キーボードショートカットは「F」キー。
- 全画面モード（メニューバーを表示）: キーボードショートカットは「F」キーを2回押す。
- 全画面モード: キーボードショートカットは「F」キーを3回押す。
レイヤーパネルオプション
レイヤーパネルの表示や操作方法をカスタマイズできます。
Photoshopの作業で使用頻度が高いレイヤーパネルを効率的に使用できるように設定を行えます。
Photoshopの作業で使用頻度が高いレイヤーパネルを効率的に使用できるように設定を行えます。
サムネイルサイズ
「大」または「中」
サムネイルサイズを大きくすると、レイヤーの内容を視覚的に把握しやすくなります。
特に多くのレイヤーを扱う場合や、レイヤーの内容を頻繁に確認する場合に便利です。
サムネイルサイズを大きくすると、レイヤーの内容を視覚的に把握しやすくなります。
特に多くのレイヤーを扱う場合や、レイヤーの内容を頻繁に確認する場合に便利です。
レイヤーの境界線
サムネイル内にレイヤーの実質的な範囲を表示することで、レイヤーの内容がどこまで広がっているかを一目で確認できます。
これにより、レイヤーの編集や配置が容易になります。
これを利用するためにはレイヤーサムネイルの内容を「レイヤー範囲のみ表示」に変更する必要があります。
これにより、レイヤーの編集や配置が容易になります。
これを利用するためにはレイヤーサムネイルの内容を「レイヤー範囲のみ表示」に変更する必要があります。
これで「2章 環境設定をしよう」の解説を終わります。
次の章に進みましょう。
次の章に進みましょう。