webデザイン

photoshopで結露のしたたる曇りガラスに指で文字を書いたような表現をするチュートリアル

雨上がり、車の窓から外を眺めているような表現をするために、photoshopで曇りガラスを作成する工程曇っていないガラス&指文字を作成する工程の2つの工程で説明します。

結露のしたたる曇りガラスを作成する工程

photoshopで加工したい画像を開く。(今回は900pixel×570pixel 解像度72pixel)

解像度

フィルターのぼかし(ガウス)で結構ガッツリぼかす。

ぼかし(ガウス)

選択ツール(ぼかし100px)で中心を丸く囲い選択範囲を反転。(※中心を薄く離れるほど強くフィルター効果をつけるため)

選択

フィルターは変形のガラスを選び数値を調整。

フィルターガラス

水滴のテクスチャーを開きドラッグしてレイヤーを重ねる。テクスチャーはこちらを使用。

テクスチャーをドラッグ

水滴テクスチャーのサイズを調整したら、描画モードをオーバーレイにして明るくなりすぎたら少し明度を落として調整。

オーバーレイと明度

水滴テクスチャーレイヤーを複製選択ツールで水滴のツブ以外の部分を選択。選択したら境界線を調整ボタンを押す。

複製して選択

半径調整ツール(ブラシみたいなやつ)で画面全体をなぞって境界線を数値で調整。

境界線を調整

選択部分を切り取ったら、描画モードをスクリーンに変更し、不透明度で明るさを調整したら背景以外のレイヤーを統合

スクリーン統合

これで水滴の先端が白くなり立体感が出ました。

水滴

ここで統合し作成した曇りガラスレイヤーは一旦非表示にしておく。

曇っていないガラスと指文字を作成する工程

今度は曇っていないガラスレイヤーを作成するため、背景を複製し、選択ツール(ぼかし80px)で中心を丸く囲い選択範囲を反転

非表示

フィルターは変形のガラスを選び数値を調整。

フィルターガラス

新規レイヤーを作成ブラシ(黒)などで指文字や袖で窓を拭ったような感じで描く。

ブラシ文字

レイヤーの順番を ↓ 画像のように入れ替え最前面に持ってきた曇っていないガラスレイヤーにクリッピングマスクを適用。

  • ① 曇っていないガラスレイヤー
  • ② 指文字&袖で窓を拭ったようなレイヤー
  • ③ 曇っている水滴ガラスレイヤー

クリッピングマスク

さらに不透明度95%にし、明るさ・コントラストを調整

明るさコントラスト調整

photoshopで曇りガラスに指文字が完成!

関連記事:フォトショップでフワフワ・フサフサな動物の毛を表現するブラシの活用方法。

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

ピックアップ記事

  1. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. webデザイン

    Photoshopユーザー必見!無料になったNik Collectionのヤバすぎる使い方

    Photoshopでクオリティの高い加工が可能なプラグインのNik C…

  2. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本語のチュートリアルで…

    ここではスリームデザインが実際に仕事をする際に使っているほぼ全ての技術…

  3. webデザイン

    細部(ディティール)へのこだわりがWEBデザインに差をつける。Photoshop編

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

  4. webデザイン

    フォトショップで金色(ゴールド)の文字を表現してクオリティの高いロゴを作る方法

    金色(ゴールド)ってどーやって描けばいいんだろう?そう思うひとは少なく…

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

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

最近の記事

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

思考系のおもろい記事

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

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

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

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

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. キュレーション

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