文字のアウトライン化の方法

こんにちは。

さて、また1週間が始まりましたね!

 

私事ですが、この土日は私用で実家に帰っていたのでリフレッシュ出来ました^^

実家は田舎にあるので時間の流れがゆっくりだな〜と大阪にいる今感じます。

それは実家に住んでいる時は感じることがなかったので、なんだか新鮮な気持ちになりました。

それが田舎の良さなんだと今なら少しわかります。

都会、田舎それぞれの良さがありますよね^^

 

なんだか冒頭から語ってしまいましたが、本題に入りますね!笑

 

文字のアウトライン化

文字のアウトライン化とは

文字のアウトライン化とは、文字情報を図形化することです。

文字等をSVG形式で保存する際には先にこの操作をしておかないとサイト上で崩れる原因になります。

フォントにはたくさんの種類があり、ユーザーがそのフォントを持っているかどうかで見え方が変わってしまうのは避けたいですよね(><)

 

実際にどんな状態かみてみると、

普通に文字を入力するとこのような状態ですよね。

 

 

それをアウトライン化すると下のように図形になります!

一度アウトライン化すると文字の編集は出来なくなります。

 

実務で実際にアウトライン化をし忘れてスライスをし直したことがあります・・・(^^;

 

では、方法をみていきましょう!

 

操作方法

Photoshopのやり方をご紹介します。

 

文字を選択した上で、「書式」→「シェイプに変換」を押します。

それで終わりです!

簡単ですよね^^

 

実務ではこの後レイヤー名を、付けたいファイル名に変えてアセット書き出しをします!

※アセット書き出しの方法は以前記事にしています

 

ex)  kv_txt_futappa.svg

 

 

XDの場合はショートカットを使ってしています。 「command+8

 

 

まとめ

いかがでしたでしょうか??

SVG形式で保存する場合は色々気をつけないといけない項目があります。

これはそのうちの1つで文字をSVG形式で書き出す際には欠かせない作業です。

今後覚えておくと役に立つと思います♪

では今日はここまで〜〜

 

 

コメント

タイトルとURLをコピーしました