インターンはじめまして。株式会社マグネッツでインターン中の前田です。私は今ウェブデザインの勉強をしています。PhotoshopやIllustratorだけでも覚える機能がたくさんあり、毎日が勉強です。覚えてもすぐに忘れてしまうこともあります。そこで今回、個人的にPhotoshopで忘れがちな機能No1の透過グラデーションのかけ方を紹介しようと思います。基本的なグラデーションマスクのかけ方まずは完成イメージを見て頂いた方がこれからの説明が分かりやすいと思いますので、上に完成画像を掲載します。それではまず、透過グラデーションをかけたい画像をphotoshopで開きましょう。背景のままだとマスクをかけられないので、背景になっている場合、レイヤーをダブルクリックしてOKを選択します。【レイヤーマスクを追加】をクリック。グラデーションツールを選択し【黒から白】を選択します。マスクをかけたいレイヤーを選択しているか確認しグラデーションをかけます。下に背景色を塗ったレイヤーを置けば完成です。レイヤーだけでなく、フォルダ全体にもマスクをかけることができます。両方からグラデーションマスクをかけたものの完成はこんな感じです。フォルダを制作し、上で制作した片側からグラデーションをかけた画像をフォルダに入れます。フォルダを選択し【レイヤーマスクを追加】でマスクをかけてグラデーションをかけると完成です。円形にグラデーションマスクをかけたものの完成はこんな感じです。楕円形選択ツールを選択し、【ぼかし】にお好みの数値を入力します。円の選択範囲を作成し、【マスクの追加】をクリックで完成です。背景が無地の場合は、再編集がしやすいのでコチラのほうが便利です。クリッピングマスクをかけて切り抜きます。(クリッピングマスクのかけ方は下へ)下の図形のレイヤーをダブルクリックし、【レイヤースタイル】のウィンドウが出るので【光彩(内側)】を選択します。【カラー】を背景色に設定します。サイズをお好みの数値に設定して完成です。完成はこのようになっているので背景にパターンがあるときには適しません。切り抜きたい画像のレイヤーを上に、図形のレイヤーを下に置きます。二つのレイヤーの間にカーソルを持っていき【Altキー】を押すとカーソルがこのような形になります。そこにカーソルを合わせクリックでクリッピングマスクの完成です。まとめ文字で説明すると長くなって面倒そうですが覚えてしまえば簡単な作業です。使われることが多い表現方法なので是非覚えてみてください。福岡の専門学校でwebデザインの勉強をしています。帯広Backlogを導入したら日々の業務が楽になってとても助かってますIllustrator2020がリリースされたので、実際に触ってCC2019との違いを確かめてみたよ「デザイン」の人気記事Illustratorで画像に透明グラデーションを掛ける方法だよIllustratorできれいな吹き出しを作る方法だよIllustratorでしましまを作る方法だよIllustratorで画像とかにテキストの回り込みをする方法だよPhotoshopクリッピングマスクの使い方【Photoshopのマスクまとめ前編】Illustratorでハートを作る方法だよIllustratorで文字にかすれ加工する方法だよマグネッツとは?福岡でWEB制作や中小企業様の集客支援などを行っている会社です。