見出し画像

006 バナーを作ろう! -ガイドを引こう-

ヘッダー画像:UnsplashMarkus Spiskeが撮影した写真

オブジェクトを揃えたり、余白を作ったり、目安として使ったり、何かと使うことの多いPhotoshopのガイド。
バナーを作る時にも必要なので覚えちゃいましょう。
簡単です。

※ガイドは画像データとは別なので画像を作成したり印刷するときは無視されます。

Step01  数値を指定してガイドを引いてみましょう。

枠線から10px入った位置から文字やボタンを配置したいので、枠線1px分を足した11pxの位置に上下左右ガイドを引きたいと思います。

1.まずは上にガイドを引きます

表示→ガイド→新規ガイド
水平方向のラジオボタンをクリックして位置に11pxと入力してOKを押します。
こんな感じでガイドが引かれます

2.次は左にガイドを引きます

さっきと同じ!
表示→ガイド→新規ガイド
今度は垂直方向のラジオボタンをクリックして位置に11pxと入力してOKを押します。
pxって面倒だから入れなくても大丈夫みたいです
こんな感じ

Step02  正方形を作ってガイドを引いてみましょう。

右と下も数値で計算すれば当然引けますが、ちょっと面倒…
ガイドは選択したオブジェクトに吸い寄せられるので、そいつを利用してガイドを引こうって魂胆です。

1.タテヨコ11pxの正方形を作ります。

塗りは何色でも大丈夫。線は無い方がわかりやすいかも。

正方形の作り方がやり方がわからない人は下のリンクからStep01とStep02の記事を見てね

こんなのができたらOK

豆知識
四角を作ったら違うツールに持ち変えないとクリックする度にダイアログが出てきちゃうので、移動ツール(十字架)に持ち替えて関係ないところをクリックすると選択も解除されて次の作業に移りやすくなります。
Photoshopを長くやっているとクセになって無意識でやっちゃいます。

2.四角を右上に持っていきます

  1. 四角を移動ツールで選択

  2. 選択範囲→全てを選択(ショートカットキーは⌘+A これよく使う

  3. 整列パネルの右と上を押す

  4. 選択範囲→選択を解除(ショートカットキーは⌘+D これよく使う

やり方がわからない方は下のリンクからStep03の記事を見てね

こんな風に右上に配置されたらOK

2.定規を表示させます

ショートカットは⌘+R これよく使う
ルーラーのRですかね
最初から表示されていると消えちゃうので、もう一回やれば出るはず

3.定規のところからガイドを出して右のガイドを引きます

  1. まずは先ほど作った四角を移動ツールで選択します。

  2. 縦(左ね)定規のところにマウスポインターを持って行って、クリック&ドラック

  3. ゆっくりと四角に近づける…と
    スッと四角によって行きません?行きますよね??
    寄ってったらタイミングよく離してね。
    自動的に止まることはないので。

こんな感じ

4.同様の手順で下のガイドを引きます

  1. 四角を移動ツールで選択

  2. 選択範囲→全てを選択(ショートカットキーは⌘+A これよく使う

  3. 整列パネルの下を押す

  4. 選択範囲→選択を解除(ショートカットキーは⌘+D これよく使う

  5. 横(上ね)定規からゆっくりと四角に近づける

  6. 四角はもう使わないのでDeleteキーで削除

5.完成!

こんな感じ

次回は文字を配置するよ


この記事が気に入ったらサポートをしてみませんか?