เนื้อหาของคอร์ส
บทที่ 1 แนะนำคอร์สรู้จักโปรแกรม Adobe XD
ก่อนเริ่มเรียนผมอยากจะแนะนำคอร์สและข้อดีของโปรแกรม Adobe XD ให้ทุกคนได้เข้าใจกันก่อน ว่าเหตุผลอะไรที่คุณควรใช้โปรแกรมนี้ในการออกแบบเว็บไซต์
0/3
ทำไมต้องใช้โปรแกรม Adobe XD ในการออกแบบเว็บไซต์
03:29
Adobe XD vs Photoshop เรื่องเล่าจาก Case Study จริง
02:58
เข้าร่วม Facebook Private Group คอร์ส Master Adobe XD
01:00
บทที่ 2 หลักการออกแบบเว็บไซต์ Responsive เบื้องต้น
0/6
Responsive Grid System คืออะไร?
04:11
หลักการเลือกใช้ฟอนต์บนเว็บไซต์
03:21
แหล่งรวมฟอนต์ฟรีสำหรับการทำเว็บไซต์
03:22
หลักการเลือกใช้สีบนเว็บไซต์
05:44
เว็บไซต์สำหรับการหาแรงบันดาลใจในการทำเว็บไซต์
03:54
แหล่งรวม Resources สำหรับการออกแบบเว็บไซต์
04:25
บทที่ 3 การเริ่มโปรเจคใหม่ใน Adobe XD
0/6
ส่วนประกอบของโปรแกรม
12:05
เลือกขนาด Artboards Template ของ Desktop Website
02:04
เลือกขนาด Artboards Template ของ Mobile Website
01:26
สร้าง Artboards ขนาดอิสระ
01:47
การปรับ Layout และ Responsive Grid ของ Desktop Website
03:22
การปรับ Layout และ Responsive Grid ของ Mobile Website
01:47
บทที่ 4 เรียนรู้เครื่องมือต่างๆในโปรแกรม
0/18
การใช้ Select Tool
01:12
สร้างรูปทรง สี่เหลี่ยม, วงกลม, สามเหลี่ยม และ เส้น
03:22
สร้างรูปทรงอิสระด้วย Pentools
01:19
การปรับ Opacity
01:39
การทำมุมโค้งให้วัตถุ
01:50
การใส่เงาให้วัตถุ
01:55
ใส่สี Gradient ในวัตถุ
01:17
การสร้างข้อความ
03:43
การ Zoom และหลักการดูระยะของงานออกแบบ
02:24
Keyboards Shortcuts คีย์ลัดที่จำเป็น
00:57
วิธีการใส่ภาพลงในรูปทรงต่างๆ
02:06
การจัดการ Layer
02:50
การจัดการ Group Layer
02:25
การ ล็อค(Lock) Layer
01:23
การ ปิดตา(Hide) Layer
01:08
การใช้เครื่องมือ Alignment
01:59
การแก้ไขภาพใน Photoshop
01:35
การบันทึกไฟล์ลงในเครื่อง และ Adobe Cloud
01:30
บทที่ 5 การเพิ่ม Assets ไว้ทำงาน
0/6
การเพิ่มสีใน Assets
02:49
การแก้สีใน Assets
01:20
การเพิ่ม Character Styles
02:12
การเพิ่ม Icon & Graphic ใน Assets
02:55
การดึง Assets จากงานอื่นมาใช้
01:30
การแก้ Character Styles
02:06
บทที่ 6 การสร้าง Component UI
0/4
วิธีการสร้าง Component
02:02
วิธีการดู Component ตัวแม่และตัวลูก
03:05
การสร้าง Effect เปลี่ยนสีปุ่มด้วย Hower Stage
02:38
การสร้าง Effect เปลี่ยนขนาดปุ่มด้วย Auto Animate
03:31
บทที่ 7 Plug-in ช่วยทำงานเสร็จไวขึ้น
0/7
Lorem Ipsum
04:51
Color Scale
03:12
UI Faces
02:47
Unsplash Random Images
01:37
Mimic
02:11
Quick Mockup
02:51
การจัดการ Plugins
01:21
บทที่ 8 ออกแบบเว็บไซต์ Desktop Size
0/17
ตัวอย่างเว็บไซต์ในบทเรียน
01:20
การออกแบบ Menu
12:03
ทำ Menu ให้มีลูกเล่นด้วย Hower Stage
04:08
ออกแบบ Banner และการจัดวางข้อความ
11:16
สร้างปุ่มประกอบ Banner และ ส่วนต่างๆ
05:40
ออกแบบส่วนบริการของเรา
07:34
ออกแบบส่วนผลงานของเรา
13:00
ออกแบบส่วนบทความน่าอ่านและการทำ Repart Grids
12:36
ออกแบบส่วนรีวิวจากลูกค้าและการทำ Click Animation
12:18
ออกแบบ Footer
04:01
การทำ Fix Menu
02:18
ออกแบบหน้า เกี่ยวกับเรา
20:33
ออกแบบหน้า ผลงาน
11:54
ออกแบบหน้า บริการ
13:05
ออกแบบ Pop-up หน้า บริการ
17:08
ออกแบบหน้า Blog
05:20
ออกแบบหน้า ติดต่อเรา
06:37
บทที่ 9 ออกแบบเว็บไซต์ Mobile Size (Responsive)
0/6
เทคนิค Responsive Resize สำหรับ UI
03:07
ออกแบบเมนู (Mobile Version)
13:45
ออกแบบหน้าแรก (Mobile Version)
15:14
ออกแบบหน้า เกี่ยวกับเรา (Mobile Version)
06:01
ออกแบบหน้า ผลงานของเรา (Mobile Version)
05:50
ออกแบบหน้า บริการของเรา (Mobile Version)
06:06
บทที่ 10 การทำ Prototype สำหรับการทดสอบและพรีวิว
0/2
เชื่อม Prototype Desktop Website
05:07
เชื่อม Prototype Mobile Website
02:02
บทที่ 11 การ Export & Share งานให้กับทีมพัฒนา
0/5
การ Export UI ชิ้นเดียว (Layer/Group/Component)
03:05
การ Export Artboards เดียว และ หลาย Artboards
01:09
การแชร์โปรเจคให้ลูกค้ารีวิว
03:10
การแชร์โปรเจคให้นักพัฒนา Developer
03:50
ตั้งค่าการแชร์เพิ่มเติม
01:09
บทเรียนเพิ่มเติม (Bonus)
0/2
สร้าง Parallax Website ด้วย Prototype ตอนที่ 1
09:45
สร้าง Parallax Website ด้วย Prototype ตอนที่ 2
02:11
Master Adobe XD เจาะลึกโปรแกรมออกแบบเว็บไซต์แบบมืออาชีพ
ก่อนหน้า
ต่อไป
0% เสร็จสมบูรณ์
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.