Photoshop ガイドを数値入力で表示させる方法

SPONSORED LINK

Guide

AdobeCreativeCloudで月額制になり、導入しやすくなったのでWEB初心者でもわかりやすくPhotoShop(以下PS)の使い方を書いてみようと思います。

PSを使ってWEBデザインを始める場合に便利な機能がガイド。ガイドラインが入っていればデザインの配置も物凄くスムーズに出来ます。今後は個人でもWEB制作を始める方も増えてくると思うのでこのガイドを簡単に追加する方法をまず書いてみたいと思います。


PSガイド簡単追加方法

まずは適当な大きさのファイルを設定します。
WEBデザインの場合はPC用だと960px~にする方が殆どだと思うので、取り敢えず横幅を1200px、高さを1000pxで設定しました。(サイズは用途によって変えて下さい。)

Guide01
新規ファイル追加

次は早速ガイドを追加していきます。
方法は2つあるのですが、まずはドラッグアンドドロップでのガイド追加手順

  1. メニューバー表示>定規にチェック
  2. 上と左に表示された定規をドラッグして任意の位置で離す。

Guide02
ドラッグアンドドロップでの追加

これだけでガイドは追加されます。しかしこの方法では微調整が難しく思った場所に追加するのは容易ではありませんね。

ガイドを数値入力で設置する手順

  • メニューバー表示>新規ガイド
  • ガイドを入れたい方向にチェックを入れてpx値を入力

Guide03
新規ガイドの追加

すごく簡単です!
垂直方向が縦線、水平方向が横線なので選んでpx値を入れましょう。

例えば垂直方向に入れる場合はWEBを真ん中に配置すると考えて、1080px幅のサイトをデザインする場合は「1200-1080=120、120/2=60px」なので、まず60pxにガイドを入れます。次に1080px幅のサイトなので1140pxにガイドを入れます。

Guide04
垂直方向のガイド

これでサイトの幅はガイド表示がされました。

次に上から180pxをヘッダー部分とすれば、水平方向に180pxにガイドを入れます。そこからメインコンテンツの間を30pxとるとすると210pxでガイドを入れればいいのです。

Guide05
水平方向のガイド

こうやってガイドを増やしていくとこのようになります。
なんか見たことないですか?

そう2カラムのレイアウトになっています。サイドバーは300px以上を目安に考えるのがAdsenseを掲載する方の常識(縦長を掲載する場合はこの限りではない)

この隙間部分(2重線)になっている間は余白部分でCSSも絡んでくるのでまた、別の機会に説明をしたいと思います。

※因みにガイドの表示・非表示の切り替えは

Command + :

これでガイド表示の有無を切り替えることが出来るので活用して下さい。

初めてPhotoshopを使う方に一言

まずPhotoshopはプロ用等と言われますが、導入の敷居は凄く下がったと思います。写真のレタッチから本格的なデザインまでこなせて、PSだけなら月額2,200円で利用できるのですから。

初心者でも実は簡単に使えますし、Photoshopに関してはまずググれば出てきます。困ったからといって慌てて本屋に向かう必要がないのもPhotoshopの魅力なのです。

当ブログでは初めてPhotoshopを使う方、初めてWEBを自分で作ってみたい方向けに情報を配信していくので興味があれば「RSS」での購読をお願いします。(但し他の情報も多くPhotoshopに特化したブログではありません)

@dnc_akiraでした。

SPONSORED LINK

記事を書いている人

akira味浪 照(AKIRA MINAMI)
香川在住のApple製品に魅せられた「にわかApple信者」インドネシア人の妻を持つ2児のパパ。将来インドネシアに移住しスローライフを夢見ています。 自営業になり時間管理・仕事効率化を考え実践しています。りんご人ではAppleガジェットを使ったライフハックな記事をメインで書いています。
つぶやきは少なめですが@付きやDMには反応します。気軽に声かけて下さい。bot以外は基本的にフォロー返します。
Google+からも連絡を受けています。仕事での利用が多いのですが、全然話しかけて頂いてOKです。フレンドリーな方大歓迎
ブログの更新情報取得にRSSが便利です。Feedlyをご利用の方は上部のfeedlyアイコンを利用して下さい。