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

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

          แสดงการพรีวิวผ่านทางไออี

เอ็กพอร์ตเป็นไฟล์ 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 จะเห็นแล้วว่า
เราสามารถสร้างสรรค์งานออกแบบเว็บเพจได้อย่างง่ายดาย
ช่วยอำนวยความสะดวกมากทีเดียว
รวมถึงรูปแบบเว็บไซต์ก็จะดูดีและทันสมัยอีกด้วย
สำหรับคนที่ใช้โปรแกรมอื่นอยู่
ลองหันมาใช้โปรแกรมนี้รับรองว่าใช้งานได้ไม่ยากและให้ผลลัพธ์ที่น่าทึ่งออกมาอีกด้วย
ฉบับนี้ต้องขอไปก่อนนะครับ สวัสดีครับ

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

ข้อความนี้ถูกเขียนใน AdoBE pHOtoshOP คั่นหน้า ลิงก์ถาวร

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s