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

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

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

מספר של עמוד אחרון האוטומטי באינדזיין CS3 ומעלה

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

כיצד בתחתית כל עמוד למקם כתובת כמו "דף 1 מתוך 12"?

קודם כל שזה יופיע על כל דף צריך לשים את הכיתוב על דף האב. סדר השלבים:

1. בדף אב פותחים מסגרת מלל, מקלידים בה "דף " - מילה "דף" ורווח אחריה.

2. שמים תו למספור אוטומטי באמצעות פקודה: Type > Insert Special Character > Markers > Curient Page Number. מופיעה בדרך כלל אות המסמנת את דף האב.
3. מאחורי האות כותבים " מתוך " ושמים תו משתנה לעמוד אחרון: Type > Text Variables > Insert Variable > Last Page Number.

עם שינוי מספר כולל של העמודים המספר יתעדכן.

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

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

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

שיטת הסמלים

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

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

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

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

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



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

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

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

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

כמה טיפים לשימוש בריבוי העמודים החדש של אילוסטרייטור CS4

טיפ 1 - קווי עזר בכל עמוד בנפרד.

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

אם אתם רוצים שהוא יתמתח רק לרוחב/גובה של עמוד מסוים, כמו באינדזיין או פריהנד, יש לקחת את כלי העמודים (Artboard Tool, Shift+O) ואז למשוך מהסרגלים קו עזר. הוא מתפשט לרוכב או גובה של העמוד הפעיל שמסומן בקו מקווקו.

טיפ 2 - סדר עמודים עברי

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

טיפ 3 - התאמת עמוד לפריט מסוים

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

טיפ 4 - שכפול עמודים

יש לשכפל עמודים עם התוכן על ידי הזזתו בכלי העמודים עם מקש Option (חלונות Alt) לחוץ - ממש כמו שכפול עצמים. אם רוצים לשכפל או להזיז עמוד בלי התוכן שלו צריך לשחרר כפתור Move/Copy Artwork with Artboard בסרגל פקודות המשתנה למעלה:

טיפים חמישי ושישי

יש להמיר כל מלבן לעמוד באמצעות פקודה Object > Convert to Artboard.

שמו לב שבתפריט Select הופיעה פקודה חדשה (השנייה מלמעלה) All in Active Artboard המאפשרת לסמן כל עצמים רק בעמוד פעיל.

ריבויי עמודים באילוסטרייטור CS3 וגרסאות קודמות

זו שאלה טובה למה אדובי חיכתה עד 2008 עם תמיכה בריבויי עמודים באילוסטרייטור. מחד בשנות 1986-99 פורמט אילוסטרייטור היה מבוסס על EPS שלא תומך בריבויי העמודים. מנגד מה הפריע לבסס אותו על PostScript אשר כן תומכת? בשנת 99 יצאה גרסה 9 של אילוסטרייטור המבוססת על PDF אך עדיין אדובי לא מימשה תמיכה בריבויי העמודים ככול הנראה בגלל אינדזיין שיצאה לראשונה גם באותה שנה. עולם העימוד גם ככה קונסרבטיבי ובקושי היה עובר לאינדזיין מ-QuarkXPress, כנראה ריבויי העמודים באילוסטרייטור היה מפריע לתהליך.

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

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

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

שלב 2 - קביעת דף ברוטו
בשיטה זאת יש להוסיף כל צלבים חצי ידנית לכן צריכים להשאיר להם מקום. בשלב שני יוצרים דף ברוטו שיכלול שוליים בשביל צלבי חיתוך והתאמה אם צריך. תוסיפו אבל לא 15-20 ממ' בכל צד כפי שנהוג בפריהנד אלא יותר. הסיבה לכך שהעמודים כאן צמודים זה לזה ואם נשאיר מעט מידי מקום בצדדים יהיה צפוף ועיצובים על פני העמודים יפריעו זה לזה. תוסיפו 50 ממ' לכל צד. למה דווקא 50? כי 50+50 (שוליים בשמאל ובימין, למעלה ולמטה) שווה 100 ואז תוכלו רק לשנות סיפרה ראשונה ברוחב ובגובה ולא תצטרכו לחשב ערכים מסובכים. כך A4 נטו של 210x297 נהפך ל-A4 ברוטו של 310x397.

רצוי לרשום או לזכור את הערכים כי תצטרכו אותם בהמשך.

שלב 3 - ייצור לוח עיצוב
עכשיו תכפילו רוחב (או גובה) של העמוד ב-4 (כי אנחנו צריכים ארבעה עמודים). שימו לב, אם תכפילו גם רוחב וגם גובה יצאו 16 עמודים.

מתקבל לוח עיצוב (Artboard) ארוך במידה 1240x397 ממ'.

שלב 4 - חלוקת לוח העיצוב לעמודים
עושים את זה בתיבת שיחה להדפסה. כנסו ל-...File > Print. תבחרו למעלה ברשימה נגללת Printer שימוש ב-Adobe PostScript File, על יד ב-PPD תקבעו AdobePDF. במרכז תיבת השיחה בתור מידות הדף תקבעו מידות הברוטו של דף אחד שהצעתי לרשום קודם. הפעם זה 310x397.

תעברו למדור Setup בצד שמאל. ב-Tiling תבחרו Tile Full Pages. תוודאו שב-Placement נעמדת נקודה איפהשהו. אם הזזתם ידנית את הצוגה המוקדמת הנקודה תעלם.

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

שלב 5
חזרנו לחלון הפרויקט ולא קרה דבר. החלוקה נעשתה ועכשיו יש להפעיל את תצוגתה. למטרה זו תבצעו פקודה View > Show Page Tiling.

המספרים שאתם רואים אינם יוצאים בדפוס. ניתן לנהל את העמודים שנתקבלו בחלון הדפסה וגם, אם אתם שומרים קבצי PDF דרך Save As (שיטת הייצאו, האמת עדיף Save a Copy) בתיבת שיחה של הפונקציה, מדור General תוכלו לסמן תיבת סימון Create Multi-page PDF from Page Tiles והתוכנה תיצור עמודי PDF מן הריצוף.

שלב 6
6.1 בכלי המלבן תבנו מלבן בגודל A4 ותמקמו אותו במרכז של שאחד הדפים (אפשר לא מדויק).

6.2 תיצרו (רצוי בשכבה נפרדת עליונה יותר) צלבי חותוך ככה: תסמנו את המלבן ותבחרו פקודה Filter > Create > Crop Marks.

6.3 תשכפלו את המלבן עם הצלבים לשאר העמודים.

6.4 תיצרו סביב המלבנים קווי עזר ותעיפו את המלבנים אם לא עומדים להשתמש בהם בעיצוב. או תהפכו אותם לקווי עזר באמצעות פקודה View > Guides > Make Guides.

* * *

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

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

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

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

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

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

על פני דפי עבודה בחלונית העמודים כידוע מופיעים מיקודים באותיות לטיניות, בדרך כלל המסמנות שייכות של דפי העבודה לדפי האב. כשיוצרים את דפי האב התוכנה ממספרת אותם אוטומטית ברצף - A B C D, אבל סימון של דף אב לא סתם נקרא “מיקוד” (Prefix) ולא “מספר”. המיקודים לא חייבים להופיע ברצף.

הבעיה כאן שאותיות A B וגם C D די דומות אחת על השניה. בסוף יום עבודה לעיתים כבר בקושי מבדילים ביניהן בחלונית Pages על פני איקונים של העמודים. ההמלצה - להשתמש במיקודים באותיות שונות בצורתן, כגון: A C L I S F V וכו’.

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

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

עוד שני תכסיסים קטנים בעיניין של דפי האב. על מנת לקרוא להגדרות דף אב לא חייבים לחפש פקודת Master Options for... בתפריט של החלונית. ניתן גם ללחוץ על דף האב בלחצן עכבר ימני ולבחור את הפקודה משם. או בשיטה אחרת פשוט ללחוץ עם Option (חלונות - Alt) על דף אב פעיל. המיקוד והשם של דף האב הפעיל מופיעים על גבי רקע שחור.

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