ลูกเล่นในการสร้างเว็บเพจ กับ Gif Animation

ในครั้งนี้เราจะมาลองเล่นพลิกแพลงในรูปแบบอื่นดูบ้าง เพื่อเพิ่มความสวยงามแปลกใหม่ให้กับหน้าเว็บเพจ

เมื่อกล่าวถึงรูปภาพ gif แล้ว คงจะทราบกันดีว่าเป็นรูปแบบไฟล์ข้อมูลรูปแบบหนึ่งที่เหมาะสมกับรูปภาพ การ์ตูนที่มีสีไม่มากเหมือนภาพถ่าย ขนาดไฟล์ค่อนข้างเล็ก (เนื่องจากลดสีลงเรียบร้อยแล้ว เหลือไว้แต่ที่จำเป็น) และสามารถทำฉากหลังของรูปนั้นๆ ให้กลายเป็นส่วนที่โปร่งใสได้ ซึ่งคุณสมบัติข้อสุดท้ายนี่เองที่ทำให้การใช้งานรูปภาพ gif สามารถพลิกแพลงใช้งานได้มากขึ้น ส่วนการยืดหยุ่นนั้นขึ้นกับพื้นหลังรูปแบบสีสันแตกต่างกันออกไป เรียกว่าเข้ากันได้กับทุกๆ พื้นหลังก็ว่าได้ จึงมีการนิยมใช้กันเป็นอย่างมาก

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

เมนูที่เราจะมาทำนี้เป็นเรื่องของการตกแต่งรูปภาพพื้นหลัง โดยใส่ม่านกรองคล้ายๆ ฟิลเตอร์รูปแบบหนึ่งลงไปบนรูปเพื่อเน้นย้ำหรือลบเลือนบริเวณรูปดังกล่าว และวิธีการจะใช้ภาพ gif แบบโปร่งใส หรือ Tran- sparent ร่วมกับตารางที่วางอยู่บนรูปภาพพื้นหลังในบริเวณพื้นที่ที่ต้องการปรับแต่ง เพื่อให้ได้รูปภาพที่มีการตกแต่งตามต้องการ (ดังรูปที่ 1)

รูปที่ 1

รูปที่ 2

..... รูปที่ 1 การใช้ gif ที่กลมกลืนกับพื้นหลัง ดูสวยงาม และเป็นอันหนึ่งอันเดียวกัน.....
..... รูปที่ 2 เตรียมสร้างกระดานงาน.....

สำหรับ อุปกรณ์ที่ต้องการใช้ในงานครั้งนี้มีดังนี้ โปรแกรม Macromedia Firework และ Macromedia Dreamweaver เพื่อสร้างรูป Gif และนำไปตกแต่งในหน้าเว็บเพจตามรายละเอียดที่กล่าวไปแล้วตามลำดับ ก่อนอื่นเราจะสร้างไฟล์รูปภาพขึ้นในโปรแกรม Firewok โดยเริ่มสร้าง New document เป็นกระดานงานขนาดประมาณ 50x50 พิกเซล ที่ความละเอียด 72 พิกเซลต่อนิ้ว และอย่าลืมเลือกทำเครื่องหมายให้รูปมีคุณสมบัติเป็น Transparent ด้วย จะได้มองทะลุผ่านมองเห็นสภาพแวดล้อมได้กรณีที่มีการปรับค่าต่างๆ (ดังรูปที่ 2)

หลังจากที่ตั้งค่าดังกล่าวเรียบร้อย ให้คลิ้ก OK ก็จะได้กระดานงานขนาดดังกล่าวปรากฏขึ้นมารอให้ดำเนินการต่อไป จากนั้นให้ไปที่หน้าต่าง Layer หรือหากหน้าต่างดังกล่าวไม่ปรากฏอยู่ ก็ต้องไปขอดูจากชุดคำสั่ง Windows เลือกคลิ้กที่หน้าคำสั่ง Layers เพื่อเลือกให้แสดงหน้าต่างดังกล่าว บริเวณมุมด้านล่างขวาของหน้าต่าง Layer นั้น จะมีไอคอนเล็กๆ รูปกระดานตาหมากรุกที่มีคำอธิบายเมื่อนำเมาส์ไปวางบนไอคอนว่า New Bit- map Image ให้คลิ้กเลือกเพื่อเตรียมสร้างรูปใหม่บนกระดานงานที่เตรียมเอาไว้ (ดังรูปที่ 3)

รูปที่ 3

รูปที่ 4

..... รูปที่ 3 สร้างรูปบนกระดานงานที่เตรียมไว้.....
..... รูปที่ 4 การตั้งค่าเตรียมพื้นลวดลายที่จะเทลงบนรูป.....

ใน ขั้นตอนนี้จะเห็นเส้นขอบกระดานงานที่เตรียมไว้เข้มขึ้น เป็นการบอกว่ารูปใหม่ได้ถูกสร้างขึ้นบนกระดานงานแล้ว หากไม่เห็นการ เปลี่ยนแปลงลักษณะดังกล่าว อาจจะดำเนินการอะไรผิดพลาดไปได้ ให้คลิ้กเลือกที่จะสร้างรูปภาพขึ้นมาใหม่แล้วไปที่หน้าต่าง Fill แท็บ Fill เพื่อใส่ Texture หรือลวดลายตามต้องการ มีตั้งแต่เส้นขวางจนถึงตารางหมากรุกขนาดถี่หรือหยาบเลยทีเดียว จากนั้นทำเครื่องหมายในช่อง Transparent เพื่อให้เกิดภาพที่โปร่งใส แล้วเลือกคุณสมบัติหลัง Texture เป็น 100% ซึ่งจะแสดงปริมาณความโปร่งใสของส่วนที่แสงจะผ่านได้ในรูปว่าจะให้มีมากน้อย เพียงไร แต่ส่วนที่ทึบแสงก็สามารถเลือกเฉดสีได้เช่นกัน (ดังรูปที่ 4)

เมื่อตั้งค่าในแท็บ Fill หน้าต่าง Fill เรียบร้อยเสร็จ ก็ไปกดปุ่มอุปกรณ์เทสี แล้วนำถังสีไปเทในพื้นที่รูปที่เตรียมไว้ เท่านี้จะได้รูป Gif พื้นหลังใสเก็บเอาไว้ตกแต่งหน้าเว็บเพจต่อไปแล้ว อ้อ! แต่จะต้องบันทึกไฟล์เป็นไฟล์นามสกุล .PNG แล้วค่อยใช้คำสั่ง File —> Export บันทึกเป็นไฟล์ที่มีนามสกุลตามต้องการอีกทีหนึ่งนะครับ เท่านี้ก็เป็นอันเรียบร้อยในส่วนของการเตรียมรูปเอาใช้งาน (ดังรูปที่ 5)

รูปที่ 5

รูปที่ 6

..... รูปที่ 5 คำสั่ง Export preview ไฟล์ให้เป็น Gif ที่สามารถตรวจสอบดูได้ก่อนพิมพ์.....
..... รูปที่ 6 ดูหน้าตากันเป็นครั้งสุดท้ายหลังกดปุ่ม Export.....

เมื่อ กดคลิ้กที่ปุ่ม Export จะมีหน้าต่างแสดงรูปร่างหน้าตาของชิ้นงานขึ้นมาให้เราดูเป็นรอบสุดท้าย หากในรูปยังมีตารางหมากรุกอยู่ทั้งที่เราสร้างเป็นเส้นสลับช่องว่าง ก็ไม่ต้องตกใจนะครับ เนื่องจากมันเป็นลวดลายของพื้นหลังนั่นเอง จะไม่ถูกแสดงบนเว็บเพจจริง (ลองเปิดตรวจสอบดูบนบราวเซอร์ก็ได้) หลังจากได้ พิจารณาภาพอย่างถี่ถ้วนดีแล้ว ก็จัดการกดปุ่ม Export และเลือกบันทึกไฟล์เป็นแบบรูปภาพได้เลย (ดังรูปที่ 6)