Brackets

สุดยอด feature เด็ดสำหรับ Web Designer จาก Brackets ที่กำลังมา (วิดีโอสาธิต)

เรื่องที่เกี่ยวข้อง - Adobe Edge Code CC, Brackets, Design Comp to Code

ใครก็ตามที่ไม่ชอบโปรแกรมหนักๆอย่าง 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 ตอบกลับมาครับ

ต่อไปการสร้างเว็บจะเร็วส์ขึ้นอีก 🙂

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save