เทคนิคการใช้ Gradient กับงานออกแบบกราฟิก

บทความนี้เราจะมาเรียนเรื่อง Gradient กับการใช้ในงานออกแบบกราฟิกกันครับ

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

วันนี้ทาง DIYDesignSkill เลยอยากจะมาแชร์วิธีการนำ Gradient มาใช้งาน เพื่อให้เพื่อนๆ นักออกแบบได้นำหลักการที่สอนในวันนี้ไปประยุกต์ใช้งานกับงานออกแบบของตัวเอง และใช้สำหรับการออกแบบในเทรนด์ของปี 2020 (ปี 2021 ก็ยังฮิตอยู่)

เทคนิคการใช้งาน Gradient 

1.เทคนิคของการใช้งาน Gradient แบบ Background

https://www.instagram.com/design.bot/

https://pllsll.com/blog/874

  • เทคนิคนี้ถือว่ามีความนิยมเป็นอันดับต้นๆ ของการนำ Gradient มาใช้งาน การใช้งานลักษณะนี้จะมี Gradient คุมภาพรวมของงาน 
  • ถ้าหากมี Background เป็น Gradient แล้วการจัดสัดส่วนของสีจะต้องระวังไม่ให้มากหรือเด่นจนเกินไป การเลือกสีจะต้องไม่กลบ หรือลดระดับความสำคัญของ Main ที่เป็น Communication หรือสิ่งที่ต้องการจะสื่อ 
  • การใช้งานคู่สีจะต้องไม่ใช่คู่สีที่สะดุดตาจน Background นั้นเด่นที่สุด เพราะอาจผิดพลาดในการรับสาร 
  • และอย่าลืมว่าสีมีผลต่อความรู้สึกเพราะฉะนั้นอย่าลืมเลือกคู่สีที่เหมาะสมกับงานออกแบบของเรา

https://graphicriver.net/item/fashion-flyer/22113971?ref=HR-Graphics

http://plentyofcolour.com/2012/03/05/gradient-styling/

https://pins.androidsitesi.com/2019/09/07/t%CD%A5%CD%84%CD%92%CD%AE%CD%92%CC%A2%CC%9F%CC%A5%CD%99%CC%99%CC%AA%CC%A0a%CD%AF%CC%AF%CC%A9%CC%A6%CD%99p%CD%A5%CD%97%CC%93%CC%94%CC%8E%CD%AB%CC%9B%CC%97%CC%9F%CD%94%CD%9Ai%CD%92%CC%9A%CD%AB/

2. เทคนิคการนำ Gradient มาใช้เป็น Element ในงาน

  • การใช้งานในแบบ Gradient Element นั้นจะไม่ยากเท่าไหร่ครับ เพราะการคุมภาพรวมนั้นทำได้ง่าย หากเป็น Element ในงานออกแบบนั้นมันอาจจะไม่ใช่ส่วนที่สำคัญหรือจุดสำคัญในงานของคุณ 
  • ถ้าหากมี Background ที่มีสีที่แรงหรือรายละเอียดสูงการใช้งานด้วย Element Gradient อาจจะต้องหลีกเลี่ยงการใช้สีที่แรงเหมือนกัน หรือเลี่ยงการใช้งาน Gradient หากต้องการใช้งานจริงๆ ลองใช้ Background แบบ Gradient ในสัดส่วนที่น้อยลงมา
  • การจัดองค์ประกอบในกระบวนการคิดงานจะต้องคิดวางแผนสำหรับการใช้งาน Element พวกนี้ไว้ก่อน การใช้สี Gradient กับ Element อาจจะต้องใช้การไล่ไปในทิศทางเดียวกัน มีเส้นสำหรับนำสายตา และทำหน้าที่สื่อสารเนื้อหาได้อย่างชัดเจน
  • เรื่องสีต้องคุมให้อยู่ และไม่กวนการสื่อสารของเรา

https://www.behance.net/gallery/76635415/Blexar-Design-System

https://www.behance.net/gallery/75694493/Base-Design-System

3. การสร้าง Gradient มาเป็น Main หลักในชิ้นงาน

  • ทั้งนี้การใช้งานขึ้นอยู่กับว่าเราต้องการวางชิ้นงานในแบบไหน แต่วิธีการใช้งานจะเหมือนการใช้งานในสองข้อข้างต้น แต่อย่าลืมว่าเราต้องดึงความเด่นของ Main Object ของเราออกมาให้ได้ เทคนิคเบื้องต้นอาจใช้สีที่โดดเด่น มีการใช้สีที่มากกว่า 2 สีขึ้นไป หรือมีการใช้ Gradient แบบ Orb, fluid, 3D ผสมผสานกับเทคนิคอื่นๆ
  • เทคนิคที่ใช้ออกแบบง่ายหน่อยจะเป็นการใช้งาน Main Object ที่มีสีโดดเด่นกับพื้นหลังสีโทนเข้ม
  • ส่วน Background อาจจะต้องเป็นสี Solid เลย หรืออาจจะมี Gradient แทรกแค่เบาๆ (ไม่เกิน 30% ของพื้นที่) จะทำให้งานของเราโดดเด่นขึ้นมาครับ

https://www.freepik.com/free-vector/colorful-background-with-abstract-style_2318399.htm

http://www.magdiellopez.com/a-poster-a-day-v2-1/

ข้อควรระวังในการใช้งาน Gradient

  1. การใช้งาน Gradient ต้องมีสัดส่วนที่พอดีไม่มากจนเกินไปโดยเฉพาะงานที่เน้นในเรื่องของการสื่อสารด้วยคอนเทนท์ไม่อย่างนั้น งานของเราอาจจะสวยงามแต่สื่อสารได้ยาก ** งานที่สวยแต่ไม่สื่อสารหรือขาดฟังก์ชั่นไม่ใช่งานที่ดีสำหรับการออกแบบ
  2. คู่สีในการใช้งานหากเราใช้เอาสองสีหรือแค่คู่เดียวก็คงไม่อยากที่จะคุม แต่ถ้าหางานเรามีคู่สีที่มากกว่าสองสีสิ่งที่ต้องระวังมีสองส่วน
  • ระวังในเรื่องการเลือกสี
  • สัดส่วนในการใช้สีแต่ละสี
  1. งานที่มีรายละเอียดในเรื่องของการใช้ฟอนต์และ Element ควรต้องเลือกวิธีการจัดวางให้เหมาะสมหรือต้องมีการจัดองค์ประกอบที่ดีไม่เช่นนั้นจะเป็นปัญหาเหมือนกับข้อแรก
  2. เรื่องการแสดงผลในกรณีที่เราใช้งานออกแบบ Gradient กับการออกแบบ Website, Application จะมีเรื่องการแสดงผลบนหน้าจอเข้ามา รวมไปถึงวิธีการจักวาง Layout ในหน้าจอที่ต่างกัน (Responsive)  งานในลักษณะนี้ควรถูกวางแผนให้ดีตั้งแต่เริ่มออกแบบ และมีการตรวจสอบอย่างละเอียดทุกครั้งเมื่องานเสร็จสิ้น

https://www.behance.net/gallery/72127685/Super-Gradient-WebSite-Concept-Design

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

สำหรับใครที่มีคำถามก็สามารถส่งเข้ามาได้ที่ Inbox หรือ Comment กันเข้ามาได้ผ่านทาง Facebook ครับ และถ้าเห็นว่าบทความนี้เป็นประโยชน์ก็ช่วย Share เพื่อเป็นกำลังใจให้กันได้ครับ