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

ปัจจุบันงานกราฟฟิกได้เข้ามามีบทบาทมากมายในด้านการโฆษณา การขาย การออกแบบและดีไซน์ผลงานต่างๆ รวมถึงการนำมาใช้พัฒนาระบบ หรือ แอพพลิเคชันต่างๆมากมายโดยมาจากการใช้ชุดอักขระ (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 นักออกแบบด้วย ครบจบทุกอย่างเรื่องการออกแบบและดีไซน์ในเว็ปเดียว นอกจากกดของฟรีกันแล้ว ถ้ามีโอกาสอยากให้กดซื้อ ช่วยกันอุดหนุน นักออกแบบถ้ามีสินค้าที่ถูกใจเพื่อเป็นกำลังใจ เป็นค่าความคิดสร้างสรรค์ ค่าอุปกรณ์และอีกหลายๆอย่างนะครับ ขอบคุณทุกท่านที่เข้ามาอ่านครับ ไว้เจอกันโอกาสหน้าครับ 😀

Read More »

[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 คือปลายทางที่จะไปนั้นก็คือ

Read More »