【初心者向け・バナー編04】illustratorの使い方 – WEB用ボタン作成2 – レベル2

【初心者向け・バナー編04】WEB用ボタン作成2 – レベル2

シュムデザインの新里です。

今回の動画の主な流れは、下記のようになっています。

テキストツールで白い箇所をクリックして、テキストを入力 ※長方形内でクリックしてしまうと、長方形内テキストになってしまうため
選択ツールの状態で、shiftをクリックしながら文字を大きくする ※shiftを押さないと、テキストの縦横比が変わってしまうため
文字パネルでフォントの種類や文字間の調整等を行う ※alt+やじるしでトラッキングができます。トラッキングとは文章全体の文字間を調整することです

文字の塗りをなしにする ※元々のテキスト情報をなくすことで、塗りデータの重複を防げます
アピアランスで新規塗りを追加して、塗りを上に移動させる ※塗りが下の状態だと、線を設定した時に塗り色が潰れて見えてしまいます
線に色をつける ※色は背景の長方形の色と、統一性を持たせるようにしましょう
線パネルを開いて、ラウンド結合に設定 ※ラウンド結合にすることで線のデコボコを滑らかにできます

線の太さを調整
全てを選択してctrl+Gでグループ化 ※グループ化することで、長方形とテキストがバラバラに動いてしまうことを防げます
アセットの書き出しパネルにドラッグし、名前を変更する ※アセットの書き出しパネルはメニューバーの「ウインドウ」から素早く出すことができます
任意のファイル形式を選択して書き出す ※WEB用ボタンの場合は「png」がオススメです。「jpg」だと、透明になる部分が白く表示されてしまいます

今回の動画で大切なポイントは、テキストの入力と、書き出し方法を覚えることです

テキストの入力では、「テキストパネル」で文字間の調整を徹底することが、まず大切です。続けて、テキストの塗りを「なし」にして、「アピアランスパネル」で塗り・線の情報を設定するのも最初は難しく感じると思います。

「書き出す」とは、ホームページで実際に使える状態のデータ形式にすることを言います。この手順も最初は覚えるのが難しいと思いますので、何度も練習してマニュアル化した方が早いと思います。

つまり、どちらも「慣れ」が大切ということになります(>_<)

是非、何度も何度も練習して、illustratorの「クセ」になれるようにしましょう!

今回は以上です。

ベネッセUdemyでも学習できます

Udemyとは、プログラミングやデザインなど幅広いジャンルの専門知識を超お手頃な値段で学習することができる教育動画プラットフォームです。

私自身も、Udemyにてコースを公開しており、複数のコースで「最高評価」を頂いています!

もし、今回の内容を含む全ての動画をご覧になりたい方はUdemy公開コースの記事よりご参照ください。

【前の動画へ】