こんにちは、読むだけでデザインを学べる！デザイン研究所です！
フォローするだけでデザインを学べるTwitterアカウントと
毎日デザインのポイントを解説するインスタアカウントを運営しております。
こちらのブログはインスタ投稿をより深く解説した記事になります！
グラデーションを正しく使えていますか？デザイン初心者が作るグラデーションはやっぱり初心者ぽくなりがち。ではどのように作ればプロのようなグラデーションが作れるのか？
流行しているグラデーションの作り方をイラレ・フォトショそれぞれで解説したのでぜひ記事をご覧ください！
こちらの記事は背景デザインまとめ記事に含まれています！
背景のデザインに迷わないためのまとめ記事を作りました。ずばりデザインの背景には基本的には3種類のパターンで構成されます！この3種類のパターンにてそれぞれ自分の引き出しを増やせば迷うことはかなり少なくなると思います。[…]
グラデーションカラーが流行中！デザインにもトレンドを。
こちらが今回のデザインサンプルです。
青系と紫系のトレンドなグラデーションを使っています。
服やスイーツにトレンドってあると思います。デザインにも同じようにトレンドがあります。
今回はグラデーションに着目してみました！
少し前までグラデーションはダサいものとして認識されていましたが近年はトレンドとしてWEBデザインにもロゴにも使用されています。
このデザインもトレンドでよく見るグラデーションであるピンク→紫、水色→青のグラデーションを使ってみました。
こちらの記事では今回のデザインにも使われている流体デザインのトレンドを解説しています。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
このように
過去にはダサいとされていたものが一周回ってトレンドになる
というのはそれこそファッションと同じでデザインでもよくあることです。
このグラデーショントレンドの興隆はインスタグラムが一役買っています。
インスタもかつてはグラデのアイコンではなかったのですがアイコンのリデザインとともに色もグラデーションとなりました！
デザイナーとしてはこういった近年の流行トレンドを抑えつつ、根本的なデザインの理論を持ってして制作できることが求められます！
ちなみに今回のデザインサンプルで使われているボタンが角丸ですが、これも流行のデザインポイントを使用しています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！フォローするだけでデザインを学べるTwitterアカウントと毎日デザインのポイントを解説するインスタアカウントを運営しております。こちらのブログはインス[…]
WEBデザイン、バナー、ポスターなどで
流行のグラデーションを使ってみよう！
これはめちゃくちゃ大事です！
グラデーションを使った他のデザイン例
デザイン提供：LIG
こちらのバナーデザインでは下の長方形がグラデーションになっています。
オレンジから赤色のこのような類似色のグラデーションもよく見ますね！
イラレ&フォトショップでグラデーションカラーを作る方法を解説！
上のデザインサンプルでもグラデーションを使用しました。
このようなグラデーションの操作方法をイラレ・フォトショともに解説していきます。
ちなみに日本語を囲っている文字ギリギリの枠はこちらの記事で解説しています。
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化メディアでは国内最大級のTwitterとインスタグラムを運営しています。今日のテーマ：文字ギリギリの枠で視覚性を高める枠があることで複雑な背景や[…]
フォトショップでのグラデーションカラーの作り方を解説
こちらはフォトショップです。フォトショップで図形を作ったあと属性パネルを使います。
- 図形を選択、属性パネルのグラデーションをクリック(青い丸)
- 赤い丸で囲った部分をダブルクリックすることでカラーピッカーが表示
- カラーピッカーでカラーコードを入力すればオリジナルグラデーションの完成
このように簡単にグラデーションは作れるのですが、注意点が。
初心者のなんとなく選んだカラーは、やっぱり初心者ぽくなってしまう。。。
ですのでカラーコードは自分で決めずにWEBツールからコピーしてきましょう！
おすすめのサイトはこちら。このようなサイトからカラーコードをコピーです！
Free collection of 180 background gradients that you can use…
そうすることでプロが作ったようなグラデーションを作ることが可能です！
イラストレーターでのグラデーションカラーを作る方法を解説
こちらはイラストレーターです！イラレはグラデーションツールを使います。
- 図形を選択して、ツールバーにあるグラデーションツールを選択(青い丸)
- グラデーションパネルにて赤い丸で囲った部分をダブルクリック
- RGBが表示されない場合は右上の三本線をクリックすればRGBカラーを選択できます！
- 緑の丸で囲った部分にカラーコードをペースト
これで完成です！
ちなみにここでもカラーコードはPhotoshopで紹介したWEBツールからコードをコピーしときましょう！
イラストレーターはこのように直感的にグラデーションを作ることが可能です。
GIFにするに当たって画像が荒くなっていますが…
フォトショ、イラレ関係なく、、、
グラデーションを作るときはWEBツールからカラーコードをコピーしよう！
どの色を使うかは理由があるとベストですね。
Gになります！フォトショにもグラデーションツールがありますが、個人的にフォトショはv属性パネルやレイヤースタイルからグラデをかけることが多いです。
もっとグラデーションのポイントを使ったデザインが見たい方！
この記事で解説したグラデーションのデザインをもっと見たい方は、、、
デザイン研究所が運営する学べるギャラリーサイト「managary」へどうぞ！
イラレ&フォトショップで流行のグラデーションカラーを作る方法まとめ
いかがでしたでしょうか？
トレンドである図形にグラデーションをかける方法をイラレ・フォトショで解説しました！
デザインの原則を押さえつつ、流行デザインを捉えると表現の幅は広がります。簡単な方法でできることが多くありますのでぜひ他のトレンドも見てみてください。
ちなみに多くの色についてのデザイン参考書も読んだことがありますが、
今回の記事のようなデザインの色について書籍で学びたいのなら「配色デザイン良質見本帳」がおすすめです！(なぜならこの本は実例＋解説付きだからです)
他の配色デザインの本はただカラーのパターンが載ってるだけのものが多く、実例のデザインや解説がないのです！
配色デザインのまとめ記事を作りました。こちらの記事も含まれています。ぜひご覧ください！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。デザインを作る上で色について迷うこと多いですよね。。。今回の記[…]
こちらの記事ではバナーデザインのまとめ記事にも含まれています！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 バナーデザインは作りやすく初心者にもおすすめできる[…]
こちらの記事はWEBデザインまとめ記事にも含まれています！WEBで使える32種類のテクニックをまとめました！
こんにちは、読むだけでデザインを学べる！デザイン研究所です！デザイン特化のメディアでは国内最大級のTwitterとインスタグラムを運営しています。 WEBデザインには色々なテクニックが散りばめられて[…]
・グラデを作るときはWEBツールからコードをコピーする
この投稿をInstagramで見る
全国対応で短期で習得するグラフィックのデザインレッスンをやっております、詳しくはこちらをどうぞ。