Illustrator

Illustrator|ポカポカ温かい文字の作り方

ここでは、Illustratorを使ってこんな感じの温かい文字を作る方法について見ていきます。

コンテンツ

Illustrator|ポカポカ温かい文字の作り方

この文字を作るためには、Illustratorを使って下記の2つのことができるようになれば大丈夫です。

  • グラデーションを使う方法
  • 文字に縁取りを入れる方法

グラデーションの設定

今回は、Adobeのクラウドで使える「平成丸ゴシック Std W8」というフォントを使っています。このフォントを使いたい方は、こちらでフォントを有効化してください。

まず、グラデーションパネルを開いて、グラデーションの設定をします。グラデーションの左を赤、右を黄にします。グラデーションの設定ができたら、これをすぐに反映できるようにスウォッチパネルの色のところにドラッグ&ドロップしてします。

文字の塗りにグラデーションをかける

次に、「ポカポカ」の文字を選択した状態で、アピアランスパネルを開いて右上の「三」をクリック→「新規塗りを追加」で塗りを追加します。そうすると、アピアランスパネルの中に黒い塗りが追加されるので、この色を先ほど設定したグラデーションに変えます。

そのままだと、左右のグラデーションになってしまっているので、グラデーションパネルの角度を「90度」に設定して縦のグラデーションに変えます。

※あとで気がついたのですが、グラデーションを縦に変えてからスウォッチに追加した方が効率良かったです。すみません。

白の縁を入れる

次に、白の縁取りをいれます。アピアランスパネルで今度は「新規線を追加」をクリックして、黒い線を追加します。この黒い線を白に変更した後、グラデーションになっている塗りの下に移動させます。線の太さは適当に調整してみてください。

グラデーションの縁を入れる

最後に白い縁取りのさらに外側にグラデーションの縁取りを追加します。先ほどと同じやり方で新規線を追加して、今度は黒い線をグラデーションに変えたあと、白い線のさらに下に移動させます。このグラデーションも横のグラデーションになっているのでグラデーションパネル内で角度を変えて縦にします。線の太さを白線の2倍の太さに設定するとバランスが良いと思います。

以上がポカポカ温かい文字の作り方でした。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  4. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP