1pxの線の引き方（鉛筆や選択範囲の境界線や効果を使う）

1pxの線の引き方をご紹介します。
書かなくてもいいことだけれども初心者向けの講座なので書きます。

WEBデザインをするときは、必ず使うのが1pxの線。
h2やh3タグの背景として使ったり、メニューボタン、バナーなど様々な用途で使います。
大抵はcssのborderとかを使うんだけれど
フォトショップで境界線を各方法を何通りか紹介。

１．ツールの鉛筆ツールを使います。

鉛筆ツールはアンチエイリアスの無いブラシツールです。
サイズを１に設定すれば１pxの線が弾けます。シフトを押しながらマウスをドラッグすることで平行線、ポイントすることではじめにマウスを押した点最後の点とをつなぐ。

２．選択範囲を使った1pxの書き方

まずは境界線を描きたい画像を選びます。
黒ならば選ぶというようよりも、描画レイヤーをCtrl+クリックすれば描画を選択範囲で抽出することができますね。

選択範囲ツールを選んだまま、選択範囲の上で
右クリック＞境界線を描くを選ぶ。

完成。簡単でしょう。

３．効果を使った1pxの書き方

境界線を設定する。

この「レイヤーの効果」は応用に利用できる。
応用として、フチを２重にする方法をご紹介します。
つまり、画像の外側や内側に二重線を書く方法です。

画像の外側や内側に二重線を書く方法

これは特に文字の表現でよく使う。
フライヤーであったり、スーパーの値札、ポップであったり
用途はいっぱいありますね。
強調できるというのが強みかも。

まずは２重線のひとつめである白いふちを入れてみましょう。
外側に３pxと設定しました。

２重目のフチはドロップシャドウで入れてみました。
本来ドロップシャドウは影を作るツールなので、
不透明度を100％、距離は0、スプレッド100、サイズを5pxにしてみましょう。
一枚目の画像のような２重線になりましたね。
ショッピングサイトなどの価格表示で使えば、注目度は上がるでしょう。

でもＷＥＢデザインに利用する場合は、できるだけ背景画像だけにしておいて
1pxの境界線はcssで設定する癖を付けておきましょう。

フォトショップネタが切れてきたから
次はWEBデザインのテクニックなんかを載せていきたいと思う。