เทคนิคการสร้างงานเว็บกับ Adobe ImageReady CS (ตอนที่ 1)

โปรแกรมที่มาพร้อมกับ 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 src="images/Untitled-1.gif" width="468" height="60" alt="">) พร้อมก็อปปี้ไฟล์ต้นฉบับไปวางยังโฟลเดอร์ที่ต้องการ

ข้อมูลจาก : http://www.arip.co.th
โดย สหรัถ แซ่ตั้ง