מושגי יסוד בעיצוב גראפי לאתרים

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

פורמאט האתר

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

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

קבצי GIF

    * קבצי GIF הם הטובים ביותר עבור תמונות עם פחות צבעים וצבעים "שטוחים" . מתאים עבור "גרפיקה יצוגית", לדוגמא: תרשימים, גרפים, או טקסט הבנוי כגרפיקה . ככל שיש פחות צבעים, קבצי ה-GIF  יהיו יעילים יותר.     
קבצי GIF יכולים להכיל עד 256 צבעים.

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

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

קבצי JPEG

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

קבצי PNG

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

מתי להשתמש במה ?

הטעות הגראפית הנפוצה ביותר שנעשית באתרים היא בחירה לא מתאימה של פורמט עבור התמונות. למעשה הבחירה היא פשוטה למדי:
 
    * אם יש מעט צבעים בגרפיקה, בחר GIF.
       
    * אם הגרפיקה מכילה רבה צבעים (כמו בתצלומים), בחר JPG.

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

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

עומק הצבע

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

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

דע את מגבלותיך

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

| בניית אתר אינטרנט | הקמת אתרי אינטרנט |