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デザインのテクニックなんかを載せていきたいと思う。

関連記事

コピースタンプツールで全体的にずらしてみた

古いフォトショップで痩せた写真に加工する方法、コピースタンプツール

よくダイエット広告や、女性をより綺麗に見せるために痩せさせると言う

フォトショップで角丸の四角形の作り方

角丸の四角形の作り方

アップルのアイフォンのアプリなどのアイコンは角丸の画像です。 ボ

イラストレーターで集中線を作る

イラストレーターで集中線の作り方

バナー作成に使えるイラストレーターのテクニックをご紹介。 ベクト

346

フォトショップだけでGIFアニメを作る方法

久々にimage ready使ってみたらGIFアニメが作れない!!

ハトを切り抜く

画像の背景切抜きを誰よりも速く出来る方法

このような背景切抜きを20秒でできる方法をご紹介します。 私のp

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

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

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

劣化しないコツはモノクロ二階調

コピーしても画質が劣化しないチラシの作り方

コピー機はインクジェットプリンターのように、 グレー(ねずみ色)

Message

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

肩がバキッ!0歳の息子を無理にうつ伏せから仰向けに寝返りさせたら
肩がバキッ!0歳の息子を無理にうつ伏せから仰向けに寝返りさせたら

1~2カ月前の話なんだけど、0歳の息子が寝る前に布団

no image
マイホームの予算を逆算、年収300万では2000万円が限界か

中古住宅、中古マンション・・・ こんなに綺麗な注文住宅

no image
のどスプレーは飲み物。美味しいので2日で1本飲む

風邪。特に喉が痛い。咽頭炎。 そんなときはのどスプレー

no image
子供の頭を洗うのはすすぎ時間は短いほうがいい?

入浴の際洗髪を嫌がる乳幼児は多い。 自己主張を始める「

no image
入院のカルテ開示はいくらかかる?5万円以下ぐらいです

病院の患者情報が書いてある「カルテ」は今の時代、患者のも

→もっと見る

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

PAGE TOP ↑