グラデーションの基礎+絶対知りたい8つの知識も紹介イラレ(イラストレーター・illustrator)でロゴなどを作っていて、グラデーションを取り入れたいということがあると思います。様々なグラデーションを使いこなして、おっ!と思われるようなグラデーションをイラレで作れるようになりませんか?今回は、イラレのグラデーション基礎から、写真などに適応する際のマスクグラデーションなど、便利な知識を8個紹介します。イラレで徐々に透明になるグラデーションの作り方イラレでのグラデーションの作り方はじめに、ベーシックな白から黒へのグラデーションを正方形の塗りに適応させてみましょう。イラレで正方形をつくりましょう。長方形ツールを選択します。Shiftキーを押しながら正方形を作ります。次に、グラデーションウィンドウを出しましょう。グラデーションツールを選択するかウィンドウ>グラデーションを選択しましょう。以下のようなウィンドウが出てきます。赤い丸で囲われた部分(グラデーション)をクリックします。適応されない場合は、オブジェクトが選択されていない可能性が高いので、そこを確認し、オブジェクトを選択した後に、グラデーションのボタンをクリックし、適応します。イラレでグラデーション適応後に色を変更する方法しかし、このような白から黒になるグラデーションだけでなく、いろんな色が入ったグラデーションを作ってみたい!角度を変えたい!などあると思います。ここでは、グラデーションパネルでできる様々なグラデーションについて説明します。グラデーション:色の変え方まず、色の変え方について説明します。今回は赤から黄色に変化する正方形にしましょう。左側の白を赤に変えます、グラデーションスライダーの四角(赤で囲んであるところ)をクリックします。以下のようにスウォッチ(もともと登録してあるカラーパネル)が出てきます。今回は赤を選択します。同様に右側の黒も黄色を選択すると、このように、赤から黄色のグラデーションが出来上がります。グラデーションの濃さを変えるには次に、この正方形の赤から黄色のグラデーションを、もっと赤を強くしたい!という場合の変更方法を紹介します。グラデーションスライダーの上にあるひし形の部分(赤い丸で囲われている部分)を右側にもっていきます。見てみると、位置とかいてある部分が50%から変更されています。ここに直接数字を打ち込むか、▼をクリックして80%などに変更することもできます。赤から黄色へのグラデーションを反転させたい場合は、反転グラデーションをクリックします。クリック一発で反転したものがつくれます。グラデーション:角度の変え方このグラデーションの角度を変えることもできます。グラデーションウィンドウの角度をクリックします。以下のように角度がでてきます。今回は60°を選択してみます。以上のようにできました。この技は、例えば、イラストで太陽が斜め上にあり、太陽光のグラデーションを再現したい際などに役に立ちますよ。次に、円などで丸くグラデーションをかける方法を紹介します。円に上記の正方形と同じようにグラデーションを適応します。次に、グラデーションパネルの線形をクリックします。線形にチェックが入っているところを円形にチェックします。最後に、いままで2色のグラデーションを使いましたが、レインボーでグラデーションにしたいという方向けのグラデーションの方法を紹介します。長方形にグラデーションを適応させます。次に、どのような色の順番で、グラデーションをかけるか考えます。ピンク、赤でグラデーションを適応させたいと思います。以下が目指すグラデーションです。グラデーションパネルのグラデーションスライダーをクリックします。(白い矢印の部分)するとこのように、新しく、四角ができます。今回は、全部で7色使うので、7個の四角を出します。色を変更と同じように四角をダブルクリックして、色を変更していきます。すべての色をつけると以下のようになりました。この四角自体も動かせるので、うまく調整するときれいなグラデーションになります。綺麗なグラデーションにしたい人は、位置に数字を打ち込むとその通りに整列します。今回の場合7色なので真ん中にくる水色は50%のところなど位置付けたいなど、色の数で位置を分割すると良いです。感覚的なところもあるので、上のひし形と合わせてうまく調節しましょう。次に、文字にグラデーションを適応する方法をお教えします。文字にグラデーションを適応しようとすると、なぜかできない!という状態に成ると思います。これは、文字はイラレ上ではオブジェクトではないからです。この文字をオブジェクトにし、グラデーションを適応させます。文字をオブジェクトにしてしますと、文字自体の変更(スペルやフォント変更など)ができなくなるので、文字をオブジェクト化する前に別名保存しておくことをお勧めします。文字をオブジェクトにします。すると、一文字一文字が分かれます。以上を選択し、正方形のときと同様にグラデーションを選択するとこのように簡単に文字をグラデーションにすることができます。イラレで徐々に透明になるグラデーションの作り方よく、写真が途中から透明になっているポスターなどがあると思います。グラデーションを使いこなせば、この透明になるグラデーションも簡単にできますよ。写真の上に同じ大きさの長方形オブジェクトを置きます。以上の長方形オブジェクトに、白から黒のグラデーションを適応させます。選択し、透明ウィンドウを出します。写真と、グラデーションをかけたオブジェクトの両方を選択し、マスクを作成を選択します。すると、長方形オブジェクトの白い部分が残り、黒い部分は透明になる写真ができます。このグラデーションの調整は、透明パネルのグラデーションの部分(下の図で赤丸で囲われた部分)をクリックします。グラデーションパネルの白と黒の比率を変更すると変更が適応されます。このグラデーションを調節すれば、下の写真のように一部分のみを透明にすることも可能です。上記の円形グラデーションを応用し、円に円形グラデーションをかけたものをマスクすれば、以下のようなものも簡単にできます。いかがでしたか?今回はイラレでの基本のグラデーションを用いて様々なグラデーションの応用をお教えしました。イラレでのグラデーションが理解できましたか?一見、簡単なグラデーションもやってみると奥が深く、また合わせ技で様々なことができるのが分かると思います。XDの基本操作からケーススタディでの実践演習までを学習。ノンデザイナーでも「早く」「簡単に」「楽しく」プロトタイプを作成できるようになります。Webサイト制作の一連の流れを理解!未経験からプロのwebデザイナーになる!400レッスン以上の完全マスターコースWeb知識、Phothoshop、Webグラフイックデザイン、HTML、CSS、実践的なコーディングなど一通り学習ができます。WEBデザイナーへの第一歩WebデザインのためのPhotoshop実践講座Photoshopでできることの幅を広げたい人&本格的なWEBデザインのスキルを磨きたい人におすすめの充実講座。利用規約お問い合わせ。