סדנה: החידושים העיקריים באילוסטרייטור CS5

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

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

נושאי המפגש:

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

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

העברת גרפיקה מאילוסטרייטור לפלאש קטליסט

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

1. מעצבים את הפרויקט באילוסטרייטור או בפוטושופ.

2. מוסיפים אינטראקטיביות בסיסית, סרטונים וקול בפלאש קטליסט.

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

3. את התוצאה מייצאים בפורמט SWF או תוכנת AIR.

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

עמודים

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

סמלים

כל סמל עם פתיחתו של קובץ אילוסטרייטור בקטליסט הופך ל- Low-level Flash object - סוג פריט שלא ניתן לעריכה ישירה (אבל עדיין יש אפשרות לערוכו) המוצג הן בקטליסט והן ב-Flash Player מהר יותר. חשוב להבין שכזה פריט פלאש ברמה נמוכה הוא לא ממש כמו סמל. הוא נשמר בספריה אך לא ניתן שינויי ועידכון בסיפריה. פיזית פריט זה מהווה קובץ FXG (Flash XML Graphics) בתוך פרויקט FXP (Flex Project), הוא לא נכתב בשפת MXML.

אפקטים מורשים

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

מעברי צבע ועריכה חוזרת בתוכנת מקור

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

פירוק פריטים מורכבים

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

שמות לכל דבר

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

תכונות אילוסטרייטור 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

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

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

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

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

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

אילוסטרייטור

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

לאחר הורדת קובץ הפעולה יש לטעון אותה בחלונית Actions: פקודת Load Actions בתפריטה של החלונית.

אינדזיין

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

1. תורידו את הסקריפט.

2. בארכיון תמצאו תיקיה בשם Automatic_Layer_Set_v1. תעתיקו אותה (חשוב: את התיקייה) במק אל:

HD/Users/[username]/Library/Preferences/Adobe InDesign/Version 6.0-ME/en_GB/Scripts/Startup Scripts/

בחלונות:

C:\Documents and Settings\[username]\Application Data\Adobe\InDesign\Version 6.0\en_US\Scripts\Startup Scripts\

אם תיקיית Startup Scripts אינה קיימת יש ליצור אותה!

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

שימו לב שבתיקיית Automatic_Layer_Set_v1 ישנם שני קבצי TXT. כל קובץ קובע ערכת שכבות נפרדת. תוכלו ליצור ולהוסיף לתיקיה קבצים חדשים או לשנות את רשימות השכבות בקיימים.

Convert All Text to Outlines: כיצד להמיר בקלות כל טקסטים לקווי מתאר?

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

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

המרת מלל לקווי מתאר אוטומטי

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

מרשם הרופא

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

שימוש בקביעות שיטוח

בתיבת שיחה להדפסה וגם בחלונות שמירת קבצי PDF באילוסטרייטור ובאינדזיין, במדור Advanced ניתן לבחור Transparency Flatter Preset. המשתמשים בדרך כלל בוחרים ב-High Resolution כי כשהתוכנה מפרקת פריטים מורכבים וצריכה ליצור תמונות במקום אפקטים (לדוגמה במקום צל) היא תקבע להן רזולוציה גבוהה. בשלב הבאה, לאחר ששמתם פריט שקוף על הדף, צריך ליצור קביעת השיטוח חדשה משלכם.

יצירת קביעת השיטוח חדשה

באינדזיין ובאילוסטרייטור השיטה זהה. גשו ל-Edit > Transparency Flattener Presets. בחלון הנפתח תבחרו קביעה מובנת בשם [High Resolution] שאנחנו כבר מכירים - כך את החדשה תווצר על בסיס הקביעה הזו. תקראו לה בשם הגיוני, למשל Create Outlines.

כשתצטרכו לייצא את המסמך ל-PDF, לסגור PostScript או להדפיס יש בחלון הדפסה או ייצוא, במדור Advanced לבחור ברשימה הנגללת Transparency Flatter Preset את הקביעה שעשיתם. בסגירת PDF ישירות מהתוכנות הפונקציה תהיה נגישה אך ורק כשבוחרים תאימות ל-Acrobat 4 (PDF 1.3)

חשוב לציין כי המלל הופך לקווי מתאר רק ב-PDF או PostScript, הוא לא נפגע בקובץ מקורי.

הצצה לעתיד 2: חלוניות ScribeDOOR באיכות טובה

לאחר הרשומה הקודמת אנשי WinSoft שלחו לי צילומי מסך של ScribeDOOR באיכות טובה.

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

התנדבתי להגיש ל-WinSoft סקיצה שלי לסידור של ממשק המשתמש. אודיע לקוראי Adobe Creek מה ייצא מזה.

הצצה לעתיד: תמיכה בעברית ב-CS5

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

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

ScribeDOOR נראת כחלונית:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

למה אין פקודת Clone באילוסטרייטור ואינדזיין?

למה שתהיה? פקודת Clone שהייתה בפריהנד זה לא משהו סטנדרטי כמו Copy/Paste אלא תכונה סגולית של תוכנת פריהנד, לא יותר מזה.

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

להלן מספר שיטות המקבילות או קרובות באופן פעילותן לפקודת Clone הבלתי נשכחת:

Paste in Front/Back

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

Paste in Place באינדזיין

באינדזיין זה בדומה לשיטת אילוסטרייטור - גם ניתן להעתיק פריט לזיכרון אבל מתרפים בפקודה אחרת - Edit > Paste in Place, המקבילה בפועל לפקודת Paste in Front של אילוסטרייטור.

שיכפול פריט בחלונית השכבות

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

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

פקודות שינוי

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

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

ייצוא מאילוסטרייטור לפורמט PSD בשכבות

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

כיצד להעביר פרויקט אילוסטרייטור לפוטושופ בשכבות?

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

ב-RGB זה עובד טוב יותר

אפילו אם הקובץ שלכם הוא ב-CMYK ואתם צריכים אותו בפוטושופ ב-CMYK תהפכו את המסמך זמנית ל-RGB. יש לעשות זה לפני פעולת הייצוא: File > Document Color Mode > RGB Color. לאחר הייצוא פשוט תמירו בפוטושופ את הקובץ הנוצר ל-CMYK ובאילוסטרייטור תבטלו את פעולת ההמרה ל-RGB.

בתיבת שיחה לייצוא לפורמט פוטושופ באילוסטרייטור תבחרו את הרזולוציה הרצויה, את הפקודה Write Layers ושתי תיבות סימון הבאות. Preserve Text Editability תאפשר להפוך מלל של אילוסטרייטור לשכבות טקסט של פוטושופ (גם בעברית). Maximum Editability עוזרת להמיר מסכות עצמים של אילוסטרייטור למסכות שכבות של פוטושופ, להעביר גם גרופים, שקיפות ומצבי חפיפה כראוי.

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

לפני הייצוא לשים כל פריט בשכבה נפרדת באילוסטרייטור

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

איתור צבעים שתעו

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

אינדזיין

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

כמובן כל צבע RGB ייצא בסטייה בדפוס על בסיס CMYK. אם אין לכם אידזיין CS4 עם פונקציית Live Preflight המאפשרת לאתר בעיות כאלו בקלות יש להשתמש בפעולת Add Unnamed Colors שנמצאת בחלונית Swatches. היא תוסיף כל צבעים המשמשים בפרויקט אל תוך חלונית Swatches ואז תוכלו להפוך דוגמיות RGB ל-CMYK.

אילוסטרייטור

באילוסטרייטור (CS3 ומעלה) פעולה היקשית גם נמצאת בתפריט של חלונית Swatches ונקראת Add Used Colors. הצבעים המשמשים יוספו בתור צבעים גלובליים - זאת אומרת אם לא השתמשתם בשיטה זו קודם בכל שלב תוכלו לעבור להשתמש בצבעים הגלובליים.

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

דפי אב באילוסטרייטור

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

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

שיטת הסמלים

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

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

שיטת הקבצים החיצוניים

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

יוצרים קובץ אילוסטרייטור, מביאים או יוצרים כל פריטים הנדרשים, מביאים תמונות מקושרות, שומרים את הקובץ ובתיבת השיחה הנפתחת מסמנים פעולת Create PDF Compatible File.



כך קיבץ אילוסטרייטור הנוצר יהיה תואם PDF. במילים פשוטות הוא כולל בפנים גם העתק של החומריו בפורמט PDF - שני קבצים בפועל בתוך אחד. מאז שפורמט אילוסטרייטור כבר לא מתבסס על PostScript (מגרסה 9, שנת 1999) תוכנות אחרות לא יכולות לקרוא אותו ישירות ולכן צריכים העתק בפורמט PDF, אותו קוראות פוטושופ, אינדזיין או אילוסטרייטור עצמה כשמביאים קובץ AI בתור תמונה (פקודת File > Place).

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

בנוסף באילוסטרייטור CS4 הודות לריבוי העמודים האמיתי יש אפשרות ליצור קובץ מרובה עמודים עם מספר דפי אב אפילו בגודל שונה. פעולת Place תזהה אותו כ-PDF מרובה עמודים.

הדרך הזו קיימת מתופה של אילוסטרייטור CS3, בגרסאות קודמות השתמשנו בקבצי PDF התואמים לאילוסטרייטור.

העברת קבצים מפורמט פריהנד לאילוסטרייטור ולהיפך

יש שתי שיטות להעביר פרויקט מפורמט פריהנד לאילוסטרייטור: טובה ולא כל-כך. הדרך הנכונה היא פשוט לפתוח קובץ פריהנד באילוסטרייטור. אילוסטרייטור CS3 ו-CS4 מאפשרות לפתוח קבצי פריהנד מגרסת 7 עד MX. אילוסטרייטור CS ו-CS2 פותחות קבצי פריהנד מגרסת 5 עד 9. בשיטה זה הפרויקט בדרך כלל עובר לאילוסטרייטור ממש חלק קרוב מאוד למקור: עם דוגמיות צבע, שכבות, תמונות, מלל חי, קווי עזר, סמלים, עמודים.

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

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

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

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

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

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

שינוי קו מתאר בהתאם לשינוי הפריט

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

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

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

חשוב לדעת שבאינדזיין ההגדרה המקבילה ל-Use Preview Bounds של אילוסטרייטור מופעלת בברירת מחדל ואז עם הורדה או שינוי של הקו המקיף מידות הפריט משתנות. על מנת לבפסיק את זה יש בתפריט של החלונית Transform לבטל פעולת Dimensions Include Stroke Weight.

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

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

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

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

תתקשרו: 054-5277575

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

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

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

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

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

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

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

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

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



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

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

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

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

ייצור פטרנים חסרי קו תפר מזוהה

מעצבי טקסטיל ולא רק צריכים לעצב תבניות מילוי חוזרות. באילוסטרייטור מילוי בפטרנים הופיע מזמן ומאז כמעט לא שוכלל. כתוצאה קצת קשה ליצור תבניות מילוי חוזרות ללא קו תפר מזוהה. מי שעוסק בזה כל יום ימצא מועיל תוסף (Plug-in) לאילוסטרייטור בשם SymmetryWorks מאת Artlandia.



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

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

באילוסטרייטור ישנם שני סוגי הטקסט: מלל שורה ומלל מסגרת (Point and Area Type). שיטת עבודה המקורית של התוכנה עם המלל היא מלל שורה כאשר פשוט לוחצים בכלי המלל על משטח היצירה ומתחילים להקליד. אם צריכים ליישר את המלל בבלוק או לטפל בגוש טקסט גדול אז משתמשים במסגרת מלל. החיסרון של מסגרות המלל שפחות נוח לטפל בהן. כך אם רוצים לשנות גודל הטקסט צריכים לעשות את זה בחלונית Character ולא עם העכבר כמו כל פריט כי שינוי גודל הפריט עם חץ שחור ישפיע רק על גודל הסגרת ולא על המלל שבתוכה.

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

1. לשנות את גודלה המסגרת בכלי Scale Tool (הקיצור S)

2. שיטה נוחה יותר - לעשות את זה עם Free Transform Tool (הקיצור E)

איך עושים את זה באינדזיין סיפרתי קודם.

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

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

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

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

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

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

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

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

שגר ושכח

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

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

טיפ קטן לשימוש במעברי צבע

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

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

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