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. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…

関連記事

  1. webデザイン

    わずか3秒っ!Photoshopで文字を中央に配置する方法

    Photoshopで文字や図形などを画像の中央(上下左右バッチリ均等)…

  2. webデザイン

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

    photoshopで文字などをデザインする際、レイヤースタイルの境界線…

  3. webデザイン

    初心者でも簡単!GIMPをダウンロードしてインストール方法。

    GIMP公式サイトへGOっ!【Download GIMP バージョン】…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. フォトショップ

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

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. コピーライティング

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

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

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
PAGE TOP