เรกเชอร์ การสร้างแบนเนอรืเอาไว้ใช้งาน

เลค์เชอร์สร้างแบนเนอร์เอาไว้ใช้งานมาดูกันว่าหากต้องการสร้างแบนเนอร์ต้องทำอย่างไร ก่อนอื่นต้องเรียกใช้งานโปรแกรม Adobe ImageReady CS โดยการคลิ้กปุ่ม Start > All Programs > Adobe ImageReady CS แล้วทำดังนี้... 1. สร้างเอกสารใหม่ขึ้นมา โดยการคลิ้กเมนูคำสั่ง File > New?2. จะเห็นหน้าต่าง New Document แล้วไปคลิ้กเลือกรูปแบบเอกสารจากลิสต์บ็อกซ์ Size: โดยไปคลิ้กเลือกเลือกรูปแบบแบนเนอร์ที่โปรแกรมกำหนดมาให้แล้วตามต้องการ แล้วคลิ้กปุ่ม OKเลือกรูปแบบแบนเนอร์ตามต้องการ3. จะแสดงหน้าต่างเอกสารแบนเนอร์ว่างๆ ปรากฏขึ้นมา4. หากต้องการใส่รูปภาพประกอบลงบนแบ็กกราวดน์ลงไป ก็คลิ้กปุ่ม Edit in Photoshop เพื่อไปใส่รูปภาพผ่านโปรแกรม Adobe Photoshop CS หรือหากต้องการเทสีลงไปบนแบ็กกราวนด์ก็ไปคลิ้กเลือกสีที่ต้องการแล้วคลิ้กปุ่ม Paint Bucket Tool เพื่อเทสีไปจาก ImageReady CS ก็ได้5. หากเลือกไปใส่รูปภาพผ่านโปรแกรม Adobe Photoshop CS ก็จะแสดงหน้าต่างโปรแกรม Adobe Photoshop CS พร้อมเอกสารแบนเนอร์ว่างๆ6. การใส่รูปภาพก็ให้คลิ้กเปิดรูปภาพขึ้นมา โดยการคลิ้กเมนูคำสั่ง File > Open จะแสดงหน้าต่าง Open เพื่อให้คลิ้กเลือกรูปภาพที่ต้องการ แล้วคลิ้กปุ่ม Openใส่รูปภาพแบ็กกราวนด์พร้อมปรับแต่ง7. ใช้เครื่องมือ Move Tool ลากรูปภาพที่ต้องการ ไปวางลงบนแบนเนอร์ก็ให้ใส่รูปภาพที่ต้องการลงไป พร้อมปรับแต่งขนาด หรือคลวามเบลอตามต้องการ 8. แล้วคลิ้กปุ่ม Edit in ImageReady เพื่อกลับไปสร้างแบนเนอร์ต่อในโปรแกรม Adobe ImageReady CS9. จะกลับมายังหน้าต่างโปรแกรม Adobe ImageReady โดยจะแสดงรูปภาพแบ็กกราวนด์ซึ่งเป็นเฟรมแรก เราต้องการให้แสดงแบนเนอร์อย่างเดียว ให้คลิ้กเลือกรายการ Once10. มาเริ่มสร้างเฟรมถัดไปหากเราต้องการให้แสดงข้อความให้คลิ้กปุ่ม Duplicates current frame จะแสดงเฟรมแอนิเมชันหมายเลข 2 ขึ้นมา (หากไม่แสดงหน้าต่างเลเยอร์ ให้ไปคลิ้กเมนูคำสั่ง WindowAnimation) แทรกเฟรมใหม่ลงไปพร้อมพิมพ์ข้อความ11. จากนั้นคลิ้กปุ่มเครื่องมือ Type Tool แล้วพิมพ์ข้อความที่ต้องการลงไป12. ในเฟรมที่ 3 มาใส่รูปภาพลงไปกัน โดยการคลิ้กปุ่ม Duplicates current frame เพื่อก็อปเลเยอร์ก่อนหน้านี้13. ถ้าต้องการแทรกรูปภาพลงไปให้ไปที่หน้าต่างโปรแกรม Adobe Photoshop CS (ซึ่งตอนนี้เปิดค้างอยู่) หรือคลิ้กปุ่ม Edit in Photoshop ก็ได้ แล้วคลิ้กเมนูคำสั่ง File > Open14. จากนั้นจะแสดงไดอะล็อกบ็อกซ์ Open เพื่อให้คลิ้กเลือกรูปภาพ แล้วคลิ้กปุ่ม Open15. จะแสดงไฟล์รูปภาพที่ต้องการ แบนเนอร์มีความสูงขนาดประมาณ 340 พิกเซล ก็ให้ผู้ใช้งานตัดภาพโดยใช้เมาส์คลิ้กเลือกบริเวณที่ต้องการ แล้วคลิ้กเมนูคำสั่ง Image > Crop16. พร้อมปรับแต่งขนาดรูปภาพโดยคลิ้กเมนูคำสั่ง Image > Image Size?17. จะแสดงไดอะล็อกบ็อกซ์ Image Size กำหนดค่าความสูง(Height) ต้องการแล้วคลิ้กปุ่ม OK18. แต่หากรูปภาพมีขนาดเล็กกว่าแบนเนอร์ก็ไม่ต้องทำอะไร จะแสดงไฟล์รูปภาพที่ต้องการ ให้กดแป้น Ctrl+A แล้วคลิ้กเมนูคำสั่ง Edit > Copy ลงบนรูปภาพที่ต้องการใส่รูปภาพลงบนแบนเนอร์19. แล้วไปยังแบนเนอร์ของเรา โดยการคลิ้กเมนูคำสั่ง Edit > Paste แล้วไปก็อปอีกรูปภาพมาวางลงไป จากนั้นปรับแต่งตำแหน่งรูปภาพตามต้องการ 20. แล้วคลิ้กปุ่ม Edit in ImageReady เพื่อกลับไปสร้างแบนเนอร์ต่อในโปรแกรม Adobe ImageReady CS21. ที่นี้ไปกำหนดการแสดงของภาพในแต่ละเฟรม ซึ่งตอนนี้ทั้ง 3เฟรมจะมีรูปภาพเหมือนกัน22. โดยให้ไปคลิ้กที่เฟรมหมายเลข 1 ต้องการให้แสดงเฉพาะแบ็กกราวนด์ว่างๆ ให้ไปที่พาเนลเลเยอร์ แล้วคลิ้กยกเลิกไอคอน รูปดวงตา หน้ารูปภาพและข้อความออกไปเพื่อยกเลิกการแสดง23. จากนั้นไปยังตำแหน่งเฟรมที่ 2 เพื่อกำหนดให้แสดงข้อความ โดยการไปคลิ้กเลือกที่เฟรม 2กำหนดค่าเฟรมที่ 1กำหนดค่าเฟรมที่ 224. แล้วคลิ้กช่องไอคอนรูปดวงตาในเลเยอร์ข้อความ จะแสดงข้อความในหน้าต่างพรีวิวทันที25. ไปเฟรมที่ 3 เพื่อกำหนดให้แสดงข้อความและรูปภาพ โดยการไปคลิ้กเลือกที่เฟรม 326. แล้วคลิ้กช่องไอคอนรูปดวงตาในเลเยอร์ข้อความและรูปภาพทั้งหมด จะแสดงผลลัพธ์ในหน้าต่างพรีวิวทันทีกำหนดเวลาในการแสดงผลของอนิเมชัน27. จากนั้นกำหนดช่วงเวลาในการแสดงในแต่ละเฟรม โดยการคลิ้กกำหนดเวลาใต้เฟรม จากค่า 0 sec. แล้วเลือกเวลาหน่วงที่ต้องการอาจเป็น 1 sec. โดยต้องกำหนดเวลาให้กับทุกเฟรมอาจเท่ากับ หรือแตกต่างกันก็ได้แล้วแต่ความต้องการ28. จากนั้นทดลองชมแอนิเมชันผ่านทางโปรแกรม ให้คลิ้กปุ่ม Play/stop animation29. หากต้องการให้แอนิเมชันทำงานวนไปเรื่อยให้คลิ้กเลือกที่รายการ Foreverทดลองพรีวิวอนิเมชันผ่าน Internet Explorerหลังจากมีการสร้างแอนิเมชันเสร็จเรียบร้อยแล้ว ก็ได้เวลาทดลองดูการทำงานแอนิเมชันบนเว็บ30. เมื่อเปิดแอนิเมชันที่ต้องการขึ้นมา ให้คลิ้กเมนูคำสั่ง File > Preview In > iexplore31. จากนั้นจะแสดงหน้าต่างไออีพร้อมแสดงแอนิเมชัน พร้อมรายละเอียดของไฟล์พร้อมทั้งโค้ดที่ผู้ใช้งานสามารถก็อปไปใช้งานได้ทันทีโดยต้องมีการอ้างถึงรูปภาพด้วย (จากบรรทัด ) พร้อมก็อปไฟล์ต้นฉบับไปวางยังโฟลเดอร์ที่ต้องการเอ็กพอร์ตเป็นไฟล์ Gif Animationเมื่อสร้างชิ้นงานอนิเมชันจนพอใจแล้ว ทดลองดูผลงานแล้วก็ต้องทำการบันทึกออกมาเป็นไฟล์ .GIF เพื่อนำไปใช้งาน32. ไปที่หน้าต่าง Adobe ImageReady CS แล้วคลิ้กแถบ 2-Up เพื่อเปรียบเทียบค่ารูปภาพต้นฉบับกับรูปภาพที่บีบอัดขนาดให้น้อยลง33. สังเกตขนาดไฟล์ที่แตกต่างกัน และจำนวนเวลาหากใช้ความเร็วโมเด็มที่ 28.8 Kbps ผู้ใช้งานสามารถคลิ้กเลือกระดับของโมเด็มเพื่อทดสอบว่าหากผู้เปิดชมใช้โมเด็มความเร็วในระดับต่างๆ จะใช้เวลารอนานเท่าไรถึงจะแสดงแอนิเมชันเลือกแบนเนอร์ตามระดับของโมเด็มที่ต้องการ34. เมื่อได้ขนาดไฟล์ คุณภาพไฟล์ และเวลาที่ต้องการ ให้คลิ้กเลือกแบนเนอร์ที่ต้องการ35. จากนั้นให้คลิ้กเมนูคำสั่ง File > Save Optimized36. จะแสดงไดอะล็อกบ็อกซ์ Save Optimized เพื่อให้พิมพ์ชื่อไฟล์ลงไป แล้วคลิ้กปุ่ม Save คราวนี้ก็สามารถนำไฟล์ gif อนิเมชันไปใช้งานได้ทันทีเอ็กพอร์ตอนิเมชันเป็นไฟล์ Macromedia Flash (SWF)นี่ก็เป็นอีกหนึ่งฟีเจอร์ใหม่ที่เพิ่มขึ้นใน Adobe ImageReady CS โดยเราสามารถทำการเอ็กพอร์ตไฟล์อนิเมชันเป็นไฟล์นามสกุล .swf โดยทำได้ดังนี้ 37. คลิ้กเมนูคำสั่ง File > Export > Macromedia Flash SWFการเอ็กพอร์ตเป็นไฟล์ในรูปแบบ Macromedia Flash38. จะแสดงไดอะล็อกบ็อกซ์ Macromedia Flash (SWF) Export เพื่อให้กำหนดค่าไฟล์ แล้วคลิ้กปุ่ม OK39. จากนั้นจะแสดงไดอะล็อกบ็อกซ์ Export As Macromedia SWF เพื่อพิมพ์ชื่อไฟล์แล้วคลิ้กปุ่ม Save40. ให้ทดลองไปคลิ้กเปิดไฟล์ที่ได้จากการเอ็กพอร์ต เพื่อทดสอบการทำงานการสร้างอิมเมจแมปการสร้างอิมเมจแมปนั้นปกติจะถูกนำไปใช้งานเว็บเพจ โดยการให้ผู้ใช้งานคลิ้กลงบนไปยังตำแหน่งที่กำหนดเอาไว้ แล้วกระโดดไปยังหน้าเว็บเพจที่ต้องการได้ทันที41. ให้ไปเปิดไฟล์รูปภาพที่ต้องการทำ Image Map ขึ้นมา จากนั้นคลิ้กเลือกเครื่องมือ Rectangle Image Map Toolเลือกตำแหน่งที่ต้องการสร้างเป็นอิมเมจแมป42. แล้วใช้เมาส์ลากลงยังตำแหน่งที่ต้องการให้ผู้ใช้งานคลิ้ก แล้วเปิดเว็บเพจไปยังหน้าที่กำหนดเอาไว้43. ในพาเนล Image Map จะแสดงชื่อเป็น ImageMap_01 ให้กำหนด URL ที่ต้องการให้เปิดเว็บเพจข้อมูล, Target: เป็นการกำหนดการแสดงเพจ, Alt: พิมพ์ข้อความที่ต้องการให้แสดงเมื่อเมาส์ไปวงเหนือรูปภาพ44. ในกรณีที่ต้องการอิมเมจแมปอันถัดไปแต่ต้องการรูปทรงเป็นวงกลม ให้คลิ้กปุ่ม Rectangle Image Map Tool แล้วเลือกไปที่ Circle Image Map Tool45. แล้วใช้เมาส์ลากเพื่อเลือกตำแหน่งที่ต้องการเลือกสร้างอิมเมจแมปเป็นแบบวงกลม46. ในพาเนล Image Map จะแสดงชื่อเป็น ImageMap_02 ให้กำหนด URL ที่ต้องการให้เปิดเว็บเพจข้อมูล, Target: เป็นการกำหนดการแสดงเพจ, Alt: พิมพ์ข้อความที่ต้องการให้แสดงเมื่อเมาส์ไปวงเหนือรูปภาพ47. หากต้องการสร้างอิมเมจแมปอีกก็ให้ทำแบบนี้ไปเรื่อยๆ หากต้องการพรีวิวผ่านไออีให้คลิ้กปุ่มไอคอนไออี บนแถบเครื่องมือ Tool48. โปรแกรมจะสั่งเปิดหน้าต่างอินเทอร์เน็ตเอ็กซ์พลอเรอร์ พร้อมแสดงอิมเมจแมปตำแหน่งใดที่กำหนดไว้ เมื่อนำเมาส์ไปวางเหนือรูปภาพเคอร์เซอร์จะถูกเปลี่ยนเป็นรูปมือทันที การบันทึกไฟล์อิมเมจแมป เมื่อสร้างไฟล์เอกสารที่เป็นอิมเมจแมปเสร็จเรียบร้อยแล้ว เราก็ต้องมาทำการบันทึกเพื่อนนำไฟล์ดังกล่าวไปใช้งาน49. หากต้องการกำหนดค่าเกี่ยวกับ Image Map ให้ไปคลิ้กที่เมนูคำสั่ง File > Output Settings > Image Maps50. จะแสดงไดอะล็อกบ็อกซ์ Output Settings เพื่อให้เลือกรูปแบบ ให้คลิ้กปุ่ม Next เพื่อกำหนดค่าๆ ในหน้าถัดไป51. เมื่อกำหนดค่าเสร็จแล้วให้คลิ้กปุ่ม OK เลือกคุณภาพและขนาดไฟล์ของอิมเมจแมปตามต้องการ52. คลิ้กที่แถบ 4-Up แล้วคลิ้กเลือกไฟล์ที่มีคุณภาพและขนาดไฟล์ที่เหมาะสมต่อการดาวน์โหลดไปใช้งาน53. คลิ้กเมนูคำสั่ง File > Save Optimized As...54. จะแสดงไดอะล็อกบ็อกซ์ Save Optimized As ให้กำหนดชื่อในช่อง File name:, เลือก Save as type: เป็น HTML and Image (*.html) แล้วคลิ้กปุ่ม Saveการหั่นรูปภาพด้วย Slice ในบางครั้งหากต้องนำรูปภาพขนาดใหญ่ขึ้นไปบนหน้าเว็บเพจ แน่นอนว่าต้องใช้เวลาดาวน์โหลดนาน และอาจดดาวน์โหลดไม่ได้ในบางครั้ง หากต้องการให้การดาวน์โหลดใช้เวลาน้อยลง เราก็ต้องนำรูปภาพมาแบ่งออกเป็นส่วนๆใช้เครื่องมือ Slice Tool เพื่อหั่นภาพ55. เปิดไฟล์รูปภาพที่ต้องการขึ้นมา แล้วไปคลิ้กปุ่ม Slice Tool เพื่อเลือกเครื่องมือในการหั่นภาพ56. จากนั้นให้ไปลากลงรูปภาพเพื่อแบ่งรูปภาพออกเป็นส่วนๆ57. หากต้องการจะแบ่งอีกก็สามารถใช้เครื่องมือ ลากแบ่งส่วนตามต้องการ58. จากนั้นทดลองดูไฟล์ที่ได้จากการทำ Slice โดยให้คลิ้กปุ่มไอคอนอินเทอร์เน็ตเอ็กซ์พลอเรอร์บนแถบเครื่องมือ Tool59. จะแสดงหน้าไออีพร้อมแสดงรูปภาพ ทันทีจะพบว่าเมื่อรูปภาพแต่ละส่วนที่ถูกโหลด สุดท้ายก็จะกลายเป็นรูปภาพที่ต้องการการบันทึกไฟล์ Sliceหลังจากสร้างไฟล์รูปภาพที่ถูกแบ่งออกเป็นส่วนๆอัตโนมัติ เสร็จแล้วก็ทำการบันทึกเพื่อนำมาใช้งานต่อไปเลือกรูปภาพที่ต้องการ60. คลิ้กที่แถบ 4-Up แล้วคลิ้กเลือกไฟล์ที่มีคุณภาพและขนาดไฟล์ที่เหมาะสมต่อการดาวน์โหลดไปใช้งาน 61. แล้วคลิ้กเมนูคำสั่ง File > Save Optimized As... 62. จะแสดงไดอะล็อกบ็อกซ์ Save Optimized As ให้กำหนดชื่อในช่อง File name:, เลือก Save as type: เป็น HTML and Image (*.html) แล้วคลิ้กปุ่ม Save 63. ในโฟลเดอร์ดังกล่าวจะประกอบไปด้วยไฟล์ html และโฟลเดอร์จัดเก็บรูปภาพ จากตัวอย่างการใช้งานโปรแกรม Adobe ImageReady CS จะเห็นแล้วว่า เราสามารถสร้างสรรค์งานออกแบบเว็บเพจได้อย่างง่ายดาย ช่วยอำนวยความสะดวกมากทีเดียว รวมถึงรูปแบบเว็บไซต์ก็จะดูดีและทันสมัยอีกด้วย สำหรับคนที่ใช้โปรแกรมอื่นอยู่ ลองหันมาใช้โปรแกรมนี้รับรองว่าใช้งานได้ไม่ยากและให้ผลลัพธ์ที่น่าทึ่งออกมาอีกด้วย