font-icon_html/css_WEB-ITnose を作ってみた感想

ここ数日、少し時間ができたので、今後の仕事で使えるようにフォントアイコンを自分で作ってみました。ただし、私のレベルが限られているため、PS の操作は非常に基本的なものとしか言えず、AI は操作を拡張することしかできません。このプロセスでは、デザイン仲間の協力に本当に感謝しています。

ここで、以下に示すように、次のアイコンの Font-Icon への変換を完了したいと思います。

最初のアイコンは、ico_tv という名前の小さなテレビです。デザイナーから与えられたデザイン案では、すでにパスになっていますが、よく見ると、この ico_tv には 3 つのパスがありますが、インターネット上の Web サイト上のいくつかの svg です。 Font-Icon (fontello など、ただし icoMoon も可能です。icoMoon の後にマージ パスを使用する場合は無視できます) に変換すると、変換時に必要なパスは 1 つだけです。そのため、それらのパスを PS All にまとめる必要があります。

Ico_tv の 3 つのパス

PS では、すべてのパスを結合するには、パスを選択して上の「パス操作ボタン」をクリックする必要があります。そこには、結合、減算、交差の 4 つのオプションがあります。重複を削除する場合、これら 4 つの効果はセットの操作に相当します。保持したいのは、フォントに変換された後の色の部分でもあります。ここでの 4 つのパスはそれぞれ、外枠です。 ico_tv の、右側の 3 つの小さな四角形と同様に、ここでの操作では、「重複の削除」を選択する必要があります。完了すると、ボタンをクリックするとすべてのパスが選択されます。

Ico_tv パス合成後

AI を開き、350mm の新しいパネルを作成します。fontello を塗りつぶす必要はありませんが、より直感的になるため、塗りつぶしの色を使用することをお勧めします)。次に、それを SVG 形式で保存します。

IcoMoon Web ページ (私はこの Web サイトをよく利用します) を開き、描画したばかりの ico_tv をアップロードして簡単な編集を行うことができます。

アイコンのアップロードボタン

最後にフォントコードをエクスポートし、アイコンに対応するUnicodeエンコーディングを入力すると、対応するシンボルがアイコンの隣に表示されます。 「ダウンロード」をクリックしてコードをダウンロードします。最終的な表示を図に示します。

ただし、指定されたデザイン案のアイコンが単なるレイヤーの場合は、パスに変換する必要があります。一般的には、長方形ツール列を使用して図形をパスに変換し、ペンツール、パス選択ツールなどを使用してレイヤーのアイコンをコピーします。