webデザイン

photoshopで縁取りを応用し素人っぽさから一歩抜け出すスゴ技を伝授。

photoshopで文字などをデザインする際、レイヤースタイルの境界線を用いて縁取りすることでさまざまな表現が可能になります、しかし単純な縁取りだけではどうも素人っぽさが出てしまいがち

ここでは素人っぽさから一歩抜け出すための効果的な境界線の活用方法をお伝えします。

Photoshop CS6使用グラデーション
所要時間の目安5分グラデーション
画面サイズ570×480:解像度72pixel/inchフリーダウンロード 》

単純な縁取り方法を知りたい方はこちらの関連記事を参考にしてください ⇒ photoshopで文字や図形を縁取りする1番簡単な方法。レイヤースタイルに境界線を適用する&小技

素人っぽさから一歩抜け出す境界線の活用方法

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

テキストや図形を入力

テキストレイヤーを複製し、非表示にしておく。【縁取りを応用する場合には複製してから加工することで複雑なデザインが可能になるので日頃からそのように癖付けしておこう。

複製して非表示

複製元のテキストレイヤーにレイヤースタイルの境界線を適用(ここでは2pxで、分かりやすいようにカラーを白にしてます)。

境界線

レイヤーの塗りを0%にして、テキスト部分を消し境界線だけを残す

塗り0%

境界線のみになったテキストレイヤーを右クリックしてレイヤースタイルをラスタライズ

ラスタライズ

ラスタライズしたレイヤーにグラデーションをかける。

グラデーションの調整が苦手な方はこちら ⇒ hemming.grd からダウンロード。(スリームデザイン作成なので自由に使用できます)

グラデーション

つづいて、レイヤースタイルのべベルとエンボス光彩(外側)をニュアンスで適用

べベルとエンボス、光彩

ここで先に複製して非表示にさせていたテキストレイヤーを表示させ左上方向に移動

表示、移動

レイヤースタイルのべベルとエンボスを適用

べベルとエンボス

さらに黄色っぽい色で光彩(外側)を適用

光彩

ロケット部分の図形にもべベルとエンボス、光彩(外側)を適用させ、このように完成しましたがいかがでしたでしょうか?

素人っぽくない縁取り完成

photoshopで縁取りを応用しアレンジしたいろいろ。

今回のようにレイヤーを複製して、それぞれに違うレイヤースタイルを適用したりエフェクトをかけることで単純な縁取りだけでないさまざまな表現が可能になります。

ぜひあなただけのオリジナリティーに溢れた表現に挑戦してみてください

素人っぽくない縁取りアレンジ

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

ピックアップ記事

  1. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  3. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. フォトショップ

    3分でわかる画像をフォトショップで切り取りする方法

    フォトショップで画像を切り取る方法はたくさんあります、バージョンが上が…

  2. webデザイン

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

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

  3. webデザイン

    芸能人のアメーバブログのようなヘッダーを作成・依頼する前に知っておいたほうが良いこと。

    《芸能人のブログヘッダ画像まとめ【モデル偏】【アイドル偏】》などを見る…

  4. webデザイン

    photoshopで写真をセピア調にする一番簡単な方法!

    写真をセピア調にしたい場合photoshopを使えば超簡単!ものの30…

  5. webデザイン

    社長っ!御社のホームページはタコサイトですよっ、、ウェブ制作者・担当者が知っておくべき重要事項

    ちょっと過激なタイトルですが、タコとは悪口で使われるような意味を含んだ…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  3. コピーライティング

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

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
PAGE TOP