イラレ・フォトショで流行のグラデーションカラーを作る方法を解説!

服やスイーツと同様、デザイにトレンド

こんにちは、読むだけでデザインを学べる!デザイン研究所です!

毎日デザインのポイントを解説するインスタアカウントを運営しております。

こちらのブログはインスタ投稿をより深く解説した記事になります!

今日のテーマ:流行のグラデーションを使う

グラデーションを正しく使えていますか?デザイン初心者が作るグラデーションはやっぱり初心者ぽくなりがち。ではどのように作ればプロのようなグラデーションが作れるのか?

流行しているグラデーションの作り方をイラレ・フォトショそれぞれで解説したのでぜひ記事をご覧ください!

 

こちらの記事は背景デザインまとめ記事に含まれています!

関連記事

背景のデザインに迷わないためのまとめ記事を作りました。ずばりデザインの背景には基本的には3種類のパターンで構成されます!この3種類のパターンにてそれぞれ自分の引き出しを増やせば迷うことはかなり少なくなると思います。[…]

グラデーションカラーが流行中!デザインにもトレンドを。

グラデーションカラーが流行中!デザインにもトレンドを

こちらが今回のデザインサンプルです。

青系と紫系のトレンドなグラデーションを使っています。

服やスイーツにトレンドってあると思います。デザインにも同じようにトレンドがあります。

今回はグラデーションに着目してみました!

グラデーションカラーが流行中!デザイン解説

少し前までグラデーションはダサいものとして認識されていましたが近年はトレンドとしてWEBデザインにもロゴにも使用されています。

このデザインもトレンドでよく見るグラデーションであるピンク→紫、水色→青のグラデーションを使ってみました。

こちらの記事では今回のデザインにも使われている流体デザインのトレンドを解説しています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

このように

過去にはダサいとされていたものが一周回ってトレンドになる

というのはそれこそファッションと同じでデザインでもよくあることです。

 

デザケン
トレンドであろうとどのように使うかは大事ですけどね!

 

このグラデーショントレンドの興隆はインスタグラムが一役買っています。

インスタもかつてはグラデのアイコンではなかったのですがアイコンのリデザインとともに色もグラデーションとなりました!

デザイナーとしてはこういった近年の流行トレンドを抑えつつ、根本的なデザインの理論を持ってして制作できることが求められます!

根本的なデザインの理論をすっ飛ばしてトレンドだけ抑えようとするとダサいデザインができてしまいます;;

 

ちなみに今回のデザインサンプルで使われているボタンが角丸ですが、これも流行のデザインポイントを使用しています!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

WEBデザイン、バナー、ポスターなどで

流行のグラデーションを使ってみよう!

これはめちゃくちゃ大事です!

 

デザケン
次の章からはグラデーションの適用方法をイラレ・フォトショともに解説していきます。

 

グラデーションを使った他のデザイン例


デザイン提供:LIG

こちらのバナーデザインでは下の長方形がグラデーションになっています。

オレンジから赤色のこのような類似色のグラデーションもよく見ますね!

イラレ&フォトショップでグラデーションカラーを作る方法を解説!

流行グラデーションの作り方

上のデザインサンプルでもグラデーションを使用しました。

このようなグラデーションの操作方法をイラレ・フォトショともに解説していきます。

ちなみに日本語を囲っている文字ギリギリの枠はこちらの記事で解説しています。

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

 

デザ研
イラレとフォトショそれぞれで解説!

 

フォトショップでのグラデーションカラーの作り方を解説

フォトショップでのグラデーションカラーの作り方を解説

こちらはフォトショップです。フォトショップで図形を作ったあと属性パネルを使います。

  1. 図形を選択、属性パネルのグラデーションをクリック(青い丸)
  2. 赤い丸で囲った部分をダブルクリックすることでカラーピッカーが表示
  3. カラーピッカーでカラーコードを入力すればオリジナルグラデーションの完成

このように簡単にグラデーションは作れるのですが、注意点が。

グラデーションを作るカラーコードを自分でなんとなくやってはいけない。

 

初心者のなんとなく選んだカラーは、やっぱり初心者ぽくなってしまう。。。

ですのでカラーコードは自分で決めずにWEBツールからコピーしてきましょう!

おすすめのサイトはこちら。このようなサイトからカラーコードをコピーです!

Free collection of 180 background gradients that you can use…

 

そうすることでプロが作ったようなグラデーションを作ることが可能です!

 

イラストレーターでのグラデーションカラーを作る方法を解説

イラストレーターでのグラデーションカラーを作る方法を解説

こちらはイラストレーターです!イラレはグラデーションツールを使います。

  1. 図形を選択して、ツールバーにあるグラデーションツールを選択(青い丸)
  2. グラデーションパネルにて赤い丸で囲った部分をダブルクリック
  3. RGBが表示されない場合は右上の三本線をクリックすればRGBカラーを選択できます!
  4. 緑の丸で囲った部分にカラーコードをペースト

これで完成です!

ちなみにここでもカラーコードはPhotoshopで紹介したWEBツールからコードをコピーしときましょう!

イラストレーターはこのように直感的にグラデーションを作ることが可能です。

GIFにするに当たって画像が荒くなっていますが…

 

フォトショ、イラレ関係なく、、、

グラデーションを作るときはWEBツールからカラーコードをコピーしよう!

どの色を使うかは理由があるとベストですね。

イラレのグラデーションツールのショートカットキーは?▼
Gになります!フォトショにもグラデーションツールがありますが、個人的にフォトショはv属性パネルやレイヤースタイルからグラデをかけることが多いです。

イラレ&フォトショップで流行のグラデーションカラーを作る方法まとめ

いかがでしたでしょうか?

トレンドである図形にグラデーションをかける方法をイラレ・フォトショで解説しました!

デザインの原則を押さえつつ、流行デザインを捉えると表現の幅は広がります。簡単な方法でできることが多くありますのでぜひ他のトレンドも見てみてください。

こちらの記事で紹介しているポイントもよく見る手法ですのでぜひ合わせてご覧ください!

関連記事

こんにちは、読むだけでデザインを学べる!デザイン研究所です!毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインスタ投稿をより深く解説した記事になります! […]

・流行のグラデーションを使ってみる
・グラデを作るときはWEBツールからコードをコピーする

 

 

この投稿をInstagramで見る

 

デザイン研究所(デザ研)1日1投稿(@designkenkyujo)がシェアした投稿

全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。

>インスタでデザインを学ぶ

インスタでデザインを学ぶ

デザインの見る目を養うインスタアカウントを運営中!初心者から脱するデザインのポイントを解説しています。だいたい毎日更新です!

CTR IMG