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

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

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

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

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

Uniq UI: המדריך לעולם חוויית המשתמש

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

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

הוזמנתי על-ידי ברק דנין להשתתף בפודקאסט שלו "פשוט. שימושי", פרק 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

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

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

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

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

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

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

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

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

ידעתם שיש גם 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 אדובי תומכת בריבוי מסכים. זאת אומרת שהחלוניות זוכרות את מקומן בכל מסכים שיש לאחר עלית התוכנה מחדש.

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

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

גופנים ללא החלקה באילוסטרייטור

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

הסוד הוא להשתמש באפקט Rasterize עם רזולוציה 72 dpi וללא ההחלקה:

טריק זה עובד לא אם כל פונטים אלא בעיקר עם אלה שהותאמו לשימוש בממשקי משתמש: Verdana, Tahoma, Arial, Trebuchet וכו'.

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

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

הפתרון גם פה זה גם שימוש באפקט Rasterize.

Layer Comps באילוסטרייטור

נהוג לחשוב שבאילוסטרייטור אין Layer Comps כמו בפוטושופ. זה לא בדיוק נכון. באמת איננה חלונית Layer Comps, אבל למרות כך ישנה דרך לשמור מצב תצוגת השכבות. בשמירת מצב תצוגה (View > New View...) התוכנה שומרת הן מקום המסך וקנה מידה של תצוגתו אלא גם מצב תצוגת שכבות.

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

לנוחות השימוש במצבי התצוגה השמורים יש להעניק להם קיצורי דרך. גשו ל-Edit > Keyboard Shortcuts, תעברו ברשימה הניגללת השניה מלמעלה ל-Menu Commands ורשימת פקודות של התפריט View למעטה תראו רשימה של Custom Views. תעניקו להם קיצורים וכך תוכלו לעבור בין מצבי התצוגה השמורים.

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