webデザイン

photoshopで文字(テキスト)の形にくり抜かれたメタリックな金属パネルを表現する、中抜き方法。

photoshopで文字や図形を中抜きしたい場合選択ツールなどで切り抜いてしまうと ↓ 画像のように境界線がカクカクしてキレイにくり抜くことができません。

境界線がカクカクする

こういったケースでは【選択範囲をマスク】を使うのがBEST。ここではクオリティの高いメタリックな金属パネルを表現する工程の中で、境界線がカクカクしないめちゃめちゃ簡単な中抜き方法を説明します。

カクカクしないパネルを文字でくり抜くチュートリアル。

Photoshop CS6使用素材
所要時間の目安3分 メタリック素材
画面サイズ1400×1000:解像度72pixel/inch素材はこちら 》

新規レイヤーでパネルの原型となるシェイプを作成

シェイプ

中抜きしたい任意のテキストをシェイプの上に重ねる

テキスト入力

分かりやすいように背景を非表示(目のマークを消す)にしておく

非表示

入力したテキストレイヤーの【T】の部分をCtrlを押しながらクリック

サムネイルをクリック

テキスト型に選択されたままシェイプレイヤーを選び、レイヤーレイヤーマスク 》選択範囲をマスク

選択範囲をマスク

レイヤーにマスクが追加されたのを確認。

パネル

テキストレイヤーを非表示にすれば、キレイに中抜きされてます。

パネル

パネルを文字(テキスト)でくり抜くための下準備はこれでOKっ!超ぉ簡単。

金属パネルのような表現を追加。

デザイン的な見た目を考慮しさらに任意のテキストを追加

パネル

Shiftを押しながらパネルレイヤーとテキストレイヤーを選択しレイヤーを結合

パネル

メタリックな金属テクスチャーをドラッグして放り込む

パネル

サイズを調整してクリッピングマスクを作成

パネル

パネルやテキストが金属っぽくなりました。

パネル

背景をつけて立体感を出してみよう。

Photoshop CS6使用素材
所要時間の目安1分 皮素材
画面サイズ1400×1000:解像度72pixel/inch素材はこちら 》

背景に皮のテクスチャー素材を入れる。(さっきと同様にサイズ調整)

パネル

金属レイヤーにレイヤースタイルのベベルとエンボスをかける

パネル

さらにドロップシャドウで影を追加

パネル

このように文字が中抜きされたメタリックな金属パネルが完成しましたがどうでしたか?

パネル

ベベルとエンボス&ドロップシャドウで少し立体感を出しましたが、3D機能でロングシャドーを作るとまた違う印象になります

こちらの記事を参考にしてみてね。 ⇒ photoshopで立体を回転させるのはめちゃめちゃ簡単だった、、垂直方向が1分で完成!

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

ピックアップ記事

  1. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…

関連記事

  1. webデザイン

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

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

  2. webデザイン

    ブロガー必見!パソコン画面のはめ込み画像がわずか10秒で作れるMockDropが便利すぎた。

    ブログを書いているとパソコン画面の"はめ込み画像"を作りたい場合があり…

  3. webデザイン

    ひと味違うHDR風のディティールを表現する所要時間3分のフォトショップ技術

    HDRとはハイダイナミックレンジの略で最近ではiphoneカメラにも搭…

  4. webデザイン

    【デザイナー必見】パクリと言われないために類似画像検索で確認しておこう

    作品を創り出す際、クライアント用のデザインや自身のアートに限らず、その…

  5. webデザイン

    Photoshopで文字に影を付ける”3つの方法”を知っておくだけで表現の幅…

    Photoshopで文字に影を付けるには、レイヤースタイルのドロップシ…

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

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

最近の記事

  1. Photoshop CCのメニュー文字やツールバーが異常に小…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  3. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…

思考系のおもろい記事

ブログラ
  1. SNS

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

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  4. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
PAGE TOP