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

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

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

—————————-
תקציר דברים:
שלב ראשון- עיצוב האייקונים, דיוק הפיקסלים והגדלים.
שלב שני- שיטוח הצורות וייצוא SVG.
שלב שלישי- העלאת אס וי ג'י לאתר מון אייקונס ויצירת פונט.

שלב ראשון: יצירת האייקונים

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

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

כל אייקון אני אצור בתוך שתי מסגרות. אני מחליטה לצורך העניין שהמסה העיקרית של האייקון תהייה בתוך גבולות של 13*13 פיקסלים, והדקורטורים וחריגות נוספות שעלולות להיות לאייקון יהיו תחומות בגבולות של 20*20 פיקסלים. ההסבר למה הוא פשוט, שימו לב שגם באותיות לדוגמא ק' יש מקל שחורג למטה,  ול-ל' יש חריגה למעלה וכן הלאה, אך המסה העיקרית של כל אות, צרה או רחבה שתהייה, נשארת מיושרת בתוך גבול עקבי.

ועכשיו בכדי להכין את משטח העבודה נוודא שהוא בפיקסלים ושהצ'ק בוקס של Align New Object to Pixel Grid דלוק:

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

הקיצור:

CNTRL+ALT+Y        =       PIXEL PREVIEW

עכשיו אני אעזר או בשני הריבועים שלי שהחלטתי שהם הגבולות שלי בכך שאניח אותם מאחורי כל אייקון בכדי לבנות אותו בהתאם, או אעזר ברולרים דרך view –> rulers –> show rulers או בקיצור CNTRL+R .

אגרור בהתאם לריבועים שקבעתי את הרולרים ובכך אייצר גריד.

עכשיו אנחנו good to go בבניית האייקונים.

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

דוגמא לאייקון שהגדלתי ודייקתי על הפיקסלים לעומת אייקון שהגדלתי באופן אקראי:

ומקרוב:

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

קיצורים שימושיים לעבודה רציפה בניית האייקונים:

CNTRL+1        =          100% VIEW

CNTRL+;        =       HIDING RULERS

שלב שני: הכנה לייצוא

לפני ייצוא יש לשטח את האייקון, צריך לעשות expend לצורה , למחוק נקודות מיותרות, לחבר צורות שנראות כמחוברות, בקיצור, לייצא את הצורה הכי נקי ושטוח שאפשר.

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

expend למסגרות של צורות, PATHS:

ולא לשכוח להפוך גם טקסט לצורה:

מאחדת צורות באמצעות חלון ה-pathfinder:

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

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

לוחצת על האייקון של  ה-Edit Artboard הנמצא ב- Tool bar מצד שמאל :

מקיפה את המלבנים בארטבורדים ע"י לחיצה על המלבן מאחור:

מייצאת בבת אחת את כולם על פי הפרינט סקרין: Save as type>> SVG, מסמנת וי בצ'ק-בוקס של use Artboards, ומסמנת בהתאם-או את הכל או ארטבורדים ספציפים:

מה זה אס וי ג'י: Scalable Vector Graphics – SVG
פורמט המשתמש בשפת XML , וקטורי ודו מימדי, המאפשר איטראקטיביות ואנימציה.
הפורמט נתמך בדפדפנים: גוגל כרום, Internet Explorer (מגרסה 9- וזה החיסרון העיקרי), מוזילה, Konqueror, ספארי ואופרה.
ניתן לערוך אותו בתוכנות: Open Office , Adobe Illustrator ו Inkscape.
און ליין ניתן לעריכה של: transform – שינוי הצורה של אובייקט, למשל ע"י הטייתו, סיבובו או מימדיו.fill, stroke וגם stroke width מציינות את צבע המילוי של האובייקט, צבע מתארו ועובי המתאר.
מאפשר ייצוא Icon Font אשר נתמך בכל הדפדפנים (הפירוט בחלק ב' של הפוסט)

שלב שלישי:

שלב בו המתכנת או המעצב לוקח את האס וי ג'י ומעלה לאתר IconMoon, שם הוא הופך אותו לפונט. בפוסט מפורט ומעולה של דנה פרויד- אייקונים To the moon & back – חלק ב'

סיכום

שמחתי לשתף אתכם בשיטת העבודה שלי, אשמח לשמוע את השיטה שלכם, חידודים, הערות, הארות וכו'

להבנה נוספת של יצירת אייקונים בצורה נכונה בכדי לייצא לאס וי ג'י בצורה ויזואלית ופשוטה: Pixel Icons visual guide

להכנה מוקדמת מדוקדקת בכדי לדייק את הפיקסלים של יצירת האייקונים:  How to Master Pixel Perfect Icons