מהו אייקון פונט, מה היתרונות שלו ואיך להכין אחד במהירות האור – כל זאת ועוד בפוסט שלפניכם. יאללה מתחילים.

אז אחרי שישבתם, טרחתם, דייקתם וסיימתם לעצב סט מפואר וחדש של אייקונים, כפי שנכתב בהרחבה בפוסט של קרן ריז'נסקי, הגיע השלב השנוא על רוב המעצבים – שלב החיתוך. אבל רגע, יכול להיות שיש דרך לייצא את כל האייקונים לקובץ אחד, מבלי לחתוך אותם לעשרות גדלים, ולשלוח אותו לייק א בוס למתכנת שלכם? התשובה היא כן. הכירו את האייקון פונט.

אז מי אני ומה אני שווה

אייקון פונט מסתובב בעולם משנת 2011. כשמו כן הוא – גופן, אשר כל אות בו מיוצגת ע"י סימבול וקטורי. יש לו שלושה יתרונות בולטים ומשמעותיים, ביחס לכל קובץ תמונה אחר שתבחרו:

• המשקל שלו מזערי, קל יותר לטעון אותו מאשר קובץ תמונה, ולכן גם ביצועי האתר שלכם ישתפרו פלאים.
• מאפשר עריכת גודל, צבע, בורדר, צבע רקע ועוד אלמנטים באופן קל ומהיר ב CSS.
• כיוון שהקובץ הוא וקטורי ניתן להגדיל ולהקטין את הפונט מבלי לפגוע באיכות התמונה.

תהליך יצירת האייקון פונט שאתאר כאן כולל שני שלבים: ייצור וייצוא אייקונים באילוסטרטור לקבצי SVG והפקת הפונט בפלטפורמה נהדרת בשם IcoMoon.

שלב א: תהליך ייצוא האייקונים ב Illstrator

בהמשך לפוסט הקודם, יצירת אייקון פונט מחייבת אותנו כמעצבים לדאוג שכל פיקסל המרכיב את האייקון יישב על הגריד בצורה מדויקת. רק כך נייצר אייקונים חדים וברורים ובאמת פיקסל פרפקט. רצוי להימנע ממקומות בהם קווי המתאר יושבים על חצי פיקסל ולנסות להתיישר ככל הניתן אל גריד. על מנת להשיג מטרה זו נייצר ארטבורד אחד ונגדיר גריד בהתאם לגודל האייקון הנדרש. לדוגמה, האייקון כאן בגודל 18 פיקסל, ולכן אגדיר:
Edit > Preferences > Guides and Grid > Guideline every > 18p ובשורה מתחת Subdivisions > 18px.

יוצרים רקע לאייקונים (במקרה הנ"ל – ריבוע אפור בגודל 18X18 פיקסל) בשכבה נפרדת, כדי שבסוף העבודה יהיה אפשר לייצר בקלות ארטבורד עבור כל אייקון, וכך לייצא אותם בנפרד. חשוב לעבוד על ארטבורדים זהים בגודלם, על אף שהאייקונים שונים בגודלם, כדי לא ליצור מצב שאחד מהם גדול ביחס לאחרים, ולשמור על אחידות בנראות הכללית.

אחרי שסיימנו לעצב את האייקונים, נסדר כל אייקון בארטבורד משלו. לשם כך נבחר את כלי הארטבורד ונלחץ על הרקעים האפורים שעליהם האייקונים יושבים. אופציה אחרת היא לסמן את הרקע האפור, להיכנס אל חלון ה Artboard ולבחור בתפריט הימני העליון ב Convert to Artboard.

לאחר מכן, נייצא את הארטבורדים ל SVG בתיקיה נפרדת  File > Save AS > SVG. לא לשכוח להעלים את השכבה עליה ישבו הרקעים האפורים ולסמן  V באופציה Use Artboards. הקבצים יראו כך:

שלב ב: יצירת הפונט ב IcoMoon

ועכשיו נעבור לחלק הכיפי – נכנסים ל IcoMoon ובוחרים בסרגל העליון באופציה Icomoon App. 

נבחר בכפתור Import Icons על מנת להעלות את האייקונים לפלטפורמה. אפשר גם ללחוץ על האופציה Add Icons From Library כדי להשתמש באייקונים שהאתר מציע.

וכך נראים האייקונים שלכם במערכת! סרגל הכלים העליון מאפשר מצב בחירה, מחיקה, הזזה ועריכה. מיד נבחן את העניין.

כך נראה מצב העריכה. בחלון זה ניתן לסובב את האייקון, לשקף כמראה, להקטין/ להגדיל אותו ואת הפורמט ולהזיז אותו. לחיצה על הצ'ק בוקס של Grid למעלה מימין תפתח לנו את הגריד של האייקון ונוכל לבדוק אם האייקון יושב על הגריד כמו שצריך.

דגש לגבי הגריד: בניגוד למה שצוין בתחילת המדריך, לעתים נצטרך את אותו האייקון במס' גדלים (למשל אייקון להדר או לתפריט dropdown). ואז – למרות שהאייקון הוא וקטורי, כשנקטין אותו הוא עלול להראות מפוקסל ולא ברור. במקרה כזה, Icomoon יאפשר לנו לראות איך נראה האייקון בגריד שונה. כך נוכל לחזות מראש אם בגודל מסוים האייקון יראה פחות טוב ולחזור לערוך אותו באילוסטרטור. להלן דוגמאות:

עוד יתרון במסך זה – לחיצה על אייקון העין תאפשר לנו לבחור את גודל התצוגה הרלוונטי לנו. אייקון שנעשה בגודל 18 פיקסל יראה במיטבו בכפולות של 18, 36, 54, 72 וכן הלאה…

כדי לייצר את הפונט שלנו יש לבחור את האייקונים הרלוונטים וללחוץ למטה על Generate Font.

במסך זה ניתן לבחור שם עבור כל אייקון. חשוב לתת שמות מתאימים לאייקונים כדי שיעזרו לפיתוח להתמצא. בנוסף, אם האייקון משתנה, אין בעיה לייצא את הפונט מחדש מבלי שהפיתוח יצטרך לעשות שינוי בקוד. לאחר שנתנו שמות לכל האייקונים אפשר ללחוץ סופסוף על Download.

רגע לפני, במידה ועבדנו עם שני סוגים של גדלים, ה IcoMoon יודע לזהות זאת, ולהציג בקבוצה נפרדת. חשוב לציין שזו רק תצוגה הנוחה לנו, ואין משמעות מבחינת ייצוא הפונט.

והפונט מוכן!!

רגע, אז איפה הקאטצ'?

• אייקון פונט הוא דרך מעולה להציג את האייקונים שלכם חדים וברורים ובכל גודל שתבחרו. אבל כפי שעלה מן הדברים קודם, כדי שזה יקרה – חשוב מאד לעבוד עם גריד ברקע ולדייק כל פיקסל ופיקסל אל הגריד. גם כאשר ניקח אייקון קיים ונקטין אותו למטרות אחרות באתר, חשוב לוודא שגם האייקון הקטן יותר יושב בדיוק על הגריד, ובמידה ולא – לא להתעצל, ולפנש אותו באילוסטרטור.
• אייקון פונט תומך באייקונים מרובי צבעים. מה שכן, כל צבע באייקון נחשב ל path, וכל path יושב על אות בפונט. במילים אחרות, יש לקחת בחשבון שאייקון צבעוני "יתפוס" מס' אותיות בפונט, ואם יש לכם הרבה אייקונים צבעוניים, ייתכן ופונט אחד לא יספיק לכולם…
• IcoMoon תתן לכם אפשרות להתנסות במוצר וליצור פונט משלכם ללא עלות. יחד עם זאת, הפרויקט שהעלתם אינו נשמר במערכת, ולא תוכלו להעלות לשם אינספור פרויקטים. המלצה שלנו: תתנסו, תבדקו ותראו אם הכלי מתאים לכם. במידה ומדובר בפרויקט גדול ועשיר באייקונים, תוכלו לרכוש חבילה חודשית/שנתית במחיר מאד משתלם. ואז תוכלו להגיד שלום למליון שעות חיתוך שחסכתם מעצמכם :)

לסיכום

אייקון פונט הוא כלי מהיר ופשוט להעלות אייקונים לאתר שיראו מצוין בכל גודל. גם החסרונות שציינו למעלה הם פתירים אם עובדים מסודר ומדויק. אשמח אם תוכלו להרחיב את הדיון ולציין בתגובות דרכים שאתם משתמשים בהן ליצירת אייקון פונט (למשל – הפלטפורמה fontastic) או תובנות חדשות לגבי שימוש באייקון פונט בגזרת המובייל (למה זה לא קורה באמת?).

לחלק הראשון של המאמר – אייקונים To the moon & back חלק א'