最終更新日 2023/11/29

Adobe イラストレーターでよく使うテクニック(Webデザイン)

Web素材やネットショップの商品紹介など、イラストレーターでWebデザインをする際によく使うテクニックを紹介。(基本的な使い方)
目次
  • Webデザインで活躍するAdobe イラストレーター
  • 挿入画像の切り抜き(クリッピングマスク)
  • 挿入画像のベクタ化(ラスタデータをベクタデータに変換)
  • 挿入画像を徐々に透明に(グラデーション透過)
  • 挿入画像に影を付ける(反射)
  • 文字(テキスト情報)を図形オブジェクト(ベクタデータ)に変換
  • 文字を縁取りする
  • 文字やオブジェクトに影を付ける
  • 文字を円弧・アーチ状に並べる
  • 文字などに、金属風のグラデーションを付ける方法
  • ワンクリックで色塗りできるライブペイント
  • オブジェクトの配色を変える(いわゆる色彩変更)

Webデザインで活躍するAdobe イラストレーター

私がAdobe イラストレーターを使う場面は、Webデザインやチラシ・名刺制作(DTP)です。Webデザインでの用途は、商品紹介のための販促ページ(LP)作成など、売りたい商品を分かりやすく伝えるためのデザインツールに使用しています。ネットショップの商品紹介や、Webサイト内に設置する商品リンク広告画像など、様々な場面で利用しています。

イラストレーターは、慣れるまでが使いづらい・慣れても触っていないとやっぱり使いづらいツールです。(個人の感想

自分の備忘録的意味や、イラレ初心者向けに「こんな機能があるよ」といった機能紹介にどうぞ。

挿入画像の切り抜き(クリッピングマスク)

イラストレーター 挿入画像の切り抜き(クリッピングマスク)

イラストレーターに挿入した画像を切り抜く方法。色々な形のオブジェクトと重ねて切り抜くことができます。

挿入画像のベクタ化(ラスタデータをベクタデータに変換)

イラストレーター ラスタデータをベクタデータに変換

jpgなどのピクセル画像(ラスタデータ)を、ベクタデータに変換する方法。

挿入画像を徐々に透明に(グラデーション透過)

イラストレーター 挿入画像を徐々に透明に(グラデーション透過)

イラストレーターに挿入した画像に、透明処理を掛ける方法。

挿入画像に影を付ける(反射)

イラストレーター 挿入画像に影を付ける(反射)

挿入画像に影を付けるテクニック。

文字(テキスト情報)を図形オブジェクト(ベクタデータ)に変換

イラストレーター 文字(テキスト情報)を図形オブジェクト(ベクタデータ)に変換

文字を図形オブジェクトに変換する方法(文字のアウトライン)。文字のアウトライン化でできること。

文字を縁取りする

イラストレーター 文字を縁取りする

文字を縁取りする方法。

文字やオブジェクトに影を付ける

イラストレーター 文字やオブジェクトに影を付ける

文字やオブジェクトに影を付ける方法。影の荒さ(解像度)の指定。

文字を円弧・アーチ状に並べる

イラストレーター 文字を円弧・アーチ状に並べる

文字を円弧・アーチ状に並べる方法いろいろ。

文字などに、金属風のグラデーションを付ける方法

イラストレーター 金属風のグラデーションを付ける方法

文字を金属風(メタリック)に仕上げる方法。オブジェクトに金属グラデーションを掛ける方法。

ワンクリックで色塗りできるライブペイント

イラストレーター ライブペイント

線だけで構成されたイラストは、中に実体がないので塗れない。ライブペイント機能を使うと塗り絵のように中を塗れる。

オブジェクトの配色を変える(いわゆる色彩変更)

イラストレーター オブジェクトの再配色

フォトショップでいう色調補正(色の置き換え)に当たる機能。オブジェクトの配色をガラリと変化させたい場合に有効。

Adobe製品の基礎知識
イラストレーターの使い方
サムネ画像
Adobe イラストレーターでよく使うテクニック(Webデザイン)