Illustrator＆Icomoonを使用してアイコンフォントを作成します

カスタムアイコンフォントの作成：IllustratorとIcomoonを使用して排他的なアイコンシステムを作成します

コアポイント：

• カスタムアイコンシステムは、排他的なアイコンセットを作成することで、プロジェクトの設計をより適切に調整するのに役立ちます。 IllustratorやIcomoonなどのツールは、このプロセスを簡素化できます。
• アイコンフォントを作成し、最初にIllustratorのアイコンを設計し、SVGファイルとして保存します。描画を開始する前に、ストロークサイズやメッシュスケールなど、グリフのスタイルプロパティを必ず定義してください。
• アイコンがSVGファイルとして設計および保存された後、ICOMOONにアップロードしてアイコンフォントを生成できます。 IComoonアプリを使用すると、SVGファイルをインポートし、それらを編集および編集し、フォントにコンパイルできます。
• icomoonアプリは、必要なブラウザ互換性の修正を含むアイコンフォントCSSファイルを提供します。このファイルには、WebサイトHTMLに含めることができるすべてのシンボルセレクターが含まれているため、Webページ項目にカスタムアイコンフォントを追加します。 @font-face

写真：listenorason

アイコンシステムは通常、Webプロジェクトのコア設計要素です。オンラインで多くの無料または商用アイコンセットがあり、通常はメインのCSSフレームワークに含まれています（Bootstrap 3グリフィコンは素晴らしい例です）。

ただし、一般的なセットには含まれていないより具体的な

glyphが必要になる場合があります。または、プロジェクトの他のデザイン要素とアイコンデザインをより適切に調整したい場合があります。これらの場合、ゼロから新しいアイコンセットを描画する必要があります。

プロジェクトにアイコンセットを追加する2つの一般的な方法：

webフォント

svg
2. この記事では、Webフォントを紹介します。 SVGは別の記事で説明されます。

伝統的に、フォントの作成は困難で厳しいタスクでしたが、ありがたいことに、iComoon、fontastic、fontelloなどのシンプルなオンラインツールの出現により、アイコンフォントセットの作成がはるかに簡単になりました。各ツールを使用すると、公共図書館から事前に構築されたアイコンを「選択」するか、独自のSVGファイルをアップロードしてコンパイルすることにより、フォントを構築できます。

独自のアイコンを作成します

独自のアイコンフォントを構築するには、最初のステップはアイコンを設計することです。このタスクにはIllustratorを使用し、SVG形式で保存します。

デザインスタイルを確認します

描画を開始する前に、ストロークサイズ、グリッドスケールなど、グリフのスタイルプロパティを定義する必要があります。

最初に、さまざまなサイズでいくつかの読みやすさテストを行い、すべてのグリフを描くためのテンプレートを作成します。デザインが低解像度で機能しない美しく詳細なアイコンは役に立たない。

また、描画する前にフォントスケッチを描画することも役立ちます。また、非常に大まかなスケッチ（以下に示す）でさえ、必要なすべてのシンボルのアイデアを見つけるのに役立ちます。

Glyphのメッシュサイズを決定できます。私のアドバイスは、ターゲットサイズ（16x16pxなど）または非常に大きなサイズで直接描画することではありません。代わりに、60〜80pxのグリッドが通常私に適していることがわかりました。通常、このサイズから上下にスケーリングすることは成功します。

もちろん、これは「独立した」ルールではありません。プロジェクトの要件と経験は状況によって異なる場合があります。

この記事では、8pxストロークを使用してアイコンを描画し、入力せず、64x64pxグリッド内に設定することにしました。

描画を開始します

Illustrator Artboardsは非常に便利です：各グリフを異なるアートボードに描画し、各グリフを単一のファイルに保存できます。アートボードは、再配置、名前が変更され、スタンドアロンSVGファイルとしてエクスポートできます（これはまさにIComoonに必要なものです）。

各アートボードには、独立した軸座標を持つこともできます。これは、オブジェクトのアライメントに非常に価値があり、後で表示されます。

ここで、新しい64x64pxのイラストレータードキュメントの作成を開始できます：

「アートボードの数」オプションで必要なすべてのアートボードの作成を開始できることに注意してください。必要に応じてアートボードを追加することを好みますが、最初にすべてのアートボードを作成できない理由はありません。

グリッドをセットアップできます。各アートボードオリジン（左上隅）から開始し、アートボードを8x8チェッカーボードグリッドに分割したいと考えています。その前に、Illustrator座標系がどのように機能するかを簡単に見てみましょう。

Illustrator Workspace

イラストレーターワークスペースは、1つ以上のアートボードを含むキャンバスで構成されています。

アートボードは、グローバルルーラーの起源と呼ばれるポイントから始めて、キャンバスに配置されます。さらに、各アートボードには、独自のオリジナルの起源と定規もあります。

アートボードツールを使用して新しいアートボードを見つけた場合、常にグローバルルーラーを使用します。他のほぼすべてのケースでは、ビュー→ルーラー→アートボード（またはグローバル）ルーラーのオプションに変更して、アートボードルーラーを使用します。

グローバルルーラーを使用している場合、アートボードに描かれた各オブジェクトは、その単一の起源（つまり、グローバルルーラーの起源

）に対して描画されます。それ以外の場合、座標はそれを含むアートボードの起源を指します。

要するに、アートボードルーラーシステムを使用してください：

アートボードは、

グローバルルーラーの起源に従ってキャンバスに配置されています

描画するオブジェクトは、
• アートボードルーラーの起源に従ってアートボードに配置されます（下の画像では、2つの異なる正方形が2つの異なるものに配置されていても、同じ座標値があることがわかります。アートボード）。
• この作業では、アートボードのルーラーはグリフアライメントにより適しているため、アートボードルーラーを使用します。

  グリッドを設定します

  イラストレーターのグリッドは、グローバルルーラーの起源から始まるワークスペースに配置されます。設定→ガイドとグリッドを選択して、プロパティを設定できます。 64x64pxキャンバスを両側に1つずつ8部に分割したいので、16pxごとにメイングリッドラインを設定し（アートボードが4x4パーツに分割されます）、2つの下位区分を実行します。

  

  次に、グリッドがアートボードと正確に一致することを確認する必要があります。デフォルトでは、アートボードを移動してリセットできるため、最初のアートボードはグローバルルーラーの起源に配置されます。これを行うには、アートボードツールを使用して定規の起源をダブルクリックするだけです。
  グリッドはアートボードと完全に整合する必要があります。

  最初のglyph

  最初のグリフから始めましょう。シンプルな

  check 円を描くには、楕円ツールを選択し、アートボードのポイントをクリックして、楕円の幅と高さを入力する必要があります。

  

  次に、塗りつぶしを取り外して、8pxサイズのブラックストロークを設定する必要があります。この時点で、円をアートボードに合わせることができます（「アートボードに合わせて」オプションが選択されていることを確認してください）：

  

  しかし、結果は私たちが期待したものではありません。イラストレーターは、ストローク幅を計算せずに

  パス

  を調整します。ありがたいことに、これは、設定パネルに[Preview Boundariesの使用]オプションを設定することで簡単に解くことができます。 Illustratorは、アラインメントとサイズに関係なく、アートボード内のストローク幅を計算するようになりました。これにより、描画がより速く、より正確になります。

  完全なグリフ図面

  各グリフを描画し、一度に新しいアートボードを追加する必要があります。アートボードツールとオプション /ALTを使用して既存のアートボードをドラッグするか、アートボードパネルの新しいアートボードアイコンをクリックしてアートボードを追加できます。

  オブジェクトを選択して、アートボードを簡単に再配置できます→アートボード→再配置（またはアートボードパネルメニューの再配置コマンド）およびアートボードパネルの順序で。

  グリフは常にアルファベット順にアップロードされているため、イラストレーターのアートボード注文をフォントのグリフと一致させたい場合は、これを念頭に置いてください。

  各アートボードの名前（スペースなし）：これは、Glyphの名前と生成されたCSSのクラス名になるため、意味のある単語を使用することが非常に重要です。

  

  ストロークを使用してシンボルを描くことがよくありますが、フォント作成には特別なニーズがあります。覚えておく必要があります：

  • 各ストロークを充填するために変換する必要があります
  充填を組み合わせて複合パスを作成する必要があります（必要に応じて）（重複はありません）
  どんな色も無視されます：グリフは常に黒と解釈されます。背景として白を使用することもできません：透明な背景のみを使用できます
  SVGに埋め込まれた画像は無視されます
  拡張コマンドを使用してパスを変換して形状を埋めることができ、パスファインダーパネルを使用して、重複した形状を単一の要素にすばやく組み合わせることができます。

  

  Glyphの準備ができたら、Artboardオプションを使用してダイアログボックスとして保存する別のSVGファイルとして各Glyphを保存できます。

  

  Illustratorは、.aiドキュメント名（ICONS_）をプレミックスすることによりSVGファイルを保存します。 Icomoonはファイル名をグリフとして使用するため、このプレフィックスを削除し（すべてのファイルを簡単に変更できる小さなアプリケーションがたくさんあります）、混乱を減らすことを好みます。

  ファイルをiComoon icomoonウェブサイトは、アイコンフォントを構築するためのオンラインアプリケーションを提供しています。このアプリは、名前のないアイテムで始まり、シンボルを選択できる無料のアイコンライブラリへのアクセスを提供します。

  独自のグリフをアップロードするため、各ライブラリの右側にある小さなメニューを使用してすべてのプリロードされたライブラリを削除できます（選択したシンボルのみがフォント中央に追加されるため、これは必須ではありません）。プロジェクトをシンプルに保ちます。 [アプリケーションメニューバーの右側にある[プロジェクト]アイコンの管理をクリックして、プロジェクトを保存できます。 ICOMOON FREEアカウントでは、プロジェクトはブラウザに保存されるため、プロジェクトデータ（JSONファイル）をダウンロードするか、プレミアムアカウント（クラウドにプロジェクトを保存できるようにする）にアップグレードする前に、他の場所でアクセスできません。 。

  インポートアイコンボタンを使用してSVGファイルをアップロードできるようになりました。グリフは、アプリケーションにコレクションとして表示されます。各グリフは、この段階でアプリケーションが提供するツールを使用して、簡単に再配置、削除、または編集できます。また、コレクションメタデータ（コレクションの名前と著者情報の名前）を編集したり、コレクションの右側にある小さなメニューを使用して他のタスクを実行したりすることもできます。

  アイコンは、編集ツールを使用してアプリケーションで編集できます。この方法でベクトルデータを変更することはできませんが、グリフのサイズを変更または移動したり、SVGファイルをダウンロードしたり、交換したりできます。

  

  フォントを構築するには、最初に選択ツールを使用して必要なすべてのアイコンを選択する必要があります（必要に応じて、「すべて/no選択すべて」コマンドを> collectionメニューで使用することもできます。 ）。選択したグリフを黄色の境界線から識別できます。次に、ページの下部にあるフォントボタンをクリックする必要があります。

  

  アプリケーションは、選択したすべてのシンボルを持つヘルパーウィンドウをロードし、各シンボルにPUA範囲内のicomoonによって割り当てられたグリフ、名前、およびユニコードポイントを表示します。 PUA範囲を使用することは、PUA範囲内のアイコンをホストするために最も安全なユニコード領域と見なされますが、ICOMOONでは、必要に応じて上部の[コード]ボタンをクリックして標準の基本ラテン範囲を使用できます。

  新しいコードまたは文字を手動で挿入することにより、各文字に別の範囲コードを割り当てることもできます。

  

  フォントをダウンロードする前に、フォント名（これは

  ルールに使用されます）とクラスのプレフィックスおよび/またはサフィックス（これは生成されたCSSのセレクターとして使用されます）を追加します。 @font-face

  他の多くのパラメーターを設定できます。メタデータ情報からメトリック値まで、すべてのパラメーターを正しく設定するために、短くてよく説明されたドキュメントを注意深く読むことをお勧めします。

  

  アイコンセットが終了しました！フォント（または、プレミアムアカウントがある場合は、CSSにリンクするだけです）をダウンロードし、プロジェクトに追加します。
  ダウンロードされた.zipファイルには、さまざまな形式のフォント、リファレンスとして使用できるデモファイル、プロジェクトを回復するために再アップロードできる.JSONファイルが含まれています（たとえば、別のコンピューターで表示）、もちろん、.cssファイルエンコードアイコンもあります。

  

  css（以下の例を見ることができます）には、

  ルールとすべてのシンボルセレクターが含まれています。 @font-face

  @font-face {
      font-family: 'icomoon';
      src:url('fonts/icomoon.eot?-88cxph');
      src:url('fonts/icomoon.eot?#iefix-88cxph') format('embedded-opentype'),
          url('fonts/icomoon.woff?-88cxph') format('woff'),
          url('fonts/icomoon.ttf?-88cxph') format('truetype'),
          url('fonts/icomoon.svg?-88cxph#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  
  [class^="myicon-"], [class*=" myicon-"] {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
  
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  .myicon-alert:before {
      content: "\e600";
  }
  .myicon-arrow-down:before {
      content: "";
  }
  
  /* etc */

  試してみてください！

  これはアイコンフォントを構築するための非常に迅速な方法であることがわかりましたが、完璧なワークフローを見つけて、IllustratorとIcomoonの両方が提供できるすべてのオプションをテストするには確かに時間がかかります。

  幸せな時間をお祈りします！

  （以下はFAQパーツであり、元のテキストに従って書き換えて統合され、形式で調整されています）

  イラストレーターとicomoonを使用したアイコンフォントの作成に関する

  FAQ（FAQ）

  Q：icomoonでアイコンフォントを作成することの利点は何ですか？

  A：Icomoonは、独自のアイコンセットを構築および管理できる強力なツールです。さまざまなアイコンを選択できます。また、独自のSVGをインポートしてカスタムアイコンフォントを作成することもできます。 Icomoonを使用する利点は、ICONフォントを作成するプロセスを簡素化することです。これは、初心者でも簡単に使用できます。また、アイコンのサイズ、色、その他のCSSプロパティを制御し、設計の柔軟性を高めることができます。

  Q：自分のsvgをiComoonにインポートする方法は？

  A：独自のSVGをIComoonにインポートするには、まずSVGが正しく最適化されていることを確認してください。次に、icomoonアプリに移動し、[アイコンをインポート]ボタンをクリックします。 SVGファイルを選択してアップロードできます。アップロードすると、アイコンは「カスタムアイコン」セクションに表示され、アイコンセットに追加されます。

  Q：Adobe Illustratorを使用してIcomoon用のSVGを作成できますか？

  A：はい、Adobe Illustratorを使用してIComoon用のSVGSを作成できます。 Illustratorは、SVGファイルを作成および編集できる強力なベクトルグラフィックエディターです。 Illustratorでアイコンを作成した後、SVGファイルとしてエクスポートしてから、ICOMOONにインポートしてアイコンフォントを作成できます。

  Q：Icomoonのアイコンのサイズと色を制御する方法は？

  A：ICOMOONでは、CSSを使用してアイコンのサイズと色を制御できます。アイコンフォントを生成するとき、Icomoonは各アイコンのクラスを含むCSSファイルを提供します。このCSSファイルを編集して、アイコンのサイズ、色、その他のプロパティを変更できます。

  Q：icomoonでアイコンフォントを作成するためのベストプラクティスは何ですか？

  A：Icomoonでアイコンフォントを作成するときは、ベストプラクティスを念頭に置いてください。まず、SVGがIComoonにインポートする前に正しく最適化されていることを確認してください。第二に、ウェブサイトの読み込み時間を短縮するために、アイコンをできるだけ小さく設定してみてください。最後に、さまざまなブラウザのアイコンフォントをテストして、正しく表示されることを確認することを忘れないでください。

  Q：IComoonを使用してビジネスプロジェクトのアイコンフォントを作成できますか？

  A：はい、ICOMOONを使用して、ビジネスプロジェクト用のアイコンフォントを作成できます。ただし、IComoonが提供するアイコンの一部は、ライセンス制限の対象となることを知っておく必要があります。商業プロジェクトで使用する前に、アイコンのライセンスを常に確認してください。

  Q：アイコンフォントを私のウェブサイトに追加するにはどうすればよいですか？

  A：ICOMOONでICONフォントを作成した後、WebサイトのHTMLにICOMOONが提供するCSSファイルを含めることにより、Webサイトに追加できます。その後、CSSファイルで定義されているクラスを使用して、アイコンをWebサイトに追加できます。

  Q：icomoonで設定されたアイコンを作成した後、編集できますか？

  A：はい、Icomoonで設定されたアイコンを作成した後、編集できます。これを行うには、IComoonアプリケーションの[プロジェクトの管理]セクションに移動します。そこで、プロジェクトを選択して、アイコンセットに必要な変更を加えることができます。

  Q：すべてのブラウザにアイコンフォントが正しく表示されていることを確認するにはどうすればよいですか？

  A：すべてのブラウザにアイコンフォントが正しく表示されていることを確認するには、開発中にさまざまなブラウザでテストしてください。さらに、ICOMOONは、必要なブラウザ互換性の修正を備えたアイコンフォントCSSファイルを提供します。

  Q：icomoonでアイコンフォントを作成する問題に遭遇した場合はどうすればよいですか？

  A：IcomoonでICONフォントの作成に問題がある場合は、ICOMOONドキュメントを参照するか、ICOMOONサポートチームにヘルプについて連絡してください。さらに、多くのオンラインコミュニティやフォーラムがあり、支援やアドバイスを求めることができます。

以上がIllustrator＆Icomoonを使用してアイコンフォントを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。