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

— โจเซฟ มุลเลอร์-บร็อคมันน์

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

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

พิจารณาเค้าโครงหน้าสองหน้าที่แสดงในรูปด้านล่าง:

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

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

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

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

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

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

เมื่อเริ่มเรียนรู้ทักษะใหม่ๆ ในด้านใดด้านหนึ่ง คุณควรปฏิบัติตามคำแนะนำก่อน การเรียนรู้พื้นฐานช่วยให้แน่ใจว่าคุณสามารถนำหลักการไปใช้ได้อย่างมีประสิทธิภาพ นั่นคืออันดับแรก - ทฤษฎีแล้ว - การปฏิบัติ

เป็นที่น่าสังเกตว่ามีสองวิธีในการสร้างตารางเทมเพลต:

วิธีที่ # 1: สร้างตารางของคุณเอง

มีมากมาย ในรูปแบบต่างๆสร้างกริดของคุณเอง แต่สุดท้ายแล้ว คุณมีสิทธิ์เลือกตัวเลือกที่เหมาะกับคุณที่สุด

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

บางทีบทความต่อไปนี้อาจช่วยคุณในเรื่องนี้:

• คุณสร้างกริดได้อย่างไร (หนังสือที่ ภาษาอังกฤษในรูปแบบ .pdf)

นี่คือตัวอย่างบางส่วนของเครือข่ายที่สร้างขึ้นใน Photoshop โดยใช้คำแนะนำ ( ดู>คำแนะนำใหม่):

ปลั๊กอินสำหรับสร้างกริดใน Photoshop

5. เครื่องสร้างระบบกริด - เครื่องกำเนิดกริดยอดนิยมเช่น 960.gs, Golden Grid, 1Kb Grid, Simple Grid / ตั้งค่าพารามิเตอร์ที่จำเป็นแล้วคลิก "สร้าง"

ตารางสำหรับเว็บไซต์ที่ลื่นไหล/ตอบสนอง

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

1. - เครื่องกำเนิดตาข่ายแบบปรับได้

2. เครื่องคิดเลขตารางของเหลว - บริการที่ให้คุณสร้างตาข่ายยาง ป้อนพารามิเตอร์และรับโค้ดที่เสร็จสมบูรณ์

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

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

ตัวเลือกที่สอง มิติ อยู่ใกล้กับตัวเลือกที่สามมาก เป็นสัดส่วน โดยพื้นฐานแล้ว สิ่งเหล่านี้คือกริดแบบแยกส่วนสำหรับผลิตภัณฑ์สิ่งพิมพ์ประเภทการพิมพ์ต่างๆ

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

Phidias (ผู้สร้างอะโครโพลิส) และ Ictinus (วิหารพาร์เธนอน) ยังแสดงให้เห็นถึงความรู้เกี่ยวกับกฎของอัตราส่วนทองคำอีกด้วย สาระสำคัญของกฎข้อนี้คือส่วนที่เล็กกว่านั้นสัมพันธ์กับส่วนที่ใหญ่กว่า เนื่องจากส่วนที่ใหญ่กว่านั้นเกี่ยวข้องกับความยาวทั้งหมด ฉันจำไม่ได้ว่ามีการศึกษากฎหมายนี้ที่โรงเรียนหรือไม่ แต่ในโรงเรียนศิลปะ สถาบันศิลปะและสถาปัตยกรรม เหมือนกับ "พระบิดาของเรา..." ในจำนวนหนึ่ง ค่านี้จะแสดงเป็น 1.618..... ในเชิงพีชคณิต ดูเหมือนว่า : ข=ข:( ก+ข). ประเด็นก็คือ อัตราส่วนดังกล่าวมีประโยชน์ต่อดวงตา เนื่องจากลักษณะทางจิตและทางกายภาพของโครงสร้างของดวงตา ความถี่ในการทำงานของสมอง และอื่นๆ อีกมากมาย... (รูปที่ 4.2)

องค์ประกอบสำคัญประการที่สองในการสร้างความสัมพันธ์ที่เอื้อต่อการมองเห็นคือรูปสี่เหลี่ยมจัตุรัส การสร้างอัตราส่วน 1:2, 2:3, 3:4 เป็นเรื่องง่าย

รูปที่ 4.2.

รูปที่ 4.3.

สำหรับเว็บ การสร้างหน้าแบบโมดูลาร์สามารถจัดระเบียบได้โดยใช้ตาราง ในฐานะโมดูล คุณสามารถใช้อัตราส่วนภาพของหน้าจอได้ (ที่ 800x600 นี่คือ 4:3) (รูปที่ 4.3) ขนาดมาตรฐานของกระดาษ A4 ยังเป็นโมดูลในการวาดภาพและการพิมพ์อีกด้วย

จำนวนกริดการพิมพ์ที่ล้นหลามนั้นขึ้นอยู่กับรูปแบบของกระดาษหนึ่งแผ่นซึ่งถือเป็นพื้นฐานสำหรับการตีพิมพ์ การออกแบบตารางขึ้นอยู่กับเนื้อหาและจุดประสงค์ของโปรเจ็กต์ รวมถึงสไตล์เฉพาะตัวของศิลปินคนใดคนหนึ่ง และหากการออกแบบเสร็จสิ้นโดยใช้คอมพิวเตอร์ กระบวนการก็จะค่อนข้างรวดเร็วโดยเฉพาะในขั้นตอนการนำไปปฏิบัติ โปรแกรมกราฟิกส่วนใหญ่ (ส่วนใหญ่จะเผยแพร่) มีตัวเลือกในตัวสำหรับการสร้างตารางแบบแยกส่วนและเกือบทั้งหมดมีชุดเทมเพลตตารางแบบแยกส่วนขนาดใหญ่พอสมควรภายใต้ชื่อสามัญ "Booklet", "ปฏิทิน" เป็นต้น

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

รูปที่ 4.4.

รูปที่ 4.5. ตารางโมดูลาร์ของแถบที่เหลือ

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

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

โมดูลต่างๆ ถูกใช้โดยสถาปนิก นักออกแบบเฟอร์นิเจอร์ และนักพัฒนารถยนต์ โมดูลเหล่านี้เชื่อมโยงกับสัดส่วนและขนาดของร่างกายมนุษย์

รูปที่ 4.6.

ในการออกแบบเว็บไซต์ ตารางโมดูลาร์ถูกใช้บ่อยกว่าที่เห็นเมื่อมองแวบแรก หากคุณกำลังใช้

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

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

ขนาดหน้าจอ

กับ

ความกว้างของผ้าใบ

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

ความละเอียดหน้าจอ
ขนาดผ้าใบ

ขนาดหน้าจอสามารถกำหนดได้โดยใช้โปรแกรมง่ายๆ (ดูการปฏิบัติงานในห้องปฏิบัติการ)

มาดูตัวอย่างของตารางโมดูลาร์และการระบุมิติที่จัดระเบียบโดยใช้ตาราง

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

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

บทความที่มีประโยชน์อย่างยิ่งเกี่ยวกับกฎการสร้างเลย์เอาต์นิตยสาร! ฉันขอแนะนำให้อ่านมันมาก

ก่อนที่เราจะพูดถึงตารางโมดูลาร์ เรามาทำความเข้าใจก่อนว่าโมดูลคืออะไร

โมดูลเป็นภาพ ขนาด หรือสัดส่วนที่ซ้ำกันหลายภาพ – นี่คือโครงสร้าง (เฟรมเวิร์ก, เทมเพลต) ของการจัดเรียงองค์ประกอบกราฟิกบนเพจ พื้นฐานของกริดแบบโมดูลาร์คือ "โมดูล" หรืออีกนัยหนึ่งคือขั้นตอนกริดหลัก ซึ่งถูกกำหนดด้วยสายตาโดยความกว้างและความสูงของเซลล์ (หน่วยแบบโมดูลาร์) เซลล์ถูกสร้างขึ้นโดยใช้คอลัมน์แนวตั้งและเส้นแนวนอน

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

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

คอลัมน์ที่มีความกว้างเท่ากันจะถูกสร้างขึ้นในหน้าต่างการสร้างเอกสาร หรือในแผง "ระยะขอบและคอลัมน์" หากเราต้องระบุ 3 คอลัมน์ให้ป้อนหมายเลข 3 ในช่องที่เกี่ยวข้อง ฯลฯ

แต่จะเกิดอะไรขึ้นถ้าตามแผนของเรา ไม่ใช่ว่าทุกคอลัมน์ควรมีความกว้างเท่ากันล่ะ? ตัวอย่างเช่น จะเกิดอะไรขึ้นหากข้อความและรูปภาพถูกวางในคอลัมน์กว้าง 2 คอลัมน์ และข้อมูลอธิบายถูกวางไว้ในคอลัมน์แคบด้านข้าง?

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

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

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

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

-

ตารางโมดูลาร์ไม่จำเป็นต้องสร้างจากเส้นตั้งฉาก บางครั้งนักออกแบบก็ตัดสินใจที่จะเอียงตารางหรือแม้กระทั่งทำให้เป็นรูปทรงดั้งเดิม หากคุณต้องการที่จะไปให้ไกลกว่าปกติ ทำเลย!
เพียงพยายามให้แน่ใจว่าในการแสวงหาความคิดริเริ่มงานของคุณจะไม่กลายเป็นแรงงานของ Sisyphean ลองนึกภาพว่าจะเป็นอย่างไรหากจัดวางหน้า 40-50 หน้าด้วยตารางเอียงหรือเป็นลอน...

-

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

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

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

ทุกสิ่งที่อยู่รอบตัวเรามีสัดส่วนของตัวเอง แม้แต่ตอนเด็กๆ การ์ตูนเรื่อง 38 Parrots ก็สอนเราว่าทุกสิ่งสามารถแบ่งออกเป็นส่วนๆ เท่าๆ กัน (ความยาวของงูเหลือมประกอบด้วยนกแก้ว 38 ตัว) เราทุกคนก็รู้เช่นกันว่าความสูงของบุคคลเท่ากับเจ็ดหัวของเขา หนึ่งเซนติเมตรประกอบด้วยสิบมิลลิเมตร หนึ่งเมตรประกอบด้วยหนึ่งร้อยเซนติเมตร และอื่นๆ ดังนั้นนกแก้วการ์ตูน หัวมนุษย์ มิลลิเมตร และเซนติเมตร จึงเป็นโมดูล

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

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

มาดูกันว่าตาข่ายคืออะไร

1. ประเภทที่ง่ายที่สุดคือบล็อกกริด นั่นคือเธอทำเครื่องหมายคร่าวๆ โดยแบ่งพื้นที่ออกเป็นบล็อกๆ

บล็อกกริด

3. ตารางโมดูลาร์ไม่เพียงแต่มีการแบ่งตามแนวตั้งเท่านั้น แต่ยังมีการแบ่งตามแนวนอนด้วย ดังนั้น สิ่งที่ได้รับจากจุดตัดของเส้นคือโมดูล

4. นอกจากนี้ยังมีตารางแบบลำดับชั้น ซึ่งบล็อกต่างๆ จะถูกวางอย่างสังหรณ์ใจ และไม่เป็นไปตามรูปแบบใดๆ

ดังนั้นวิธีการสร้างตารางแบบโมดูลาร์

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

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

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

ดังนั้นเราจึงได้พื้นฐานของเมชในอนาคตของเรา ข้อความทั้งหมดจะวางอยู่บนรากฐานนี้

4. ตอนนี้เราต้องตัดสินใจว่าโมดูลของเราจะกว้างแค่ไหน ตรงนี้เราสามารถเริ่มจากความกว้างขององค์ประกอบถาวรใดๆ ได้ หากคุณมีภารกิจในการวางองค์ประกอบที่เหมือนกันไว้ตามความกว้างของหน้า ทุกอย่างจะง่ายขึ้นเพราะคุณรู้ขนาดของมันแล้ว

เพื่อความสะดวกเราจำเป็นต้องกำหนดระยะห่างระหว่างโมดูล จะต้องเท่ากับความสูงของบรรทัดอย่างน้อยหนึ่งบรรทัดจากย่อหน้าก่อนหน้า

มีข้อแม้ประการหนึ่ง - คุณต้องเลือกขนาดโมดูลที่เหมาะสม เพราะหากมีขนาดใหญ่เกินไป ความยืดหยุ่นของตาข่ายจะหายไป และหากมีขนาดเล็ก ตาข่ายก็จะหายไป

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

ไม่นานมานี้ ขณะกำลังทำบทเรียนอีกบทเรียนหนึ่งของหลักสูตร “การออกแบบกราฟิก” พื้นฐาน” (กำหนดเปิดตัวในต้นเดือนมกราคม) ฉันพบว่าหัวข้อการใช้งานและการสร้างกริดแบบโมดูลาร์ไม่ค่อยครอบคลุมถึง

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

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

ตารางสามารถช่วยเราแก้ปัญหาและเป็นส่วนหนึ่งของการแก้ปัญหาได้ ตัวอย่างที่โดดเด่นที่สุดก็คือ อินเตอร์เฟซหน้าต่างโทรศัพท์:

สำหรับผู้ที่ต้องการคำถามเชิงทฤษฎีที่มีรายละเอียดมากขึ้น มีโอกาสที่จะใช้การค้นหาหรือสมัครรับหลักสูตรและรับจดหมายที่เกี่ยวข้องซึ่งมีการอธิบายไว้อย่างละเอียดเพียงพอ และเราจะไปสู่การปฏิบัติโดยตรง

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

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

การรวมโมดูลสามารถทำได้ในเกือบทุกรูปแบบที่สะดวกสำหรับคุณ:

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

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

ในกรณีของเว็บไซต์ จำนวนคอลัมน์ที่เหมาะสมที่สุดคือ 12, 16 และ 24 ซึ่งเป็นผลมาจากลักษณะเฉพาะของเค้าโครงเว็บไซต์และการใช้ความสามารถของเฟรมเวิร์ก ฉันถือว่าความสูงขั้นต่ำของโมดูลสำหรับเว็บคือ 20px ซึ่งเนื่องมาจากขนาดตัวอักษรที่เหมาะสมที่สุด (12-14pt) และความสามารถในการอ่าน

ตอนนี้ได้เวลาพูดคุยเกี่ยวกับด้านเทคนิคของปัญหานี้แล้ว

การสร้างตารางโมดูลาร์ใน

• วิธีแรกและง่ายที่สุดคือการเปิดใช้งานกริดเอง โปรแกรมแก้ไขกราฟิก(Ctrl+’) และตั้งค่าคำแนะนำตามคำแนะนำ จะใช้เวลานานและมีโอกาสเกิดข้อผิดพลาดสูง
• ติดตั้งปลั๊กอินพิเศษสำหรับ Photoshop ( ไกด์ไกด์ , รูปแบบตารางโมดูลาร์ , กริดเมคเกอร์ 2).
• ดาวน์โหลดเทมเพลตสำเร็จรูปจากโปรแกรมสร้างกริดฟรี เช่น 960.gs, Golden Grid, 1Kb Grid, Simple Grid ตั้งค่าพารามิเตอร์ที่ต้องการแล้วคลิก "สร้าง"

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

การสร้างตารางโมดูลาร์ใน

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

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

การสร้างตารางโมดูลาร์ใน

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

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

โลกแห่งโปรแกรมฟรีและเคล็ดลับที่เป็นประโยชน์
2024 whatsappss.ru

ชื่อ
เมนู	โมดูล1		โมดูล 2	โมดูล3	โมดูล4
	บทสรุป