อัตราส่วนทองคำ: คู่มือขั้นสูงในการทำความเข้าใจและใช้งาน

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

ภาพถ่ายโดย Bogomil Mihaylov บน Unsplash

อัตราส่วนทองคำยังใช้ชื่ออื่นอีกหลายชื่อเช่นกัน:

• สัดส่วนพระเจ้า
• ค่าเฉลี่ยสีทอง
• ส่วนทอง
• พี (อักษรกรีก)

คณิตศาสตร์เบื้องหลังอัตราส่วนทองคำ

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

เพื่อให้เข้าใจอัตราส่วนทองคำ คุณต้องเข้าใจสี่เหลี่ยมทองคำก่อน

สี่เหลี่ยมผืนผ้าทองคำเป็นรูปสี่เหลี่ยมผืนผ้าขนาดใหญ่ที่มีสี่เหลี่ยมจัตุรัสอยู่ข้างใน ด้านข้างของสี่เหลี่ยมจัตุรัสเท่ากับความยาวที่สั้นที่สุดของสี่เหลี่ยมผืนผ้า:

ที่มา: Wikipedia

อัตราส่วนทองคำเป็นตัวเลขที่ (ชนิด) เท่ากับ 1.618 เหมือนกับ pi เท่ากับ 3.14 โดยประมาณ แต่ไม่ตรงทั้งหมด

คุณลากเส้นและแบ่งออกเป็นสองส่วน - ส่วนยาว (a) และส่วนสั้น (b) ความยาวทั้งหมด (a + b) หารด้วย (a) เท่ากับ (a) หารด้วย (b) และตัวเลขทั้งสองนั้นมีค่าเท่ากับ 1.618 ดังนั้น (A + B) หารด้วย (ก) เท่ากับ 1.618 และ (ก) หารด้วย (ข) นอกจากนี้ยังมีค่าเท่ากับ 1.618

กลับไปที่สี่เหลี่ยมทองคำเพราะเข้าใจง่ายกว่ามาก

เมื่อคุณวางสี่เหลี่ยมจัตุรัสภายในสี่เหลี่ยม มันจะสร้างสี่เหลี่ยมที่เล็กกว่าอีกอัน ละเว้นเส้นสีดำและดูที่กล่องสีแดงและสีเขียว:

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

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

แผนภาพอัตราส่วนทองคำแบบดั้งเดิมมีแปดเหลี่ยมทองคำ:

และนี่คือสี่เหลี่ยมผืนผ้าทองคำที่เล็กที่สุด #8:

หากคุณเริ่มต้นจากด้านล่างซ้ายและสร้างส่วนโค้งเพื่อเชื่อมต่อด้านไกลของส่วนตัดขวางสี่เหลี่ยมและสี่เหลี่ยมเล็กแต่ละส่วน คุณจะได้เกลียวทอง

ลำดับฟีโบนักชี

ลำดับฟีโบนักชีค่อนข้างเข้าใจง่าย: คุณเริ่มต้นด้วยศูนย์และ 1 จากนั้นจึงได้ตัวเลขถัดไปโดยบวกตัวเลขสองตัวก่อนหน้านั้น 0 + 1 = 1 จากนั้น 1 + 1 = 2 เป็นต้น ตัวเลขสองสามตัวแรกในลำดับคือ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34

หากคุณใช้ตัวเลขเหล่านี้เพื่อสร้างสี่เหลี่ยมจัตุรัสที่มีความกว้าง คุณสามารถสร้างเกลียวทองได้:

ที่มา: คณิตศาสตร์คือความสนุก

วงกลมทองคำ

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

ที่มา: Limelight Department

โลโก้ Pepsi และ Twitter ใช้ Golden Circles:

ที่มา: Hybrid Talks

คุณเคยเห็นสิ่งนี้มาก่อน มาก

ธรรมชาติเต็มไปด้วยอัตราส่วนทองคำ มันอยู่ในดอกไม้ เปลือกหอย สภาพอากาศ...

ที่มา: ภาพถ่ายโดย Annie Spratt บน Unsplash

ที่มา: ภาพถ่ายโดย NASA บน Unsplash

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

อัตราส่วนทองคำในงานศิลปะและการออกแบบ

บางครั้งอัตราส่วนทองคำง่ายต่อการจดจำ:

ที่มา: staceysdetailinginc.com

บางครั้งคุณก็พูดว่า “ฉันไม่รู้ว่าคุณกำลังพูดถึงอะไร… โอ้ เดี๋ยวก่อน ตอนนี้ฉันเห็นมัน ฉันคิดว่า."

ที่มา: Marketing Insiders

บางครั้งคุณอาจจะคลั่งไคล้การดูมัน...

ที่มา: Widewalls

…แต่ถ้าคุณเป็นศูนย์ในสี่เหลี่ยมทองคำหลัก มันจะชัดเจนขึ้นเล็กน้อย:

ลองมาดูตัวอย่างที่อ้างอิงกันทั่วไป: Parthenon

ที่มา: Creative Bloq

ในตอนแรก คุณอาจเห็นสิ่งนี้และพูดว่า “สำหรับฉันมันดูสมมาตร สิ่งที่ฉันกำลังดูอยู่นั้นเข้ากับสิ่งที่เป็นเกลียวสี่เหลี่ยมทองคำได้อย่างไร”

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

แต่จะใช้อัตราส่วนเพื่อสร้างความกลมกลืนและสัดส่วน ซึ่งสามารถตีความได้หลายวิธี

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

ที่มา: Archinect

ที่มา: Esther Sugihto บน Medium

ที่มา: GoldenNumber.net

อัตราส่วนทองคำและการออกแบบเว็บไซต์

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

อัตราส่วนทองคำและเลย์เอาต์

หากคุณต้องการเค้าโครงอัตราส่วนทองคำที่สมบูรณ์แบบ ให้กำหนดขนาดเป็น 1:1.618 ตัวอย่างเช่น คุณสามารถตั้งค่าความกว้างเป็น 960 พิกเซลและความสูงเป็น 594 พิกเซล สี่เหลี่ยมผืนผ้าทองคำคือ 594 พิกเซลในแต่ละด้าน และสี่เหลี่ยมผืนผ้าจะใช้พื้นที่ที่เหลือของเลย์เอาต์ (594 x 366)

ซุปเครื่องคิดเลขมีเครื่องคิดเลขอัตราส่วนทองคำที่เป็นประโยชน์ซึ่งคุณสามารถตั้งค่าคำศัพท์ใดก็ได้ (A, B หรือ A + B) เพื่อค้นหาค่าอัตราส่วนทองคำที่ถูกต้อง

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

ที่มา: National Geographic

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

ในความคิดของฉัน เลย์เอาต์สมมาตรที่เราใช้กับธีมที่สง่างามนั้นทันสมัยกว่า:

อัตราส่วนทองคำและระยะห่าง

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

ที่มา: Digiarts 2011

นี่คือสิ่งที่ดูเหมือนเมื่อฉันใช้ Golden Spiral ใน Photoshop:

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

คุณยังสามารถเลเยอร์โอเวอร์เลย์ Golden Ratio เพื่อนำไปใช้กับองค์ประกอบต่างๆ ของการออกแบบเดียวกันได้:

ที่มา: การสร้างแบรนด์โดย Lemongraphic ตัวอย่างจาก Canva

อัตราส่วนทองคำและเนื้อหา

เมื่อคุณนึกถึงการจัดวางและระยะห่างของ Golden Ratio ร่วมกัน คุณสามารถเริ่มตัดสินใจว่าจะวางเนื้อหาไว้ที่ใดบนเว็บไซต์ของคุณ

มาดูเว็บไซต์ National Geographic กันอีกครั้ง คราวนี้มีการซ้อนทับ Golden Ratio ของ Canva:

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

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

ที่มา: ออกแบบโดย Helms Workshop ตัวอย่างจาก Canva

รางวัลชมเชย: อัตราส่วนทองคำและรูปภาพ

อัตราส่วนทองคำยังใช้ในองค์ประกอบการถ่ายภาพอีกด้วย แทนที่จะสร้างเกลียวทอง อัตราส่วนทองคำจะแบ่งภาพออกเป็นหกช่วงตึก อัตราส่วนทองคำแบบเดียวกันนี้ใช้ในตารางประเภทนี้: ความกว้างและความสูงของส่วนต่างๆ คือ 1 หรือ 0.618

ที่มา: Canva

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

วิธีที่ง่ายกว่าและเข้าถึงได้ง่ายกว่ามากในการปฏิบัติตามกฎนี้คือการใช้ตาราง Rule of Thirds ซึ่งคุณอาจมีในกล้องในโทรศัพท์หรือ DSLR ของคุณ

นี่คือรูปลูกชายของลูกพี่ลูกน้องของฉัน ฉันได้วางตาราง Rule of Thirds ไว้เพื่อแสดงให้คุณเห็นว่าตัวแบบอยู่ที่ไหนและไม่อยู่ในกรอบ

นอกจากนี้ ให้ดูว่าเกลียวทองล้อมรอบวัตถุเกือบสมบูรณ์แบบอย่างไร:

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

ห่อ

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

พร้อมที่จะเล่นกับเลย์เอาต์เว็บไซต์ของคุณแล้วหรือยัง? ดูบทความของเราเกี่ยวกับการใช้ตัวเลือกความสูงและความกว้างใหม่ของ Divi เพื่อสร้างการออกแบบที่ตอบสนอง