「illustratorで文字の外側に光彩がある画像リンクを作る」の編集履歴(バックアップ)一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
以下のような画像を作っていきたいと思います。
リンクにカーソルを合わせた時に文字の外側が多少光ってみせるような画像です。
#image(ホーム光彩.png)
#contents
*ドキュメント設定
「名前」とサイズの「幅」と「高さ」をそれぞれ設定し、最後にカラーモードを「RGB」に設定します。~
#image(width=400,001.png)
*見やすくするために、塗りを適当に設定する。
今回、黒い背景に白い文字で作りたいと思うので、塗りを黒にする。
#image(width=400,002.png)
*長方形を選択し、描く
「長方形ツール」から長方形を選択し、キャンバスに描く。
#image(width=400,003.png)
*レイヤーを新規に追加
レイヤーの追加ボタンを押して、新規にレイヤーを作る。
#image(width=400,004.png)
作ったあとが以下
#image(width=400,005.png)
*白い文字を描く
「文字ツール」を選択し、文字の色を選び、文字を書いていく。
#image(width=400,006.png)
書いた文字が以下。
#image(width=400,007.png)
*フォントやサイズを変更する。
フォントやサイズをそれぞれ変更していきます。
#image(width=400,008.png)
*一つ目完成
表示させるための画像が作られました。
#image(width=400,009.png)
&color(red){ここで一度web用に書き出しましょう。}
#image(width=400,010.png)
*次に光彩の文字を作る。
設定をします。
&color(red){英文字とカタカナ両方一緒に行ったほうが効率がよいので、どちらか一つをマウスで選択したあと、shiftキーを押しながらもうひとつを選択すると、一度に二つ選択ができます。}
「効果」→「スタライズ」→「光彩(外側)」を選択します。
#image(width=400,011.png)
適当に設定をし、OKを押します。
#image(width=400,012.png)
*再び「効果」→「スタライズ」→「光彩(外側)」を選択
以下のようなダイアログボックスがでてきます。
#image(width=400,013.png)
「新規効果を適用」を押します。
*プレビューにチェックをし、OKボタンを押します。
気に食わなければ、2つほど前に再び光彩の設定をしてください。
#image(width=400,014.png)
*完成
完成です。
#image(width=400,015.png)
web用に書き出して保存しましょう。~
~
出来上がり。
#image(ホーム光彩.png)
以下のような画像を作っていきたいと思います。
リンクにカーソルを合わせた時に文字の外側が多少光ってみせるような画像です。
#image(ホーム光彩.png)
~
目次
#contents
~
~
*ドキュメント設定
「名前」とサイズの「幅」と「高さ」をそれぞれ設定し、最後にカラーモードを「RGB」に設定します。~
#image(width=400,001.png)
*見やすくするために、塗りを適当に設定する。
今回、黒い背景に白い文字で作りたいと思うので、塗りを黒にする。
#image(width=400,002.png)
*長方形を選択し、描く
「長方形ツール」から長方形を選択し、キャンバスに描く。
#image(width=400,003.png)
*レイヤーを新規に追加
レイヤーの追加ボタンを押して、新規にレイヤーを作る。
#image(width=400,004.png)
作ったあとが以下
#image(width=400,005.png)
*白い文字を描く
「文字ツール」を選択し、文字の色を選び、文字を書いていく。
#image(width=400,006.png)
書いた文字が以下。
#image(width=400,007.png)
*フォントやサイズを変更する。
フォントやサイズをそれぞれ変更していきます。
#image(width=400,008.png)
*一つ目完成
表示させるための画像が作られました。
#image(width=400,009.png)
&color(red){ここで一度web用に書き出しましょう。}
#image(width=400,010.png)
*次に光彩の文字を作る。
設定をします。
&color(red){英文字とカタカナ両方一緒に行ったほうが効率がよいので、どちらか一つをマウスで選択したあと、shiftキーを押しながらもうひとつを選択すると、一度に二つ選択ができます。}
「効果」→「スタライズ」→「光彩(外側)」を選択します。
#image(width=400,011.png)
適当に設定をし、OKを押します。
#image(width=400,012.png)
*再び「効果」→「スタライズ」→「光彩(外側)」を選択
以下のようなダイアログボックスがでてきます。
#image(width=400,013.png)
「新規効果を適用」を押します。
*プレビューにチェックをし、OKボタンを押します。
気に食わなければ、2つほど前に再び光彩の設定をしてください。
#image(width=400,014.png)
*完成
完成です。
#image(width=400,015.png)
web用に書き出して保存しましょう。~
~
出来上がり。
#image(ホーム光彩.png)
&color(red){もし、透明な背景で書き出したいのであれば、レイヤーパレットで黒いレイヤー側の表示を非表示にして(目の部分をクリックし、目を表示させなくして)書き出してください。}