[FREE] UI Live Tools – เครื่องมือช่วยทำ UI สวย ๆ ด้วย CSS3 ฟรี !!

designil

ในสมัยก่อนเวลาอยากได้ User Interface สวย ๆ บนเว็บไซต์ ไม่ว่าจะเป็นปุ่มสวย ๆ หรือฟอร์มล็อกอินที่สวยงามต้องใช้กราฟฟิกทั้งหมดครับ แต่พอมี CSS3 มาก็ทำให้เราสามารถสร้าง UI สวย ๆ บนหน้าเว็บไซต์ได้ง่าย ๆ โดยไม่ต้องใช้กราฟฟิกสักรูป

บทความแนะนำ: สอนการใช้งาน CSS3 พร้อมโค้ดตัวอย่าง

ความสามารถต่าง ๆ ของ CSS3 ไม่ว่าจะเป็น border-radius, linear-gradient, box-shadow etc. ล้วนช่วยให้ดีไซเนอร์สร้าง UI ในฝันออกมาโดยใช้แค่โค้ด ทำให้เว็บไซต์เบาขึ้นหลายเท่า และยังรองรับ การทำเว็บไซต์ให้สวยงามใน Retina Display อีกด้วย

ซึ่งการจะสร้าง User Interface สวย ๆ ขึ้นมาสักอันต้องมีการใช้ CSS3 ประกอบกันหลาย Property วันนี้ทางดีไซน์นิว Designil.com ไปเจอ Tool ออนไลน์เด็ด ๆ ที่จะช่วยให้เราสร้าง UI สวยงามด้วย CSS3 ได้ง่าย ๆ แถมเทสได้เลยว่าหน้าตาจะออกมาเป็นยังไง


UI Live Tools เครื่องมือออนไลน์ช่วยทำ User Interface สวย ๆ

เครื่องมือทั้ง 4 แบบของ UI Live Tools
เครื่องมือทั้ง 4 แบบของ UI Live Tools

UI Live Tools ประกอบไปด้วย 4 เครื่องมือ นั่นคือ

  • Button Builder – เครื่องมือออนไลน์ ช่วยสร้างปุ่มสวย ๆ ด้วย CSS3
  • Form Builder – เครื่องมือออนไลน์ ช่วยสร้างฟอร์มสมัครสมาชิกสวย ๆ ด้วย CSS3 (สามารถนำไปประยุกต์ใช้กับฟอร์มแบบอื่นได้)
  • Icon Builder – เครื่องมือออนไลน์ สามารถวาดไอคอนบนหน้าเว็บไซต์ พร้อมพรีวิวให้ทันที
  • Ribbon Builder – เครื่องมือออนไลน์ ช่วยสร้าง Ribbin สวย ๆ ด้วย CSS3

Interface การใช้งาน UI Live Tools

เรามาดูหน้าตาการใช้งานของ Button Builder กันครับว่า Interface เค้าออกมาให้ใช้งานง่ายแค่ไหน

Interface ของ Button Builder ใช้งานได้ง่ายมาก ๆ
Interface ของ Button Builder ใช้งานได้ง่ายมาก ๆ

ด้านซ้าย จะเป็นส่วนพรีวิวให้ดูครับ ว่าปุ่มของเราจะหน้าตาออกมาเป็นแบบไหน

ส่วนด้านขวา ตรง Global Settings เราสามารถเลือกปรับค่าต่าง ๆ ได้ตามใจชอบเลย ไม่ว่าจะเป็น ตัวหนังสือบนปุ่น, ระยะห่างของปุ่ม, ขนาดตัวหนังสือ ฯลฯ ถ้าไม่เข้าใจว่าส่วนนั้นจะปรับอะไรก็ลองลาก ๆ เปลี่ยนค่ามันดูครับ พรีวิวด้านซ้ายจะเปลี่ยนแบบ Real-time เลย

การเปลี่ยนสีใน UI Live Tools ก็สามารถทำได้ง่าย ๆ
การเปลี่ยนสีใน UI Live Tools ก็สามารถทำได้ง่าย ๆ

พอเลื่อนลงมาด้านล่าง จะเป็นส่วนที่ให้เลือกสีของปุ่มครับ เราสามารถตกแต่งได้หมดตั้งแต่ Normal State (สีตอนที่ปุ่มยังไม่ถูกชี้ / ถูกคลิก), Hover State (สีตอนที่เราเอาเม้าส์ไปชี้), Pressed State (สีตอนที่เราเอาเม้าส์คลิก)

การเปลี่ยนสีก็แค่คลิกบนชื่อส่วนที่เราต้องการเปลี่ยน เช่น Text Color จะมีกล่องเลือกสีโผล่มาให้เราหมุนได้ตามใจชอบเลย

หลังจากตั้งค่าต่าง ๆ จนสวยงาม และเลือกสีได้พอใจเราแล้ว ก็กดปุ่มสีแดงด้านล่าง Generate HTML เพื่อ Download โค้ด HTML มาใช้งานได้เลย และกด Generate CSS เพื่อ Download โค้ด CSS3 ที่ต้องใช้กับปุ่มของเราครับ

แค่นี้ก็ได้ปุ่ม CSS3 สวย ๆ มาใช้งานแล้ว ส่วน Form Builder กับ Ribbon Builder ก็จะมีวิธีการใช้เหมือน ๆ กันครับ

Icon Builder วาดไอคอนบนเว็บด้วย  แล้วเซฟไปใช้งานได้ทันที

เครื่องมือวาดไอคอนออนไลน์
เครื่องมือวาดไอคอน ออนไลน์

สำหรับเครื่องมือวาดไอคอนออนไลน์ ผมคิดว่ายังใช้ยากไปนิดครับ ตรงที่ไม่สามารถวาดเป็นเส้น หรือเป็น Shape ต่าง ๆ ได้ (เช่น สี่เหลี่ยม วงกลม) ต้องใช้วิธีการ dot แบบจุดต่อจุด เหมือนคนทำเกม 8bit สมัยก่อนครับ แต่ยังดีที่สามารถอัพโหลดรูป 16×16 ที่มีอยู่แล้วมาวาดต่อได้

ในด้านซ้าย จะเป็นพื้นที่วาดรูป คลิกซ้ายเพื่อจุดได้เลย โดยขยาย Brush size และเลือกสีได้จากด้านล่าง

ส่วนด้านขวา จะเป็นการแสดงผลให้ดูครับ ว่าไอคอนนี้พอเอาไปใช้ในเว็บไซต์จะออกมาเป็นอย่างไร นอกจากนั้นยังสามารถเลือกไอคอนที่เค้าวาดไว้แล้วจาก Gallery หรืออัพโหลดรูป 16×16 (รับเฉพาะ PNG) มาวาดต่อได้

ตัวเลือกการ Export ของ Icon
ตัวเลือกการ Export ของ Icon

หลังจากวาดเสร็จเรียบร้อย สวยงามพอใจเราแล้ว ให้เลื่อนลงมาด้านล่างหาปุ่ม Generate Base64 เพื่อดาวน์โหลด Icon แบบ Base64 (เป็นตัวหนังสือ สามารถเอาไปใส่ใน HTML หรือ CSS ได้เลย) หรือถ้าต้องการดาวน์โหลดไอคอนเป็นไฟล์รูป สามารถกดปุ่ม Download PNG เพื่อเซฟเป็นรูป PNG ได้เช่นกันครับ

Tools ช่วยเขียน CSS3 ตัวอื่น ๆ

นอกจาก UI Live Tools ตัวนี้แล้ว มีอีกหลายตัวที่ทางดีไซน์นิวเคยแนะนำไปครับ สามารถดูได้ที่ลิงค์ด้านล่างเลยครับ

หากมีข้อสงสัยอะไรสามารถสอบถามได้เลยนะคร้าบ

designil

designil

Data engineer & WordPress Developer ทำงานที่บริษัทแคนว่า ซิดนีย์ออสเตรเลีย ปัจจุบันเป็นเจ้าของเว็บไซต์ Designil, DataTH ชอบอ่านบทความใหม่ๆ ตลอดเวลา และชอบสรุปเรื่องราวเกี่ยวกับเทคโนโลยีให้ภาษาที่เข้าใจง่าย ยินดีที่ได้รู้จักทุกคนนะครับ
บทความทั้งหมด