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

公開日: : 最終更新日:2014/10/04 初心者のためのphotoshop講座


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

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

1.ツールの鉛筆ツールを使います。


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

2.選択範囲を使った1pxの書き方


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


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

完成
完成。簡単でしょう。

3.効果を使った1pxの書き方


境界線を設定する。


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

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

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


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


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

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

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

ほかにもこれ読んでみませんか?

猫のラインのスタンプの絵を描いてます

猫のラインのスタンプ絵の下書きを描いてます

鉛筆で下書きしてマジックで描いたところです。 それをスキャナーで取り

年賀状ソフトなどで加工したJPGを読みこませて印刷する

フォトショップでフチなし印刷する方法

フォトショップではがきサイズに年賀状を作っても、いざフチなしで印刷

Message

メールアドレスが公開されることはありません。

no image
関電ためとくさーびす申し込みページは?どれだけ得する?

太陽光48円買い取が11月から8円になり実質8割ダウンし

CPUクーラーのところはなんとホコリですべてフィンが埋まってました
パソコンをつけたらプープープーと3回ビープ音が鳴って起動しない3つの原因

ウインドウズVISTAまでの時代、98や2000はパソコ

no image
なになにDを4つ集めた。両サイドD、ギュッとしてD、切迫するD、イニシャルD

イニシャルDが好きだったので、なになにDは他にないかなと

アドバンのレースカーのランエボみたい
当たりとはずれがあるトミカファクトリー・トミカ組み立て工場。アドバンのランエボみたい

このランエボかっこいでしょ。 トミカ組み立て工場の

no image
chuuiとwajun?令和の激安パソコンは中国メーカーのチュウイとワジュンだ!

激安パソコンが最近激動しています。 chuuiとwaj

→もっと見る

  • いいだしっぺ(これでいいだ)
    ブログのもくじ 私のプロフィール
    現代の幸福論に挑戦しています。
    ウクレレブログ好き。

PAGE TOP ↑