【Photoshop】透明感のある水のロゴをゼロから作る方法forフォトショ初心者

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

Photoshop（フォトショップ）で透明感のある水のような質感のロゴをゼロから作る方法をフォトショ初心者の方に詳しく解説します。

背景の質感が透けた液体表現をレイヤースタイルを使って再現できます。
テキストやアイコンに適用してロゴデザイン・見出しデザイン等に、メインビジュアルとしてなど。
一度作ってしまえば文字やアイコンなど、様々なグラフィックに適用可能！

Webデザイン、バナーデザイン、チラシなどのDTPデザイン、UIデザイン等、Photoshopを活用した様々なクリエイティブに活用できる質感付与テクニックです！
これからPhotoshopを始められる方、更にフォトショを学習されたい方にオススメのコンテンツですよ。

この記事の目次

何ができるの？

上記の様な透明感のある水のような液体表現がPhotoshopを使ってゼロから作成可能です。
文字やアイコン等に適用するだけで簡単に質感付与ができます。

Photoshop初心者の方でも順を追っていけば再現できる水エフェクトの制作を通して、より深くフォトショップを学ばれてみませんか？

水の質感ロゴの作り方

Photoshopで透明感のある水のような質感のロゴをゼロから作る方法を解説します。
フォトショ初心者の方にも再現できるように順を追って解説いたします！

Photoshopを導入しましょう

当記事の内容を実践するにはPhotoshop（フォトショップ）が必須です。
未導入の方はフォトプラン公式サイトから入手可能。（月額は最安の1,180円、7日間の無料体験が可能）
なお、AdobeCCのプランはコチラの記事で徹底解説しています。

ロゴ制作の下準備を行う

まずは効率的にウォーターエフェクトを作るための下準備を行います。
1つのスマートオブジェクト内を更新するだけでグラフィック全体を更新できるようになりますよ。

STEP.1

新規ドキュメントを作成

Photoshopで新規ドキュメントを作成します。

サンプルのサイズは下記です。
幅：4000px　高さ：2500px
解像度：300px/inch　RGBカラー

STEP.2

背景を配置する

背景画像を配置します。

サンプルは [ Mediterranean sea. Aerial view on water and rocks. Transparent water. Vacation and adventure. ] を活用しました。

STEP.3

ロゴをスマートオブジェクトで配置

ロゴのベースを作成します。
Illustratorでベースのロゴを作成し、Photoshopへスマートオブジェクト形式でペーストしました。
※コチラの記事でイラレからフォトショへオブジェクトをコピーする方法を解説しています。

フォトショップでロゴ作成を行っても良いですが、イラストレーターの方が効率的に作成可能です。
※イラレ未導入の方は事前にAdobe公式サイトから入手しておきましょう。

FINISH

スマートオブジェクトをコピー

スマートオブジェクトのレイヤーをコピーし、左図のように整理します。

ロゴ本体用に4つのスマートオブジェクト、ロゴの影用に1つのスマートオブジェクトを準備しました。
あとは各要素でグループ分けしたら下準備の完成です。

水の質感表現を行う

それでは実際に水のような液体風の質感表現をPhotoshopで再現していきましょう。
フォトショ未導入の方は事前にAdobe公式サイトから入手しておきましょう。

STEP.1

効果①を設定

効果①レイヤーをアクティブにします。

レイヤーパネル右上の [ 不透明度 ] → [ 75% ] 、[ 塗り ] → [ 0% ] に変更しましょう。

効果②～③、影レイヤーは一旦全て非表示にします。
すると背景画像のみ表示されます。

レイヤーパネル下部から [ レイヤースタイルを追加 ] → [ ベベルとエンボス ] を追加。

スタイル：ベベル（外側）
テクニック：シゼルハード　深さ：750%
方向：上へ　サイズ：5px　ソフト：10px
角度：45°　高度：30°
光沢輪郭：ガウス　アンチエイリアスにチェック
ハイライトのモード：覆い焼きカラー　カラー：#ffffff　不透明度：50%
シャドウのモード：オーバーレイ　カラー：#030404　不透明度：60%

すると左図のようにうっすらとロゴの形状で影とハイライトを追加できました。

STEP.2

効果②を設定

効果②レイヤーをアクティブに、表示します。

レイヤーパネル右上の [ 不透明度 ] → [ 75% ] 、[ 塗り ] → [ 0% ] に変更しましょう。

スタイル：ベベル（内側）
テクニック：滑らかに　深さ：70%
方向：上へ　サイズ：55px　ソフト：0px
角度：45°　高度：65°
光沢輪郭：カスタム（詳細は後述）
ハイライトのモード：スクリーン　カラー：#ffffff　不透明度：80%
シャドウのモード：乗算　カラー：#030404　不透明度：20%

光沢輪郭の詳細です。
輪郭エディターで左図のようなカーブを描きましょう。設定後は [ OK ] をクリック。

レイヤースタイルの左メニューから [ 輪郭 ] にチェックします。

輪郭：カスタム　アンチエイリアスにチェック
範囲：53%

輪郭エディターの詳細設定です。

1つポイントを追加し、下記設定を追加。
入力：63%　出力：51%
コーナーにチェック

レイヤースタイル左メニューから [ カラーオーバーレイ ] を追加。

描画モード：ハードライト
カラー：#3d7b8b
不透明度：100%

すると左図のようにPhotoshopでロゴ内に水のような液体表現が追加できました。
カラーオーバーレイの色はお好みで編集してください。

STEP.3

効果③を設定

効果③レイヤーをアクティブに、表示します。

レイヤーパネル右上の [ 不透明度 ] → [ 100% ] 、[ 塗り ] → [ 0% ] に変更しましょう。

スタイル：エンボスの境界線を描く
テクニック：滑らかに　深さ：75%
方向：上へ　サイズ：18px　ソフト：0px
角度：-135°　高度：25°
光沢輪郭：リング　アンチエイリアスにチェック
ハイライトのモード：覆い焼きカラー　カラー：#ffffff　不透明度：75%
シャドウのモード：乗算　カラー：#030404　不透明度：60%

レイヤースタイルの左メニューから [ 輪郭 ] にチェックします。

輪郭：ガウス　範囲：100%

[ 境界線 ] にチェックを入れ、下記設定を追加。

サイズ：9px　位置：内側
描画モード：通常　不透明度：90%
塗りつぶしタイプ：カラー
カラー：#5d5d5d

すると液体ロゴの影やハイライトをより強調できました。

STEP.4

効果④を設定

効果④レイヤーをアクティブにし、表示します。

レイヤーパネル右上の [ 不透明度 ] → [ 100% ] 、[ 塗り ] → [ 0% ] に変更しましょう。

レイヤーパネル下部から [ レイヤースタイルを追加 ] → [ ベベルとエンボス ] を追加。

スタイル：ベベル（内側）
テクニック：シゼルハード　深さ：730%
方向：上へ　サイズ：3px　ソフト：3px
角度：90°　高度：30°　包括光源を使用にチェック
光沢輪郭：ガウス　アンチエイリアスにチェック
ハイライトのモード：覆い焼きカラー　カラー：#ffffff　不透明度：50%
シャドウのモード：オーバーレイ　カラー：#030404　不透明度：60%

[ シャドウ(内側) ] を追加。

描画モード：乗算　カラー：#0f1113
不透明度：60%　角度：-135°
距離：50px　チョーク：0%　サイズ：48px
輪郭：線形　アンチエイリアスにチェック
ノイズ：0%

[ サテン ] を追加。

描画モード：カラー比較(暗)　カラー：#030404
不透明度：62%　角度：58°
距離：28px　サイズ：42px
輪郭：円錐　アンチエイリアスにチェック

以上でPhotoshopのレイヤースタイルを使ったメインエフェクトの設定が完了しました。

仕上げを施す

最後にエフェクトに対してシャドウと質感付与を設定しましょう。
完成まであと一歩です！

STEP.1

シャドウレイヤーを設定

シャドウレイヤーをアクティブにし、表示します。

レイヤーパネル右上の [ 不透明度 ] → [ 100% ] 、[ 塗り ] → [ 0% ] に変更しましょう。

レイヤーパネル下部から [ レイヤースタイルを追加 ] → [ ドロップシャドウ ] を追加。

描画モード：焼き込み(リニア)　カラー：#00061a
不透明度：15%　角度：45°
距離：10px　スプレッド：0%　サイズ：25px
輪郭：ガウス　ノイズ：0%
レイヤーがドロップシャドウをノックアウトにチェック

すると左図のように水ロゴの下部に落ち影を追加できました。

STEP.2

グラデーションを追加

[ 塗りつぶしまたは調整レイヤーを新規作成 ] → [ グラデーション ] を追加します。

グラデーション：白黒グラデーション
スタイル：線形　角度：45°　比率：90%
選択範囲内で作成にチェック

描画モード：オーバーレイ
不透明度：100%
塗り：60%

STEP.3

完成

以上でPhotoshopを使った水のような質感のロゴが完成しました。
全てレイヤースタイルで設定しているので、後から色や質感の変更が容易にできます。

スマートオブジェクトのレイヤーサムネールをダブルクリックすると、別ウィンドウでPSBファイルが開きます。
PSB内の素材を差し替えるとロゴの変更も容易にできますよ！

高品質な水表現エフェクトのPSD素材

商用利用可能で高品質な水の質感表現ができるエフェクトのPSD素材を厳選しました。
先に解説した内容より更に高度なテクニックが詰め込まれたプロ仕様のエフェクト素材ばかりです。
※PSDの編集にはPhotoshopが必須、事前にAdobe公式サイトから入手しておきましょう。

#01 Realistic Water Text Effect Mockup

リアルな水のような質感が再現できるテキストエフェクト素材です。ロゴデザイン、見出しデザインの素材として抜群ですよ！

ダウンロードする

#05 Transparent Water Effect

適用されたいオブジェクトをはめ込むだけで水の質感表現が作れる便利なウォーターエフェクト素材です。レイヤー整理されたPSD素材なので使い勝手が良く、他の色や質感表現にも流用できます。

ダウンロードする

#07 Golden Liquid Text Effect

まるでハチミツやキャンディーのような質感の液体表現ができるテキストエフェクト素材です。美しい黄金色の液体で文字やアイコン等の質感が再現できます。もちろん全て商用利用可能です。

ダウンロードする

#09 Oil Text Effect

まるでオイルのような深みのあるテカリが再現できる珍しいテキストエフェクト素材です。非常に高度な質感表現ができるハイクオリティな素材の一つです。

ダウンロードする

#10 Realistic water ripple effect

水の波紋のような揺らめきや映り込みが再現できる高品質なフォトエフェクトのPSD素材です。対象のスマートオブジェクトを差し替えるだけでサンプルのような表現ができます。

ダウンロードする

リアルな水表現ができるエフェクト素材

【Photoshop】水などのリアルな液体表現ができるエフェクトPSD素材17選【商用可】

商用利用可能で高品質な水のような液体表現ができるエフェクトPSD素材を厳選しました。ロゴデザインや見出しのデザイン等が一瞬で出来るチート素材ですよ！

ワンランク上のテンプレート素材

Photoshopを学習する上で、プロが作成した生データを研究する事は重要です。

下記記事でプロが作成した高品質で汎用性の高いテンプレート素材を紹介しています。
全て商用利用可能、テキストや画像を変えるだけでプロの品質が出せます。

制作の手間を劇的に軽減してくれるだけでなく、スキルアップの為の教材としても最適ですよ。

例えばクリエイターの就職や転職に必須のポートフォリオ。
プロのテンプレートで美しいレイアウトや余白、文字サイズが一瞬で作成可能。内定獲得の可能性が格段にアップします！
厳選！ポートフォリオ用テンプレート40選

デザイン制作を学ぶ導入としてオススメの名刺デザイン。
想像だけで作るとイマイチになりがちですが、良質なテンプレートを元に作るだけで吸収できる情報の質が段違い！
相手に舐められない名刺テンプレート50選

バナーはフォトショップを練習する上で良質な教材です。
中途半端な素材を参考にせず、高品質なテンプレートを参考にするだけで学習効率が大幅に向上しますよ。
ハイクオリティなバナーテンプレート50選

紙素材のポートフォリオだけでなく、デジタル媒体に特化したポートフォリオも作成しておくと就職や仕事を獲得する上で有利です。他者と差を付けてより高みを目指しましょう！
デジタル媒体向けポートフォリオテンプレ素材35選

制作物の説得力を高められる高品質なモックアップ素材を厳選しました。ゼロからモックを準備するには膨大な労力が必要ですが、素材を使えば一瞬！
様々なモックアップテンプレート57選

良質な素材をもっと見る

上記で紹介しているテンプレートはごく一部。
下記記事で良質な素材を紹介しております。併せてチェックしてください！

クリエイティブ業務で使える優良素材まとめ

【最強素材サイト】Adobe Stockのテンプレートがチート級に便利な件について

おわりに

以上、Photoshop（フォトショップ）で水のような質感の液体表現を再現する方法についてでした。

レイヤースタイルを駆使して水の質感を再現するので後から色などの調整が簡単にできます。
事前にスマートオブジェクトに変換しておく事で、文字やグラフィックの変更が一括で可能に！
作業効率が格段に変わるので是非下処理を行っておきましょう。

Webデザイン、バナーデザイン、チラシなどのDTPデザイン、UIデザイン等、水のような液体表現のエフェクトはPhotoshopを使った幅広いクリエイティブに活用できる制作テクニックです。

上手く活用し、Photoshopを使ったクリエイティブを加速させてください！

ではまた！

テキストエフェクトの作り方まとめ

Photoshopでテキストエフェクトをゼロから自作する方法、そして1分で超高品質で商用利用可能なテキストエフェクトが作れるPSD素材の使い方と作例を解説しています。
ロゴデザイン、Webデザイン、バナーデザイン、各種DTPデザイン、UIデザイン、ポートフォリオ制作等。幅広いクリエイティブに活用できる内容です。