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アニメが作れない!!

写真の遠近感を簡単に修正する方法

写真の遠近感を正面から撮った様に修正する方法

カメラで正面から撮影したいけど理由があって撮影できず、横から撮影した。

Message

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

ホテルのアメニティの髭剃りを1年間使った結果
ホテルのアメニティの髭剃りを1年間使った結果

先日家族旅行に行ってきました。 去年の旅行で持って帰っ

おとっぺウイルスの感染原因と対策・治療法
おとっぺウイルスの感染原因と対策・治療法

どうでもいい話だけど、息子とNHKのアニメおとっぺを

王寺駅の鉄道イベントの感想はクーポン券が貰えるから節約になる
王寺駅の鉄道イベントの感想はクーポン券が貰えるから節約になる

王寺駅で行われている鉄道祭りに初めて行ってみました。

no image
第2子の不妊治療に125万円使いました、冗談です

二人目がなかなかできない… そろそろ諦めるしか無いのか

大阪市が委託してて猪名川動物霊園で猫は眠っているそう
大阪市、保健所の死んだペットの引き取りの値段・費用は1700円、ペットの葬儀を盛大にすると呪われる噂

最近、実家の愛猫が亡くなった。 仕事と休日も忙しく

→もっと見る

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

PAGE TOP ↑