ב-Online
 
 
 
 
 
 
 
 
פונטים מצויירים 

פונטים מצויירים

 
 
שוש פורבס

כיצד תפחיתו את גודלן של תמונות באתר שלכם מבלי לאבד מאיכותן

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

איך משתמשים בפונטים מצויירים?

 
אחרי שמורידים את הפונטים בהם אנו מעוניינים (קישורים לאתרים מומלצים תמצאו בצד ימין), מתקינים אותם בחלונות כמו שמתקינים כל פונט אחר: מעתיקים את קובץ הפונט (ttf) לספריית הפונטים של חלונות (בדרך כלל c:\windows\fonts)

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

השימוש במפת התווים

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

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

הכנסת התמונות לתוכנת הגרפיקה

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

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

מה אפשר לעשות עם ה?Dingbats

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

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

יש גם פונטים עם צורות מוכנות לכפתורים. למשל Button Button המכיל צורות מוכנות של כפתורים, או Carr Arrows המכיל חיצים בצורות שונות, המעולים ככפתורי ניווט (הקודם, הבא וכו`).
 

קווים מפרידים

 
הקו המפריד שנוצר על ידי HTML מכוער למדי. למה שלא נחליף אותו במשהו יותר יפה שיצרנו במו עכברנו? הנה שתי דרכים קלות:

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

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

רקעים

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

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

כל הזכויות שמורות 2011 © נענע 10 בע"מ
 
 
 
 
כל הזכויות שמורות © Nana10 בע"מ
Video powered by