こんにちは、中道です。 デザインを作成するときに、使用したいロゴ画像やイラストのサイズ小さいので、大きく使おうとすると画質が悪く見栄えが悪くなる、ということがよくあります。
ベクターデータがあれば問題なく大きく使えるのに、、、と、やきもきしながら、やはり見栄えにはこだわりたいので毎回パス化しております。
ラスター画像からベクター画像へ変える方法は色々あるかと思いますが、今回はPhotoshopとIllustratorを使用して、画質が粗いJPEG・PNGを、AI・SVGにする方法をご紹介します。
作業手順としては、フォトショで画像を高画質にする→イラレの［画像トレース］でパスを作成するという手順になります。今回は例としてわざと低画質にしたアウラのロゴを使用して、ご説明します。それでは早速、作業していきましょう！
作業に入る前に、既存のフォントが使用されている場合があるので、フォント検索してみてください。
ロゴがアルファベットの場合は「What The Font」というサイトや「Adobeフォント」で検索ができます。（残念ながら、「What The Font」は海外のサイト、「Adobeフォント」では現在は日本語対応されていないようですので、日本語は検索できません、、、）
上手くヒットするとフォント名がわかるので、使用できるフォントの場合はイラレで［テキスト入力］→［書式］→［アウトラインを作成］でパス化できます。
今回使用するアウラのロゴはフォントを使用していないので、こちらの作業はできません、、、なので下記の作業をしていきます。
今回使用するアウラのロゴです。自分で用意しましたが思ったより画質が荒くて不安になってきました。
今回はロゴ下の「株式会社アウラ」の文字は、似たフォントをテキストで用意しようと思いますので、ロゴのみを切り抜いたものを使用します。
まずは強制的に解像度を上げてピクセル数を増やします。［イメージ］→［画像解像度］で解像度ボックスを表示させます。
幅、高さを「pixel」から「mm」に変更。解像度を200以上にします。
（「pixel」を「mm」に変更しないと、解像度が変更されませんのでご注意ください）
ピクセルのマスの粗さが消えました。
ここからでも、Illustratorの画像トレースを使用できますが、パス化の制度を上げるため、次の作業をしていきます。
ここからは、Illustratorで画像トレースを行なったときに、よりスムーズに繊細にトレースできるように画像を変更していきます。
まずは、レイヤーポックス（［ウインドウ］→［レイヤー］）下の丸いマーク［調整レイヤーを作成］→［白黒…］を選択し、グレースケールにします。
次に、［調整レイヤーを作成］→［2階調化…］を選択し、白と黒のモノクロに変換します。（プロパティボックスでしきい値を調整し、形を整えます）
ロゴのギザギザが気になりますが、後はIllustratorに任せましょう！
（ギザギザが気になる方は、［フィルター］→［ぼかし］→［ぼかし（ガウス）］で少しぼかしてから、再度2階調化すると少しギザギザが軽減されます。）
レイヤーボックスの右上のハンバーガーメニューを選択→［画像を統合］でレイヤーをひとまとめにします。
全てを選択（［選択範囲］→［全てを選択］）し、コピー（［編集］→［コピー］）します。
Illustratorの［画像トレース］という機能を使って画像をパスを作成します。（ロゴのような一色のみ画像は、モノクロにした方が繊細にパスがとれます。）
それでは、Photoshopで作成した画像をペースト（［編集］→［ペースト］）します。［ウインドウ］→［画像トレース］から画像トレースボックスを表示させ、詳細でパスを調整します。
調整が完了したら、［オブジェクト］→［分割・拡張…］を選択し、拡張するとパスが作成されます。
更になめらかな曲線にしたい場合は、［オブジェクト］→［パス］→［単純化］を選択し、アンカーポイントの数を減らすことで曲線をなめらかにできます。
（アンカーポイントの数が少ないほど、ファイルサイズも軽くなるため、アンカーポイントが多すぎる場合は少なくすることをおすすめします）
最後に、テキストを入力→アウトラインを作成し、カラーボックス（［ウインドウ］→［カラー］）に任意の色番号を入力して完成です！
あとは、それぞれに必要なファイル形式に保存、書き出しをしてください。
Illustrator［画像トレース］機能が優秀すぎて、個人的にとてもお世話になっている機能なんですが、この機能だけに頼りすぎず、もっと色々な方法を今後も試行錯誤していこうと思います。
今回はロゴを例にしてご説明しましたが、イラストでも同様のことが可能ですので、ぜひお試しください！
Web制作では様々な要求が求められ、大きく変わり続けるものに日々挑戦していかなければなりません。しかし、小さなことにもこだわりを持って、お客様にご納得いただけるもの、自分でも納得のいく仕事を続けたいと思います。
これからも新たな問題に、様々なツールを駆使して立ち向かっていきます！
