תכונות אילוסטרייטור CS5 חדשות בתחום של עיצוב ממשקי אתרים, תוכנות ועיצוב איקונים

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

הצמדה אוטומטית לרשת פיקסלים

מעכשיו כשפותחים מסמך חדש יש לסמן Align New Objects to Pixel Grid. האופציה מאפשרת הצמדה אוטומטית של כל פריט חדש לרשת הפיקסלים. נצמדים אפילו קווי מתאר עם עובי של 1 pt. אם רוצים להדליק/לכבות את ההצמדה במסמך קיים יש להשתמש בפעולה זהה בתפריט של חלונית השינוי (Transform):

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

בנוסף כעת בסגנון פוטושופ בתקריב מעל 600% מופיעה רשת פיקסלים (זה קורה אם להדליק Pixel Preview).

משטחי יצירה (עמודים) משופרים

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

פעולת Paste on All Artboards מצרפת את הפריט באותו מקום ביחס לראשית הצירים בכל משטחי יצירה.

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

9-Slice Scaling לסמלים

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

מלל

אפשרויות רישות בחלונית Character כמו בפוטושופ:

שילוב עם Flash Catalyst

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

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

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

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

איזו תוכנה טובה יותר בעיצוב איקונים וממשקי משתמש?

התשובה שלי היא אילוסטרייטור לא פוטושופ והינה למה:

יתרונות אילוסטרייטור בעיצוב איקונים

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

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

2.   באילוסטרייטור יש הדמיית פיקסלים (Pixel Preview) מעולה. כל פיקסלים שרואים בהדמיה בדיוק באותה צורה ומידה ייצא בקובץ רסטר סופי ללא סטיות.

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

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

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

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

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

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

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

8.   אילוסטרייטור CS3 ו-CS4 מאפשרת לא רק ליצור מספר עמודים אלא אפילו בגובה שונה כל אחד.

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

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

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

לחקור ללא שום תוכנה כיצד נבנה האיקון

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

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

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

תפתחו לוח בקרה (Apple Menu > System Preferences), כנסו למדור Universal Access. גם פה אפשר להפעיל את הגדלת התצוגה. תלחצו על לחצן Options.

באמצע תבטלו סימון מהתיבה Smooth Images.

בנוסף למעלה אפשר לקבוע Maximum Zoom להגדרת 4 מונים. כך המערכת תגדיל את התצוגה פי ארבע וכל פיקסל מוצג באצמעות 4 פיקסלי המסך.

ייעוץ חינם לסטודנטים

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

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

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

תתקשרו: 054-5277575

עדיף להתקשר בצהריים ולא בשבת.

שניים מיתרונות רבים של אילוסטרייטור בעיצוב איקונים

יתרון מספר אחד

פעולת Scale Strokes & Effects קטנה אך מועילה מאוד. היא חייה בתפריט של חלונית Transform. כשהפעולה מופעלת עובי קו של הפריט משתנה בהתאם לגודל הפריט. כפי שזה נובע משמה הפעולה משפיעה גם על האפקטים. כך אם יש לנו עצם עם אפקט תלת-ממדי למשל וצריך להקטין אותן הפעלת Scale Strokes & Effects תאפשר להשפיע גם על עוצמת האפטק והאפקט יוקטן בפרופורציה ובהתאם לפריט.

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

בדוגמה הבאה ניתן לראות שעובי של קו המקיף לא השתנה עם שינוי גודלו האיקון.

יתרון מספר שתיים

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

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



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

על מנת להוסיף קו מתאר כפול כמו באיקון הדוגמה:

1. יש ללחוץ על העיגול שמופיע מול שם השכבה בחלונית Layers,
2. בחלונית Appearance ע"י הלחצן השמאלי התחתון להוסיף שני קווי מתאר,
3. לגרור אותם מתחת לשורה בשם Contents שמייצגת תוכן של השכבה. כך קווי המתאר יופיעו תחת כל פריטי השכבה ויותאמו אוטומטית לצורות.

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

תנצלו את כליכם - אלוסטרייטור ואינדזיין

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

מחשב צריך לעבוד - בן אדם לחשוב

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

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

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

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

ידעתם שיש גם Pixel Art - אמנות פיקסלים באילוסטרייטור? שלוש שיטות. שמעתם שיש דפי אב באילוסטרייטור?

שגר ושכח

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

אני מזמין כל מי שרוצה להיות יעיל יותר לקורסים שלי - 054-5277575

תעלו את פריון עבודתכם בעזרת ריבוי מסכים

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

סקיצות ומיילים

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

ניהול קבצים

אפשר לשים על המסך השני חלון Finder (או Windows Explorer) או חלון Adobe Bridge. כך כשקובץ הפרויקט נפתח על מסך ראשי הוא מסתיר את התוכנה לניהול קבצים. בהמשך תוכלו פשוט בגרירה מ-Brigde (מ-Finder או Windows Explorer) להביא תמונות לפרויקט אילוסטרייטור או אינדזיין.

חלון הפרויקט נוסף

אילוסטרייטור, פוטושופ ואינדזיין מאפשרות לפתוח מספר חלונות של אותו מסמך:
באילוסטרייטור: Window > New Window
בפוטושופ ואינדזיין: Window > Arrange > New Window

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

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

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

חלוניות

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

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

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