26 August 2009 ขั้นการการออกแบบ GUI ของ audio plugin ขั้นการการออกแบบ GUI ของ audio plugin

ตั้งแต่วันที่เริ่มต้นสนใจเรื่องของ software ที่เกี่ยวกับด้าน audio จนมาถึงวันนี้ ผมมีนิสัยอย่างนึงในการเลือกใช้ software ที่มีอยู่เต็มท้องตลาด ก็คือเน้น “สวย” มาก่อน “เสียง” มันไม่ใช่นิสัยที่ดีสักเท่าไหร่ แต่ทำไงได้ ก็มันชอบอย่างนี้จริงๆ เวลาเห็น software ที่มี GUI (graphical user interface) สวยๆแล้วมันทำให้รู้สึกอยากจะลองใช้ ลองกดโน่นกดนี่ไปหมด

เริ่มต้นตั้งแต่หัดใช้ Cakewalk 9 ยังไม่ทันจะใช้เป็นหรือรู้เรื่องอะไรเลย พอไปเห็นหน้าตาของ Cubase VST 5 ก็จัดการย้ายมาใช้ทันที เพียงเพราะว่ามันสวยกว่า แล้วก็ยังจำได้ถึงครั้งแรกที่เห็น GUI ของ PSP VintageWarmer ที่ดูหน้าตา vintage มากๆ มันหล่อบาดใจจริงๆ แล้วนิสัยนี้ก็ยังติดตัวเรื่อยมา จนถึงทุกวันนี้ก็เป็นอยู่ แต่ก็เริ่มมีข้อจำกัดมากขึ้น อย่างเช่น plugin ของ Waves ที่เดี๋ยวนี้หันมาทำ GUI แบบ vintage ให้กับ collection ใหม่ๆที่ออกมา มันสวยก็จริงนะ แต่ราคามันโหดมาก ครั้นจะไปหาของ crack มาใช้ก็ยังมีละอายใจอยู่นิดหน่อย

Density mkII : Teaser

Density mkII : Teaser

แต่สำหรับทางสาย freeware แล้ว บรรดา free VST plugin มีออกมาให้เลือกใช้มากมาย โดยเฉพาะอย่างยิ่งบน Windows หลายค่ายทำออกมาได้ดีมากทั้งหน้าตา, คุณภาพเสียง และการใช้งาน ค่ายหนึ่งที่ต้องยกขึ้นมาพูดถึงทุกครั้งที่เขียนถึง freeware VST plugin ก็คือค่าย Bootsy (varietyofsound.wordpress.com) ให้เครดิตไว้ตรงนี้ว่าเฮียโป้ (bZero) เป็นคนแนะนำให้รู้จักค่ายนี้ ผมเองก็ใช้ของค่ายนี้อยู่หลายตัว ก็มันทั้งใช้งานได้ดี แล้วก็สวยด้วย

Thanks to individual layers, the graphics remains editable until the end

Thanks to individual layers, the graphics remains editable until the end

เมื่อกี้นี้เพิ่งอ่าน post นึงบน blog Variety of Sound เกี่ยวกับขั้นตอนการออกแบบ GUI ให้กับ Bootsy plugin โดยมีรูปประกอบเป็น Density mk2 อีกหนึ่ง free plugin ที่กำลังจะออกในเร็วๆนี้ เนื้อหาให้ภาพรวมของขั้นตอนการทำงานได้ดีมาก คือเริ่มจากการพูดคุยถึง concept ของตัว plugin ก่อน จากนั้นก็ทำการค้นหาข้อมูลจาก internet เพื่อดูรูปร่างหน้าตาของ hardware แบบต่างๆ รวมถึงเข้าไปดู website ของผู้ผลิตชิ้นส่วนต่างๆ เช่น LED หรือ knob แบบต่างๆ

จากนั้นเมื่อเขามี design คร่าวๆในหัวแล้ว ก็จะเริ่มออกแบบชิ้นส่วนต่างๆด้วยโปรแกรม 3d ทั้งขึ้นรูปและลง texture ในส่วนของ layout นั้นจะทำการแยกทำเป็น layer เพื่อง่ายต่อการแก้ไข เพราะในระหว่างการพัฒนาจะมีการแก้ไขอยู่ตลอด หลังจากนั้นก็จะมีการทำ animation สำหรับส่วนต่างๆที่จะมีการเคลื่อนไหว เช่น สวิทช์หรือ knob เมื่อ render ออกมาก็จะส่งต่อไปให้ programmer ทำการ integrate เข้าไปใน code ของ plugin

The Plug-In gets assembled from its parts

The Plug-In gets assembled from its parts

จากเดิมที่เป็นคนชื่นชมความงามของ GUI อยู่แล้ว พอมาเห็นเบื้องหลังอย่างนี้ยิ่งทำให้รู้สึกชื่นชมได้อย่างลึกซึ้งเข้าไปอีก สงสัยอีกหน่อยคงไม่ต้องใช้หูฟังหรือลำโพงทำงานแล้ว แค่เปิด plugin ขึ้นมานั่งมองแล้วก็เอาเม้าส์กด คลิกไปคลิกมา หมุนไปหมุนมา ก็มีความสุขแล้ว … ไอ้บ้า!

ที่มา : http://varietyofsound.wordpress.com/2009/08/20/patrick-speaks-the-density-mkii-ui-making-of/
รูปประกอบทั้งหมดจาก : http://varietyofsound.wordpress.com/

Tags: , , , , , , ,
เข้าดู 941 ครั้ง

5 Responses to “ขั้นการการออกแบบ GUI ของ audio plugin”

  1. OHM4U says:

    เพิ่งจะสังเกตุว่า GUI มันสวยสุดๆ จริงๆ พับผ่าสิ.. ไอ้เราใช้เวลาทำตั้งเกือบครึ่งปี ยังไม่สวยเท่ากับที่รายนี้ทำเลย ยอมไม่ได้ เดี๋ยวต้องทำ VST หน้าตาสวย เสียงดีเหมือนต้นฉบับ (bypass) ออกมาให้บิดเล่นบ้าง

  2. OHM4U says:

    เพิ่มเติมอีกนิด… ถ้าตั้งใจดูให้ดี จะรู้ว่าเค้าทำไม่ละเอียดมากเท่าไหร่
    คือ เงา ของ knob , มันไม่หมุนตาม knob ไปด้วย..
    เทียบกับของ waves แล้ว ความสมจริงจะยังสู้ไม่ได้

  3. qwerty says:

    โห เสี่ยโอมละเอียดขนาด!

    ว่าไปแล้ว DensityII ก็มีเค้า Focusrite เหมือกันนะ

  4. OHM4U says:

    @qwerty
    ไม่ได้หรอก ตอนที่ผมทำเอง อุตส่าห์คิดถึงแม้แต่เรื่องของเงาที่สะท้อนอยู่บน knob เลยด้วยซ้ำไป
    สนใจแต่ GUI มากเกิน คุณภาพเสียงไม่สน 555

  5. guck says:

    โอ้ สุดยอดเ้ลยครับ
    ด้านกราฟฟิกของชีวิตผมนี่ปิดสนิทเลยครับ 55 ไม่สามารถจริงๆ

Leave a Reply

Spam Protection by WP-SpamFree