https://raw.githubusercontent.com/terwanerik/Retini/master/Images/Icon~256.png

[TH] Generating .png file @1x @2x from an original @3x using Retini

เนื่องจากเราทำงานกันเป็นทีม เราเป็น Developer ก็รับผิดชอบในส่วนของการ coding ไป ส่วนพวกเรื่อง graphic ต่างๆ ก็ต้องยกให้เป็นหน้าที่ของ Designer เขา (ยกเว้น Freelancer ที่ทำเองหมดทุกอย่าง) แต่ปัญหาที่มักจะพบกันบ่อยๆ ก็คือ graphics ที่ได้รับมาจาก Designer นั้น มีขนาดไม่ถูกต้องตาม iOS Human Interface Guidelines ของ Apple

สิ่งที่ทำกันทั่วไปก็คือ แจ้งขนาด graphic @1x @2x @3x ให้กับ Designer ไป export .ai ออกมาเป็น .png ให้ครบทั้งสามขนาดต่อ graphic หนึ่งชิ้น (แต่เดี๋ยวนี้คงใช้แค่ @2x @3x ก็เพียงพอแล้ว) ปัญหาที่เกิดต่อมาอีกก็คือ size ที่ได้รับมามันไม่ถูก!!! เราก็ต้องเดินไปบอกให้เขาแก้ให้อีก พอบ่อยๆ เข้า เราก็รู้สึกไม่ดี ที่ต้องเดินไปบอกหลายๆ รอบ หรือแม้กระทั่งฝั่ง Designer ก็อาจจะรู้สึกรำคาญบ้างเหมือนกัน ทีนี้เราจะแก้ปัญหาพวกนี้ยังไง หรือมีวิธีที่จะช่วยให้ปัญหามันทุเลาลงได้บ้างหรือไม่???

บังเอิญได้ยินพี่ที่ทำงานใช้ tool ที่ชื่อว่า Retini แล้วเห็นว่ามีประโยชน์อย่างมาก เลยเอามาเขียน blog เพื่อแบ่งปันให้ทุกๆ คนด้วยครับ

Retini

เจ้า Retini มันคือ Mac application ที่เป็น Open Source ที่ใช้สำหรับ generate @2x @1x จากไฟล์ต้นฉบับที่เป็น @3x ได้ วิธีใช้ก็ง่ายๆ ไปดาวน์โหลดมาจาก https://github.com/terwanerik/Retini/releases หรือใครอยากจะแก้อะไรก็ folk มาแก้ แล้ว build ออกมาจาก Xcode เองก็ย่อมได้ เดี๋ยวเรามาลองใช้กันเลยดีกว่า เริ่มต้นให้เปิดโปรแกรมขึ้นมาเลย

Retini

หลังจากนั้นผมจะลองเอาภาพ @3x ที่มีขนาด 256*256 px มาทำการ generate @2x @1x

original image (retini@3x.png) 256*256 px

วิธีใช้ก็แสนง่าย ให้ลาก @3x ที่ต้องการให้ generate ไปที่ตัว Retini ได้เลย หลังจากนั้น @2x @1x จะถูก generate ออกมาที่ directory เดียวกันกับ @3x นั่นแหละ โดยจะเป็นการ copy ภาพ แล้ว resize เอา ไม่ได้ไปทำการแก้ไขภาพต้นฉบับแต่อย่างใด ทำให้คุณภาพของภาพต้นฉบับก็ไม่เสียหายอีกด้วย

@1x @2x @3x image results

Tah-dah! ได้ภาพมาครบเรียบร้อย แถม size แต่ละภาพก็ถูกต้องอีกด้วย นอกจากนี้ยังรองรับการ drag multiple files และ drag directories อีกด้วย สะดวกสุดๆ โดยสามารถอ่านเพิ่มเติมได้ที่ http://terwanerik.github.io/Retini/ หรือ https://github.com/terwanerik/Retini ครับ

ต่อไปเราก็ไม่ต้องมากังวลเรื่องขนาดอีกต่อไป เราก็แค่บอกให้ Designer export @3x มาให้ถูกต้องแค่รูปเดียวพอ แล้วที่เหลือเรามาจัดการต่อด้วย Retini เอง ช่วยลดงานฝั่ง Designer ได้ด้วย งานนี้ win win! happy ทั้งสองฝ่าย เย้

หวังว่าบทความนี้จะเป็นประโยชน์กับทาง iOS Developer และ Designer ทุกท่านนะครับ หากมีข้อผิดพลาดประการใด ก็ขออภัยมา ณ ที่นี้ด้วยครับ สำหรับวันนี้ ลากันไปก่อน พบกันใหม่ บทความหน้า สวัสดีครับ :)

ติดตามเรื่องราวต่างๆ ทั้งเทคโนโลยี มุมมองชีวิต การเรียนรู้ การใช้ชีวิต ได้ที่ https://www.facebook.com/itopstory/