הצגת קבצי PNG בתוכניות WiseKid

 

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

בצילום המסך הראשון מוצגת תמונה של כדור הארץ בפורמט רגיל ללא הגדרת שקיפות:


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


האם דרוש הסבר נוסף לאיכויות העדיפות של תמונה בפורמט PNG?

במאמר זה נכיר את השימוש בתמונות בפורמט PNG , כלי ליצירת תמונות בפורמט PNG והצגתם באמצעות האובייקטים הגראפיים של WiseKid.

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

מבנה הצבע – ARGB

המסכים מורכבים מפיקסלים, מטבלה דו ממדית של הרבה מאוד פיקסלים, כמות הפיקסלים נקבעת על פי הרזולוציה של המסך,
לדוגמה: במסך ברזולוציה 768 X1280 מורכב מ-768 שורות שבכל אחת יש 1280 פיקסלים, סה"כ המסך מכיל 983040 פיקסלים.

צבע כל פיקסל מוגדר באמצעות שילוב של 3 צבעי יסוד מסך הנקראים RGB :
R – מייצג את מידת הצבע האדום.
G – מייצג את מידת הצבע הירוק.
B – מייצג את מידת הצבע הכחול.

כל אחד מהצבעים הללו יכול לקבל ערך הנע מ- 0 ועד 255, הערך קובע את העוצמה ואת מידת ההשפעה של כל אחד מהצבעים הבודדים (R ,G או B) בצבע הפיקסל.
צבע הפיקסל נוצר משילוב של עוצמות שונות של כל אחד מהצבעים המרכיבים את ה- RGB.

לדוגמה:


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

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


 

יצירת קבצי PNG

ישנן לא מעט תוכנות ליצירת ועיבוד קבצי PNG, אני משתמש בתוכנה חינמית הנקראת Paint.NET שניתן להורידה מהכתובת:

http://www.getpaint.net/index.html


Paint.NET היא תוכנת "קוד פתוח" שנכתבה בשפת C#.
אמנם לא מדובר בתוכנת עיבוד תמונות מאוד מקצועית, אבל בהחלט יש לה הרבה יכולות והיא יחסית ידידותית.

תחילת העבודה עם Paint.NET

כאשר החלון הראשי של Paint.NET מוצג, מוגדר בו קובץ חדש וריק, ניתן אמנם להשתמש בו אולם לרוב הוא יהיה גדול מדי ולכן נפתח קובץ חדש משלנו ונגדיר את גודלו הרצוי.

פתיחת קובץ חדש דרך התפריט : File->New, או באמצעות האייקון או לחילופין באמצעות שילוב המקשים ctrl+N .

עם בחירת "קובץ חדש" נפתח חלון הגדרות בו נגדיר את גודל הקובץ הרצוי:


קיבלנו "בד ציור" בגודל 200 פיקסלים על 200 פיקסלים:


"בד הציור" שלנו צבוע בלבן ללא שקיפות, ולכן אם נדרש שקיפות נסיר את הצבע הלבן.
על מנת להסירו יש ללחוץ על שילוב המקשים ctrl+A , לוודא שהוא מוקף במסגרת מקווקוות וללחוץ על המקש del.

קיבלנו "בד ציור" שקוף:


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


מחלונית Colors נבחר את הצבע, כברירת מחדל הצבע הוא באטימות מלאה, על מנת לבחור אלפא (מידת שקיפות), נרחיב את החלון באמצעות לחיצה על הלחצן More.




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

נוסיף צורות נוספות, בצבעים שונים ובמידות שקיפות שונות:


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


 

החלון הבא שמופיע: Save Configuration בוחרים Default ושומרים:


והתוצר בקוד :


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

פוסט זה פורסם בקטגוריה WiseKid כללי, עם התגים , . אפשר להגיע ישירות לפוסט זה עם קישור ישיר.

כתיבת תגובה