חיפוש בבלוג ואתרים רלוונטיים: בעברית, אנגלית ורוסית

‏הצגת רשומות עם תוויות אפקטים. הצג את כל הרשומות
‏הצגת רשומות עם תוויות אפקטים. הצג את כל הרשומות

יום שני, 6 ביולי 2009

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

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

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

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

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

Scale-Strokes-and-Effects-3.png


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

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

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

Scale-Strokes-and-Effects-2.png

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

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

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

Scale-Strokes-and-Effects-1.png


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

יום ראשון, 22 במרץ 2009

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

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

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

No-Anti-Aliasing-1.png


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

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

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

No-Anti-Aliasing-2.png


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

יום שבת, 21 בפברואר 2009

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

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

appearance-learning-1.png


למקרה שבעיצוב נכללים אפקטים שאתם לא מכירים ולא יודעים היכן הם נמצאים ישנה דרך קלה מאוד (אבל רק ב-Mac OS X Leopard) לאתר אותם. גשו לתפריט Help, למעלה מופיע שדה חיפוש בתפריטים. תזינו שם האפקט שלא מוכר (בתמונה הזנתי film grain), תשימו עכבר מעל אפשרות מתאימה מהרשימה ומערכת ההפעלה תפתח תפריטים איפה זה נמצא ותדגיש אפילו בחץ מסתובב.

appearance-learning-2.png


כן, שווה לעבור למק :)

יום שבת, 14 בפברואר 2009

סוגים של קבצי PDF

בהתחלה הרעיון של אדובי היה ליצור פורמט PDF שיהיה מתחרה של MS Office, לכן גרסאות ראשונות של הפורמט לא תמכו בתכונות הדפוס באופן כללי וב-CMYK בפרט. הצד החזק של הטכנולוגיה שגרם לנפיצות של PDF הוא אפשרות ליצור PDF בכל תוכנה על-ידי פעולת הדפסה אל תוך קובץ מסוג PostScript והמרתו בשלב הבא ל-PDF באמצעות תוכנת Acrobat Distiller. זאת גם הסיבה למה שימוש ב-PDF התפשט מהר בקרב של מעצבים ומומחי דפוס. נוסף על כך בניגוד ל-PostScript קובץ PDF דל-משקל וב-Acrobat קל לראות את התוצאה.

מגרסה 1.2 (שהייתה פורמט פנימי של Acrobat 3) אדובי ממשה סוף-סוף תמוכה בסיסית בצורכי הדפוס ומגרסה 1.3 (Acrobat 4) נתמכות כל תכונות עקרוניות לדפוס.

עוד יתרון של PDF - הוא מאפשר תמיכה בשקיפות ואפקטים שאיננה ב-PostScript. מגרסה 1.4 (Acrobat 5) השקיפות והאפקטים נתמכים. זאת דרך אגב הייתה הסיבה למה פורמט AI, שהוא פורמט פנימי של תוכנת אילוסטרייטור, יעובר להתבסס על PDF במקום PostScript. טכנולוגיית PostScript לא תומכת בשקיפות ואילוסטרייטור צריכה להתקדם. המעבר ל-PDF איפשר מהפכה, התפוצצות בפונקציונליות שקרתה באילוסטרייטור 9 לפני עשר שנים. רוב השיטות המתקדמות שאנו מכירים היום הופיעו לראשונה בגרסה 9.

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

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

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

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

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

יום שישי, 2 בינואר 2009

סגנונות גרפיים באילוסטרייטור CS4

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

אם לוחצים על סגנון (מעניקים עותו לפריט) בחלונית Graphic Styles עם מקש Option (חלונות Alt) תכונות הסגנון לא מחליפות אלא מצטרפות למרכיבי העיצוב הקודמים של הפריט. שימו לב - מרכיבי העיצוב החדשים שהגיעו מהסגנון מופיעים בחלונית Appearance מתחת למקוריים.

יום חמישי, 25 בדצמבר 2008

עיגול פינות מובחרות באילוסטרייטור

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

בשלב ראשון יוצרים מלבן. מסמנים בחלונית Appearance את שורת המילוי שלו (Fill). מעניקים למילוי אפקט Round Corners באמצעיות פקודה Effect > Stylize > Round Corners. אם לא סימנתם יש לגרור את רשומת האפקט אל תוך רשומת המילוי.

Round-Corners-1-1.png


שלב שני - מוסיפים למלבן עוד מילוי (Fill) נוסף על-ידי פקודה Add New Fill בתפריט החלונית Appearance או באמצעות קיצור דרך Command (Ctrl) + / (קישור לפוסט המקביל). יש לגרור את המילוי החדש מעל הקיים אם הוא מופיע תחתיו.

שלב שלישי - מסמנים את המילוי החדש ומעניקים לו אפקט Effect > Distort & Transform > Transform. בחלון שנפתח יש לקבוע נקודת היחס בצד ימין וגודל המילוי באחוזים (ביחס למידות הפריט) למעלה.

Round-Corners-1-2.png


התוצעה:

Round-Corners-1-3.png


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

Round-Corners-1-4.png

יום שישי, 12 בדצמבר 2008

כיצד לצבוע קו מקיף במעבר צבע באילוסטרייטור

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

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

outline-stroke-1.png


שלב 2 - קובעים למסלול זה אפקט Effect > Path > Offcet Path. אם, לדוגמה, צריכים קו בעובי 3 ממ' ההגדרה של Offcet Path אמורה להיות חצי מהעובי הנדרש - 1,5 ממ'.

outline-stroke-2.png


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

outline-stroke-3.png


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

outline-stroke-4.png

יום שבת, 6 בדצמבר 2008

פרטי שימוש במרכיבי העיצוב באילוסטרייטור

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

קיצורי דרך
כאשר רוצים להוסיף עוד מרכיב העיצוב: מילוי נוסף או קו מקיף לפריט לוחצים על לחצן Duplicate Selected Item אשר השני משמאל בתחתית החלונית. כפי שנובע משמו הוא משכפל מרכיב העיצוב (מילוי או קו מקיף) ומשכפלו עם כל תכונותיו שיש: אפקטים, מצבי חפיפה ואחוז השקיפות. אבל אנחנו לא תמיד צריכים את זה. יתר על כך - אנחנו בדרך כלל יוצרים עוד מרכיב העיצוב בשביל לעשות אותו שונה מהקודמים. ב-CS4 סוף-סוף הוסיפו שני לחצנים נוספים בתחתית החלונית המאפשרים ליצור עוד מילוי או קו מקיף נוספים. אמנם גם למשתמשי CS3, CS2, CS כמו כן גרסאות 10 ו-9 יש פתרון. והוא פשוט:

להוספה מהירה של מילוי נוסף ללא תכונות (רק צבע) יש ללחוץ Command (Ctrl) + /

להוספה מהירה של קו מקיף נוסף ללא תכונות (רק צבע ועובי הקו ) יש ללחוץ Command + Option (Ctrl+Alt) + /

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

appearance1-1.png


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

appearance1-2.png


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

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

appearance1-3.png

יום חמישי, 13 בנובמבר 2008

היפוך פריט עם האפקטים שלו

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

rotating-symbols-1.png


כמובן אפשר לפשט את האובייקט ולפרק את האפקטים שלו בפקודה Object > Expand Appearance, אבל זה פתרון לא כל-כך טוב כי חוסם אפשרות לשנות את האפקטים בהמשך. דרך טובה יותר היא ליצור סמל (symbol) מהפריט ואז לסובב את מופע הסמל (symbol instance) - האפקטים יוסבבו יחד עם הפריט.

rotating-symbols-2.png

יום רביעי, 5 בנובמבר 2008

פתרון בעיות בעזרת אפקט Rasterize

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

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

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

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

אני מקוה שהידע שלי עוזר לכם