כללי עיצוב אייקונים >>> סדנה מס' 1

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

ראשית נפתח בהסבר -

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

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

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

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

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

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

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

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

- התאמה לגדלים שונים: כשאנחנו מעצבים אייקונים אנחנו צריכים לקחת בחשבון את הגודל הסופי בו הם יופיעו. נוח יותר לעבוד בגודל גדול אך יש לוודא שאנחנו לא יוצרים פרטים שיעלמו בהקטנה ויפגעו בקריאות ובאסתטיקה של האייקון. ישנם מספר גדלים מקובלים לאייקונים (כל הגדלים הינם ביחס רבוע כלומר 128 = 128X128 פיקסל):
128, 72, 64, 48, 32, 24.

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

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

----

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

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

עליכם לבחור אחד מבין שני הנושאים הבאים:

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

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

עליכם להגיש את האייקונים בצבע אחד, ללא אפקטים, וב-3 גדלים שונים לכל אייקון:
72X72, 48X48, 24X24.

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


בהצלחה!
 
  • הוסף לסימניות
  • #2
נעמה-
יישר כח על היוזמה!
תבורכי.
 
  • הוסף לסימניות
  • #3
תודה רבה על היוזמה!
למה האייקונים עוברים בסוף לפוטושופ? האם זה רק בשביל לראות גדלים סופיים?
 
  • הוסף לסימניות
  • #4
נכתב ע"י RB12;927475:
תודה רבה על היוזמה!
למה האייקונים עוברים בסוף לפוטושופ? האם זה רק בשביל לראות גדלים סופיים?

יצוא של אייקונים לWEB הוא תמיד דרך פוטושופ (פורמט ICO או PNG).
בנוסף רק בפוטושופ נוכל לראות איך האייקון מתיישב על רשת הפיקסלים בגודל הסופי שלו ולוודא ששום פרט לא מיטשטש או נעלם.
 
  • הוסף לסימניות
  • #5
ווואו נשמע כיף ומרגש....... מפשילה שרוולים........
תודה נעמה.
 
  • הוסף לסימניות
  • #7
כמה פקודות שאולי יוכלו לעזור בבנייה באילוסטריטור עם קווי רשת ריבועיים ותצוגה פיקסלית:
א.
באילוסטריטור במסך הפתיחה נוספה אפשרות שיצירת צורה וקטורית תצמד לפיקסלים ותתחיל בדיוק במקום שבו מתחיל פיקסל (שהרי צורה וקטורית יכולה להתחיל בכל נקודה שהיא).
צפה בקובץ המצורף 149947


ב.
קווי רשת לפי גודל שנקבע בעדיפויות.
תצוגת קווי הרשת ב-View
ועריכת קווי הרשת בעדיפויות.
צפה בקובץ המצורף 149948
צפה בקובץ המצורף 149949


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

קבצים מצורפים

  • 2013-01-02_001059.jpg
    KB 137.8 · צפיות: 50
  • 2013-01-02_001314.jpg
    KB 247.2 · צפיות: 29
  • 2013-01-02_001344.jpg
    KB 68.2 · צפיות: 29
  • 2013-01-02_001509.jpg
    KB 388.1 · צפיות: 23
  • הוסף לסימניות
  • #8
טוב, אני הראשונה.

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

עכשיו, נעמה, את יכולה ללמד את כולם על חשבוני.
 

קבצים מצורפים

  • איקונים רפואה-פיקסל.jpg
    1.2 MB · צפיות: 87
  • הוסף לסימניות
  • #9
למה להשתמש בצלב בשביל האחות????
 
  • הוסף לסימניות
  • #10
נכתב ע"י רחלים;928205:
זהו סדרה של רופא עם תגלחת
מעליו יש פרופ' שלמד בקדחת
האחות היא אחת עומדת לבדה
כי מחסור של אחיות יש במדינה
והמזכירה משנות ה-80 היא בטלפון
כי היום בקדמה, המחשב הוא הראשון.

עכשיו, נעמה, את יכולה ללמד את כולם על חשבוני.

נראה לי שיש פה יותר מידי הרבה אלמנטים. אני טועה?
 
  • הוסף לסימניות
  • #11
נכתב ע"י אברהם;928213:
למה להשתמש בצלב בשביל האחות????

הו, היא לא עם צלב.
לא יכולתי לוותר על הסימן כדי להמחיש שהיא אחות
אז שמתי לה עיגול באמצע, תגדיל ותבדוק.
 
  • הוסף לסימניות
  • #12
נכתב ע"י album;928226:
נראה לי שיש פה יותר מידי הרבה אלמנטים. אני טועה?

יכול להיות, פשוט שעמם אותי ריק, אז מה יהיה שונה מכל האלמנטים שיש? אהבתי את זה ככה,
אבל אם את רוצה את גם יכולה ללמד על חשבוני ;)
 
  • הוסף לסימניות
  • #13
רחלים, יישר כוח על הזריזות (אם כי לעתים, יש דברים שהתבשלות של עוד כמה ימים עשויה רק להוסיף להם).
אני אתן את כל הביקורות במרוכז ביום שני בערב בע"ה.
 
  • הוסף לסימניות
  • #14
נכתב ע"י רחלים;928234:
יכול להיות, פשוט שעמם אותי ריק, אז מה יהיה שונה מכל האלמנטים שיש? אהבתי את זה ככה,
אבל אם את רוצה את גם יכולה ללמד על חשבוני ;)

אכן מידי הרבה פרטים (...תקראי שוב את נושא ההפשטה)
וליצור עניין (כמו"כ שינוי בין האייקונים") זה לאו דוקא ע"י ריבוי פרטים
 
  • הוסף לסימניות
  • #15
נכתב ע"י רחלים;928232:
הו, היא לא עם צלב.
לא יכולתי לוותר על הסימן כדי להמחיש שהיא אחות
אז שמתי לה עיגול באמצע, תגדיל ותבדוק.

אפשר לשים מגן דוד אדום.
מה זה משנה "תגדיל" הרעיון כאן הוא ה"קטן"...

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

קבצים מצורפים

  • איקונים רפואה-04.jpg
    KB 903 · צפיות: 78
  • הוסף לסימניות
  • #17
רק האחות צריכה מגן דוד, לא הרופא...
 
  • הוסף לסימניות
  • #18
לי זה דוקא מזכיר רופא מזמן השואה, עם טלאי צהוב :)

המגן דוד אמור להיות חלול.
 
  • הוסף לסימניות
  • #19
נכתב ע"י גרפיקהil;929136:
לי זה דוקא מזכיר רופא מזמן השואה, עם טלאי צהוב :)

המגן דוד אמור להיות חלול.

זה מה שבדיוק הוא הזכיר לי,
אבל איך רופא אמור להראות בלי מגןם דוד או סימון של הצלב האדום?
כשמגן דוד היה חלול לא יצא יפה.
 
  • הוסף לסימניות
  • #20
יפה מאוד, אייקונים למרפאה בגטו ורשה :rolleyes:.

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

פרוגבוט

תוכן שיווקי
פרסומת

הצטרפות לניוזלטר

איזה כיף שהצטרפתם לניוזלטר שלנו!

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

לוח מודעות

הפרק היומי

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


תהילים פרק כה

אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
נקרא  2  פעמים
למעלה