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

関連記事

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

角丸の四角形の作り方

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

フォトショップで写り込みを作る

鏡の映り込みを選択範囲の自由変形とレイヤーマスクを使って作る

photoshopの画像の自由変形とレイヤーマスクを使う練習です。

薄暗い写真を明るくする方法

暗い写真を昼間のように明るくする方法

これはWEB限定の方法です。 暗い写真を昼間のように明るくする方

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

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

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

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

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

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

346

フォトショップを使ったGIFアニメの作り方

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

こんな画像の作り方わかる?

線画レイヤーの作り方

photoshopでスキャナーで鉛筆で描いた絵を取り込んでそれに色

Message

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

no image
子供ユーチューバー賛成の理由

昔は子だくさんだった理由 昔は子供は労働力だった。

no image
子供は炎天下の車の中に3時間いるだけで死ぬ

真夏、炎天下の車内は60度にも70度にもなります。 車

no image
大人の階段って何?学生食堂でバイトしてた話

20代後半から仕事がバリバリできるようになりストレス耐性

祝日の京都水族館のイルカショーは立ち見
朝に京都水族館、夕方に帰宅で昼寝にしたらよかった

息子と嫁と京都水族館でデートしてきました。 京都水

no image
子供に自分で選ぶ、決断する力をつける方法とは?

エア子育てシリーズ。 いろいろ妄想して、うちの息子をど

→もっと見る

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

PAGE TOP ↑