>  >  >  > 

Photoshopでのグラデーションマスクのかけ方

Photoshopでのグラデーションマスクのかけ方

はじめまして。
株式会社マグネッツでインターン中の前田です。

私は今ウェブデザインの勉強をしています。
PhotoshopやIllustratorだけでも覚える機能がたくさんあり、毎日が勉強です。覚えてもすぐに忘れてしまうこともあります。

そこで今回、個人的にPhotoshopで忘れがちな機能№1の透過グラデーションのかけ方を紹介しようと思います。

基本的なグラデーションマスクのかけ方

blog_5

まずは完成イメージを見て頂いた方がこれからの説明が分かりやすいと思いますので、上に完成画像を掲載します。

それではまず、透過グラデーションをかけたい画像をphotoshopで開きましょう。

blog_1

背景のままだとマスクをかけられないので、背景になっている場合、レイヤーをダブルクリックしてOKを選択します。

blog_2

【レイヤーマスクを追加】をクリック。

blog_3

グラデーションツールを選択し【黒から白】を選択します。

blog_4

マスクをかけたいレイヤーを選択しているか確認しグラデーションをかけます。

下に背景色を塗ったレイヤーを置けば完成です。

レイヤーだけでなく、フォルダ全体にもマスクをかけることができます。

両方向からグラデーションマスクをかけたい時

blog_7

両方からグラデーションマスクをかけたものの完成はこんな感じです。

blog_6

まず、フォルダを制作し、上で制作した片側からグラデーションをかけた画像をフォルダに入れます。

フォルダを選択し【レイヤーマスクを追加】でマスクをかけてグラデーションをかけると完成です。

円状にグラデーションマスクをかけたい時

blog_10

円形にグラデーションマスクをかけたものの完成はこんな感じです。

背景にパターンが入ってる時

blog_8

楕円形選択ツールを選択し、【ぼかし】にお好みの数値を入力します。

blog_9

円の選択範囲を作成し、【マスクの追加】をクリックで完成です。

背景が無地の場合

背景が無地の場合は、再編集がしやすいのでコチラのほうが便利です。

まずクリッピングマスクをかけて切り抜きます。
(クリッピングマスクのかけ方は下へ)

blog_13
下の図形のレイヤーをダブルクリックし、【レイヤースタイル】のウィンドウが出るので【光彩(内側)】を選択します。

【描画モード】を【通常】、【不透明度】を【100%】
【カラー】を背景色に設定します。
サイズをお好みの数値に設定して完成です。

blog_14

完成はこのようになっているので背景にパターンがあるときには適しません。

クリッピングマスクのやり方

切り抜きたい画像のレイヤーを上に、図形のレイヤーを下に置きます。

blog_11

二つのレイヤーの間にカーソルを持っていき【Altキー】を押すとカーソルがこのような形になります。

そこにカーソルを合わせクリックでクリッピングマスクの完成です。

まとめ

文字で説明すると長くなって面倒そうですが覚えてしまえば簡単な作業です。
使われることが多い表現方法なので是非覚えてみてください。

maedaこの記事はわたしが書きました!
福岡の専門学校でwebデザインの勉強をしています。

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング