Unit 3 การออกแบบ Background ไว้ใช้เอง

การออกแบบ Background ไว้ใช้เอง จะเป็นประโยชน์มากครับ สำหรับกรณีที่ เราได้ทำการสร้าง ToolBook ขึ้นมา 1 งาน แล้วงานที่เราใช้ ต้องการความสวยงาม และรูปแบบที่เหมาะสม เมื่อเวลาการนำเสนอ ให้มีความสอดคล้อง กับเนื้อหานั้น

สิ่งแรกที่ต้องตระเตรียม

• รูปแบบของเนื้อหาที่ต้องการนำเสนอ ถือว่าเป็นสิ่งจำเป็นอย่างมาก หากเรากำลังจะทำ สื่อการเรียนการสอน ขึ้นมา แต่ยังไม่รู้เลยว่าจะเริ่มยังไง ก็คงจะไม่ดีแน่ใช่ไหมครับ เอาเป้นว่า ร่างเอาไว้กระดาษก่อนก็ได้ครับ เช่น โปรเจคที่ผมจะแนะนำ (เกี่ยวกับการทำเนื้อหา เกี่ยวกับการสอน Internet โดยการใช้สื่อ ToolBook เป็นตัวสร้าง) ซึ่งจะมีส่วนประกอบ ดังนี้

1. บทนำ (คำนำ) เป็นเหมือนกับการจัดหนังสือเล่มหนึ่งนะครับ ว่าต้องการจะนำเสนออะไรให้เขาทราบ

2. เมนูหลัก เพื่อที่ผู้ใช้จะได้เลือกรายการถูกว่า ต้องการจะไปในหัวข้อใด

3. เนื้อหาในแต่ละบท เช่น (หัวข้อในแต่ละเรื่อง) วิธีการแก้ไขปัญหา Virus , นานาสาระ , ศัพท์ที่ควรรู้ เป็นต้น จะสังเกตว่าเนื้อหาจะแบ่งได้ชัดเจน ในแต่ละหัวข้อ

4. การนำเสนอ โดยการใช้สื่อคอมพิวเตอร์ สิ่งหนึ่งที่จะขาดไม่ได้เลย คือ Background ใน 1งานไม่จำเป็นว่าจะต้องมี Backgroundเดียว อาจจะมีมากกว่า ก็ได้

5. Effect (เทคนิคพิเศษ) การนำเสนอที่น่าสนใจ ไม่ใช่ว่าพอจบเนื้อหนึ่งไปแล้ว ก็ไปในส่วนต่อไปเลย โดยขาดการใช้ Effect ที่ช่วยส่งงานให้ดูน่าสนใจ อาจจะประกอบด้วย การสร้างปุ่ม เช่น เมื่อกดปุ่มแล้ว จะมีการเปลี่ยนสี หรือ การเปลี่ยนฉากของการ Link ไปหาวัตถุ หรือเนื้อหา ในส่วนต่อไป เป็นต้น

• ทดสอบ ถือว่าหลังจากที่ได้ทำการสร้างเสร็จแล้ว แน่นอนว่า ต้องลองทดลองดูก่อนว่า รูปแบบการนำเสนอใช้งานเป็นอย่างไร ยาก หรือว่าง่ายอย่างไรบ้าง ที่สำคัญ มีข้อผิดพลาดจากการรันโปรแกรม หรือไม่ ถ้าไม่มีปัญหา ก็สามารถ นำมาใช้งานได้

• สร้างระบบการติดตั้ง หากเปรียบเหมือนการเขียนโปรแกรม ซึ่งอาจจะมองเหมือนกับการเขียน โปรแกรมที่ทำการ คอมไพล์ แล้ว เพื่อป้องกันการแก้ไขโปรแกรม และสามารถให้โปรแกรมทำงานได้ทุก Plateform จึงควรสร้างระบบการติดตั้ง ขึ้นมา หาก ไม่อยากสร้างอาจจะทำการคอมไพล์เป็น นามสกุล .EXE ก็ได้ซึ่งก็ง่าย เช่นกัน

เริ่มลงมือสร้าง Background
หลังจากที่ผมพาอ้อมเขาไปเสียนาน ก็ควรจะถึงเวลาแล้วที่จะเริ่มลงมือสร้าง Background กันซะทีนะครับ สิ่งต่อมาที่อยากให้นึกถึง ก็คือ เครื่องที่คุณใช้อยู่นั้น มีการติดตั้งโปรแกรมกราฟิค บ้างหรือเปล่า เช่น PhotoShop , CorelDraw เป็นต้น แต่ผมอยากแนะนำ ให้ทำการติด PhotoShop ดีกว่านะครับ เพราะอย่างแรก ง่ายและสะดวกในการใช้งาน แถมเครื่องไม้เครื่องมือ ก็คุ้นๆคล้ายกับ การใช้โปรแกรม Paint ที่อยู่ใน Windows นั่นแหละครับ (หรือว่า ไม่คุ้นเลยสักอย่าง..)ไม่เป็นไรครับ เดี๋ยวผมจะแนะนำให้ จนสามารถใช้งานได้นั่นแหละครับ เอาง่ายก่อนนะครับ

• อุปกรณ์ ที่ผมอยากจะเพิ่มเติมไป คือ แผ่น Clipart หรือประเภท รูปภาพ ,Background ต่างๆ แต่ไม่ใช่ เราเอา Background มาใช้นะครับ เพียงแต่ เราจะมาใช้ในการสร้างลวดลายนะครับ

ขั้นตอนการทำ Background

640 x 480 pixel

นี่เป็นรูปแบบของ Background ที่เรา สร้างขึ้นมาเอง โดย อาศัย Background ที่เป็นรูป ดังนี้ (นำมาสร้าง) ข้อสำคัญ การ Save งานเมื่อนำมาใช้ใน ToolBook จะต้องกำหนดเป็น .BMP อย่างเดียวเท่านั้น เพราะหากทำการบันทึก เป็นอย่างอื่น ที่แตกต่างๆออกไป จะไม่สามารถนำมาใช้ สร้าง Background ได้ และขนาดมาตราฐาน ของการกำหนดค่าเริ่มต้น ควร จะอยู่ที่ 640 x 480 Pixel จะเหมาะกับการใช้สร้างงานนี้ ซึ่งขั้นตอน จะนำเสนอ ต่อไปนี้

ก่อนทำการสร้าง Background (640 x 480 Pixel)

งานนี้ ผมได้ทำการส่ง File รูปภาพ ซึ่งถือว่าเป็นใบงานหนึ่ง ื้ที่อยากให้ลองปฏิบัติดูตามขั้นตอน ซึ่งจะทำให้เข้าใจง่าย และสามารถปฏิบัติตามได้อย่างรวดเร็ว (หากทำเสร็จแล้ว ส่งกลับมาตามเมล์ที่ติดต่อ..)

เริ่มต้น เข้าไปยังโปรแกรม PhotoShop 5 หรือ จะเป็น Version 4 ก็ได้

• เปิดโปรแกรม PhotoShop ขึ้นมา จากนั้น ทำการใส่แผ่น Clipart ที่มี Background ซึ่งโดยปกติ ตัวที่จะใช้สร้าง Background นั้น ส่วนใหญ่จะเป็นนามสกุล BMP , JPG เป็นต้น กรณีที่มีนามสกุลเป็น .BMP ก็ง่ายหน่อยนะครับ คือเมื่อเวลา ทำการบันทึกแล้ว ไม่ต้องเสียดเวลาเปลี่ยนนามสกุล แต่หากไม่ใช่ ก็จะต้องทำการเปลี่ยนนามสกุลก่อนครับ

• เปิด Clipart แล้วทำการเลือกรูปขึ้นมา อาจจะจากแผ่น CD-ROM หรือ ใน Harddisk ก็ได้ (หากใน HD จะอยู่ตรง "C:\Program files \Microsoft Office\Clipart\Popular "ซึ่งในนั้นจะมีไฟล์รูปภาพอยู่ ส่วนหากเลือกใน Drive D (CD-ROM) ก็เข้าไปยัง Folder ที่มีรูปเก็บเอาไว้ (ในที่นี้ ผมทำการเก็บเอาไว้ที่ Drive D ซึ่งเป็น CD-ROM จึงเรียกจาก Folder ที่เก็บเอาไว้ขึ้นมา) ดังรูป

รูปหน้าจอที่มีการเปิดใช้โปรแกรม PhotoShop 5

**Comment สังเกตว่า เครื่องมือที่ใช้จริงๆ จะมีอยู่ไม่กี่ตัว แต่ไม่ใช่ รู้แค่นี้แล้วทำ PhotoShop ได้เก่ง เลยนะครับ เพียงแต่ป้องกันความสับสนในการใช้งาน จึงนำเสนอ แต่ในส่วนที่จำเป็นเท่านั้น (ส่วนรายละเอียดลึกๆ ของ PhotoShop คงอาจจะต้องหาหนังสือ ศึกษาเพิ่ม นะครับ) **

คราวนี้ เข้างานสักที จากนั้น คือ

1. ใช้เครื่องมือ Rectangular Marquee โดยการคลิกเลือก ที่เครื่องมือนั้น จากนั้นทำการการกำหนด เอาไว้ใน Background ดังรูป

2. เลือก Menu (Edit) => Clear ซึ่งจะทำการเคลียร์ ในส่วนที่ทำการถูกเลือกเอาไว้ ที่สำคัญ สีพื้นหน้า (Foreground) สีพื้นหลัง (Background) เมื่อทำการเคลียร์แล้ว โดยปกติจะทำให้สีขาวเกิดขึ้น จากนั้น ใช้เครื่องมือรูปถังสี (Paint Bucket) ทำการเทสีที่ต้องการ แต่ขอแนะนำให้ทำการดับเบิลคลิก ที่รูปไอคอนสีพื้นหน้า และทำการเลือกสีพยายามเลือกสีเหลืองอ่อน เพื่อที่เมื่อแสดงรูปออกมา ลักษณะของการนำเสนอ ข้อมูลและข้อความจะดูเด่น ขึ้นมา ดังรูปที่แสดง

3. จากนั้นทำการเลือก Menu (Filter) =>Noise =>Add Noise แล้วทำการคลิก จะได้ดังรูปที่แสดง

แล้วทำการตั้งค่าตามรูปที่แสดง ซึ่งจะสังเกตเห็นจากภาพที่แสดงออกมา ดังตัวอย่าง สังเกตว่าหากมีการปรับค่า Amount มากยิ่งจะทำให้เกิด noise มาก อาจจะดูแล้วไม่สวยเท่าไรนัก ส่วนค่า Uniform และค่า Gaussian จะต้องลองทำการ Test ค่าโดยทำการเลือกดูนะครับ เพราะจะได้ทราบความแตกต่าง ได้จากผลที่ทำการแสดง แต่ส่วนมากจะทำการกำหนดเอาไว้ที่ Uniform และที่มีการเลือก Monochromatic เพราะภาพ Background จะเหมือนกับกระดาษทราย ดูแล้วจะสวย วิธีทดสอบ คือ ลองทำการเลือก เลือกหน้า Monochromatic กับไม่เลือก (สังเกตจากภาพที่แสดงผล แล้วลองพิจารณาความแตกต่างดู)

4. เลือก Select =>Modify =>Border แล้วทำการกำหนดเส้นขอบสัก 3-4 Pixel แล้วทำการตอบ OK และจากนั้นทำการเลือก Edit =>Stroke แล้วทำการกำหนด width 2-4 Pixel ตามความเหมาะสม จากนั้นลองทำการเลือก Location ดูว่าจะเป็น Inside (เส้นจะอยู่ข้างใน) Center (อยู่ตรงกลาง) Outside (อยู่ข้างนอก) และส่วนค่า Blending นั้นค่า Opacity ต้องการความชัดขนาดใด โดยส่วนมาก กำหนดได้ที่ 100 % (ค่าสูงสุด) ส่วน Mode (ความละเอียดของลักษณะภาพ) หากเลือก Dissolve รายละเอียดจะเป็น คล้ายๆเหมือนการขีดเส้นด้วยสีเทียน ส่วนหากเป็น Multiply ภาพจะดูดี และชัดเจนในรายละเอียด ส่วน Mode อื่นๆ ต้องลองทดลอง เล่นดูแล้วจะเห็นภาพที่ชัดเจนขึ้นนะครับ

5. จากนั้นเลือกถังสี (Paint Bucket) เป็นสีแดง แล้วที่ไปยังเส้นปะ ในรูปที่แสดง ส่วนขั้นตอนสุดท้ายก็คือ ต้องการสร้างเส้นขอบของรูปภาพ Background ให้มีความลึก โดยการทำการกำหนดการสร้าง Layer ใหม่ โดยทำการเลือก Layer=>Layer=>New (อาจจะทำารตั้งชื่อของ Layer ว่า "Back")หรือไม่ตั้งก็ได้ นั่นไม่ใช่ส่วนสำคัญ

6. เลือก Layer =>Effect =>Bevel and Emboss ทำการกำหนดค่าให้เหมือนกับรูปที่แสดง ซึ่งส่วนที่สำคัญ จะเป็นตรง Style Pillow Emboss จะเป็นการกำหนดค่าความลึก /นูนตรงบริเวณขอบเส้นให้ลอย หรือจม จาก Style ตรงนี้ อาจจะลองทำการ Preview ดูก่อนตัดสินใจเลือก ซึ่งจะมีหลายแบบให้เลือก ส่วนค่า Angle จะเป็นค่าองศา ของตัวภาพที่กำหนดขอบเขตเอาไว้ ส่วน Depth จะกำหนดค่าของเงาวัตถุ ที่แสดงออกมา เลือกบน /ล่าง และค่าสุดท้าย Blur จะเป็นค่าความชัดของวัตถุ (ยิ่งปรับตัวเลขมากค่าวัตถุที่แสดงจะมีความชัดน้อย) และให้ทำการคลิก OK แล้วจึงทำการกดที่ Ctrl+D(หมายความว่า กด Ctrl ค้างไว้ แล้วตามด้วย D) เป็นการยกเลิกค่าที่ทำการเลือกเอาไว้ หรือ Select เอาไว้นั่นเอง

7. Save a Copy (File=>Save a Copy) จากนั้นทำการบันทึกรูปภาพ background ให้กำหนด นามสกุลที่ใช้จัดเก็บเป็น .BMP เช่นชื่อไฟล์ว่า "BACK.BMP" แล้วทำการเก็บเอาไว้ใน Folder โดยกำหนดชื่อ Exam (ให้นำงานที่ทำได้เก็บเอาไว้ในนี้เพื่อความสะดวก ในการทำงานครั้งต่อไป (สาเหตุที่ต้อง Save อย่างงี้เพราะว่าหากทำการกำหนดเป็นค่านามสกุลอื่น ที่นอกเหนือจากที่กำหนด เมื่อนำไปใช้ Background จะนำไปใช้ไม่ได้)

( ในบทถัดไป จะกล่าวถึงวิธีการสร้าง โปรเจคงานแบบประยุกต์ )

Unit 1 | Unit 2 | Unit 3 | Unit 4 | Unit 5 | Unit 6 | Unit 7 | Unit 8 | Unit 9 | Unit 10 | Unit 11