Freebies 7 สคริปต์ Photoshop มีไว้ใช้ให้ฟินเวอร์ By uiblogaziner February 7, 20155998 views ShareTweet 0 Photoshop ไม่ว่าเวอร์ชันไหน ก็ไม่สามารถตอบสนองความต้องการของยูสเซอร์ได้ 100% ดังนั้นในเวอร์ชันใหม่ตั้งแต่ CS5 ขึ้นไป ทาง Adobe จึงมีการยอมให้ตัวโปรแกรม Photoshop (หรือหลายๆ โปรแกรมในตระกูล) สามารถรันสคริปต์ JSX (ภาษาหนึ่งในตระกูลจาวาสคริปต์) เพื่อให้ทำงานฟังก์ชันเฉพาะอย่างตามต้องการและหลากหลายมากขึ้น Kalim Khadeyev เป็นหนึ่งในผู้พัฒนาสคริปต์ชาวรัสเซียคนหนึ่ง ที่นำเสนอสคริปต์ที่น่าใช้งานเอามากๆ เลยครับ ผมเลือกมา 6 สคริปต์มีทั้งฟังก์ชันที่ปกติทำได้ง่ายอยู่แล้วใน Illustrator แต่ไม่มีใน Photoshop แถมพร้อมกับอีก 1 สคริปต์จาก Roman Shamin ผู้พัฒนาสคริปต์ชาวรัสเซียอีกคน ที่ต้องถูกใจ designer ที่ทำงานเกี่ยวกับ UI แน่ๆ ผมรับรอง มาดูกันว่า 7 สคริปต์ที่ว่ามีอะไรกันบ้างนะ (ดูวิธีการรันสคริปต์จากบทความ ใส่ความมนให้ความเหลี่ยม และวิธีการสร้าง shortkey ให้กับสคริปต์ที่บทความนี้ด้านล่างครับ) 1. Expand Smart Object ปัญหาหนึ่งสำหรับผู้ใช้งาน Photoshop (CS5 ขึ้นไป) เวลาทำงานเกี่ยวกับ layer ที่เป็นเวกเตอร์คือ เวลาเรารวมเลเยอร์ที่เป็นเวกเตอร์ (หรือ smart object) ด้วย Ctrl+E แล้ว เราจะไม่สามารถแยกเลเยอร์ที่รวมไปแล้วได้ สคริปต์นี้จะช่วยให้เราสามารถแตกเวกเตอร์ที่หลอมหลอม ให้แยกออกมาเป็นส่วนๆ เหมือนเดิม ภาพด้านซ้ายจะเห็นว่า เลเยอร์ Circle เกิดจากการรวมกันของเวกเตอร์ 4 อันรวมกัน พอเรารันสคริปต์ Expand Smart Object จะได้เลเยอร์เวกเตอร์แยกไว้แต่ละอันเลย พร้อมทำ group ให้ด้วยล่ะ ดาวน์โหลดสคริปต์ Expand Smart Object 2. Renamer สคริปต์ Renamer จะช่วยแก้ปัญหา designer ที่ใส่ใจในการตั้งชื่อเลเยอร์ให้สวยงามและสัมพันธ์กับวัตถุในเลเยอร์ แต่หากเป็นวัตถุเดียวกัน เรามักจะทำการ duplicate เลเยอร์ แล้วจะได้ชื่อเลเยอร์ที่มีคำว่า …copy+ตัวเลข ต่อท้าย หากไม่กี่เลเยอร์ก็พอแก้ได้อยู่ แต่หากเริ่มเกิน 5 เลเยอร์ด้วยแล้ว การจะมาตั้งชื่อเลเยอร์ให้งดงามอาจไม่ใช่งานที่น่าทำสักเท่าไร โชคดีครับที่เรามีสคริปต์ Renamer ที่ให้เรากำหนด format การตั้งชื่อเลเยอร์ พร้อมรันเลขเลเยอร์ให้เราด้วย โดยพอเรารันสคริปต์นี้จะมี dialog ให้เรากรอกรูปแบบของชื่อเลเยอร์ ตัวอย่างรูปด้านบนคือ เราจะตั้งชื่อเลเยอร์ว่า Item # แล้วตามด้วยตัวเลขที่รัน (1..2..3..) ด้วยการใช้ syntax %n โดยให้ชื่อใหม่นี้แทนที่ชื่อเดิม วิธีก็คือ ให้เราเลือกเลเยอร์ที่เราต้องการเปลี่ยนชื่อทั้งหมด แล้วค่อยรันคริปต์นี้ จากนั้นก็ใส่รูปแบบชื่อพร้อมตัวแปรรันเลข (%n) ถ้าเลือก Replace เราก็จะได้ผลลัพธ์ดังรูปด้านขวามือครับ ชื่อใหม่จะไปแทนชื่อเก่า แล้วตามด้วยเลขที่รัน ถ้าเลือก Append จะได้ชื่อ ShapeItem #1, ShapeItem #2,… และถ้าเลือก Prepend ก็จะได้ชื่อ Item #1Shape, Item #2Shape,… ดาวน์โหลดสคริปต์ Renamer 3. Rotate me สคริปต์อันนี้อาจจะดูไม่จำเป็นเท่าไร เพราะถ้าเป็นผม คงใช้ Illustrator แทน แต่ก็อยากให้รู้ว่าสิ่งที่ Illustrator ทำได้ ความจริง Photoshop ก็ทำได้เหมือนกัน อย่างเช่น การหมุนวัตถุพร้อมกับ copy ตามจำนวนที่เราต้องการ วิธีใช้ก็ง่ายๆ ครับ เลือกวัตถุ แล้วรันสคริปต์ จะมี windows ให้เราใส่ค่า parameter ต่างๆ ดังนี้ Copies: เลือกจำนวนที่จะทำการคัดลอก Radius: รัศมีการหมุนห่างจากศูนย์กลางเท่าไร Rotate: หมุนไปทีละกี่องศา Options ก็มีให้เลือก Rotate Relative to Center: คือหมุนวัตถุตามองศาที่เรากรอกไปด้วย Group Layers: ทำการ group: กลุ่มวัตถุที่สร้างใหม่ที่เกิดจากการหมุนของสคริปต์นี้ Save Original Layer: คงวัตถุต้นแบบไว้ ตัวอย่างเป็นการติ๊กเลือก option: Rotate Relative to Center คือให้หมุนวัตถุตามองศาด้วย ถ้าไม่ติ๊กเลือก Rotate Relative to Center วัตถุจะเรียงตัวตามแนวดั้งเดิม (แนวตั้งในตัวอย่างนี้) แล้วจะถูกวางตามองศาต่างๆ ตามค่าที่กรอก ดังรูปด้านบนขวา ดาวน์โหลดสคริปต์ Rotate Me 4. Transform Each เวลาที่เราจะทำการย่อหรือขยายวัตถุหลายๆ ชิ้นพร้อมกัน Photoshop จะคำนวณเอาจากจุดศูนย์กลางของกลุ่มวัตถุที่เลือกทั้งหมดเป็นจุดอ้างอิง เมื่อย่อหรือขยายเสร็จ เราก็ต้องย้ายตำแหน่งของวัตถุแต่ละชิ้นให้เข้าที่เข้าทางใหม่ ซึ่งโดยความต้องการแล้ว เราอยากที่จะย่อ/ขยายวัตถุหลายๆ ชิ้นโดยใช้จุดอ้างอิงของวัตถุแต่ละชิ้นนั้นเพื่อที่ว่าจะได้ไม่ต้องมาเคลื่อนย้ายอีกทีให้เสียเวลา Transform Each สามารถตอบสนองความต้องการนี้ครับ แต่จะมีข้อเสียคือเราต้องรู้ว่าขนาดที่เราต้องการนั้นมันต่างจากขนาดเดิมกี่เปอร์เซ็นต์ ดังนั้นเราอาจจะลองย่อ/ขยายดูก่อนสักชิ้นหนึ่ง แล้วค่อยรันสคริปต์นี้กับวัตถุหลายๆ ชิ้นน่าจะดีกว่าครับ หน้าต่างตั้งค่าสำหรับสคริปต์นี้ก็ตรงไปตรงมาครับ ก็กำหนดขนาดใหม่ที่เราต้องการเป็น % ถ้าอยากหมุนวัตถุด้วย (Rotate) ก็เลือกองศา จากนั้นตรง Options ก็มีให้เราเลือก: Scale styles: ย่อ/ขยาย สไตล์ที่มีอยู่ใน layer ด้วย Constrain Proportions: ย่อ/ขยายโดยคงสัดส่วน ผลลัพธ์ของสคริปต์นี้ก็เป็นตามตัวอย่างด้านบนเลยครับ โหววว. ดาวน์โหลดสคริปต์ Transform Each 5. Layout Wrapper สคริปต์นี้ตรงไปตรงมาคือ ใส่กรอบ browser ให้กับผลงานเพื่อนำใช้ pitch งานครับ (นำเสนอผลงานเพื่อการคัดเลือก) ดาวน์โหลดสคริปต์ Layout Wrapper 6. Color Parser การสร้างชุด palette ใน Illustrator ทำได้ไม่ยากเลย เพียงแค่เราสร้าง object ตามแต่ละสีที่ต้องการ จากนั้นก็เลือก object ทั้งหมด ตรง panel swatch จะมีปุ่มให้กดเพิ่มสีจากวัตถุที่กำลังเลือก แต่ใน photoshop ไม่สามารถทำได้ เราต้องสร้างสีทีละสีไปเรื่อยๆ เหนื่อยอยู่หากต้องการ 10 สีขึ้นไปครับ สคริปต์ Color Parser นี้จะช่วยให้เราสร้างชุด palette สีได้อย่างรวดเร็ว และสนุกอีกด้วย อันดับแรกให้เราเตรียม palette สีให้เรียบร้อย เน้นว่าแต่ละสีต้องอยู่ในช่องระยะห่างที่เท่าๆ กันนะครับ จากนั้นใช้เครื่องมือ selection เลือก palette สีที่เตรียมไว้นี้ ตัวอย่างคือ เป็นชุด palette สีที่่มี 9 คอลัมน์ 3 แถว พอเรารันสคริปต์ Color Parser ก็ใส่ค่าคอลัมน์และแถวตามชุด palette สีของเรา เราก็จะได้ชุด Swatches ตามชุด palette สีที่เราต้องการทั้งหมดในคราวเดียว อันที่จริงเราไม่จำเป็นต้องเตรียมสีแต่สีให้เป็นสี่เหลี่ยมนะครับ แต่ขอให้สีแต่ละสีอยู่ในช่องที่มีระยะห่างเท่าๆ กัน โดยมีค่าจำกัด column ที่ 32 และ row ที่ 32 เหมือนกันครับ ส่วนใครอยากสร้างสรรค์งานศิลปะด้วยสคริปต์นี้ ก็อ่านต่อได้เลยครับ เราจะมาสร้างชุด swatch ที่เป็นรูป Mario กัน โดยมีขั้นตอนดังนี้ 1. ให้ save ภาพด้านบนและไปเปิดใน Photoshop ทำการ Zoom และเลือกพื้นที่ภาพตามรูปด้านบน 2. ลบสีใน Swatch ออกทั้งหมด วิธีลัดคือให้ กด Alt ค้างไว้แล้วคลิกซ้ายที่ช่องสี จะทำให้ลบสีได้เร็วกว่ากดเลือกปุ่มถังขยะ เสร็จแล้วให้รันสคริปต์ Color Parser กรอกค่าตามรูปด้านบน แล้วกด OK 3. ปรับขนาดหน้าต่าง Swatch จนได้รูป Mario สนุกใช่ไหมล่า 555 ดาวน์โหลดสคริปต์ Color Parser 7. Size Mark สคริปต์สุดท้ายต้องเป็นที่ชื่นชอบของ designer เอามากๆ เพราะเป็นเครื่องมือช่วยทำ spec UI เวลาเราส่งงานให้ developer ทำหน้า UI ตามแบบที่ส่งไป บางทีหากเราไม่มีขนาดหรือระยะห่างวัตถุให้ developer ดู ก็จะทำให้ผลงานออกมาต่างกับที่เราออกแบบเยอะจนต๊กกะใจได้เลยครับ แนะนำว่าให้ save งานให้เรียบร้อยก่อนรันสคริปต์นี้นะครับ เพราะตัวสคริปต์จะสร้าง history และ layerเยอะมาก เวลาวัดระยะห่างแต่ละครั้ง วิธีใช้ก็เพียงแค่ สร้าง marquee ที่เป็นสี่เหลี่ยมระหว่างช่องที่เราต้องการวัด จากนั้นรันสคริปต์ แค่นี้เองครับ แนะนำเวลารันสคริปต์ให้สร้าง shortkey สำหรับเรียกสคริปต์นี้นะครับ มันจะเร็วเป็นเท่าตัว เช่น ตัวอย่างใช้ shortkey – Shift+Alt+P ครับ ดาวน์โหลดสคริปต์ Size Mark วิธีสร้าง shortkey ให้กับสคริปต์ 1. วางไฟล์สคริปต์ที่ path Photshop/Presets>Scripts (เครื่องผมอยู่ที่ C:\Program Files\Adobe\Adobe Photoshop CC\Presets\Scripts สำหรับ Windows) หมายเหตุ วิธีการนี้จะทำให้เราเห็นรายชื่อสคริปต์ผ่านทางเมนู File > Scripts ไม่ต้อง browse หาไฟล์สคริปต์ทุกครั้งที่ต้องการใช้ แนะนำให้วางสคริปต์ที่ใช้งานบ่อยใน folder นี้นะครับ 2. เข้าไปที่ Edit > Keyboard Shortcut ตรงหัวข้อ Application Menu Command เลือก File > Scripts 3. มองหา script ที่ชื่อ Size Mark แล้กด shortkey ที่ต้องการ ที่มา: http://blog.kam88.com/en by Kamil https://github.com/romashamin/Size-Marks-PS#install
