คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #83 : เทคนิคการสร้างงานเว็บกับ Adobe lmageReady C S
เทนิารสร้าานเว็บับ 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. านั้นะแสหน้า่าไออีพร้อมแสแอนิเมัน พร้อมรายละเอียอไฟล์พร้อมทั้โ้ที่ผู้ใ้านสามารถ็อปปี้ไปใ้านไ้ทันทีโย้อมีารอ้าถึรูปภาพ้วย (าบรรทั 
) พร้อม็อปปี้ไฟล์้นบับไปวายัโฟลเอร์ที่้อาร
แสารพรีวิวผ่านทาไออี
เอ็พอร์เป็นไฟล์ 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 และโฟลเอร์ัเ็บรูปภาพ
าัวอย่าารใ้านโปรแรม Adobe ImageReady CS ะเห็นแล้วว่า เราสามารถสร้าสรร์านออแบบเว็บเพไ้อย่า่ายาย ่วยอำนวยวามสะวมาทีเียว รวมถึรูปแบบเว็บไ์็ะูีและทันสมัยอี้วย สำหรับนที่ใ้โปรแรมอื่นอยู่ ลอหันมาใ้โปรแรมนี้รับรอว่าใ้านไ้ไม่ยาและให้ผลลัพธ์ที่น่าทึ่ออมาอี้วย บับนี้้ออไป่อนนะ
ความคิดเห็น