เทคนิคการสร้างงานเว็บกับ Adobe ImageReady CS

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

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

โปรแกรม ImageReady CS เป็นโปรแกรมที่ออกแบบมาสำหรับการสร้างงานเว็บเพจ ไม่ว่าจะเป็นการสร้างแบนเนอร์, GIF อนิเมชั่น, อิมเมจแมปหรือการหั่นรูปภาพออกเป็นชิ้นส่วนในแบบ Slice เป็นต้น
สร้างแบนเนอร์เอาไว้ใช้งาน
มาดูกันว่าหากต้องการสร้างแบนเนอร์ต้องทำอย่างไร ก่อนอื่นต้องเรียกใช้งานโปรแกรม 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 CS

9. จะกลับมายังหน้าต่างโปรแกรม Adobe ImageReady โดยจะแสดงรูปภาพแบ็กกราวนด์ซึ่งเป็นเฟรมแรก เราต้องการให้แสดงแบนเนอร์อย่างเดียว ให้คลิ้กเลือกรายการ Once

10. มาเริ่มสร้างเฟรมถัดไปหากเราต้องการให้แสดงข้อความให้คลิ้กปุ่ม Duplicates current frame จะแสดงเฟรมแอนิเมชันหมายเลข 2 ขึ้นมา (หากไม่แสดงหน้าต่างเลเยอร์ ให้ไปคลิ้กเมนูคำสั่ง Window > Animation)
แทรกเฟรมใหม่ลงไปพร้อมพิมพ์ข้อความ

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 ลงบนรูปภาพที่ต้องการ
ใส่รูปภาพลงบนแบนเนอร์

19. แล้วไปยังแบนเนอร์ของเรา โดยการคลิ้กเมนูคำสั่ง Edit > Paste แล้วไปก็อปปี้อีกรูปภาพมาวางลงไป จากนั้นปรับแต่งตำแหน่งรูปภาพตามต้องการ

20. แล้วคลิ้กปุ่ม Edit in ImageReady เพื่อกลับไปสร้างแบนเนอร์ต่อในโปรแกรม Adobe ImageReady CS

21. ที่นี้ไปกำหนดการแสดงของภาพในแต่ละเฟรม ซึ่งตอนนี้ทั้ง 3เฟรมจะมีรูปภาพเหมือนกัน

22. โดยให้ไปคลิ้กที่เฟรมหมายเลข 1 ต้องการให้แสดงเฉพาะแบ็กกราวนด์ว่างๆ ให้ไปที่พาเนลเลเยอร์ แล้วคลิ้กยกเลิกไอคอน รูปดวงตา หน้ารูปภาพและข้อความออกไปเพื่อยกเลิกการแสดง

23. จากนั้นไปยังตำแหน่งเฟรมที่ 2 เพื่อกำหนดให้แสดงข้อความ โดยการไปคลิ้กเลือกที่เฟรม 2
กำหนดค่าเฟรมที่ 1

กำหนดค่าเฟรมที่ 2

24. แล้วคลิ้กช่องไอคอนรูปดวงตาในเลเยอร์ข้อความ จะแสดงข้อความในหน้าต่างพรีวิวทันที

25. ไปเฟรมที่ 3 เพื่อกำหนดให้แสดงข้อความและรูปภาพ โดยการไปคลิ้กเลือกที่เฟรม 3

26. แล้วคลิ้กช่องไอคอนรูปดวงตาในเลเยอร์ข้อความและรูปภาพทั้งหมด จะแสดงผลลัพธ์ในหน้าต่างพรีวิวทันที
กำหนดเวลาในการแสดงผลของอนิเมชัน

27. จากนั้นกำหนดช่วงเวลาในการแสดงในแต่ละเฟรม โดยการคลิ้กกำหนดเวลาใต้เฟรม จากค่า 0 sec. แล้วเลือกเวลาหน่วงที่ต้องการอาจเป็น 1 sec. โดยต้องกำหนดเวลาให้กับทุกเฟรมอาจเท่ากับ หรือแตกต่างกันก็ได้แล้วแต่ความต้องการ

28. จากนั้นทดลองชมแอนิเมชันผ่านทางโปรแกรม ให้คลิ้กปุ่ม Play/stop animation

29. หากต้องการให้แอนิเมชันทำงานวนไปเรื่อยให้คลิ้กเลือกที่รายการ Forever
ทดลองพรีวิวอนิเมชันผ่าน Internet Explorer
หลังจากมีการสร้างแอนิเมชันเสร็จเรียบร้อยแล้ว ก็ได้เวลาทดลองดูการทำงานแอนิเมชันบนเว็บ

30. เมื่อเปิดแอนิเมชันที่ต้องการขึ้นมา ให้คลิ้กเมนูคำสั่ง File > Preview In > iexplore

31. จากนั้นจะแสดงหน้าต่างไออีพร้อมแสดงแอนิเมชัน พร้อมรายละเอียดของไฟล์พร้อมทั้งโค้ดที่ผู้ใช้งานสามารถก็อปปี้ไปใช้งานได้ทันทีโดยต้องมีการอ้างถึงรูปภาพด้วย (จากบรรทัด [img]images/Untitled-1.gif[/img]) พร้อมก็อปปี้ไฟล์ต้นฉบับไปวางยังโฟลเดอร์ที่ต้องการ
เอ็กพอร์ตเป็นไฟล์ Gif Animation
เมื่อสร้างชิ้นงานอนิเมชันจนพอใจแล้ว ทดลองดูผลงานแล้วก็ต้องทำการบันทึกออกมาเป็นไฟล์ .GIF เพื่อนำไปใช้งาน

32. ไปที่หน้าต่าง Adobe ImageReady CS แล้วคลิ้กแถบ 2-Up เพื่อเปรียบเทียบค่ารูปภาพต้นฉบับกับรูปภาพที่บีบอัดขนาดให้น้อยลง

33. สังเกตขนาดไฟล์ที่แตกต่างกัน และจำนวนเวลาหากใช้ความเร็วโมเด็มที่ 28.8 Kbps ผู้ใช้งานสามารถคลิ้กเลือกระดับของโมเด็มเพื่อทดสอบว่าหากผู้เปิดชมใช้โมเด็มความเร็วในระดับต่างๆ จะใช้เวลารอนานเท่าไรถึงจะแสดงแอนิเมชัน
เลือกแบนเนอร์ตามระดับของโมเด็มที่ต้องการ

34. เมื่อได้ขนาดไฟล์ คุณภาพไฟล์ และเวลาที่ต้องการ ให้คลิ้กเลือกแบนเนอร์ที่ต้องการ

35. จากนั้นให้คลิ้กเมนูคำสั่ง File > Save Optimized

36. จะแสดงไดอะล็อกบ็อกซ์ Save Optimized เพื่อให้พิมพ์ชื่อไฟล์ลงไป แล้วคลิ้กปุ่ม Save คราวนี้ก็สามารถนำไฟล์ gif อนิเมชันไปใช้งานได้ทันที
เอ็กพอร์ตอนิเมชันเป็นไฟล์ Macromedia Flash (SWF)
นี่ก็เป็นอีกหนึ่งฟีเจอร์ใหม่ที่เพิ่มขึ้นใน Adobe ImageReady CS โดยเราสามารถทำการเอ็กพอร์ตไฟล์อนิเมชันเป็นไฟล์นามสกุล .swf โดยทำได้ดังนี้

37. คลิ้กเมนูคำสั่ง File > Export > Macromedia Flash SWF
การเอ็กพอร์ตเป็นไฟล์ในรูปแบบ Macromedia Flash

38. จะแสดงไดอะล็อกบ็อกซ์ Macromedia Flash (SWF) Export เพื่อให้กำหนดค่าไฟล์ แล้วคลิ้กปุ่ม OK

39. จากนั้นจะแสดงไดอะล็อกบ็อกซ์ Export As Macromedia SWF เพื่อพิมพ์ชื่อไฟล์แล้วคลิ้กปุ่ม Save

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

41. ให้ไปเปิดไฟล์รูปภาพที่ต้องการทำ Image Map ขึ้นมา จากนั้นคลิ้กเลือกเครื่องมือ Rectangle Image Map Tool
เลือกตำแหน่งที่ต้องการสร้างเป็นอิมเมจแมป

42. แล้วใช้เมาส์ลากลงยังตำแหน่งที่ต้องการให้ผู้ใช้งานคลิ้ก แล้วเปิดเว็บเพจไปยังหน้าที่กำหนดเอาไว้

43. ในพาเนล Image Map จะแสดงชื่อเป็น ImageMap_01 ให้กำหนด URL ที่ต้องการให้เปิดเว็บเพจข้อมูล, Target: เป็นการกำหนดการแสดงเพจ, Alt: พิมพ์ข้อความที่ต้องการให้แสดงเมื่อเมาส์ไปวงเหนือรูปภาพ

44. ในกรณีที่ต้องการอิมเมจแมปอันถัดไปแต่ต้องการรูปทรงเป็นวงกลม ให้คลิ้กปุ่ม Rectangle Image Map Tool แล้วเลือกไปที่ Circle Image Map Tool

45. แล้วใช้เมาส์ลากเพื่อเลือกตำแหน่งที่ต้องการ
เลือกสร้างอิมเมจแมปเป็นแบบวงกลม

46. ในพาเนล Image Map จะแสดงชื่อเป็น ImageMap_02 ให้กำหนด URL ที่ต้องการให้เปิดเว็บเพจข้อมูล, Target: เป็นการกำหนดการแสดงเพจ, Alt: พิมพ์ข้อความที่ต้องการให้แสดงเมื่อเมาส์ไปวงเหนือรูปภาพ

47. หากต้องการสร้างอิมเมจแมปอีกก็ให้ทำแบบนี้ไปเรื่อยๆ หากต้องการพรีวิวผ่านไออีให้คลิ้กปุ่มไอคอนไออี บนแถบเครื่องมือ Tool

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

49. หากต้องการกำหนดค่าเกี่ยวกับ Image Map ให้ไปคลิ้กที่เมนูคำสั่ง File > Output Settings > Image Maps

50. จะแสดงไดอะล็อกบ็อกซ์ 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 โดยให้คลิ้กปุ่มไอคอนอินเทอร์เน็ตเอ็กซ์พลอเรอร์บนแถบเครื่องมือ Tool

59. จะแสดงหน้าไออีพร้อมแสดงรูปภาพ ทันทีจะพบว่าเมื่อรูปภาพแต่ละส่วนที่ถูกโหลด สุดท้ายก็จะกลายเป็นรูปภาพที่ต้องการ
การบันทึกไฟล์ 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 และโฟลเดอร์จัดเก็บรูปภาพ

หวังว่าจะมีหลายคนชอบนะ (รึเปล่า)