exm menu

 

exm menu

 

ADOBE XD – חידושים וניהול צבע

אורי פלג | 14.06.2018

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

 

 

עושה רושם שבאדובי החליטו לקחת ברצינות את הפיתוח של XD. לראייה מהלך עליו הכריזה החברה
באמצע חודש מאי המאפשר שימוש בתוכנה בגירסה חינמית בתוכנית מתחילים. תוכנית זו מאפשרת לכל אחד לעשות שימוש חופשי לכל
צורך בתוכנה עם מגבלה של פרוטוטייפ אחד פעיל ו-SPEC אחד פעיל (קובץ לתכנות). משמעות הדבר היא שלכל מעצב ישנה כיום
האפשרות להתחיל להשתמש בתוכנה לעיצוב ממשקים ללא תלות במערכת הפעלה, מנוי או חיבור לאינטרנט. על המגבלה המדוברת ניתן
להתגבר בשלבי עבודה ראשוניים- ועל זה במאמר נפרד הסוקר כלים חינמיים נוספים למעצבי ממשקים. להלן קישור להורדת של
גרסה החינמית:
https://creative.adobe.com/products/download/xd

העתיד מעבר לפינה

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

העדכונים האחרונים שיצאו

אלה הם כל העדכונים הרשמיים של אדובי, פירוט על חלקם בהמשך הכתבה.
  • 2/2018 – העברת אלמנטים וקטורים מתוך ספריית הענן, שמירה על מיקום הגלילה במעבר בין
    מסכים, שליטה גבוהה יותר בתהליכי עבודה המתרחשים במסכי מגע מבוססי חלונות 10, הצגת גריד בהעברה לפיתוח (SPEC),
    דוגם צבע הזמין מחלון ה-Inspector לצד שליטה בצבע המילוי וצבע הקו.
  • 3/2018 – פתיחת מסמכי פוטושופ וסקאצ’ בתוך XD (הרחבה בהמשך), כולל המרה של שכבות חכמות
    ואובייקטים מורכבים בצורה כמעט מושלמת, העתקת סימבולים בין מסמכים, שליטה על גובה ה-VIEWPORT להגדרת הפולד
    הראשון של המסך.
  • 4/2018 – יצירת סיסמה בעת כניסה לפרוטוטייפ בדפדפן, שיפורים משמעותיים לחלון ה-ASSETS
    בדמות חיפוש וסינון, סימון סגנון או אלמנט בתוך משטחי העבודה, שיפורים בעיבוד קבצי PSD,
  • 5/2018 – החלפת סימבולים במקביל לכל המסכים, הדבקה בכמה משטחי עבודה במקביל, שיפורים
    נוספים בקובצי PSD וסקאצ’ והגבלת כניסה לקובץ SPEC בדפדפן באמצעות סיסמה.

    SYMBOL SWITCH

    לא על הפוטושופ לבדו

 

אחד המהלכים המרשימים והמתבקשים ביותר עד כה בפיתוחה של XD הוא האפשרות לפתיחת קובצי
פוטושופ וסקאצ‘ בתוך XD והמשך עבודה על העיצוב והפרוטוטייפ באופן נוח ויעיל יותר.
למהלך הזה מספר משמעויות:
  1. מאפשר לנו לעבור עם קבצים מסורבלים ועתיקים (PSD) לסביבת עבודה עדכנית ויעילה.
  2. מאפשר למשתמשי חלונות להשתלב בקובצי סקאצ‘ ולהמשיך לעבדם ב-XD בנוחות.
  3. מאפשר לנו לבצע את כל פעולות העיצוב וההמחשה בכלי אחד ללא פיצול תהליכים.
PSD TO XD IN
ההמלצה שלי היא – תמיד לדעת לבחור את הכלי הרלוונטי למשימה. אם, למשל, תרצו לדפוק מסמר
בקיר, הרי לא תשתמשו במברג, אותו הדין גם בתהליכי עיצוב. XD מאפשרת לנו להתמקד במשימות איפיון ועיצוב ללא הסירבול
הכרוך בעבודה עם תוכנת עיבוד תמונה. עם זאת נכון יהיה לשלב בתהליכי העבודה גם את פוטושופ ובנוסף את אילוסטרייטור
לצורך יצירת אלמנטים מורכבים יותר שלא ניתן לבצע בכלים של XD.
כדי לפתוח קובץ פוטושופ כל שצריך לעשות הוא להפעיל את הפקודה Open מתפריט File, לבחור בקובץ
PSD ולאשר את החלון. רצוי שהקובץ יכלול משטחי עבודה (Artboards), באופן זה נקודת המוצא של הקובץ תהיה איכותית יותר.
בכל הנוגע לקובצי סקאצ‘- התהליך זהה.

 

ניהול צבע ב-XD

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

יצירת ועדכון צבעים בחלון אינספקטור

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

COLOR MAIN

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

COLOR PICKER

מעברי צבע – חלון האינספקטור

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

GRADIENT

ניהול צבע מחלון הנכסים (ASSETS)

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

COLOR ASSETS

צבע מחלון CC LIBRARIES

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

CC

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

print

 

באותו נושא

  • נכתב ע"י
    כבכל שנה באוקטובר מציגה Adobe בכנס השנתי של החברה את התכונות והמאפיינים החדשים בגירסאות החדשות של תוכנותיה ופיתוחים עתידיים ומהפכניים...
    23.10.2018 | כתב: אורי פלג
  • נכתב ע"י
    חל עם העדכון של ספטמבר 2018 מאפשרת Adobe XD לטפל ולהציג התנהגות רספונסיבית שלאלמנטים ביחס למסך. מאפיין זה מהווה קפיצת...
    02.05.2019 | כתב: אורי פלג
  • נכתב ע"י
    XD חידושים ו- תלת-מימד
    בכל שנה בחודש אוקטובר, עורכת Adobe את כנס MAX, בו מוכרזים כל החידושים והעדכונים בתוכנות השונות ונחשפות תוכניות ארוכות טווח....
    11.11.2020 | כתב: אורי פלג

כתבות נוספות שיכולות לעניין אותך:

  • נכתב ע"י
    כאשר מצלמים סרט וידאו ממספר מצלמות בו-זמנית, נדרשת ׳עריכה מרובת מצלמות׳. בעידן בו לרובינו מצלמת וידאו בטלפון הנייד ומצלמות ״סטילס״...
    11.11.2020 | כתב: אורי פלג
  • נכתב ע"י
    הסטודיו לעיצוב חזותי של זגמייסטר & וולש בניו יורק עשיר בעבודות מרתקות. במאמר קצר זה נתמקד במספר עבודות העושות שימוש בטיפוגרפיה...
    11.11.2020 | כתב: אורי פלג
  • נכתב ע"י
    ציפורים הן לבטח מבעלי החיים היפים והמסקרנים ביותר בטבע – שלל צבעים, גדלים, מקורים והתנהגויות שמהוות אתגר עבור כל חובב...
    11.11.2020 | כתב: אורי פלג
-

שלח לחבר

מלאו את הפרטים הבאים:

    גללתם 1112 פיקסלים! רוצים שוב?

    להשארת פרטים
    -

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

    • רותם

    • ליהיא

      להשארת פרטים