【動画】イラレで 透明 グラデーション を駆使してディスプレイの反射・てかりを表現する

2020年11月17日

イラレ 透明 グラデーション

 

疑問

デザイン小太郎

パソコンの反射・てかりをイラレで表現したい

 

疑問

デザイン小太郎

どう検索していいかわからない

 

疑問

デザイン小太郎

選択範囲を透明グラデーションにする方法がわからない

 

ぴよさく

ぴよさく

確かにそうですよね。イラレ・フォトショのあるあるです。どうググっていいかわからない

 

私は、イラレ・フォトショをよく使うけど、

実務では触ったことなくて、何かやりたい時にググってなんとか操作するんですが、だいたい苦戦します(笑)

結構、共感していただける人、いるんじゃないかと思います。

 

 

“イラレ ディスプレイ 反射”とかでググってもヒットしないんですよね。

“鏡面反射”とかは出てくるんだけど。

 

 

そこで今回は下のバナーの様な、

イラレ 透明 グラデーション
私が作ったんですが、良い感じじゃないですか?架空のバナーです。

パソコンのディスプレイの部分が反射して、テカらせる方法を説明していきます。

 

 

この方法を一旦結論を言うと、

  1. ディスプレイの部分を四角形作る
  2. 四角形をグラデーションにする
  3. グラデーションを透明にするために、透明パネルで”マスク作成”をクリック
  4. クリップというとこのチェックをはずす
  5. ディスプレイ部分の上にパソコン画像のレイヤーをはめる

 

なんですけど、

 

ちょっとこれだけじゃわかりにくいと思いますので、

そのやり方の一部始終を、動画と画像で説明していきたいと思います。

 

 

【この記事を読んでほしい人】

  • 初心者
  • 透明グラデーションのやり方を知りたい方

 

 

【この記事のメリット】

  • 動画と画像なのでわかりやすい(はず)
  • イラレでディスプレイの反射・てかりを表現できる
  • 意外と最初わかっていない選択範囲の透明グラデーションをマスターできる

 

 

 

~この記事は5分程度で読めます~

 

 

 

記事の内容はこちら

↓↓↓↓↓

スポンサードサーチ

【改めて】まず何をするか説明(イラレの透明グラデーションでディスプレイ反射・てかりを表現)

 

パソコンのディスプレイの部分に透明グラデーションをかけることで、

ディスプレイの反射を表現します。

きっかけは、私の就活のためのデザインのポートフォリオだったのですが、この方法に行きつきました。

他にもやり方はあるかもしれません。

 

 

 

【動画】イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法

ノーカットなので、一発撮りです。

具体的な操作の部分は、これより下で説明する記事の方がわかりやすい可能性があります。

動画だったら、「あれ、どこだったっけ?」ってなることありますもんね。

それでは、ご覧ください。

 

 

スポンサードサーチ

【手順1・範囲指定】イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法

イラレ 透明 グラデーション

まずは、てからせる部分の範囲を指定します。

長方形ツールで範囲を作ります。

反射・てからせるさせる部分=透明グラデーションをかける部分

軽いテクニックは動画をご覧ください。

 

 

 

 

【手順2・まず普通グラデーション】イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法

イラレ 透明 グラデーション

まずは、普通にグラデーションをかけます。

【手順1】で作った四角形のレイヤーだけをグラデーションかけます。

 

 

 

スポンサードサーチ

【手順3・透明にする前に!】イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法

イラレ 透明 グラデーション

この二つのレイヤーを選択してください。

バックの画像と反射部分の二つのレイヤーを選択してください。

ぴよさく

ぴよさく

マスクの時もそうだけど、ここら辺の操作は最初慣れないですよね。

 

 

 

 

【手順4・透明グラデに変える】イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法

イラレ 透明 グラデーション

 

このままだと、

宇宙の中に、謎の四角が!?と、都市伝説のような画像になっちゃうので、

グラデーションを透明にしていきますよ。

もちろんこのときは、二つのレイヤーが選択されている状態です。

 

 

 

 

 

スポンサードサーチ

【手順5・透明>マスク作成】イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法

イラレ 透明 グラデーション

ウィンドウ>透明 で透明ウィンドウを出します。

透明ウィンドウの“マスク作成”をクリックします。

クリックすると、ゴールが見えてくる気がしますよ。

ぴよさく

ぴよさく

これって透明マスクを作る操作なんですよね。これで応用が効きそうです。

透明×グラデーション=透明グラデーション

 

 

 

 

 

【手順6・クリップのチェックはずす】イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法

イラレ 透明 グラデーション

ここは、操作をとにかく覚えましょう。

透明ウィンドウの”クリップ”のチェックをはずします。

すると、もうゴール前です。

ぴよさく

ぴよさく

手順5から手順6は超大事ですが、一瞬で終わります。
クリップのチェックをはずすと、なぜこうなるかとかは全然わからんす。
とりあえず形にしましょう(笑)

 

 

【手順7・華麗なディスプレイ完成】イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法

イラレ 透明 グラデーション

あとは、もう説明不要ですかね。

長方形ツールの部分が、透明のグラデーションがかかっており、ディスプレイの反射っぽくなっているので、

その上に、パソコン等の画像(要あらかじめ準備)を綺麗にはめ込みます。

 

-完了-

 

 

イラレの透明グラデーションでディスプレイ反射・てかりを表現する方法のまとめと感想【聞いてほしい】

 

  • ググってもなかなか出てこないので、自分でやってみるしかない
  • 鏡面反射は出てくる
  • 透明グラデーションはでてくる
  • 結果的に透明のグラデーションが良かったので、それを私がやっただけ
  • グラデーションされた長方形>透明でマスクをかける=今回のスキルの肝で、応用できそう
  • ディスプレイのバナーを作るときにいいテクニックになる

とこんな感じかなと思います。

なので、

 

真の結論

 

グラデーション×透明マスク=透明のグラデーション

それを、ディスプレイの反射・テカリに見立ててみたということになります。

 

長くなりましたが、以上となります。

ご覧いただきありがとうございました。