ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。

【Webデザイン】はじめてのWebデザイン自作・続 - Webデザイン制作のためのPhotoshop環境設定【Photoshop

背景

前回の記事で、Compで作成したワイヤーフレームPhotoshopに取り込むことができました。

fuchsia-84.hatenablog.com

これから作り込み...!と思った矢先、あれあれ...できないぞ...???という点がたくさんありました。

原因はWebデザイン作成のためのPhotoshop環境設定が済んでなかったこと。

そこで、必要だった環境設定の内容をまとめておきます。

手順

  1. 単位をpx(ピクセル)にする
  2. グリッド線を10px単位で引く
  3. 全体コンテンツ幅にグリッドを引く

手順1 - 単位をpx(ピクセル)にする

Photoshop単位をpx(ピクセル)に変更します。
Photoshop環境設定単位・定規からウィンドウが開きます。
単位・定規メニューを開く 定規単位pixelを設定します。
単位にpixelを設定

手順2 - グリッド線を10px単位で引く

グリッドとガイドを表示させます。
Photoshop環境設定ガイド・グリッド・スライスからウィンドウが開きます。
グリッドの設定
グリッド線分割数に同じ数値をいれます。
今回は、それぞれ「10」としました。
この値の意味は、100px四方をどのくらいのグリッド数で分割するかという意味になります。
これで10pxごとに縦横のグリッド線が入りました。
グリッドを入れた結果

手順3 - 全体コンテンツ幅にグリッドを引く

グリッドは、表示新規ガイドから作成できます。

新規ガイドガイド位置入力

今回は、キャンバス幅1280px、全体コンテンツ幅980pxとしたかったので、横から150px、1130pxのところに垂直方向のグリッドを2本引きました。
ガイド追加後

まとめと感想

【Webデザイン作成向けのPhotoshop環境設定】

1. 単位をpx(ピクセル)にする
Photoshop環境設定単位・定規
2. グリッド線を10px単位で引く
Photoshop環境設定ガイド・グリッド・スライス
・グリッド線分割数10とする
3. 全体コンテンツ幅にグリッドを引く
・表示新規ガイド

次回

次回、Photoshopでのデザイン作り込み作業について
まとめていきます!

参考文献
【Photoshop入門】Webデザインをはじめよう!第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog