טיפים לעבודה עם אילוסטרייטור. הנה רעיון מטורף - עצב את פרויקט האינטרנט הבא שלך באילוסטרייטור. אם אתה מעצב אתרים ראשי, רוב הסיכויים שלא תגיב טוב במיוחד להצעה זו. אילוסטרייטור פשוט לא יכול לעשות כל מה שפוטושופ יכול לעשות, נכון?
לא בדיוק.
למרות פוטושופ הפכה לכלי דה פקטו עיצוב אתרים, Illustrator יותר ממסוגל לענות על הצרכים שלך. הודות לכלי הפריסה שלה, היא לרוב תוכנה טובה ומתאימה יותר לעיצוב אתרים.
מכיוון שרוב המקצוענים בעיצוב אתרים לא רוצים להסתובב באילוסטרייטור ולחפש ראיות, ריכזתי רשימה של תכונות הקשורות לאינטרנט שאתה צריך לדעת כדי להתחיל להתנסות בעיצוב אתרים באילוסטרייטור.
נסה כמה כאלה ואני מבטיח שתתחיל להשתמש באילוסטרייטור ככלי סטנדרטי בתהליך העבודה שלך בעיצוב אתרים.
1. דבר ראשון: הגדר את כל היחידות לפיקסלים. טיפים לעבודה עם אילוסטרייטור
כברירת מחדל, Illustrator משתמש במדדים יחידות לגדלים של אובייקט ונקודה עבור טקסט. אלו הן הגדרות נהדרות עבור רוב מצבי העיצוב, אבל עבור עיצוב אתרים סביר להניח שתרצה לראות פיקסלים בכל מקום. אז לפני שתתחיל לעבוד על משהו אחר, ודא שהיחידות שלך מוגדרות כהלכה.
כדי להגדיר את היחידות לפיקסלים:
- פתח בתפריט עריכה
- בחר יחידות מדידה מתפריט המשנה של ההגדרות.
- הגדר את כל האפשרויות ל"פיקסלים"
2. צור מסמכים באמצעות פרופיל מסמכי אינטרנט.
כאשר אתה רוצה להתחיל לעבוד על עיצוב חדש, גלול בקלות דרך חלון המסמך החדש ודלג על כמה פרטים חשובים - כמו לומר ל-Illustrator שאתה מתכנן לעבוד על עיצוב אינטרנט כדי שלא תשתמש בצבעי CMYK. וקצוות מטושטשים של האובייקט. רק זכור לבחור את הגדרת פרופיל האינטרנט בחלון 'מסמך חדש' ותהיה בסדר.
3. אפשר יישור רשת פיקסלים עבור אובייקטים. טיפים לעבודה עם אילוסטרייטור
תכונה זו היא מציל חיים אם אי פעם נתקלת בבעיות עם קצוות צורות מטושטשים בפוטושופ.
יישור רשת פיקסלים יתאים את המקטעים האופקיים והאנכיים הישרים של אובייקט כך שיתאימו בצורה מושלמת לרשת הפיקסלים, תוך שמירה על חלקים מעוקלים ומלוכסנים. התוצאה היא צורות חדות ומושלמות לפיקסלים - משהו שאתה בהחלט רוצה בעיצוב אתרים.
הכפתור העליון מופעל יישור רשת פיקסלים, מה שתמיד מביא לקצוות חדים.
כדי לאפשר יישור רשת פיקסלים ברמת האובייקט:
- בחר אובייקט
- פתח את החלונית Transform (Window > Transform).
- סמן את תיבת הסימון "יישור ל-Pixel Grid" בתחתית הלוח (אם אינך רואה אותה, לחץ פעמיים על הלוח כדי להציג את האפשרויות)
הערה. יישור רשת פיקסלים מופעל כברירת מחדל עבור כל האובייקטים החדשים שנוצרו באמצעות פרופיל מסמך האינטרנט. עם זאת, אם אתה מדביק אובייקטים מקובצי Illustrator אחרים, תצטרך להתאים ידנית את יישור הפיקסלים עבורם. טיפים לעבודה עם אילוסטרייטור
4. הפעל את התצוגה המקדימה של הפיקסלים.
תכונת ה-Pixel-Preview תגרום ל-Illustrator להתנהג בדיוק כמו Photoshop בעת שינוי קנה המידה של התמונה שלך מעל 100% - במקום לקבל וקטורים מושלמים בכל פעם, למעשה תראה את הפיקסלים כאילו אתה עובד עם תמונת רסטר.
הפעלת תצוגה מקדימה של פיקסלים תגרום לך להרגיש כאילו אתה בפוטושופ.
תחשוב על כמה זה מגניב - יש לך את כל הכוח של גרפיקה וקטורית בהישג ידך, ואתה יכול לראות איך התוצאה נראית ברמת הפיקסלים.
מסודר, לא?
הפעל או השבת את התצוגה המקדימה של פיקסל
- פתח את תפריט התצוגה
- בחר Pixel View.
5. השתמש בחלונות גרפיקה. טיפים לעבודה עם אילוסטרייטור
תאר לעצמך ששתי מצלמות וידאו מופנות אל הפרויקט שלך.
למצלמה אחת יש רמת זום רגילה, המראה 100% מהעבודה שלך. למצלמה השנייה יש רמת זום של 400% והיא מכוונת לאייקון ספציפי אחד שעבדת עליו.
כמו מנתח, אתה משתמש במצלמת הזום כדי לבצע שינויים זעירים ברמת הפיקסלים בסמל, ומדי פעם מציץ במצלמת 100% זום כדי לראות איך היא באמת נראית בגודלה האמיתי.
חלונות כיסוי הם נהדרים כאשר אתה צריך לעבוד עם אלמנטים קטנים כמו סמלים - אתה לא צריך כל הזמן להתקרב ולהקטין כדי לבדוק איך הכל נראה.
אלו הם חלונות גרפיקה - הם מאפשרים לך להציג את העיצוב שלך בו זמנית עם רמות זום שונות, הגדרות צבע וגרסאות אחרות. זה מאוד שימושי עבור עיצוב אתרים, במיוחד כאשר אתה עובד עם פרטים ברמת הפיקסלים.
כדי להשתמש בחלונות גרפיקה:
- פתח את תפריט החלון ולאחר מכן בחר חלון חדש. Illustrator יצור כרטיסייה חדשה עם אותו מסמך בתצוגה.
- עבור שוב אל תפריט החלון, בחר ארגן > העבר הכל לחלון. זה יאפשר לך לשנות גודל ומיקום חלונות אחד ליד השני כראות עיניכם.
- נסה עם רמות זום שונות בחלונות והתחל לבצע כמה שינויים כדי לראות איך זה עובד. טיפים לעבודה עם אילוסטרייטור
6. השתמש בסמלים כדי ליצור במהירות כפתורים, סמלים ועוד.
כמה פעמים יצרת את אותו (או כמעט אותו) כפתור, סמל או ווידג'ט בפוטושופ? אם אתה בעניין של עיצוב אתרים, אתה כנראה עושה את זה כל יום.
אילוסטרייטור יכול לעזור לך לחסוך זמן ולהימנע מעבודה חוזרת זו עם סמלים.
בעצם, סמלים הם קבוצה אינסופית של מוכנים אלמנטים עיצוביים, שניתן להוסיף לעבודה על ידי גרירה ושחרור, ולאחר מכן לשנות לפי הצורך. זה אידיאלי עבור כפתורים, סמלים ואובייקטים סטנדרטיים אחרים שאין צורך ליצור מאפס.
אבל יש סיבה נוספת לכך שסמלים הם רבי עוצמה, והיא נקראת מופע.
סמלים הם לא רק נוחים, אלא הם גם מקלים על עדכון אלמנטים עיצוביים חוזרים.
בעיקרו של דבר, בכל פעם שאתה מבצע שינויים בסמל המקורי, שינויים אלה באים לידי ביטוי מיד בכל המקרים של הסמל שנמצא ביצירות האמנות שלך. האם אתה צריך כפתורים גדולים יותר באתר שלך? פשוט שנה את הסמל. האם אתה רוצה ששדות הטופס שלך ייראו אחרת בכל עמוד? פשוט שנה את הסמל. קלטת את הרעיון.
טיפ: אם אינך רוצה שזה יקרה למופע ספציפי של הסמל, לחץ באמצעות לחצן העכבר הימני על האובייקט באיור שלך ובחר Break Symbol Reference. זה לא יכלול אותו בעדכונים אוטומטיים.
להלן סרטון טוב המסביר כיצד להשתמש בסמלים ולתפעל אותם:
שימוש בסמלים ב-Adobe Illustrator של Adobe TV .
כדי להשתמש בסמל קיים:
- פתח את חלונית הסמלים מתפריט החלון.
- גרור את הסמל שנבחר אל העבודה שלך
צור סמל חדש:
- צור תמונת סמל
- פתח את חלונית הסמלים מתפריט החלון.
- גרור איור אל הלוח
- לחץ על אישור בתיבת הדו-שיח כדי לאשר.
כדי לערוך סמל:
- פתח את חלונית הסמלים מתפריט החלון.
- לחץ פעמיים על סמל כדי להיכנס למצב עריכה.
- בסיום, לחץ פעמיים בכל מקום מחוץ לתמונת הסמל כדי לצאת ממצב עריכה.
7. הרחב אובייקטים בקלות עם קנה מידה של 9 פלחים. טיפים לעבודה עם אילוסטרייטור
זוהי תכונת סימבולגיה מתקדמת המאפשרת להגדיר אילו חלקים של אובייקט נמתחים במהלך קנה המידה ואילו נשארים ללא שינוי.
שמאל: דוגמה לכפתור מתוח עם ובלי הגדרת הזום של 9 פלחים. מימין: הגדרת קנה המידה של 9 פלחים כוללת הזזת 4 קווי עזר שאומרים ל-Illustrator אילו חלקים של האובייקט מוגנים ואילו חלקים ניתן לשנות קנה מידה.
דוגמה מעשית היא כפתור עם פינות מעוגלות - אם אתה רוצה להאריך אותו, אתה לא יכול פשוט למתוח אותו אופקית כי זה יעוות את כל האובייקט. במקום זאת, תצטרך להזיז ידנית את נקודות הצורה. עם קנה מידה של 9 מקטעים, המתיחה פועלת כפי שהתכוונת. טיפים לעבודה עם אילוסטרייטור
כדי להבין באמת איך זה עובד, האזן למדריך הווידאו הנהדר הזה מ-Adobe TV כדי להתעדכן במהירות:
שימוש בקנה מידה של 9 מקטעים עם סמלים של Adobe TV .
8. פינות מעוגלות בכל מקום!
אתה יכול ליצור מלבן מעוגל בפוטושופ, אבל אילוסטרייטור מאפשר לך להחיל אפקט פינה מעוגלת לא הרסנית כמעט על כל אובייקט. מהי השפעה לא הרסנית? זה אומר שאתה יכול להפעיל, לכבות או לשנות את ההגדרות שלו מבלי להשפיע על האובייקט המקורי הבסיסי.
אתה יכול להחיל את אפקט הפינות המעוגלות כמעט על כל סוג של אובייקט ולהתאים אותו לפי הצורך. טיפים לעבודה עם אילוסטרייטור
כדי להחיל את אפקט הפינה המעוגלת:
- צור מלבן או כל אובייקט אחר עם פינות חדות
- מתפריט אפקטים, בחרו בסגנן > פינות מעוגלות.
- הזן רדיוס פינתי ולחץ על תצוגה מקדימה כדי לראות איך זה נראה.
- לחץ על אישור כדי להחיל את האפקט.
כדי לשנות את אפקט הפינה המעוגלת:
- בחר אובייקט עם פינות מעוגלות
- פתח את חלונית המראה מתפריט החלון.
- מצא את אפקט הפינות המעוגלות ולחץ עליו פעמיים כדי לשנות את ההגדרות שלו, או לחץ על סמל העין כדי להפעיל או לכבות אותו.
9. יצירת מילוי מהיר עם תבנית רסטר. טיפים לעבודה עם אילוסטרייטור
דפוסי רקע עדינים הם להיט גדול בעיצוב אתרים, אבל מעצבים רבים חושבים שלא קל ליישם אותם באילוסטרייטור.
אני חייב להודות שזה לא אינטואיטיבי, אבל הפתרון פשוט.
כדי ליצור תבנית מפת סיביות:
- הנח תמונה של הדוגמה על היצירה שלך
- לחץ על "הוסף" בסרט העליון (חשוב - זה לא יעבוד בלעדיו!)
- גרור תבנית ללוח הדוגמיות
- החל דוגמית על כל אובייקט כדי למלא אותו בדוגמה
10. מיקום אוטומטי של טקסט סביב תמונות ואובייקטים.
פוטושופ ידועה ביכולות עריכת הטקסט המאוד בסיסיות שלה. אם ברצונך לעטוף טקסט סביב תמונה, עליך ליצור שתיים או שלוש מסגרות טקסט שונות ולדמות את האפקט. טיפים לעבודה עם אילוסטרייטור
למרבה המזל, אילוסטרייטור סיקר אותך.
כדי לעטוף טקסט סביב תמונה:
- בחר את התמונה או האובייקט שברצונך לעטוף טקסט סביבו
- פתח את תפריט האובייקט, בחר גלישת טקסט > חדש.
- כדי להגדיר את מרחק גלישת טקסט, פתח שוב את תפריט גלישת טקסט ובחר אפשרויות גלישת טקסט.
- העבר את התמונה על הטקסט כדי לראות את אפקט העטיפה
11. צור אפקטים חזותיים עשירים עם הגדרות מראה האובייקט. טיפים לעבודה עם אילוסטרייטור
ב-Illustrator, חלונית המראה של אובייקט עובדת בדומה לאפקטים של שכבות ב-Photoshop - אתה יכול להוסיף לאובייקט מילויים מרובים, ולאחר מכן לשחק עם מצבי ההעברה, האטימות והאפקטים שלהם כדי לקבל תוצאות מעניינות.
טקסט זה הוא רק אובייקט וקטור אחד, המעוצב באמצעות החלונית Appearance and Effects.
מגרש המשחקים די גדול - מצלליות, טשטוש וזוהר ועד לטקסטורה, עיוות ותלת מימד. כך תוכלו ליצור מחדש את רוב האפקטים מפוטושופ תוך כדי עבודה עם גרפיקה וקטורית.
פאנל המראה עוצמתי ומהנה - אני ממליץ לך לנסות אותו מיד או לצפות במדריך למטה כדי להבין איך זה עובד:
שליטה בלוח המראה של Adobe TV .
האם אתה מוכן להתחיל להתנסות עם אילוסטרייטור?
יצירת אתרים וממשקי משתמש באמצעות פוטושופ הפכה כעת לנורמה ורוב המעצבים מרוצים מהפתרון הזה. טיפים לעבודה עם אילוסטרייטור
אבל רק בגלל שפוטושופ הפכה לנפוצה כל כך לא אומר שלילוסטרייטור אין מה להציע - להיפך. עם כלים כמו יישור רשת פיקסלים, גלישת טקסט ומראה אובייקט, זה מהווה רישיון חזק.
בשילוב עם עוצמתי כלי פריסה וגרפיקה וקטורית, חיתוך וייצוא תמונות, אילוסטרייטור היא בהחלט בחירה ברורה עבור מעצבי אתרים שרוצים לפתח אתרים במהירות.
השאירו תגובה