เคล็ดลับการออกแบบเว็บไซต์ 5 ข้อเพื่อใช้แสงและเงาได้ดียิ่งขึ้น

ข้อความต้นฉบับ: 5 เคล็ดลับง่ายๆ ในการนำแสงและเงามาสู่การออกแบบของคุณ

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

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

การวิเคราะห์หลักการของแสงและเงาอย่างรวดเร็ว

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

แต่คุณอาจถามว่า สิ่งนี้เกี่ยวข้องกับการออกแบบเว็บไซต์อย่างไร

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

1. การใช้แหล่งกำเนิดแสง

ควรกล่าวว่าเมื่อใช้แสงสว่าง การรู้ว่าแหล่งกำเนิดแสงอยู่ที่ไหนถือเป็นประเด็นพื้นฐานที่สำคัญที่สุด ตำแหน่งของแหล่งกำเนิดแสงจะกำหนดตำแหน่งของไฮไลต์และเงา (แม้ว่าในการออกแบบเว็บคุณสามารถฝ่าฝืนกฎเหล่านี้ได้) ใน Photoshop คุณสามารถใช้ "Global Illumination" ในรูปแบบเลเยอร์เพื่อให้แน่ใจว่าแหล่งกำเนิดแสงของเอฟเฟกต์แสงและเงาทั้งหมดที่คุณสร้างอยู่ในตำแหน่งเดียวกัน

การควบคุมตำแหน่งของแหล่งกำเนิดแสงสามารถสร้างบรรยากาศที่เป็นเอกลักษณ์สำหรับการออกแบบเพจของคุณได้ (แม้แต่การไล่ระดับสีเชิงเส้นหรือแนวรัศมีธรรมดาก็สามารถสร้างเอฟเฟกต์ได้) เอฟเฟกต์แสงและเงายังสามารถกำหนดทิศทางการเปลี่ยนแปลงของศูนย์กลางภาพได้อีกด้วย

ตัวอย่างจากเว็บ

Campaign Monitor ใช้แหล่งกำเนิดแสงที่แตกต่างกันเพื่อสร้างเอฟเฟกต์พระอาทิตย์ขึ้น

Icebrrg ใช้แสงเพื่อสร้างเพจใต้น้ำ

Mike Precious ใช้แหล่งกำเนิดแสงมากกว่าหนึ่งแหล่งเพื่อเพิ่มความน่าสนใจให้กับภาพ และใช้ไฟโคมไฟตั้งโต๊ะตลอดทั้งห้อง

Deaxon มีแหล่งกำเนิดแสงจางๆ อยู่ด้านหลังโลโก้ ซึ่งนำโฟกัสของหน้ามาที่โลโก้

2. การไล่ระดับสี

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

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

ตัวอย่างจากเว็บ:

เว็บไซต์ของ nclud ใช้การไล่ระดับสีที่ละเอียดอ่อนแต่มีประสิทธิภาพเพื่อสร้างความแตกต่างและจัดระเบียบเนื้อหา

เมื่อมองแวบแรก ดูเหมือนว่า CSS Ninjas จะใช้สีเรียบๆ อย่างไรก็ตาม แต่ละพื้นที่สีมีการไล่ระดับสีจางๆ จริงๆ ทำให้เกิดเอฟเฟกต์วัสดุที่น่าทึ่ง

3. ไฮไลต์

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

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

ตัวอย่างบนอินเทอร์เน็ต

Icon Dock และ Newism ทั้งคู่ใช้สีขาวโปร่งแสงที่ขอบด้านบนของหน้าเพื่อสร้างเอฟเฟกต์ไฮไลท์ แม้ว่าจะไม่โดดเด่นมากนัก แต่ก็ให้ความแวววาวที่ชัดเจนแก่การออกแบบ

ทุกคนน่าจะคุ้นเคยกับ เว็บไซต์ของ Apple แต่คุณอาจไม่สังเกตเห็นไฮไลต์เล็กๆ น้อยๆ ที่ด้านล่างของเมนูนำทาง จุดเด่นนี้เองที่ทำให้เมนูนี้ดูโดดเด่น

4. เงาพื้นฐาน

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

ความลึกของเงาขึ้นอยู่กับทิศทางและความเข้มของแสง รวมถึงระยะห่างของวัตถุจากพื้นผิวที่ฉายภาพ ยิ่งแสงเข้มขึ้น เงาก็จะยิ่งเข้มขึ้นเท่านั้น

ตัวอย่างบนอินเทอร์เน็ต

มีตัวอย่างการฉายภาพบนอินเทอร์เน็ตมากเกินไป

LinkedIn เพิ่มเงาตกกระทบที่ละเอียดอ่อนมากที่ด้านล่างของแถบด้านข้างเพื่อสร้างความรู้สึกที่มีความลึก

Google ซึ่งอาจเป็นหน้าที่ออกแบบยากที่สุดบนอินเทอร์เน็ต ยังคงใช้เงาที่ละเอียดอ่อนในหน้าค้นหา

5. เงาขั้นสูง

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

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

ตัวอย่างบนอินเทอร์เน็ต

Emotions โดย Mike ใช้เงา (และแสง) อย่างชาญฉลาดเพื่อเปลี่ยนหน้าเรียบๆ ให้กลายเป็นพื้น