イラストレーターでメールアドレスを画像に

メールアドレスの画像化サイトで作成したメールアドレスがかなり画像が小さくて、文字が見難いので、イラストレーターで作成しました。メールアドレスを画像化するのは難しいと感じる人が多いので、無料画像化サイトが使われています。

実際には、イラストレーターでメールアドレスを画像化するのはかなり簡単です。しかし、イラストレーターでの作成を紹介しているサイトを見ると、難しい技術を紹介していることが多いので、難しそうと敬遠してしまうことにもなっています。

イラストレーターを起動して、新規作成の新規ドキュメントでWebの共通項目の作成でいいと思います。WindowsでCtrl+0でアートボードを画面に合わせることができます。

文字の例えばfなら、ペンツールのベジェ曲線で書かないといけないことはなく、文字ツールでテキストの入力をすればいいだけです。

文字ツールの画像

文字ツールをクリックして、アートボードをクリックするとテキスト入力できるようになるので、そこにメールアドレスをコピーして貼り付けることができます。

メールアドレスを貼り付けてから、一番左上の選択ツールをクリックすると文字入力した文字が文字オブジェクトになって、編集できるようになるので便利に使えます。

文字オブジェクトの画像

メニューの「ウィンドウ→書式→文字」にすると、文字のフォントを変更できます。WindowsでCtrl+Tを押すと、文字パネルが表示できます。

書式文字の画像

この文字パネルでcreative cloudの会員はTypekitのフォントが使えるので、パソコンにはないかなり多くのフォントを同期して使えます。

フォント追加の画像

そして、文字入力が終わった文字を選択ツールで選択した状態で、メニューの「ファイル→選択範囲を書き出し」にすると、アセットを書き出しで、文字の範囲だけを画像化することができます。

文字の画像はサイズが大きくても、CSSで調整できます。小さすぎる画像だと読みにくくなって、サイズが大きくても画像のKBは大したことないので、大きいサイズにして作ったほうがいいと思います。

その画像化した文字をメールアドレスのページに貼り付けますが、そのまま貼り付けるとパソコンでは大きい場合には、CSSでclass指定をして、適宜調整します。スマホではmax-width: 100%;にして、メディアクエリで分けておけばいいです。