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

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

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

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

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

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

set-of-icons

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

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

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

open

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

הקיצור:

CNTRL+ALT+Y        =       PIXEL PREVIEW

pixel-preview

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

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

rulers

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

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

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

sharpness

ומקרוב:

made-row-icon-bigger

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

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

CNTRL+1        =          100% VIEW

CNTRL+;        =       HIDING RULERS

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

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

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

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

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

create-outline

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

pathfinder

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

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

artboard0

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

artboard00

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

artboard2

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

save

 

מה זה אס וי ג'י: 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

 

Share

קצת על המחבר:

תמצאו את Pixel Perfect ב:

מאמרים שעשויים לעניין אותך

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

המדריך ל- UI HACKING

העדכון שכולנו חיכינו לו בדרך לפיגמה

השראה בשישי: בשר ללא בשר

הצטרפו לניוזלטר שלנו!

הרשמו לניוזלטר של פיקסל פרפקט וקבלו למייל רשימת קריאה חשובה לתחום מדי שבוע




    What is 8 + 6 ?

    אשמח לשלוח לך פרטים!

    אנא מלא/י את פרטי הקשר שלך כאן ואשלח לך אימייל עם כל הפרטים אודות ההכשרה
    ;