creatersnest140

Photoshopで半透明のグラデーションをかける方法と参考になる美しいサイト10選


グラデーションには大きくわけで二つの方法があります。
グラデーション事態を不透明、半透明にするか。
グラデーションの掛け方も大きく分けて二つの方法があります。
半透明の場合でも画像の上から半透明のグラデーションをかける方法、画像自体を半透明のグラデーションにするやり方です。

半透明のグラデーションのかける方法

Photoshopで半透明のグラデーションをかける方法は
Photoshopを開く→新規作成→ツールバー→「塗りつぶしツール」で黄色で塗りつぶします。
今回はわかりやすく単色です。

次にグラデーションをかけます。
ツールバー→「塗りつぶしツール」を長押し→「グラデーションツール」を選択
t1

上部にグラデーションのメニューが表示されます。
基本は線形フラデーション→「クリックでグラデーションを編集」をクリック
t2

不透明度の設定

グラデーションエディターパネルが表示されます。
今回はプリセットの上段、左から三番目を指定しています。グラデーションタイプのバーで色表示がされています。
オレンジ丸で囲まれた上段分岐点は不透明度と位置の設定が出来ます。
100%~0%まで設定でき、100%(濃い)~0%(薄い)となります。
t3

 

 色の設定

下の分岐点は色設定となります。
t4

Altキーを押しながら分岐点をクリック+ドラッグすると、分岐点が増えます。
t6

「カラー」をクリックもしくは「分岐点」をダブルクリックすれば色設定が出来ます。
今回は赤を指定をしています。
t5

 

グラデーションの見え方

黄色の背景に不透明度を設定をせず、そのままグラデーションを被せます。
グラデーションが始めたい所をクリック→グラデーションが終わる所までドラッグし離す。
背景の黄色は全く見えません。
t6 01

次に白色側の不透明度を50%に変更、グラデーションエディターでも不透明度が反映されます。
グラデーションを被せます。
画像下部に背景の黄色が透けて見えます。
t7 02

こちらは左側の不透明度を50%、右側を0%とした場合。
t8 03

こちらは不透明度の分岐点を増やし、左50% 中100% 右0%とした場合。
分岐点の増やし方はAltキー+不透明度の分岐点をクリックしたままドラッグ。
t9 04

またツールバーでグラデーションを選択すると上部に表示されるメニューより設定は出来ますが、初めはグラデーションタイプの選択を含めた方法で習得していきましょう。
左より線状グラデーション、円形グラデーション、円錐形グラデーション、反射形グラデーション、菱形グラデーションの順です。
t10

 

写真にグラデーション

写真自体に不透明がかかったグラデーション処理をしてみましょう。
こちらの画像を使用します。
image_pen
shirodomi撮影

 

画像のレイヤーを複製→複製画像レイヤーの下に新規レイヤー/黒色で塗りつぶし→背景非表示
背景のコピーのレイヤーを選択→パネルの下にある「レイヤーマスクを追加」をクリック
t11

マスクがきちんとかかると、この様な表示になります。
ツール→グラデーションツール→グラデーションをかける
t12

このようにグラデーションをかけた所に合わせて、画像が透明になります。
t13

背景を黒に設定しているので、このように反映されます。
背景を別画像にすると、グラデーションに合成することができます。
05

背景部分のみ選択→水中の色に合わせてグラデーションをかけると、このようになります。
image_pengin

無料ダウンロード

無料でグラデーションのツールをダウンロードし、追加をすることもできます。
保存版!Photoshop用無料グラデーション750個+まとめ

 

参考サイト

グラデーションと一口に言いましても、表現の仕方は多彩です。
グラデーションがかかった綺麗なサイトを中心に紹介します。
動きのあるグラデーションなども参考になります。

 

Pieoneers

s1

http://www.pieoneers.com/
WEBやモバイル開発のサイトです。
TOPにでる動くイメージのグラデーションの掛け方など参考になります。

 

Saizen

s2

http://www.saizenmedia.com/2013/
デジタルクリエイティブエイジェンシーによるサイトです。
サイト内にあるWORKSより画像作品など参考になります。

 

DEPOC

s3

http://creative.depoc.jp/
広告媒体の政策事務所のサイトです。
背景の不規則に動くグラデーション具合が綺麗です。

 

normo

s4

http://normo.jp/
WEB制作全般、アプリ開発などの事業を行っているサイトです。
サイトのグラデーションの動きなども参考になります。

 

amazing THAILAND

s5

http://www.thailandtravel.or.jp/zooming/
タイ国政府観光庁によるプロカメラマンの撮影テクニック・アドバイスのサイトです。
サイト内のメニューより動きあるドットフィルターが画像にかかりますが、邪魔にならない具合など参考になります。

 

Disruption Lab DNA-ID

s6

http://www.dislab.jp/
デザイン会社のサイトです。
各個人へ移るメニューボタンのモザイクグラデーション柄、PROJECTSより見るバナーをマウスオーバーにするとかかるドット柄の半透明フィルター具合など参考になります。

 

KDDI

s7

http://www.kddi.com/co/r-and-d/akaruimirai/2009autumn/
KDDIのサイトです。
サイト上にあるイメージ背景に色のグラデ―ション、ドットの動くグラデーションなど綺麗です。

 

unouplus

s8

http://www.unouplus.com/
WEBサイト、スマホアプリの制作事務所のサイトです。
サイト内の同系色の使い方、またアイコンをマウスオーバーするとかかる半透明のグラデーションなど参考になります。

 

Magnum

s9

http://pleasurehunt.mymagnum.com/
マグナムプレジャーハントという女性をキーで動かしていくページです。
さまざまなサイトを駆け巡りながら背景に出てくるグラデーションのかかり具合、グラデーションのかかった画像などが出ます。

 

NSSGRAPHICA

s10


http://www.nssgraphica.com/

デザインスタジオのサイトです。
点数は少ないですがデジタルや紙媒体でも使い方によっては参考になります。

まとめ

画像上ではグラデーションで色んな雰囲気が作り出せます。
画像に沿ったイメージをカラーにしてのせます。
そこからフィルターをかけたり色々なエフェクトをして完成させていきます。

2Dの平面イラストでも光源方向を決めて、グラデーションで陰影をつければ立体的に見えます。
まずは最初にイメージをしてから作業をすると早いですよ。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


shirodomi

ライター初心者

Next Article水彩画デザインに最適な無料Photoshopブラシ素材30選