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

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

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

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

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

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

אזן את איכות התמונה עם גודל הקובץ.

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

בחר בתבנית הקובץ המתאימה ביותר לגרפיקה.

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

אודות מצב תצוגה מקדימה של פיקסלים

כדי לאפשר למעצבי אינטרנט ליצור עיצובים בעלי פיקסלים מדויקים, נוסף ל- Illustrator מאפיין יישור הפיקסלים. כאשר מאפיין יישור הפיקסלים מופעל עבור אובייקט, כל המקטעים האופקיים והאנכיים באובייקט מתיישרים בהתאם לרשת הפיקסלים, דבר שמספק למשיחות מראה חד. בכל שינוי צורה, כל עוד מאפיין זה מוגדר עבור האובייקט, הוא מתיישר מחדש לפי רשת הפיקסלים בהתאם לקואורדינטות החדשות שלה. ניתן להפעיל מאפיין זה על-ידי בחירה באפשרות Align to Pixel Grid מהחלונית Transform.‏ Illustrator מספק גם את האפשרות Align New Objects to Pixel Grid ברמת המסמך, שמופעלת כברירת מחדל עבור מסמכי אינטרנט. כאשר מאפיין יישור הפיקסלים מופעל, הוא מוגדר כברירת מחדל עבור כל האובייקטים החדשים שמציירים.

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

בעת שמירת גרפיקה בתבנית Bitmap – כגון JPEG,‏ GIF או PNG‏, Illustrator מוסיף רסטר לגרפיקה ב-72 פיקסלים לאינץ'. ניתן להציג בתצוגה מקדימה כיצד ייראו אובייקטים לאחר הוספת רסטר, באמצעות בחירה באפשרות View ‏‍‏> Pixel Preview. הדבר שימושי במיוחד כשרוצים לשלוט במיקום המדויק, בגודל ובהחלקה של אובייקטים בגרפיקה עם רסטר .

כדי להבין כיצד Illustrator מחלקת אובייקטים לפיקסלים, פתחו קובץ שמכיל אובייקטים וקטוריים, בחר View ‏‍‏> Pixel Preview, והגדל את הגרפיקה כך שתוכל לראות את הפיקסלים הבודדים. מיקום הפיקסלים נקבע לפי רשת הפיקסלים שמחלקת את משטח היצירה לדרגות בגודל נקודה אחת (1/72 אינץ'). ניתן להציג את רשת הפיקסלים בעת הגדלת התצוגה  ל- 600%. בעת הזזה, הוספה או שינוי צורה של אובייקט, האובייקט נצמד לרשת הפיקסלים. כתוצאה מכך, כל החלקה לאורך קצוות האובייקט ה"מוצמדים" (בדרך כלל, הקצה השמאלי והקצה העליון) נעלמת. כעת, בטל את הבחירה בפקודה View ‏‍‏> Snap To Pixel, והזז את האובייקט. הפעם, תוכל למקם את האובייקט בין קווי הרשת. שים לב שהדבר משפיע על ההחלקה של האובייקט. כפי שאתה רואה, ביצוע  התאמות  קלות יכול להשפיע על אופן הוספת הרסטר לאובייקט.

עצות ליצירת תמונות Illustrator למכשירים ניידים

כדי להתאים תוכן גרפי למכשירים ניידים, שמור גרפיקה שנוצרה ב-Illustrator בתבנית SVG כלשהי, כולל SVG‑t, שנועדה במיוחד למכשירים ניידים.

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

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

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

• הגדר את מצב הצבעים של Illustrator ל-RGB. ניתן להציג קובץ SVG בהתקנים התומכים בצבעי רסטר RGB, כגון צג מחשב.

• כדי לצמצם את נפח הקובץ, נסה להפחית את מספר האובייקטים (כולל קבוצות) או לפשט אותם (פחות נקודות). שימוש במספר קטן יותר של נקודות מצמצם באופן משמעותי את כמות המידע הטקסטואלי הדרוש לתיאור הגרפיקה בקובץ SVG. להפחתת נקודות, בחר Object ‏‍‏> Path ‏‍‏> Simplify ונסה צירופים שונים כדי למצוא את היחס הנכון בין האיכות למספר הנקודות.

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

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

• שקול להשתמש ב-SVGZ, הגרסה הדחוסה של SVG. הדחיסה יכולה להקטין את נפח הקובץ, בהתאם לתוכן. מלל ניתן לדחוס במידה רבה, אך תוכן עם קידוד בינארי, כגון תמונות רסטר מוטמעות (קובצי JPEG‏, PNG או GIF), לא ניתן לדחוס בצורה משמעותית. קובצי SVGZ דחוסים ניתן לפרוס בכל יישום הפורס קבצים שנדחסו בשיטת gzip. כדי להשתמש בתבנית SGVZ בהצלחה, בדוק שהמכשיר הנייד שמוגדר כיעד יכול לפרוס קובצי gzip דחוסים.