Categories
กราฟิก เทคนิค

ทำไมต้องใช้ Adobe xd ?

ทำไมต้องใช้ Adobe xd ?

โปรแกรมที่ใช้ในการออกแบบบนคอมพิวเตอร์หรือโน๊ตบุ๊คที่สามารถสร้างสรรค์แอพพลิเคชั่น เว็บไซต์ได้อย่างที่ใจคิด ซึ่งเหล่าสายกราฟฟิกที่ต้องการสื่อสารกับลูกค้าได้อย่างรวดเร็วและทันใจ อีกทั้งยังสามารถเปลี่ยนงานจากที่เป็นแบบ Cpncept กลายเป็น Protrotype แสดงให้เห็นตัวอย่างของงานแบบมองเห็นภาพ ทำให้สามารถจบงานได้ง่ายและรวดเร็ว เรามีโปรแกรมที่มาแนะนำ คือ โปรแกรม Adobe Experience Design ซึ่งเป็นโปรแกรมที่สามารถใช้งานได้ทั้งมือใหม่และมือโปร มีหลักการในการใช้งานที่ไม่ได้ยากจนเกินไป ถ้าเราฝึกทำเรื่อยๆและสร้างสรรค์ผลงานอย่างต่อเนื่อง ไม่ยากเลยที่จะสร้างผลงานดีๆจากโปรแกรมนี้

Adobe xd คือ?

Adobe Experience Design หรือที่เรียกกันว่า adobe xd คือ โปรแกรมบน PC ที่สร้างมาเพื่อการใช้งานของ Digital Designer สามารถใช้ในการออกแบบเว็บไซต์ปละแอพพลิเคชั่นในหลากหลายอุปกรณ์ ไม่ว่าจะเป็น Web Design หรือจะเป็นบน Mobile App ก็ตาม ซึ่งฟังก์ชันหลัก ได้แก่ การออกแบบในส่วนของ Prototype ซึ่งเป็นเสมือนแบบจำลองเพื่อเก็บ Feedback จาก User ก่อนการสร้าง Product จริง และสามารถออกแบบ Graphic UI ได้อีกด้วยมาพร้อมกับฟังก์ชันที่ช่วยอำนวยความสะดวกให้แก่กราฟฟิก ไม่ว่าจะการแบ่งปันงาน หรือการ Export เป็นต้น 

การออกแบบเว็บด้วย Adobe xd

โปรแกรม Adobe Experience Design เป็นโปรแกรมที่ช่วยการออกแบบเว็บให้ได้ง่ายขึ้น ให้คุณได้หลงเข้าไปในโปรแกรมได้อย่างน่าทึ่งด้วยปลั๊กอินที่มีจำนวนมาก ฟังก์ชันที่สามารถเข้าใจและใช้งานได้อย่างง่าย ไม่ว่าจะมือใหม่ที่กำลังหาการทำกราฟฟิกหรือมือโปรที่อยากสร้างผลงานที่ทำราคาได้สูงหรือใช้เป็นโปรแกรมที่พัฒนาตนเองให้มีการออกแบบที่มีคุณภาพและน่าสนใจได้อีกด้วย โดยในปัจจุบันมีคอร์สเรียนของโปรแกรม Adobe Experience Design มากมาย แต่วันนี้เรามีวิธีการออกแบบต่างๆอย่างง่ายให้ได้ศึกษากัน ไม่ว่าจะเป็นการออกแบบแอพพลิเคชั่น การออกแบบ User Interface หรือการออกแบบหน้าเว็บ ข้อมูลมีดังนี้

ออกแบบแอพด้วย Adobe xd

ในการลิ้งก์แต่ละหน้าของแอพพลิเคชั่นเป็นสิ่งที่ถือว่าจำเป็นอย่างมากในการออกแบบแอพพลิเคชั่น ด้วย Adobe Experience Design ซึ่งการลิ้งก์หน้าเป้นการทำให้ชิ้นส่วนในการออกแบบนั้นสามารถกดแล้วไปที่หน้าอื่นๆต่อไปได้ ไม่ว่าจะเป็นปุ่ม รูปภาพ รูปทรง เส้นตรง เส้นโค้ง หรือวัตถุอื่นๆ โดยขั้นตอนในการลิ้งห์หน้าทำได้โดย เลือกแท็บ Prototype ที่อยู่ในบริเวณด้านบนสุดของโปรแกรม adobe xd จากนั้นให้เลือกไอเท็มที่ต้องการใช้ในการลิ้งห์ไปหน้าอื่นๆ จากนั้นให้ทำการลิ้งก์ไอเท็ม โดยการลือกไอเท็มแล้วจะมีลูกศรสีฟ้าปรากฏที่ด้านขวามือของไอเท็ม ให้ลากลูกศรไปที่ Artboard ที่ต้องการ จากนั้นจึงตั้งค่าเกี่ยวกับลักษณะการเปลี่ยน Artboard หรือจะปล่อยไว้แบบ Default จากนั้นลองทดลองทำการกดดู

ออกแบบ user interface ด้วย Adobe xd

ในการออกแบบ user interfaceจะต้องมีไฟล์รูป UI ที่ผ่านการออกแบบไว้แล้วก่อน ซึ่งสามารถออกแบบจากโปรแกรมอื่นๆก่อนก็ได้ เช่น Microsoft Powerpoint, Adobe Photoshop, Adobe Illustrator เป็นต้น จากนั้นเปิดโปรแกรม adobe xd แล้วสร้างหน้าเปล่าขึ้นมา โดยจะต้องเลือกเทมเพลตที่เป็นแบบเดียวกับขนาดของไฟล์ UI ที่ออกแบบไว้แล้ว แล้วเลือก Tab ที่ Menu Bar จากนั้นนำไฟล์ UI ที่ออกแบบไว้แล้วมาวางที่หน้าเปล่าขยายให้เต็ม แล้วใช้ Artbord Tool ที่แถบด้านซ้าย กดรูป + ให้หน้าเท่ากับจำนวนไฟล์ UI จากนั้นเชื่อมทุกไฟล์เข้าด้วยกันด้วย Rectangle การตั้งให้การคลิกสี่เหลี่ยมล่องหนนี้ทำอะไร เราจะทำผ่าน Tab ที่2 ชื่อ Prototype จากแถบ Menu Bar ข้างบน 

Adobe xd ช่วยออกแบบหน้าเว็บ

เริ่มต้นที่ให้เราเลือกขนาดของงานที่เราต้องการที่จะทำก่อน ซึ่งมีให้เลือกหลากหลาย เช่น ขนาดเท่า Ipad, Iphone, Desktop เป็นต้น ต่อไปเครื่องมือที่ใช้ในการออกแบบหน้าเว็บมีทั้งหมด 7 อย่าง คือ Select ใช้สำหรับเลือกวัตถุหรือเคลื่อนย้ายวัตถุ Rectangle ใช้สำหรับสร้างวัตถุ รูปทรง Line ใช้สำหรับสร้างเส้นตรงเท่านั้น Pen ใช้สำหรับสร้างเส้นโค้งได้ Text ใช้สำหรับสร้างข้อความ Artboard ใช้สำหรับสร้างแผ่นกระดาษในการลงชิ้นงาน จากนั้นเลือกฟังก์ชันเสริมบริเวณด้านขวาของโปรแกรม ทั้งนี้สามารถเปลี่ยนโหมด Design หรือ Prototype ได้จากที่แถบเครื่องมือด้านซ้าย

แชร์งานด้วย Adobe xd 

ในการโปรแกรม Adobe Experience Design หรือที่เหล่าสายกราฟฟิกมักจะเรียกว่า design xd มีข้อโดดเด่นในการแชร์ผลงานได้สะดวก โดยการแชร์ Prototype จะเป็นการแบ่งปันในแบบให้ User ได้เห็นภาพ ทำให้ลูกค้าและกราฟฟิกสามารถสื่อสารกันได้ง่ายขึ้น มีวิธี คือ เลือกเมนู Share แล้วเลือก Share for Review จากนั้นแก้ไขชื่อที่ช่อง Title กดปุ่ม Update แลวกดปุ่ม New Link เพื่อเป็นการสร้าง URL ใหม่ จากนั้นก็สามารถคัดลอกลิ้งก์ URL ส่งต่อให้ลูกค้าได้ทันที 

โปรแกรมออกแบบเว็บไซต์อย่าง Adobe xd

ในปัจจุบันในการทำงานออกแบบไม่ว่าจะเป็นการออกแบบเว็บไซต์ การออกแบบแอพพลิเคชั่น หรือการออกแบบกราฟฟิกต่างๆ ทั้งนี้โปรแกรมออกแบบเว็บไซต์ที่ดีจนสายงานกราฟฟิกแนะนำให้ใช้งาน ได้แก่ WordPresss เป็นแพลตฟอร์มที่ยอดนิยมในนักพัฒนา Theme และปลั๊กอิน รองรับการทำ SEO และฟรีในการใช้งาน, Squarespace เป็นโปรแกรมที่เหมาะกับมือใหม่ เนื่องจากใช้งานง่าย มีเทมเพลทที่สวย, Wix นิยมในคนไทยมาก การใช้งานก็แสนง่ายเพียงลากแล้ววาง เหมาะทั้งมือใหม่และสายเทพ นักพัฒนาไม่สามารถสร้างปลั๊กอินหรือทำอะไรเพิ่มกับตัวแพลทฟอร์มได้, Weebly นิยมใช้เป็นเว็บขายสินค้าออนไลน์เป็นส่วนใหญ่ โดยพิเศษที่ทำธุรกิจ สามารถจดโดเมนและใช้โฮสต์ที่ตัวของ Weebly ได้ และโปรแกรมนี้เป็นอีกทางเลือกที่ดีเช่นกัน

ข้อดีของ Adobe xd 

สำหรับสายกราฟฟิกหรือบุคคลทั่วไปที่สนใจอยากทำงานเกี่ยวกับการออกแบบนั้น โปรแกรม Adobe Experience Design จะเป็นอีกหนึ่งโปรแกรมที่ตอบโจทย์การทำงานอย่างแน่นอน เนื่องจากมีข้อดีที่หลากหลายจนน่าทึ่ง อย่างเช่น เป็นโปรแกรมที่มีขนาดไฟล์ที่เล็ก สามารถใช้ทำงานได้อย่างรวดเร็ว ต่อให้คอมพิวเตอร์หรือโน๊ตบุ๊คที่สเปคไม่แรงก็ไม่มีค้างแต่อย่างใด มีฟังก์ชันที่ช่วยอำนวยความสะดวกให้แก่ผู้ใช้งาน เช่น Share, Export เป็นต้น ส่วนนี้ช่วยให้ผู้ใช้งานและลูกค้าได้สื่อสารและมองเห็นผลงานได้อย่างรวดเร็วและไฟล์งานมีความละเอียดที่แท้จริงอีกด้วย โปรแกรม Adobe Experience Design ยังมีการอัพเดตฟีเจอร์ใหม่ๆอยู่เสมอ อย่างน้อย 1 เดือน/ครั้ง ทำให้เหล่ากราฟฟิกให้ชื่อว่าเป็นโปรแกรมที่ออกแบบหน้าเว็บสวยๆให้ลูกค้าเสมอ และทั้งนี้ก็ยังมี Plugins ให้ใช้งานมากกว่า 100 ตัว อีกด้วย

 

เว็บบอล

Categories
กราฟิก

เคล็ดลับการใช้งาน Adobe XD ใช้ง่าย ๆ ไม่ซับซ้อน

เคล็ดลับการใช้งาน Adobe XD ใช้ง่าย ๆ ไม่ซับซ้อน

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

Adobe XD คือโปรแกรมอะไร?

Adobe Experience Design หรือ Adobe XD คือ โปรแกรมที่ใช้สำหรับออกแบบเว็บไซต์ และแอปพลิเคชัน โดยโปรแกรมนี้จะช่วยให้ผู้ที่เป็น Digital Designer สามารถทำงานในการออกแบบเว็บไซต์สามารถทำงานได้ง่ายขึ้น เนื่องจากโปรแกรมนี้สามารถใช้งานได้อย่างครอบคลุมทั้งในส่วนของการออกแบบ (Design), UX/UI Design และ Developer ดังนั้นจึงทำให้ผู้ใช้งานสามารถ ออกแบบหน้าเว็บ และ ออกแบบแอพ ได้ครบ จบบนโปรแกรมนี้ โดยที่ไม่จำเป็นต้องดาวน์โหลด หรือซื้อโปรแกรมอื่น ๆ มาใช้เพิ่มเติม

Adobe XD โปรแกรมฟรี และมีข้อเสียน้อย

Adobe XD เป็นโปรแกรมออกแบบเว็บไซต์ ที่คุณสามารถดาวน์โหลดใช้ได้ฟรี ซึ่งนับว่าเป็นข้อดีอีกอย่างหนึ่งเลยก็ว่าได้ เนื่องจากอย่างที่หลาย ๆ คนคงจะทราบกันดีอยู่แล้วว่า โปรแกรมที่ใช้สำหรับการตัดต่อ, กราฟิก หรือสำหรับการออกแบบเว็บ ส่วนใหญ่มักจะมีราคาที่ค่อนข้างแพง หรือมีค่าเช่าโปรแกรมต่อเดือนที่สูงเป็นอย่างมาก และที่สำคัญไปกว่านั้นคือข้อเสียของ design xd นั้นมีค่อนข้างน้อย ซึ่งเราได้คัดมาแล้วมีอยู่ 2 ข้อหลัก ๆ ได้แก่ Tools น้อยกว่า Photoshop และ Illustrator, ใช้ลูกเล่นกราฟิกได้ค่อนข้างน้อย ดังนั้นใครที่ต้องการการออกแบบที่สโคปใหญ่ และมีเนื้องานที่มีความละเอียดสูงอาจจะต้องใช้โปรแกรมอื่น ๆ เข้ามาช่วย

สอนใช้ Adobe XD สำหรับมือใหม่ 

สำหรับใครที่อยากออกแบบหน้าเว็บสวย ๆ โดยที่สามารถทำได้ด้วยตัวเอง ดังนั้นเราจึงอยากแนะนำเคล็ดลับการใช้ โปรแกรม XD แบบที่มือใหม่สามารถทำตามได้ โดยขั้นตอนในการสร้างเว็บไซต์ด้วยตัวเองมีขั้นตอน ดังนี้

1. เลือกขนาดโปรเจ็คต์ที่ต้องการใช้งาน

เมื่อดาวน์โหลด และติดตั้งโปรแกรมบนอุปกรณ์เรียบร้อยแล้ว โปรแกรมจะให้คุณเลือกขนาดของโปรเจ็คต์ ก่อนที่จะเริ่มออกแบบ user interface หรือขนาดงานที่ต้องการจะทำ โดยมีหลายขนาดให้เลือกตั้งแต่ขนาดของมือถือทั่วไป, ไอแพด, Web 1920 หรือ กำหนดด้วยตัวเอง ซึ่งโปรแกรมจะมีการอัปเดตให้เสมอ ดังนั้นคุณจึงไม่จำเป็นต้องห่วงเรื่องของขนาดเว็บไซต์เท่าไรนัก

2. เข้าสู้หน้าโหมดโปรแกรม 

เมื่อเลือกหน้าโปรเจ็คต์เรียบร้อยแล้ว โปรแกรมจะพาคุณไปยังหน้าโหมดสำหรับออกแบบเว็บไซต์ โดยโปรแกรมจะแบ่งฟังก์ชันการใช้งานออกเป็น 3 ฟังก์ชัน ได้แก่ Design, Prototype และ Share โดยให้เราเลือกไปที่ Design เพื่อทำการออกแบบเว็บไซต์ของเรา ซึ่งการทำงานของโปรแกรมจะทำงานเป็นสเต็ป เช่นเมื่อออกแบบทำการออกแบบเรียบร้อยแล้ว ส่งต่อไปยัง Prototype และสามารถ Share ผลงานของคุณให้ผู้พัฒนาสามารถนำไปพัฒนาต่อไป

3. เครื่องมือ (Tools) มีทั้งหมด 7 ชิ้น

เครื่องมือ (Tools) ของ XD มีทั้งหมด 7 ชิ้น ซึ่งเป็นจำนวนที่ค่อนข้างน้อย แต่ก็สามารถทำงานออกแบบเว็บไซต์เบื้องต้นได้ 

Select Tool ใช้ในการจับวัตถุต่าง ๆ 

สี่เหลี่ยม, วงกลม, สามเหลี่ยม และ เส้น ใช้สร้างรูปทางเรขาคณิตแบบอัตโนมัติ โดยที่เราไม่จำเป็นต้องใช้ปากกาวาด

Pen ใช้ในการสร้างเส้น หรือวัตถุตามรูปทรงที่ต้องการ โดยลากจากจุดหนึ่งไปยังจุดหนึ่งได้อย่างแม่นยำ

Text สร้างตัวอักษร หรือพิมพ์ข้อความที่คุณต้องการ

Artboard เพิ่มหน้า Devices โดยจะแสดงขึ้นทางฝั่งขวามือ 

Zoom ซูมเข้าซูมออก หรือสามารถใช้คีย์ลัดได้

4. Export File บนโปรแกรม

การ Export File บนโปรแกรมสามารถทำได้ง่าย ๆ โดยการใช้คีย์ลัด Cmd or Ctrl + E เพื่อทำการเปิดคำสั่ง Export Selected หรือกดเลือกไปที่คำว่า “File” และกดไปที่คำว่า “Export” นอกจากนี้เรายังสามารถเลือกชนิดไฟล์ที่ต้องการนำไปใช้ ซึ่งความพิเศษของ Adobe XD คือเราสามารถ Export File ให้อยู่ในรูปแบบของ Devices อื่นได้ เช่น Web, iOS หรือ Android

Adobe XD มี Plugins ให้เลือกใช้เป็นจำนวนมาก

สำหรับใครที่ได้อ่านวิธีการใช้งานเบื้องต้นของโปรแกรมที่เราได้นำมาให้ทุกคนแล้ว แต่อาจจะยังรู้สึกว่า ความน่าสนใจ หรือความสามารถของโปรแกรมนั้นอาจจะมีไม่มากสักเท่าไร เมื่อเทียบกับโปรแกรมอื่น ๆ ที่เป็นประเภทเดียวกัน แต่เราอยากจะขออธิบายดังนี้ว่า XD เป็นโปรแกรมที่มี Plugins ให้เราเลือกใช้เป็นจำนวนมาก ดังนั้นเราจึงสามารถติดตั้งเพิ่มเติมได้ด้วยตัวเอง ซึ่งการติดตั้ง Plugins เพิ่มเติมเข้าไปจะช่วยให้การใช้งานบนโปรแกรมของเราทั้งสะดวก และง่ายขึ้นด้วย

Adobe XD เป็นโปรแกรมที่สามารถเช่าได้

อย่างที่เราได้กล่าวไปข้างต้นว่า Adobe XD เป็นโปรแกรมที่สามารถดาวน์โหลดใช้ได้ฟรี แต่สำหรับคนที่ต้องการใช้งานในระดับมืออาชีพการใช้โปรแกรมฟรีอาจจะไม่ใช่สิ่งที่สามารถตอบโจทย์ความต้องการของคุณได้สักเท่าไร ดังนั้นเราจึงแนะนำให้เลือกเป็นแพ็กเกจการเช่าโปรแกรมจาก Adobe ซึ่งมีหลายแพ็กเกจหลายให้เลือก ทั้งการเช่าแบบโปรแกรมเดียว และแบบ All App ซึ่งเราจะแนะนำให้เช่าแบบ All App เนื่องจากคุณจะสามารถใช้โปรแกรมทั้งหมดของ Adobe เช่น Photoshop, Illustrator, InDesign, Premiere Pro และ XD เป็นต้น และเมื่อเฉลี่ยแล้วจะมีราคาค่าเช่าที่ถูกกว่านั่นเอง

Adobe XD ไม่มีโปรแกรมแบบขายขาด

สำหรับใครที่อยากใช้งาน XD หรือโปรแกรมอื่น ๆ ของ Adobe และค้นหาโปรแกรมแท้ในอินเทอร์เน็ต แล้วพบว่ามีการประกาศขายโปรแกมของ Adobe แบบขายขาด ให้คุณสันนิษฐานไว้ก่อนเลยว่านั่นเอาจจะเป็นโปรแกรมเถื่อน เนื่องจาก Adobe ยกเลิกการขายโปรแกรมแบบขายขาดมาเป็นเวลานานพอสมควรแล้ว ดังนั้นหากใครที่ต้องการใช้โปรแกรมของ Adobe นอกจากรูปแบบที่เปิดให้ใช้ฟรี เราแนะนำให้ทำการเช่าโปรแกรมผ่าน https://www.adobe.com/th_th/creativecloud.html ซึ่งเป็นเว็บไซต์ออฟฟิเชียลของ Adobe นั่นเอง

สรุป Adobe XD ยังเป็นโปรแกรมที่น่าใช้หรือไม่?

เมื่อได้ศึกษาข้อมูลต่าง ๆ เกี่ยวกับ XD ไปเป็นที่เรียบร้อยแล้ว จะเห็นได้ว่าเคล็ดลับในการใช้โปรแกรมที่เรานำมาฝากนั้นจะเป็นการใช้โปรแกรมตัวฟรี ซึ่งมีขั้นตอนในการใช้งานแบบคร่าว ๆ ดังนั้นอาจจะทำให้หลายคนเกิดการตั้งคำถามขึ้นมาว่า สรุปแล้วโปรแกรม XD ยังเป็นโปรแกรมที่มีความน่าสนใจหรือไม่ ซึ่งการที่เราจะการันตีว่าโปรแกรมนั้นน่าใช้หรือไม่อาจจะเป็นเรื่องที่ไม่เหมาะสมนัก 

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

 

เว็บบอล