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

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

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

Auttasti
PHP Sr. Member
PHP Sr. Member
Posts: 86
Joined: 30/07/2019 10:08 am

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

Postby Auttasti » 01/08/2019 1:15 pm

ผมจะมาใช้เครื่องมือที่ชื่อว่า 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:

Return to “Graphic design”

Who is online

Users browsing this forum: No registered users and 7 guests