วิธีการใช้เครื่องมือ Slice ในโปรแกรม Adobe Photoshop cs6

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

Auttasti
PHP Sr. Member
PHP Sr. Member
โพสต์: 86
ลงทะเบียนเมื่อ: 30/07/2019 10:08 am

วิธีการใช้เครื่องมือ Slice ในโปรแกรม Adobe Photoshop cs6

โพสต์ที่ยังไม่ได้อ่าน โดย Auttasti »

ผมจะมาใช้เครื่องมือที่ชื่อว่า Slice Tool ในโปรแกรม Adobe Photoshop cs6 ในการ Seve รูปในครั้งเดียว แต่จะได้รูปออกมามากกว่า 1 รูป
เครื่องมือตัวนี้ผมใช้ในการเสร้างเว็บ กับโปรแกรม Adobe Dreamweaver cs6 ในการสร้างเว็บแบบ lay out โดยใช้ในการสร้างภาพแล้วเอาไปใส่นั้นเองครับ
หรือไม่จำเป็นจำต้องทำเกี่ยวกับเว็บก็ได้ครับ เราสามารถนำไปประยุคใช้อะไรได้อีกมากมายเลยครับ

เรามาดูวิธีทำกันเลยนะครับ

ขั้นแรก ให้เรา New File ขึ้นมาใหม่ เสร็จแล้วให้เราตั้ง ชื่อ File งานของเรา ของผมจะตั้งเป็น Manu ber และกำหนดขนาด ความกว้าง ความยาว ตามที่เราต้องการ
Slice 1.png
เมื่อเราให้หน้างานที่เรากำหนดไว้แล้ว แล้วเราทำการ ดับเบิ้ลคลิกที่ layer Background แล้วจะขี้นหน้า New layer หลังจากนั้นเราก็ไม่ต้องทำอะไรให้เรากด OK ได้เลย
Slice 2.png
หลังจากนั้นเราก็ออกแบบได้เลย และเมื่อออกแบบเสร็จแล้ว ในที่นี้ผมออกแบบเป็น Manu bar นะครับ ให้เราทำการลากเส้นแบ่งส่วนที่จะแบ่งออกเป็นรูป ๆ ให้ชัดเจน โดยการลากจากไม้บรรทัดที่วัดทั้งแนวนอนและแนวตั้งลงมาครับ
Slice 3.png
เมื่อแบ่งเป็นรูป ๆ ที่เราต้องการแล้ว ให้เรากดที่ เครื่องมือ Slice Tool ครับ
Slice 4.png
แล้วทำการคุมตามที่เราได้แบ่งไว้ ทำการคุมให้หมดทุกรูปนะครับ หลังจากที่คุมแล้ว ก็จะมีตัวเลขขึ้นมาอยู่ด้านบนซ้าย ของที่เราทำการคุมไว้ทุกรูป
Slice 5.png
หลังจากนั้นให้เรา เลือกไปที่ File >> Seve for web (หรือ กด shift+ctrl+alt+s พร้อมกัน)
Slice 6.png
เมื่อขึ้นมาในหน้า Save for web แล้ว ให้เราตรวจดูรูปภาพอีกที ว่ามีตรงไหนที่เราจะทำการแก้ไขอีกหรือไม่ ถ้าไม่มีให้เรากด Save ได้เลย
Slice 7.png
เมื่อเราทำการ Save แล้ว ให้เราเข้าไปดูใน Folder ที่เราได้ทำการ Save ไว้ โปรแกรมจะสร้าง Folder ให้เราโดยอัตโนมัติ และเก็บรุปที่เรา Save ทั้งหมดไว้ใน Folder นั้นให้
Slice 8.png
เมื่อเข้าไปแล้วก็จะเห็นว่า รุปที่เราได้ทำการ Save ไว้เมื่อกี้ ได้ถูกแบบออกเป็นหลายรูป ตามที่เราได้ทำการแยกไว้ และมีขนาดเท่าที่เราได้แยกไว้เหมือนกันครับ
Slice 9.png
เราก็สามารถนำรูปไปใช้ได้เลยครับ
:like:
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 62