公式LINEに登録する

年収1000万円を実現したいデザイナーへ

実践的ノウハウ・情報をお届け

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


Warning: Undefined variable $data_info in /home/threem/threem-design.com/public_html/wp-content/plugins/wpw_ba_viewer/wpw_ba_viewer.php on line 174

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

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

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

解像度

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

ぼかし(ガウス)

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

選択

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

フィルターガラス

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

テクスチャーをドラッグ

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

オーバーレイと明度

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

複製して選択

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

境界線を調整

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

スクリーン統合

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

水滴

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

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

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

非表示

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

フィルターガラス

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

ブラシ文字

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

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

クリッピングマスク

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

明るさコントラスト調整

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

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

スリームデザイン

1978年夏生まれの熱しやすく冷めやすいB型。群馬県在住の累計360万PVブロガー。趣味はデザインとマーケティングと玄米ご飯。 フリーランス時代に独学で身に付けた技術を活かし、世界規模のデザインコンテストで日本人初の大賞を受賞&Photoshopの専門書を出版。 ブログ集客のエキスパートとして企業や個人のコンサルティングをしながら、コンテンツマーケティングやコピーライティングを手掛けるブログマーケターである。

最近の記事
おすすめ記事
  1. イケてる見た目に着せ替えチェンジ!ブログの運営目的に適したWordPressテーマに変更する方法

  2. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそうな書籍を4選しました。

  3. Photoshopで立体感や空間を表現してリアリティのある世界観を創る方法

  4. 「ネーミング」を考える前に理解しておきたいその重要性について

  5. Phostohopの切り取り方法をマスターして画像コラージュ作品を作ってみよう!

  6. 中性脂肪が6ヶ月間で208→73にガチ下げ!42歳の私が試した三方向アプローチの結果がヤバイ、、

  7. 「いつも締め切りに追われてしまう」そんな人がミッションを成し遂げるために克服しておきたい3つの心理メカニズムについて

  1. 中性脂肪が6ヶ月間で208→73にガチ下げ!42歳の私が試した三方向アプローチの結果がヤバイ、、

  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画のまとめ

  3. わずか10秒っ!Photoshopで部分的に色を変えたいときの【色の置き換え】の使い方&動画解説ダイジェスト

  4. 「ちょっと待って!」Photoshopの初心者にありがちな間違った5つの使い方とスキルが飛躍する解決策

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

  6. 【保存版】Photoshopの技術を一気に飛躍させるための日本語で学べる実践テクニック7連発

  7. これだけはブクマしておきたい!Youtubeなどの動画制作で”マジで使える”フリー音楽素材と効果音サイトのまとめ

おすすめ記事

ページ上部へ戻る