webデザイン

photoshopで文字や図形を縁取りする1番簡単な方法。レイヤースタイルに境界線を適用する&小技

photoshopでも文字や図形などを縁取りしたい場合はレイヤースタイルの境界線を適用すれば初心者でも簡単にできます。ここでは単純に境界線を適用するだけではなく、2重に縁取りをさせる方法と、縁取りだけを残しテキストを消す方法を説明します

Photoshop CS6背景素材
所要時間の目安3分宇宙素材
画面サイズ570×480:解像度72pixel/inch123RFについて 》

文字や図形を縁取りするチュートリアル

背景画像をphotoshopで開く。

背景

任意のテキストや図形を入力

テキスト入力

テキストにレイヤースタイルの境界線を適用。

境界線

境界線のサイズやカラーを調整。単純に縁取りするだけであればこれだけの作業で完成!

レイヤースタイルを調整

図形も同様に境界線を適用することができます。

図形にも境界線

レイヤースタイルをラスタライズすると境界線の外側(内側)にさらに縁取りすることができます

ラスタライズ

境界線の調整。

ラスタライズに境界線

これでテキストや図形に境界線を適用させ、さらに2重に縁取りすることができました。しかし一旦ラスタライズしてしまうとその後の柔軟な調整がきかなくなってしまいます

そこで、2重までの縁取りであればラスタライズせずに、レイヤースタイルのドロップシャドウの数値調整で境界線を代用させてみよう。

ラスタライズせずに2重に縁取りする小技

境界線を適用したテキストレイヤー(ラスタライズしていない状態)にドロップシャドウをを適用させ、【描画モード ⇒ 通常】【カラー ⇒ 任意】【不透明度 : 100】【距離 : 0】【スプレッド : 100】【サイズ : 任意】に調整。

ラスタライズせずに境界線

このようにラスタライズさせずに2重の縁取りが完成しました、この状態であればテキストのサイズ調整なども可能です

文字や図形に縁取り完成

縁取りだけを残すことも可能。

ラスタライズしていなければテキストレイヤーを【塗り:0%】にすることで縁取りだけを残すこともできます

縁取りのみ

ここでは基本的な縁取り方法を説明しましたが、この基本をマスターしておくと多彩な応用が利くようになります。応用編↓

スリームデザインの無料メールマガジン

ピックアップ記事

  1. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ

関連記事

  1. webデザイン

    えっ!?この画像動いてるし…妙に不思議なシネマグラフをPhotoshopで作ってみよう。

    一見何気ない画像かと思いきや、画像の一部分をループして動かすことで不思…

  2. webデザイン

    123RFの格安素材を活用して素人っぽいWEBサイトから卒業しよう!

    ここでは123RFの格安素材を活用して素人っぽいWEBサイトから卒業す…

  3. webデザイン

    photoshopで背景を透明なままPNGで保存するのは簡単だよ!

    WEBサイトでアイコンやイラストなどを使用する場合、背景を透明なままで…

  4. webデザイン

    ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の4番目、ここでは④ …

  5. 3分の話

    3分でわかる想像力(創造力)を鍛える方法

    想像力はクリエイティブ(創造的)な仕事をする上でとても重要な要素です、…

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  4. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
PAGE TOP