Category: Computer Graphics

  • After Effect การสร้าง Text Fade in Fade out (part1)

    การสร้าง Text Fade in Fade out จาก After Effect ไปใช้งานบน Premier Pro (part1)

    เนื้อหาเป็นการสร้างงานจาก After Effect แล้วคล้ายๆกับการสร้าง Component(ในการเขียนโปรแกรม)เพื่อให้ใช้งานได้ตลอดในPremier Pro เนื้อหาทั้งหมดมี 3 part ด้วยกันครับ

    1.การสร้าง Text Fade in Fade out จาก After Effect

    2.การ export งานที่สร้างจาก After Effect ไปใช้งานบน Premier Pro

    3.การเรียกใช้งาน After Effect ที่ Export มาใช้บน Premier Pro

    เริ่มต้นเปิดโปรแกรมและสร้าง composition สำหรับสร้างชิ้นงานของเรา ^^
    แนะนำการตั้งค่าสำหรับการทำ Text Fade in Fade out ตั้งเวลา timeline ไว้สัก 5 วินาที จะมากกว่านี้หรือน้อยกว่านี้ก็ได้ครับ
    ไปที่เครื่องสำหรับพิมพ์ข้อความตามภาพเลยครับ

    หลังจาก click ที่เครื่องมือพิมพ์ข้อความ แล้วมา click ที่พื้นที่ทำงาน ระบุข้อความตามต้องการ ตั้งข้อความอะไรก็ได้ครับเพราะตอนเรานำไปใช้ที่ Premier Pro จะเป็นข้อความที่เราจะต้องแก้ไข

    เลือกจัด Paragraph เป็น Center Text และ Align เป็น Align Horizontally กรณีที่ไม่มีให้ไปเปิดที่เมนู Window

    หลังจากนั้นเรามาที่เครื่องมือ Rectangle Tool สร้าง สี่เหลี่ยมเพื่อจะนำมาใช้บังข้อความ

    ให้เลื่อนสี่เหลี่ยมที่สร้างขึ้นให้ใกล้ๆกับ Text ครับ

    จากนั้นให้ไปที่ Track Matte กรณีหาไม่เจอให้ไป click ขวา บริเวณที่กรอบสีแดงดังภาพ เลือก Columns -> Modes

    ที่ Layer ของ Text ให้เลือกTrack Matte เป็น Alpha Inverted Matte “Shape Layer1”

    อธิบายเพิ่มเติมในงานของเรามีการสร้าง Text และรูปสี่เหลี่ยมไว้ ถ้าเราเอาไฟล์นี้ไปใช้ในงานvdo ของเราตอนนี้จะเห็นแค่Text แต่ไม่เห็นรูปสี่เหลี่ยม(ในรูปขอทำเป็นเส้นปะไว้) สิ่งที่เราจะทำต่อไปก็คือทำAnimation ให้กับ Text ไปซ่อนหลังรูปสี่เหลี่ยม ก็คือการ Fade in / Text ออกมาจากรูปสี่เหลี่ยม ก็คือการ Fade out

    หากรูปสี่เหลี่ยมหายไปแบบนี้ถือว่าถูกต้องแล้วครับ

    เริ่มทำ Animation โดยการใช้ Keyframe ให้ไปที่ Transform -> Position

    เลื่อน Timeline ที่ต้องการ กรณีนี้เลื่อนไปที่ 1 วินาที

    Click ที่เพิ่ม Keyframe (ทางซ้ายมือ)และเลื่อน Timeline มาที่จุดเริ่มต้น เพิ่ม Keyframe

    ที่ KeyFrame เริ่มต้นให้เลื่อนTEXT มาซ่อนไว้หลังรูปสี่เหลี่ยม

    จากนั้นไปที่ Keyframe ที่จุดที่ 2 (1วินาที) Click ขวา Keyframe -> Easy Ease

    Drag เมาส์ ทั้ง 2 Keyframe กดปุ่ม Ctrl + c Copy Keyframe เอาไว้

    เลื่อน Timeline ไปวินาทีที่ 2 กดปุ่ม Ctrl + v วาง Keyframe

    Click ขวา Keyframe ที่ 3 เลือก Keyframe Assistant -> Time -Reverse Keyframes

    เท่านี้เราก็จะได้ Text ที่มีการ Fade in Fade out แล้วครับ

  • งานกราฟฟิกฟรี ถูกลิขสิทธิ์มีอยู่จริง

    ปัจจุบันงานกราฟฟิกได้เข้ามามีบทบาทมากมายในด้านการโฆษณา การขาย การออกแบบและดีไซน์ผลงานต่างๆ รวมถึงการนำมาใช้พัฒนาระบบ หรือ แอพพลิเคชันต่างๆมากมายโดยมาจากการใช้ชุดอักขระ (Font) หรือรูปภาพ Vector ต่างๆมาเป็นส่วนประกอบ เราจะเห็นได้ว่าส่วนใหญ่แล้วเป็นงานลิขสิทธิ์ทั้งสิ้น การที่จะนำมาใช้งานได้ต้องมีการซื้อ License การใช้งานหรือการขออนุญาตจากเจ้าของผลงานก่อน

    จะทำยังไงหละถ้าเราอยากใช้งานแบบถูกลิขสิทธิ์แถมไม่ต้องจ่ายเงินสักบาท

    เว็ปไซต์ Creative Market https://creativemarket.com/ เป็นอีกหนึ่งเว็ปไซต์ที่รวบรวมงานศิลปะ, งานกราฟฟิก Vector, Font, Template สำหรับงานออกแบบ, Template สำหรับการสร้างเว็ปไซต์, รูปถ่าย หรือจะเป็น Brush หัวพู่กันในโปรแกรมต่างๆ มารวมไว้เป็น Market ของนักออกแบบหลายๆคนรวมอยู่ในเว็ปไซต์ เราสามารถเข้าไปกดซื้อ แล้วนำมาใช้งานได้เลย สะดวกรวดเร็ว เชื่อถือได้

    แต่ แต่ แต่ ไหนบอกว่าฟรีหละ

    ทาง Creative Market ได้มีการทำระบบ Free Goods of the Week https://creativemarket.com/free-goods ซึ่งจะนำงานกราฟฟิกต่างๆในระบบแจกฟรีๆ สัปดาห์ละ 6 รายการ โดยการเข้าไปที่เมนู Get Inspired แล้วเลือก Free Goods (ที่ไม่ได้แปลว่าถูกดีนะ แต่แปลว่า สินค้าฟรีนั้นเองครับ) ให้เราทำการ Sign Up สมาชิกกับทางระบบก่อน เพื่อที่จะใช้ในการเก็บสินค้าที่แจกฟรีเข้าไปไว้ใน Account ของเราเอง สามารถกลับมาโหลดไปใช้งานได้ในอนาคตครับ

    เมื่อเราเข้ามาในหน้า Free Goods แล้วก็จะมีในส่วนของ เวลาที่นับถอยหลัง ตรงนี้คือเวลาที่จะแจกสินค้า จะเริ่มนับจากต้นสัปดาห์ เราต้องเข้ามากด Free Download ให้ทันก่อนเวลาจะหมดเพื่อที่จะเก็บเข้า Account ของเรา ถัดมาจะเป็นหลอด Progress bar ถ้าเราซื้อครบ 15$ เราจะสามารถ Download สินค้าฟรีที่เป็น Extra ของสัปดาห์นั้นได้ และสุดท้ายคือรายการสินค้าที่แจกฟรี ซึ่งเราสามารถกด Sync to Dropbox ก็ได้ถ้ามีการเชื่อมต่อเอาไว้ หรือจะกด Free Download เพื่อดาวน์โหลดมาเก็บไว้ก็ได้

    เพียงเท่านี้เราก็จะได้งานกราฟฟิกต่างๆมาแบบฟรีๆ มีลิขสิทธิ์โดยการเข้ามากดรับสินค้าทุกๆสัปดาห์ สะสมไว้เรื่อยๆ นำมาใช้ได้ในทุกๆโอกาส ทั้งนี้ทั้งนั้น การนำมาใช้ในเชิงพาณิชย์ กรุณาอ่านและศึกษา License เพิ่มเติมจากหน้ารายละเอียดสินค้าเนื่องจากบางครั้งก็ให้ License แบบ Personal Use ไม่ใช่ Commercial จะได้ไม่โดนฟ้องจากเจ้าของผลงานนะครับ

    กด Download แล้ว ไปตรวจสอบได้จากที่ไหนหละ ว่าสินค้านั้นเข้าตัวเราแล้ว

    ให้เราไปที่มุมขวา จะมีรูปโปรไฟล์ของท่านอยู่ ให้ทำการ Hover ไว้ จะมีเมนูโผล่ขึ้นมาแล้วเลือกเมนู My Purchases ก็จะมาในหน้าที่ชื่อว่า Purchases หรือสินค้าที่เคยซื้อไปแล้ว ตรงนี้ก็จะเป็นคลังที่เคยกดสะสมไว้ สินค้าที่เคยกด Download จากหน้า Free Goods ก็จะมีอยู่ที่หน้านี้ ซึ่งสามารถมากด Download ย้อนหลังได้เลยครับ

    Tips เล็กๆน้อยๆ

    ในการกด Free Download เพื่อเก็บสินค้าเข้า Account เรา ไม่จำเป็นต้อง Download ลงเครื่องเราจริงๆ เพียงแค่กด Free Download จะมีหน้าต่าง Browse File ขึ้นมาให้เลือกสถานที่บันทึกไฟล์ให้กด Cancel หรือยกเลิกออกมาได้เลย เท่านี้ระบบก็เข้าใจแล้วว่าเราได้ทำการซื้อสินค้าชิ้นนั้นไปแล้วจริงๆ (ตรวจสอบได้จาก Email แจ้งเตือนว่ามีการกดสินค้าชิ้นนั้นๆไป)

    จริงๆแล้วใน Creative Market ยังมีระบบ Blog แชร์เทคนิคการออกแบบและระบบ Community นักออกแบบด้วย ครบจบทุกอย่างเรื่องการออกแบบและดีไซน์ในเว็ปเดียว

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

    ขอบคุณทุกท่านที่เข้ามาอ่านครับ ไว้เจอกันโอกาสหน้าครับ 😀

  • [Adobe XD Tips] How to สร้าง Prototype จาก UI ที่ออกแบบไว้แล้ว

    สวัสดีเพื่อนๆชาว IT/Graphic ทุกท่าน วันนี้เราเคล็ดลับง่ายๆในการสร้าง Prototype ระบบด้วยการนำรูปภาพ User Interface(UI) ที่มีอยู่หรือออกแบบไว้แล้วด้วยเครื่องมือฟรีและดีนั้นคือ Adobe XD

    Prototype คืออะไร

    Prototype คือ การทำ Interactive User Interface หรือหน้าตาของระบบที่สามารถตอบสนองต่อผู้ใช้ โดยไม่ต้องเขียน code เลย เช่น การคลิกปุ่มใดปุ่มหนึ่งในหน้า UI ทำให้มีการเปลี่ยนหน้าหรือเปลี่ยนสถานะของ object ในหน้านั้นๆ

    การทำ Prototype นั้นจะทำให้ Developer สามารถทำงานได้ง่ายขึ้น รู้ Flow การทำงานของระบบ อีกทั้งยังสามารถทำเพื่อใช้ในการนำเสนอระบบงานกับลูกค้าได้โดยไม่ต้อง coding

    ถึงเวลาลงมือทำกัน ลุยยย!!

    ขั้นตอนแรกเราจะต้องเตรียมไฟล์รูป UI ที่ออกแบบไว้แล้วไม่ว่าจะทำด้วย Microsoft Powerpoint, Adobe Photoshop, Adobe Illustrator หรือโปรแกรมอื่นๆ

    ขั้นตอนต่อไป เปิดโปรแกรม Adobe XD ขึ้นมาและสร้างหน้าว่างๆขึ้นมา โดย Adobe XD จะมี template ให้เลือกหลักๆเป็น mobile, tablet และ หน้า website ซึ่งขึ้นอยู่กับผู้ใช้ว่าต้องการสร้าง Prototype สำหรับ Device ประเภทไหนหรืออิงจากขนาดจาก UI ที่ออกแบบไว้เดิมก็สามารถเลือกในส่วนของ Custom Size ได้เช่นกัน

    หลังจากเลือก blank template มาแล้ว ณ ที่นี้ได้เลือก Web 1920 นั้นคือหน้าจอ website ขนาด 1920×1080 ก็จะได้หน้าต่างมาหน้าตาแบบนี้

    เราจะเริ่มจากการทำงานใน Tab แรกกันก่อนนั้นคือ Tab ของ Design เลือกได้จาก Menu Bar ข้างบน

    หลักการของขั้นตอนนี้ คือการนำรูป UI ที่ทำไว้แล้วมาวางลงในตัว Artboard สีขาว 1 หน้า UI จะถูกวางใน Artboard เพียง 1อันและขยายให้เต็ม

    หลังจากนำรูปมาวางแล้ว เราเพิ่มหน้า Artboard ยังไงหละ?? เราจะใช้เครื่องมือที่ชื่อว่า Artboard Tool จากแถบเครื่องมือด้านซ้าย เมื่อคลิกใช้เครื่องมือแล้วตัว Curser ของเราจะเปลี่ยนไปเป็นรูป + เราสามารถคลิกตรงพื้นที่สีเทาเพื่อสร้างหน้าใหม่ขึ้นมาได้เลย (แค่คลิกนะ ไม่ต้องลาก เพราะถ้าลากจะเป็นการสร้างแบบกำหนดขนาดเอง)

    สร้างไปให้จำนวนหน้าว่างเท่ากับจำนวนไฟล์ภาพ UI ที่เรามี นำภาพ UI มาวางจนครบ

    ขั้นตอนต่อไปสำคัญมากๆ นั้นคือ การสร้างการเชื่อมโยงระหว่าง Artboard ของเรา โดยปกติแล้วถ้าเราเริ่มออกแบบระบบด้วย Adobe XD ตั้งแต่เริ่ม เราสามารถเลือกได้ว่าวัตถุชิ้นไหนในหน้านี้ที่สามารถคลิกแล้วมีผลอะไรตามมาบ้างได้เลย แต่เราออกแบบมาแล้ว ได้วัตถุมาแค่ชิ้นเดียวนั้นก็คือรูป

    ” เราจะทำการสร้างสี่เหลี่ยมล่องหนขึ้นมาแทน แล้วปรับขนาดให้เท่ากับปุ่มในรูป UI และไม่ต้องใส่สีเข้าไป “ โดยใช้เครื่องมือ Rectangle จากแทบเครื่องมือด้านซ้าย

    เมื่อเราสร้างสี่เหลี่ยมขึ้นมาจะมีแทบ Properties ด้านขวา ให้ทำการเอาติ๊กถูกหน้าช่องของ Fill และ Border ออก สี่เหลี่ยมสีขาวก็จะกลายเป็นสี่เหลี่ยมล่องหนไปทันใด เราจะทำแบบนี้กับปุ่มทุกปุ่มที่เราต้องการจะให้คลิกได้

    และขั้นตอนสุดท้าย นั้นคือการตั้งให้การคลิกสี่เหลี่ยมล่องหนนี้ทำอะไร เราจะทำผ่าน Tab ที่2 ชื่อ Prototype จากแถบ Menu Bar ข้างบน

    เมื่อกดเข้ามาใน Prototype Tab เราจะเห็นสี่เหลี่ยมล่องหนของเราถูก Highlight ด้วยสีฟ้าและมีลูกศรที่ด้านขวาของสี่เหลี่ยม ให้เราคลิกที่ลูกศร แล้วจะมีแถบด้านขวาขึ้นมาให้ตั้งค่าการ Interact

    ในส่วนของ Trigger ให้เลือกเป็น Tap นั้นก็คือการคลิกกล่องสี่เหลี่ยมดังกล่าว Type ให้เลือกเป็น Transition ในกรณีของการเปลี่ยนหน้า หรือเลือก Auto-Animate ในกรณีที่คลิกวัตถุนั้นแล้วมีการเปลี่ยนสถานะ

    Destination คือปลายทางที่จะไปนั้นก็คือ Artboard ที่เราวางรูปหน้า UI เอาไว้ เราสามารถเลือกได้จาก dropdown ได้เลย และอันสุดท้ายนั้นคือ Animation โดยทั่วไปจะเลือกเป็น Dissolve นั้นคือการสลับหน้าทั่วไปๆ มีหลายโหมดให้เล่น ลองดูได้ครับ

    เมื่อเชื่อมเสร็จก็จะมีลูกศรจากวัตถุของเราชี้ไปหา Artboard ปลายทาง เป็นอันเสร็จสิ้น

    แถม!! ในขั้นตอนการเชื่อมโยง Artboard เราสามารถคลิกค้างที่ลูกศรแล้วลากไปยัง Artboard ปลายทางได้เลย ไม่ต้องไป set จากแถบด้านขวาก็ได้

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