Autoplay
Autocomplete
กลับไปตอนก่อนหน้า
ดูตอนถัดไป
Web Design with Photoshop
Gestalt Principles
Module Overview (0:47)
Gestalt Principle คืออะไร ? (2:10)
Proximity (2:55)
Symmetry (3:57)
Closure (1:46)
Similarity (3:04)
Common / Fate (2:20)
Continuity (2:32)
Figure / Ground (1:39)
Layout & Organization
Rule of third (1:55)
White Space (1:53)
Dominance (2:26)
Hierarchy (0:51)
Repetition and Consistency (1:54)
Alignment (3:19)
Colors
Module Overview (0:44)
ความหมายของสีในแต่ละสี (1:41)
RGB & CMYK (4:33)
การใช้วงล้อสี (3:01)
ตัวอย่างการใช้วงล้อสี (2:18)
การใช้สี HSL (1:07)
วิธีการใช้เว็บไซต์ในการหาคู่สี, เลือกสีที่เข้ากัน (4:10)
วิธีการเลือกสีจากรูปภาพและการใช้สี (20:23)
วิธีการเลือกชุดสีสำหรับ UI ของเราให้ตรงตาม Standard W3C (6:30)
Typography
ประเภทของฟอนต์แบบต่างๆ (4:09)
การเลือกใช้งานฟอนต์ ตัวอย่างการใช้งานฟอนต์กับเว็บไซต์ (1:38)
วิธีดาวน์โหลดฟอนต์จาก Google Fonts และเว็บไซต์อื่นๆ (6:55)
วิธีการดาวน์โหลด Font จาก Google เวอร์ชั่นอัพเดท 2020 (4:08)
การใช้งาน Font Icon ในเว็บไซต์และใน Photoshop (5:59)
Web Design Fundamentals พื้นฐานการออกแบบเว็บไซต์
Sitemap, Wireframe, Mockup & Prototype คืออะไร (15:21)
ประวัติความเป็นมาการทำเว็บไซต์แบบ Responsive (5:23)
เรียนรู้เรื่องการใช้งาน Grid ในงานเว็บไซต์ (2:27)
Workshop 01 [Basic]
Getting Started ตั้งค่า Photoshop ให้พร้อมกับการทำงาน (8:33)
Tools เครื่องมือหลักที่ใช้งาน ตั้งค่าใช้งาน browser (3:09)
Grid Setup สอนการสร้างกริด ตั้งค่าหน้ากระดาษก่อนทำงาน ตอนที่ 1 (7:42)
Grid Setup สอนการสร้างกริดใน Photoshop ตอนที่ 2 (9:57)
Grid Setup ตัวอย่างการใช้งานกริด ตอนที่ 3 (3:18)
Header / Nav - สอนใช้ Tool Photoshop ในการออกแบบเว็บไซต์ตามตัวอย่าง (15:27)
Banner - สอนใช้เครื่องมือในการออกแบบไปทีละขั้นตอน (23:02)
Paragraph Section - สอนทำพื้นหลังแบบไล่สี Gradient ตามเว็บไซต์ตัวอย่าง (5:48)
Image Optimization - ตัดภาพและนำภาพออกมาใช้งาน (10:36)
Workshop 02
Overview (1:05)
How to select hero/banner image - วิธีการเลือกรูปแบนเนอร์ (8:34)
How to Die-cut, blending tool, mask tool - วิธีการไดคัทภาพ, แต่งภาพ (22:46)
How to create libraries - สร้างเมนูบนเว็บด้วย Libraries (7:27)
Variable fonts - ทำงานกับตัวหนังสือ Variable ฟอนต์รูปแบบใหม่ที่จะมาเขย่าวงการคนทำเว็บไซต์ (6:13)
Workshop 03 [Intermediate]
Register Form - ออกแบบฟอร์มสมัครสมาชิก Part 1 (31:49)
7 Rules for UI Design - ออกแบบฟอร์มด้วย 7 วิธีการออกแบบ UI Part 2 (18:21)
สอนใช้ Path ใน Photoshop + วิธีออกแบบ Icon ด้วยตนเองในขนาดมาตรฐาน (14:08)
วิธีการเลือกชุดสีสำหรับ UI ของเราให้ตรงตาม Standard W3C
Lesson content locked
If you're already enrolled,
you'll need to login
.
กรุณาลงทะเบียนเรียนเพื่อดูเนื้อหานี้