webデザイン

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

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

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

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

解像度

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

ぼかし(ガウス)

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

選択

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

フィルターガラス

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

テクスチャーをドラッグ

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

オーバーレイと明度

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

複製して選択

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

境界線を調整

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

スクリーン統合

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

水滴

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

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

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

非表示

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

フィルターガラス

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

ブラシ文字

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

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

クリッピングマスク

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

明るさコントラスト調整

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

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

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

ピックアップ記事

  1. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. 「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…

関連記事

  1. webデザイン

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

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

  2. webデザイン

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

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

  3. webデザイン

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

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

  4. フォトショップ

    photoshopでしわ取りするのは案外簡単だよ。

    しわ取りするのは案外簡単、というより最近のphotoshopはすごい!…

  5. webデザイン

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

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

  6. webデザイン

    photoshopで雰囲気のあるセピア調に仕上げるプロの技術。

    photoshopで写真をセピア調にするのはすごく簡単。 ⇒ phot…

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

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

最近の記事

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

思考系のおもろい記事

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

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

    「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
  3. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  4. コピーライティング

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

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