การปรับแต่งแก้ไขรูปภาพด้วย Dreamweaver [Article ID : 119]

เรื่อง : การตบแต่งแก้ไขรูปภาพด้วยโปรแกรม Dreamweaver

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

วิธีการแก้ไขรูปภาพในเว็บเพจโดยใช้ Dreamweaver

แน่นอน ก่อนที่จะไปทำการแก้ไขรูปภาพด้วยโปรแกรม Dreamweaver เราก็ต้องทำการที่ Insert รูปภาพไว้ที่เว็บเพจเสียก่อน จากนั้นปฏิบัติตามขั้นตอนต่าง ๆ ดังนี้

1. เลือกที่รูปภาพที่ต้องการแก้ไข
2. จากนั้นที่ Properties Panel จะพบ Option สำหรับการปรับแต่งรูปภาพที่เลือก ดังรูป 3. สังเกตในส่วนของ Option ที่เขียนว่า Edit ซึ่งในส่วนนี้จะเป็นกลุ่มเครื่องมือสำหรับการแก้ไขปรับแต่งรูปภาพบนเว็บเพจได้ ดังรูป

ทำความรู้จักกับเครื่องมือปรับแต่รูปภาพของ Dreamweaver

ไอคอนที่เห็นในกลุ่ม Edit ของ Properties เมื่อเราเลือกที่รูปภาพ จะมีอยู่ด้วยกัน 7 ไอคอนคำสั่ง แต่สำหรับบทความนี้จะขอแนะนำเพียง 5 ไอคอนคำสั่ง ดังนี้

	Edit image settings ใช้ในการ Optimize รูปภาพ
	Crop ใช้ตัดรูปภาพตามขนาดที่ต้องการ
	Resample ใช้ปรับขนาดรูปให้เป็นขนาดตามที่ปรับใน Width กับ Height
	Brightness and Contrast ใช้ปรับแต่งความสว่างและความคมชัดของแสง
	Sharpen ใช้ปรับแต่งความคมชัด

*อีก 2 ไอคอนคำสั่ง เป็นคำสั่งที่จะใช้งานร่วมกับโปรแกรมภายนอกเช่น PhotoShop, Fireworks เป็นต้น จึงขอละไว้ในบทความนี้

ตัวอย่างการปรับแต่งรูปภาพด้วย Dreamweaver

ตัวอย่างเช่น ต้องการปรับแต่งรูปภาพที่ได้ Insert เข้ามาใช้กับเว็บเพจเรา โดยจะมีการปรับแต่ง ดังนี้
- ตัดรูปในส่วนที่ไม่จำเป็นออก
ซึ่งมีขั้นตอนดังนี้

1. เลือกที่รูปภาพ จากนั้นที่ Properties Panel ไปที่ Option ในส่วนของ Edit จากนั้นทำการเลือก Crop เพื่อทำการตัดรูปภาพในส่วนที่ไม่จำเป็นออก ดังรูป 2. เมื่อเลือก Crop แล้ว สังเกตที่รูป จะเกิดกรอบขึ้น เพื่อให้เราใช้ในการลากปรับพื้นที่เพื่อตัดรูปภาพให้เหลือไว้เฉพาะส่วนที่ต้องการเท่านั้น ให้ทำการปรับตามต้องการ 3. เมื่อปรับได้ตามต้องการแล้วทำการ Double Click ที่รูปภาพนั้น โปรแกรมจะทำการตัดรูปภาพให้เราโดยทันที ดังรูป *ทั้งนี้หากเราปรับแต่งผิดพลาดหรือต้องการปรับรูปให้กลับไปยังรูปเดิม ให้เราทำการ Undo หรือกด Ctrl+Z ที่คีย์บอร์ดเราได้ครับ

สำหรับ Option อื่น ๆ ในการปรับแต่งรูปภาพที๋โปรแกรมมีมานั้น ให้เราลองใช้งานกันดูครับ ซึ่งมีลักษณะหรือขั้นตอนการใช้งานเหมือน ๆ กันครับ ลองใช้งานกันดู... สวัสดีครับ.

About the Author

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com

บทความอื่นที่คุณอาจสนใจ

การทำ Rollover Image (เปลี่ยนรูปภาพเมื่อ MouseOver)

เรื่อง : การทำ Rollover Image กับโปรแกรม Dreamweaver หลายท่านคงเคยพบหรือเคยใช้งานเทคนิคที่เราเรียกกันว่า Rollov...  

การสร้าง Form และ Input สำหรับกรอกข้อมูล

เรื่อง : การสร้าง Form และ Input เพื่อให้ผู้ใช้เว็บกรอกข้อมูลโดยใช้ Dreamweaver Form หรือ ฟอร...  

ว่าด้วยเรื่อง Tag Selectors ของ Dreamweaver

เรื่อง : แนะนำการใช้ Tag Selectors ใน Dreamweaver Tag Selectors มีประโยชน์อย่างมากในการใช้งานโปรแกรม ในกา...  

การใช้ CSS กับโปรแกรม Dreamweaver CC

เรื่อง : สร้าง CSS ด้วยโปรแกรม Dreamweaver CC CSS ย่อมาจาก Cascading Style Sheets ...