สร้างแบนเนอร์เอาไว้ใช้งาน
มาดูกันว่าหากต้องการสร้างแบนเนอร์ต้องทำอย่างไร ก่อนอื่นต้องเรียกใช้งานโปรแกรม 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 <table border="0" cellspacing="2" cellpadding="5" class="pic" align="right"><tbody>
</tbody></table>
7. ใช้เครื่องมือ Move Tool ลากรูปภาพที่ต้องการ ไปวางลงบนแบนเนอร์ก็ให้ใส่รูปภาพที่ต้องการลงไป พร้อมปรับแต่งขนาด หรือคลวามเบลอตามต้องการ
8. แล้วคลิ้กปุ่ม Edit in ImageReady เพื่อกลับไปสร้างแบนเนอร์ต่อในโปรแกรม Adobe ImageReady CS
9. จะกลับมายังหน้าต่างโปรแกรม Adobe ImageReady โดยจะแสดงรูปภาพแบ็กกราวนด์ซึ่งเป็นเฟรมแรก เราต้องการให้แสดงแบนเนอร์อย่างเดียว ให้คลิ้กเลือกรายการ Once
10. มาเริ่มสร้างเฟรมถัดไปหากเราต้องการให้แสดงข้อความให้คลิ้กปุ่ม Duplicates current frame จะแสดงเฟรมแอนิเมชันหมายเลข 2 ขึ้นมา (หากไม่แสดงหน้าต่างเลเยอร์ ให้ไปคลิ้กเมนูคำสั่ง Window > Animation) <table border="0" cellspacing="2" cellpadding="5" class="pic" align="left"><tbody>
</tbody></table>
11. จากนั้นคลิ้กปุ่มเครื่องมือ Type Tool แล้วพิมพ์ข้อความที่ต้องการลงไป
12. ในเฟรมที่ 3 มาใส่รูปภาพลงไปกัน โดยการคลิ้กปุ่ม Duplicates current frame เพื่อก็อปปี้เลเยอร์ก่อนหน้านี้
13. ถ้าต้องการแทรกรูปภาพลงไปให้ไปที่หน้าต่างโปรแกรม Adobe Photoshop CS (ซึ่งตอนนี้เปิดค้างอยู่) หรือคลิ้กปุ่ม Edit in Photoshop ก็ได้ แล้วคลิ้กเมนูคำสั่ง File > Open
14. จากนั้นจะแสดงไดอะล็อกบ็อกซ์ Open เพื่อให้คลิ้กเลือกรูปภาพ แล้วคลิ้กปุ่ม Open
15. จะแสดงไฟล์รูปภาพที่ต้องการ แบนเนอร์มีความสูงขนาดประมาณ 340 พิกเซล ก็ให้ผู้ใช้งานตัดภาพโดยใช้เมาส์คลิ้กเลือกบริเวณที่ต้องการ แล้วคลิ้กเมนูคำสั่ง Image > Crop
16. พร้อมปรับแต่งขนาดรูปภาพโดยคลิ้กเมนูคำสั่ง Image > Image Size?
17. จะแสดงไดอะล็อกบ็อกซ์ Image Size กำหนดค่าความสูง(Height) ต้องการแล้วคลิ้กปุ่ม OK
18. แต่หากรูปภาพมีขนาดเล็กกว่าแบนเนอร์ก็ไม่ต้องทำอะไร จะแสดงไฟล์รูปภาพที่ต้องการ ให้กดแป้น Ctrl+A แล้วคลิ้กเมนูคำสั่ง Edit > Copy ลงบนรูปภาพที่ต้องการ <table border="0" cellspacing="2" cellpadding="5" class="pic" align="left"><tbody>
</tbody></table>
19. แล้วไปยังแบนเนอร์ของเรา โดยการคลิ้กเมนูคำสั่ง Edit > Paste แล้วไปก็อปปี้อีกรูปภาพมาวางลงไป จากนั้นปรับแต่งตำแหน่งรูปภาพตามต้องการ
20. แล้วคลิ้กปุ่ม Edit in ImageReady เพื่อกลับไปสร้างแบนเนอร์ต่อในโปรแกรม Adobe ImageReady CS
21. ที่นี้ไปกำหนดการแสดงของภาพในแต่ละเฟรม ซึ่งตอนนี้ทั้ง 3เฟรมจะมีรูปภาพเหมือนกัน
22. โดยให้ไปคลิ้กที่เฟรมหมายเลข 1 ต้องการให้แสดงเฉพาะแบ็กกราวนด์ว่างๆ ให้ไปที่พาเนลเลเยอร์ แล้วคลิ้กยกเลิกไอคอน รูปดวงตา หน้ารูปภาพและข้อความออกไปเพื่อยกเลิกการแสดง
23. จากนั้นไปยังตำแหน่งเฟรมที่ 2 เพื่อกำหนดให้แสดงข้อความ โดยการไปคลิ้กเลือกที่เฟรม 2 <table border="0" cellspacing="2" cellpadding="5" class="pic" align="left"><tbody>
</tbody></table><table border="0" cellspacing="2" cellpadding="5" class="pic" align="center"><tbody>
</tbody></table>
24. แล้วคลิ้กช่องไอคอนรูปดวงตาในเลเยอร์ข้อความ จะแสดงข้อความในหน้าต่างพรีวิวทันที
25. ไปเฟรมที่ 3 เพื่อกำหนดให้แสดงข้อความและรูปภาพ โดยการไปคลิ้กเลือกที่เฟรม 3
26. แล้วคลิ้กช่องไอคอนรูปดวงตาในเลเยอร์ข้อความและรูปภาพทั้งหมด จะแสดงผลลัพธ์ในหน้าต่างพรีวิวทันที <table border="0" cellspacing="2" cellpadding="5" class="pic" align="left"><tbody>
</tbody></table>
27. จากนั้นกำหนดช่วงเวลาในการแสดงในแต่ละเฟรม โดยการคลิ้กกำหนดเวลาใต้เฟรม จากค่า 0 sec. แล้วเลือกเวลาหน่วงที่ต้องการอาจเป็น 1 sec. โดยต้องกำหนดเวลาให้กับทุกเฟรมอาจเท่ากับ หรือแตกต่างกันก็ได้แล้วแต่ความต้องการ
28. จากนั้นทดลองชมแอนิเมชันผ่านทางโปรแกรม ให้คลิ้กปุ่ม Play/stop animation
29. หากต้องการให้แอนิเมชันทำงานวนไปเรื่อยให้คลิ้กเลือกที่รายการ Forever <h3>ทดลองพรีวิวอนิเมชันผ่าน Internet Explorer </h3><p>หลังจากมีการสร้างแอนิเมชันเสร็จเรียบร้อยแล้ว ก็ได้เวลาทดลองดูการทำงานแอนิเมชันบนเว็บ
30. เมื่อเปิดแอนิเมชันที่ต้องการขึ้นมา ให้คลิ้กเมนูคำสั่ง File > Preview In > iexplore
31. จากนั้นจะแสดงหน้าต่างไออีพร้อมแสดงแอนิเมชัน พร้อมรายละเอียดของไฟล์พร้อมทั้งโค้ดที่ผู้ใช้งานสามารถก็อปปี้ไปใช้งานได้ทันทีโดยต้องมีการอ้างถึงรูปภาพด้วย (จากบรรทัด <img src=”images/Untitled-1.gif” width=”468” height=”60” alt=”“>) พร้อมก็อปปี้ไฟล์ต้นฉบับไปวางยังโฟลเดอร์ที่ต้องการ </p><p class="Paragraph">
</p><h3>เอ็กพอร์ตเป็นไฟล์ Gif Animation </h3><p>เมื่อสร้างชิ้นงานอนิเมชันจนพอใจแล้ว ทดลองดูผลงานแล้วก็ต้องทำการบันทึกออกมาเป็นไฟล์ .GIF เพื่อนำไปใช้งาน
32. ไปที่หน้าต่าง Adobe ImageReady CS แล้วคลิ้กแถบ 2-Up เพื่อเปรียบเทียบค่ารูปภาพต้นฉบับกับรูปภาพที่บีบอัดขนาดให้น้อยลง
33. สังเกตขนาดไฟล์ที่แตกต่างกัน และจำนวนเวลาหากใช้ความเร็วโมเด็มที่ 28.8 Kbps ผู้ใช้งานสามารถคลิ้กเลือกระดับของโมเด็มเพื่อทดสอบว่าหากผู้เปิดชมใช้โมเด็มความเร็วในระดับต่างๆ จะใช้เวลารอนานเท่าไรถึงจะแสดงแอนิเมชัน </p><table border="0" cellspacing="2" cellpadding="5" class="pic" align="right"><tbody>
</tbody></table>
34. เมื่อได้ขนาดไฟล์ คุณภาพไฟล์ และเวลาที่ต้องการ ให้คลิ้กเลือกแบนเนอร์ที่ต้องการ
35. จากนั้นให้คลิ้กเมนูคำสั่ง File > Save Optimized
36. จะแสดงไดอะล็อกบ็อกซ์ Save Optimized เพื่อให้พิมพ์ชื่อไฟล์ลงไป แล้วคลิ้กปุ่ม Save คราวนี้ก็สามารถนำไฟล์ gif อนิเมชันไปใช้งานได้ทันที <h3>เอ็กพอร์ตอนิเมชันเป็นไฟล์ Macromedia Flash (SWF) </h3><p>นี่ก็เป็นอีกหนึ่งฟีเจอร์ใหม่ที่เพิ่มขึ้นใน Adobe ImageReady CS โดยเราสามารถทำการเอ็กพอร์ตไฟล์อนิเมชันเป็นไฟล์นามสกุล .swf โดยทำได้ดังนี้
37. คลิ้กเมนูคำสั่ง File > Export > Macromedia Flash SWF </p><table border="0" cellspacing="2" cellpadding="5" class="pic" align="right"><tbody>
</tbody></table>
38. จะแสดงไดอะล็อกบ็อกซ์ Macromedia Flash (SWF) Export เพื่อให้กำหนดค่าไฟล์ แล้วคลิ้กปุ่ม OK
39. จากนั้นจะแสดงไดอะล็อกบ็อกซ์ Export As Macromedia SWF เพื่อพิมพ์ชื่อไฟล์แล้วคลิ้กปุ่ม Save
40. ให้ทดลองไปคลิ้กเปิดไฟล์ที่ได้จากการเอ็กพอร์ต เพื่อทดสอบการทำงาน <h3>การสร้างอิมเมจแมป </h3><p>การสร้างอิมเมจแมปนั้นปกติจะถูกนำไปใช้งานเว็บเพจ โดยการให้ผู้ใช้งานคลิ้กลงบนไปยังตำแหน่งที่กำหนดเอาไว้ แล้วกระโดดไปยังหน้าเว็บเพจที่ต้องการได้ทันที
41. ให้ไปเปิดไฟล์รูปภาพที่ต้องการทำ Image Map ขึ้นมา จากนั้นคลิ้กเลือกเครื่องมือ Rectangle Image Map Tool </p><table border="0" cellspacing="2" cellpadding="5" class="pic" align="right"><tbody>
</tbody></table>
42. แล้วใช้เมาส์ลากลงยังตำแหน่งที่ต้องการให้ผู้ใช้งานคลิ้ก แล้วเปิดเว็บเพจไปยังหน้าที่กำหนดเอาไว้
43. ในพาเนล Image Map จะแสดงชื่อเป็น ImageMap_01 ให้กำหนด URL ที่ต้องการให้เปิดเว็บเพจข้อมูล, Target: เป็นการกำหนดการแสดงเพจ, Alt: พิมพ์ข้อความที่ต้องการให้แสดงเมื่อเมาส์ไปวงเหนือรูปภาพ
44. ในกรณีที่ต้องการอิมเมจแมปอันถัดไปแต่ต้องการรูปทรงเป็นวงกลม ให้คลิ้กปุ่ม Rectangle Image Map Tool แล้วเลือกไปที่ Circle Image Map Tool
45. แล้วใช้เมาส์ลากเพื่อเลือกตำแหน่งที่ต้องการ <table border="0" cellspacing="2" cellpadding="5" class="pic" align="right"><tbody>
</tbody></table>
46. ในพาเนล Image Map จะแสดงชื่อเป็น ImageMap_02 ให้กำหนด URL ที่ต้องการให้เปิดเว็บเพจข้อมูล, Target: เป็นการกำหนดการแสดงเพจ, Alt: พิมพ์ข้อความที่ต้องการให้แสดงเมื่อเมาส์ไปวงเหนือรูปภาพ
47. หากต้องการสร้างอิมเมจแมปอีกก็ให้ทำแบบนี้ไปเรื่อยๆ หากต้องการพรีวิวผ่านไออีให้คลิ้กปุ่มไอคอนไออี บนแถบเครื่องมือ Tool
48. โปรแกรมจะสั่งเปิดหน้าต่างอินเทอร์เน็ตเอ็กซ์พลอเรอร์ พร้อมแสดงอิมเมจแมปตำแหน่งใดที่กำหนดไว้ เมื่อนำเมาส์ไปวางเหนือรูปภาพเคอร์เซอร์จะถูกเปลี่ยนเป็นรูปมือทันที <h3>การบันทึกไฟล์อิมเมจแมป </h3><p>เมื่อสร้างไฟล์เอกสารที่เป็นอิมเมจแมปเสร็จเรียบร้อยแล้ว เราก็ต้องมาทำการบันทึกเพื่อนนำไฟล์ดังกล่าวไปใช้งาน
49. หากต้องการกำหนดค่าเกี่ยวกับ Image Map ให้ไปคลิ้กที่เมนูคำสั่ง File > Output Settings > Image Maps
50. จะแสดงไดอะล็อกบ็อกซ์ Output Settings เพื่อให้เลือกรูปแบบ ให้คลิ้กปุ่ม Next เพื่อกำหนดค่าๆ ในหน้าถัดไป
51. เมื่อกำหนดค่าเสร็จแล้วให้คลิ้กปุ่ม OK </p><table border="0" cellspacing="2" cellpadding="5" class="pic" align="right"><tbody>
</tbody></table>
52. คลิ้กที่แถบ 4-Up แล้วคลิ้กเลือกไฟล์ที่มีคุณภาพและขนาดไฟล์ที่เหมาะสมต่อการดาวน์โหลดไปใช้งาน
53. คลิ้กเมนูคำสั่ง File > Save Optimized As…
54. จะแสดงไดอะล็อกบ็อกซ์ Save Optimized As ให้กำหนดชื่อในช่อง File name:, เลือก Save as type: เป็น HTML and Image (*.html) แล้วคลิ้กปุ่ม Save <h3>การหั่นรูปภาพด้วย Slice </h3><p>ในบางครั้งหากต้องนำรูปภาพขนาดใหญ่ขึ้นไปบนหน้าเว็บเพจ แน่นอนว่าต้องใช้เวลาดาวน์โหลดนาน และอาจดดาวน์โหลดไม่ได้ในบางครั้ง หากต้องการให้การดาวน์โหลดใช้เวลาน้อยลง เราก็ต้องนำรูปภาพมาแบ่งออกเป็นส่วนๆ </p><table border="0" cellspacing="2" cellpadding="5" class="pic" align="right"><tbody>
</tbody></table>
55. เปิดไฟล์รูปภาพที่ต้องการขึ้นมา แล้วไปคลิ้กปุ่ม Slice Tool เพื่อเลือกเครื่องมือในการหั่นภาพ
56. จากนั้นให้ไปลากลงรูปภาพเพื่อแบ่งรูปภาพออกเป็นส่วนๆ
57. หากต้องการจะแบ่งอีกก็สามารถใช้เครื่องมือ ลากแบ่งสัดส่วนตามต้องการ
58. จากนั้นทดลองดูไฟล์ที่ได้จากการทำ Slice โดยให้คลิ้กปุ่มไอคอนอินเทอร์เน็ตเอ็กซ์พลอเรอร์บนแถบเครื่องมือ Tool
59. จะแสดงหน้าไออีพร้อมแสดงรูปภาพ ทันทีจะพบว่าเมื่อรูปภาพแต่ละส่วนที่ถูกโหลด สุดท้ายก็จะกลายเป็นรูปภาพที่ต้องการ <h3>การบันทึกไฟล์ Slice </h3><p>หลังจากสร้างไฟล์รูปภาพที่ถูกแบ่งออกเป็นส่วนๆอัตโนมัติ เสร็จแล้วก็ทำการบันทึกเพื่อนำมาใช้งานต่อไป </p><table border="0" cellspacing="2" cellpadding="5" class="pic" align="right"><tbody>
</tbody></table>
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 จะเห็นแล้วว่า เราสามารถสร้างสรรค์งานออกแบบเว็บเพจได้อย่างง่ายดาย ช่วยอำนวยความสะดวกมากทีเดียว รวมถึงรูปแบบเว็บไซต์ก็จะดูดีและทันสมัยอีกด้วย สำหรับคนที่ใช้โปรแกรมอื่นอยู่ ลองหันมาใช้โปรแกรมนี้รับรองว่าใช้งานได้ไม่ยากและให้ผลลัพธ์ที่น่าทึ่งออกมาอีกด้วย <p>อ้างอิงข้อมูลจาก computer.today</p>
