webデザイン

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

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

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

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

解像度

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

ぼかし(ガウス)

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

選択

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

フィルターガラス

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

テクスチャーをドラッグ

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

オーバーレイと明度

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

複製して選択

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

境界線を調整

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

スクリーン統合

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

水滴

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

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

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

非表示

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

フィルターガラス

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

ブラシ文字

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

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

クリッピングマスク

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

明るさコントラスト調整

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

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

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

ピックアップ記事

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

関連記事

  1. 3分の話

    3分でわかる想像力(創造力)を鍛える方法

    想像力はクリエイティブ(創造的)な仕事をする上でとても重要な要素です、…

  2. webデザイン

    Photoshopを使って動画をGIFアニメーション(動く画像)に変換する方法

    「ブログの記事内に"動きのある画像"を貼りたい」ときがありますが、実は…

  3. webデザイン

    photoshopでまるで本物の油絵タッチに仕上げるためのフィルター&塗り方講座。

    photoshopで油絵タッチに仕上げるために、まず ↓ のように風景…

  4. 3分の話

    クリエイターとは何ぞや!?ということを真剣に考えてみた結果、ちょっとした独り言で終わった話し。

    響がなんかカッコ良いっ!でも「自称クリエイターです。」と、自称を付けて…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. SNS

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

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

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

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

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