ใครก็ตามที่ไม่ชอบโปรแกรมหนักๆอย่าง Adobe Dreamweaver CC ประมาณว่าอยากเห็นแต่ code HTML, CSS, Javascript ทั่วไปเฉยๆ ไม่อยากให้มีปุ่มเยอะๆ มารกหน้าจอ คงได้ลองใช้ Brackets หรือ Adobe Edge Code CC กันติดอกติดใจกันไปแล้ว (ดูวิธีการใช้งานได้จากวิดีโอของโค้ชพลที่นี่)
แต่รู้หรือไม่ว่า ทีมงาน Brackets กำลังซุ่มทำความสามารถพิเศษที่จะทำให้การนำไฟล์ PSD (ไฟล์ Photoshop ที่ Designer ออกแบบ) มาสร้างเป็น HTML ได้ง่ายขึ้นมากๆ เจ้านี่มีชื่อเรียกเล่นๆ คือ “Design Comp to Code”
รู้จักกับ Design Comp to Code ใน Brackets
โดยปกติแล้วการทำงานออกแบบ และสร้างเว็บไซต์ พวกเรามักจะสร้าง “ภาพเสมือนจริง” ใน Photoshop ก่อน แล้วค่อยเอามาค่อยๆ เทียบแกะ design ออกมาเป็น code HTML และ CSS ใช่ไหม
แนวคิดของ Design Code to Comp จะทำให้การทำงานส่วนนี้ง่ายขึ้น นั่นคือเราสามารถเปิดไฟล์ Photoshop ใน Brackets แล้ว “ดึง” ข้อมูลของ Layer นั้นๆ มาดู รวมถึงแสดงเป็นตัวเลือกอัติโนมัติ (Code Completion) เมื่อเราเขียน code ด้วย
ซึ่งความสามารถที่เปิดเผยออกมาตอนนี้มีดังนี้ครับ
- ดึงข้อความจาก Text Layer ในไฟล์ PSD มาใส่ใน HTML ได้เลย
- ตัว Brackets สามารถอ่าน Font Style ของ Text Layer ในไฟล์ Photoshop มาให้เราเลือกได้ ตอนนี้มี Font-family, font-size, color, font-weight
- ดึงข้อมูลจาก shape มาเขียน CSS ได้ เช่น 4 เหลี่ยม, 4 เหลี่ยมมุมมน, และวงกลม
- ดึง Layer ภาพมากำหนด path และชื่อไฟล์ภาพใหม่ เพื่อให้ Brackets สร้างไฟล์ภาพแยกออกมาจากไฟล์ Photoshop ความสามารถนี้ใช้กับ <img> และ CSS Background Image ได้ทันที
- เลือกหลายๆ Layer ใน Photoshop เพื่อสร้างรวมเป็นไฟล์ภาพเดียวได้
Download Design Comp to Code มาใช้
ปัจจุบันที่ผมสรุปเนื้อหาอยู่นี้ เจ้า Design Comp to Code ยังไม่เปิดให้ทุกคนใช้งานได้ ทางทีมงาน Brackets เปิดให้คนเข้าไปลงทะเบียน เพื่อร่วมโครงการ Private Beta ของ Design Comp to Code แทน
สนใจลงทะเบียนเข้าร่วมโครงการ Private Beta คลิกที่นี่ แล้วตอบแบบฟอร์มเลย ถ้าเขาเลือกเข้าโครงการ จะมี Email ตอบกลับมาครับ
ต่อไปการสร้างเว็บจะเร็วส์ขึ้นอีก 🙂