【入門】PhotoshopでWEB制作用にガイドとグリッドの設定 + ガイドの引き方、消し方、修正の仕方

photoshop
このエントリーをはてなブックマークに追加
PR

WEB制作用にグリッドとガイドを設定する方法

Photoshop CC を開いて、編集

WS003101

 

環境設定 > ガイド・グリッド・スライス

WS003102

 

環境設定の画面が開き、ガイド・グリッド・スライスの項目が表示される

WS003103

それぞれのカラーは好きなのに設定して、グリッドのところの

グリッド線 をピクセル単位にする

 

グリッド線の数値には、表示するグリッドの幅を決めます 10pxで 10px×10pxの正方形がグリッドして表示されます

分割数はグリッドの中をさらにいくつに分割するかです、グリッド線が10pxのとき2分割だと グリッド線の中で5pxのところに上下左右に線が入ります。

グリッド線が10pxで10分割だと1px単位でグリッド内に線が入ります

 

グリッド線の種類はいくつかあるので、あった物を選ぶといいかと思います

個人的には破線が使いやすいかなと

 

 

 

ガイドを引く

ファイルを新規作成します、WEB制作用にはピクセル単位でキャンバスを作ります、幅、高さを必要な大きさに合わせて 単位をpixelにします

WS003104

 

 

出来たキャンバスに、ガイドを引く

ガイドの引き方には2種類あります

  • ドラッグして引く
  • 数値を入力して引く

 

 

ドラッグして引く方法

左や上にある定規なようなものをクリックしたままキャンバスのエリアに持って行くとガイドが引けます

gaido2

 

数値で指定して引く

メニュー > 表示

WS003106

 

メニュー > 表示 > 新規ガイド

WS003105

 

新規ガイドのウィンドウが出るので、水平、垂直を選択して位置をピクセルで指定して追加します、左上が起点となります

WS003107

 

 

 

 

ガイドを引きやすくする方法 と修正・移動、撤去する方法

ガイドの追加の仕方は上の2つの方法で行いますが、ルーラーからガイドを追加するときにキリの良い数値で引きたい。大体はキリの良い数値にガイドを設置するので、次の方法を使うと、すこしガイドを引くのが簡単になる

 

Shift を押したままでガイドを引く

これで、カクカクとキリの良い数値のところに合わせてガイドが引けます

またキャンバスの拡大・縮小具合によってキリの良い数値も変動するので、ズーム、ズームアウトとうまく組み合わせると ささっと引けるようになります

 

 

一度作ったガイドの位置を修正・移動する方法

Photoshopの左上あたりにある、移動ツールを選択した状態にする

WS003108

 

ガイドのうえにカソールを持って行くと、マークが変化するのでその状態でクリックしたまま動かすと移動出来ます

gaido3

 

 

一部のガイドを撤去する

一度作ったガイドが不要になった場合には、削除したいのですが メニュー > 表示 にあるガイドの削除を選ぶと。すべてのガイドが消されてしまいます。

一部のガイドだけを消したい場合は、ドラッグしてルーラーのところに移動させてやると無くなります

gaido4

これで、一つ一つ不要なガイドを消すことが出来ます。

 

 

ガイドとグリッドのオン・オフを即座に切り替える方法

ガイドとグリッドは便利なんですが、ガイドとグリッドがない状態ではどのようになっているか確認するためにはグリッドとガイド両方を非表示にする必要があるのですが、表示のメニューから毎回切り替えるのは面倒なのでショートカットキーを覚えます

 

ガイドの表示と非表示の切り替え 「ctrl + :」

グリッドの表示と非表示の切り替え「ctrl + @」

 

それぞれのショートカットキーで、切り替えをするようにすれば、素早くささっと、かなり楽です。

 

 

以上。WEB製作用のガイドとグリッドの設定とガイドの基本的な使い方でした

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)