เพื่อพัฒนาระบบการเรียน JaLearn ได้ย้ายระบบคอร์สออนไลน์ไปที่เว็บไซต์ใหม่ http://jalearn.co/courses สำหรับผู้เรียนเก่าแจ้งที่ Line: @jalearn เพื่อย้ายข้อมูล

Gradient ฟังก์ชันไล่สีที่ทำให้งานหลากหลาย

เทคนิกการลงสีที่มีมานานแล้วแต่จะทำอย่างไรให้งานออกแบบดูสนุกมากขึ้น และดูไม่เชย สามารถหาคำตอบได้ในบทความนี้
Gradient

หัวข้อในเรื่องนี้

Gradient (กราเดี้ยน) คือ การไล่ระดับสี เป็นการกำหนดสีอย่างต่ำ 2 สี และเกิดระยะเชื่อมระหว่างทั้งสองสีนั้นเป็นสีที่ผสมกัน จะผสมมากหรือน้อยขึ้นอยู่กับระยะห่างของสีที่กำหนด การ Gradient เป็นเทคนิกการลงสีที่มีมานานแล้ว ในยุคหนึ่งอาจจะดูเชยไปบ้าง แต่ในปัจจุบันมีการใช้สี Gradient มีการพัฒนาให้ดูดียิ่งขึ้น มีสไตล์การออกแบบที่หลากหลายทำให้งานสนุกมากขึ้น

มาดูกันครับว่าตอนนี้การ Gradient สีมีสไตล์แบบไหนบ้าง

1. Gradient Mesh – ปรับสีจากจุดและการดัดเส้น

2. Radial Ramp – แหล่งกำเนิดจุดสีเดียวกัน กระจายวงสีออก

3. Blurred – ทุกสีผสมกันแบบไม่ชัดเจน ไม่เห็นขอบเขตของสีชัดเจน

4. Landscape – ไล่สีเป็นระดับเดียวกัน เน้นใช้สีโทนร้อนและเย็นคู่กัน คล้ายๆกับเส้นแบ่งขอบฟ้า

5. Non-Regular Blending – ผสมสีแบบไม่มีแบบแผน

6. Blending – ไล่สีเป็นระดับขั้น คู่สีค่อนข้างคล้ายกัน

7. 3D Mapping – การไล่สีที่ทำให้เกิดมิติจนเหมือนวัตถุ 3D มีการไล่แสงและเงาอย่างเหมาะสม

8. Duotone – ไล่สีสองสี

9. Tricolor – ผสมสี 3 สี เหมือนการแต้มจุดสี

10. Retro Style – ไล่ระดับสีเดียวกัน โทนสีมีความยุคเก่า ฉูดฉาด

11. Multi-Color – ผสมสีหลายสี ไม่จำกัดทิศทาง

12. Silhouette – การไล่ระดับสีจนเกิดแสงเงาอย่างชัดเจน เกิดเป็นรูปร่างบางอย่างที่มีมิติมากขึ้นกว่าแบบ 3D Mapping

Gradient

การสร้างสีแบบ Gradient ในโปรแกรม Adobe Illustrator (Ai)

Gradient (เกรเดี้ยน) คือ การไล่สีตั้งแต่ 2 สีขึ้นไป เป็นการสร้างลูกเล่นและสร้างมิติให้กับงานมากขึ้น สร้างได้โดยการการ Window > Gradient จะเห็นว่าสามารถสร้างได้ 3 แบบ

Gradient
1. Linear Gradient ไล่สีแนวตรง เลือกได้ตั้งแต่ 2 สีขึ้นไป สีที่ออกมาจะเป็นการไล่สีแนวตรงตลอดทั้งวัตถุ เช่น การสร้างสีเหล็ก เมื่อเพิ่มความมืด-สว่างเป็นลำดับจะทำให้พื้นผิวดูสมจริงมากยิ่งขึ้น
Linear Gradient

2. Radial Gradient ไล่สีจากจุดศูนย์กลาง

ส่วนมากใช้เป็นตัวช่วยเสริมลูกเล่นในการตกแต่ง มักใช้ 2-3 สีเท่านั้น

Radial Gradient
3. Freedom Gradient ไล่สีแบบกำหนดสีรอบข้างให้ผสมกัน เป็นการพล๊อตจุด 4 จุดบริเวณมุมของวัตถุ เลือกสีแต่ละจุดและย้ายจุดกำเนิดสีได้ เมื่อรัศมีของสีแต่ละสีชนกันก็จะทำให้เกิดการเหลื่อมกับของสี ให้เกิดลูกเล่นใหม่ๆขึ้น
Freedom Gradient
การ Gradient สีอย่างมีศิลปะ (ทริคคือต้องไม่ได้มีแค่ 2 สี)
Gradient

วีธีสร้างสีแบบ Fluoresent โดย Gradient Mesh

1. หาสีที่ต้องการ แล้วสร้างเป็น Swatches
Gradient
2. สร้าง shape สี่เหลี่ยมอัตราส่วน 1:1 และปรับสีไฟล์เป็น RGB
Gradient
3. เลือกเครื่องมือ Mesh Tool (U) และตั้งค่าจำนวนแถวและคอลัมน์
Gradient
4. ใช้เมาส์ขาวเลือกที่จุด และจิ้มสีจาก Swatches ที่สร้างไว้ตามต้องการ
Gradient

5. ดับเบิ้ลคลิกที่จุดสีเพื่อปรับความเข้มหรืออ่อนของจุดสีนั้น ๆ

6. ใช้เมาส์ขาวคลิกที่จุดนั้น ๆ เพื่อดัดองศาความโค้งของเส้น ทำให้สีนั้น ๆ เปลี่ยนทิศทางการกระจายไปด้วย

Gradient
เห็นวิธีการสร้างสีแบบ Gradient กันแล้ว หลายคนอาจจะคิดว่าแล้วเราจะรู้ได้ยังไงว่าสีไหนที่ผสมกันแล้วจะออกมาสวย หรือเหมาะกับการไล่สีแบบไหน เรามีเว็บไซต์สำหรับเทสสีมาฝากกันครับ เรียกว่าเห็นของจริงโดยไม่ต้องใช้งานเลย
Webgradient – https://webgradients.com เว็บไซต์ที่มีตัวอย่างการไล่สีมาให้แล้ว สามารถกดเพื่อดูสีเต็มรูป หรือ Copy โค๊ดสีมาใช้ได้เลย รวมถึงสามารถ Copy CSS Code เพื่อนำไปใส่ในเว็บไซต์ได้ด้วยครับ ส่วนมากสีของเว็บไซต์นี้จะค่อนข้างอ่อน มีมีติ เหมาะแก่การใช้สร้างเว็บไซต์ครับ
Gradient
ColorHue 2.0 – https://webkul.github.io/coolhue/ ค่อนข้างคล้ายกันกับ Webgradient ต่างกันนิดหน่อยที่ Interface เว็บไซต์ แต่สามารถคัดลอก CSS Code และดาวน์โหลดรูปเต็มของสีนั้นๆได้
Gradient
Colorspace – https://mycolor.space/contact เว็บไซต์ที่ทำได้มากกว่าเทสสี แต่ทางเว็บไซต์จะให้เรากำหนดสีมา 1 สี โดยจิ้มสีจาก Color Chart จากนั้นเราสามารถ Generate ให้ออกมาเป็น Palette ที่เข้ากันกับสีนั้น
Gradient
เทสการไล่สี ทั้งแบบ 2 สีและแบบ 3 สี พร้อมทั้งเลือกทิศทางการกำเนิดสีได้ด้วย
Gradient
Gradient
ขอขอบคุณ : unlockmen, webgradient, mycolorspace, webkul
อยากอ่านต่อ

คอนเทนต์ใหม่ล่าสุด

สอน Online Workshops จากทีม JaLearn

ในช่วง โควิด-19 ทาง JaLearn ได้จัดการสอน Workshop แบบออนไลน์ให้กับมหาวิทยาลัยและสถาบันต่าง ๆ ในหลายหัวข้อที่เกี่ยวกับการผลิตสื่ออย่างมีคุณภาพ มีอะไรบ้างมาดูกัน

วิธีทำ 3D ง่าย ๆ ด้วย Ai

ใครว่า 3D ทำยาก!! วันนี้ทาง Jalearn ได้หาขั้นตอนการทำ 3D ง่าย ๆ ใน Ai เพียงไม่กี่ขั้นตอนมาฝากทุกคน เผื่อใครที่กำลังรู้สึกอยากเพิ่มลูกเล่นให้งานให้ดูมีอะไรมากยิ่งขึ้น

Scroll to Top
Logo JL 2

เข้าสู่ระบบเพื่อเริ่ม Learn