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. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    Photoshopで自由に点線(直線・曲線・図形を囲む)を書きたいときの1番簡単な方法

    Photoshopで点線を書く方法はいくつかありますが、直線や曲線、図…

  2. webデザイン

    【保存版】Photoshopの技術を一気に飛躍させるための日本語で学べる実践テクニック7連発

    Photoshopの基本的な使い方の解説はたくさんありますが、デザイン…

  3. webデザイン

    素人っぽいWEBサイトに見えてしまう4つのロゴデザインの特徴と誰でも簡単にできるPhotoshopと…

    ウェブサイトやブログなどでデザインクオリティの高いテンプレートを使用し…

  4. webデザイン

    境界線が複雑な模様やイラストを切り取りせずに合成する裏ワザ的フォトショップ【CS6】技術

    フォトショップで画像を合成させるためには、さまざまな切り取り方法がある…

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

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

最近の記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  2. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…
  3. Photoshopを使って動画をGIFアニメーション(動く画…

思考系のおもろい記事

ブログラ
  1. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  2. コピーライティング

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

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  5. 3分の話

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