การปรับแต่งแก้ไขรูปภาพด้วย 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

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

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

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

การตั้งไซต์งานใหม่ (New Site, Site Setup)

เรื่อง : เริ่มต้นใช้งานโปรแกรม Dreamweaver ต้องทำ Site Setup ก่อน ก่อนที่เราจะใช้งานโปรแกรม Dreamweaver...  

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

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

สร้างจุด Link ภายในเว็บเพจเดียวกัน (Named Anchor)

เรื่อง : การสร้างจุด Link ภายในเว็บเพจเดียวกันด้วย Dreamweaver Web Page เราสามารถกำหนดจุด หรือตำแห...