18
ÊÒ¢ÒÇÔªÒ¹Ôà·ÈÈÒʵúÙóҡÒà | ¤³ÐÈÔÅ»ÈÒʵà | ÁËÒÇÔ·ÂÒÅÑÂáÁ‹â¨Œ Ãкº¡ÃÔ´áÅСÒèѴÇÒ§àÅÂàÍÒµ o ÊÒÃÐÊํÒ¤ÑޢͧÃкº¡ÃÔ´ o ¡ÒèѴͧ¤»ÃСͺàÅÂàÍÒµ·Õ่ÊÑÁ¾Ñ¹¸¡ÑºÃкº¡ÃÔ´ ¹È 321 Ê×่ÍÊÔ่§¾ÔÁ¾ [CA 321 Printed Media] ÃÇÁÃÇÁ/àÃÕºàÃÕ§ â´Â ÍÒ¨Òóѯ°¾§É ÊÒ¾Գ º··Õ5

Ca321 week06 chapter5 grid system

Embed Size (px)

DESCRIPTION

เอกสารประกอบการสอน นศ321 บท 5 : • ระบบกริดและการจัดวางเลย์เอาต์

Citation preview

Page 1: Ca321 week06 chapter5 grid system

• เอกสารประกอบการสอน นศ321 สอสงพมพ : ทฤษฎสญญะวทยาในการออกแบบ | 1

ÊÒ¢ÒÇÔªÒ¹Ôà·ÈÈÒʵÃ�ºÙóҡÒà | ¤³ÐÈÔÅ»ÈÒʵÃ� | ÁËÒÇÔ·ÂÒÅÑÂáÁ‹â¨Œ

• Ãкº¡ÃÔ´áÅСÒèѴÇÒ§àÅÂ�àÍÒµ� o ÊÒÃÐÊÒ¤ÑޢͧÃкº¡ÃÔ´

o ¡ÒèѴͧ¤�»ÃСͺàÅÂ�àÍÒµ�·ÕÊÑÁ¾Ñ¹ �¡ÑºÃкº¡ÃÔ´

¹È 321 Ê×ÍÊÔ§¾ÔÁ¾� [CA 321 Printed Media]

ÃÇÁÃÇÁ/àÃÕºàÃÕ§ â´Â ÍÒ¨ÒÃÂ�³Ñ¯°¾§É� ÊÒ¾Գ

º··Õ 5

Page 2: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 2

“Ãкº¡ÃÔ´áÅСÒèѴÇÒ§àÅÂ�àÍÒµ�”

คาวา “ระบบกรด (Grid System)” และ “เลยเอาต (Layout)” เปนการจดระบบใหกบองคประกอบ

ทแตกตางกนและไดผลลพธออกมาเปนงานออกแบบทางสอ การสอสารผานการมองเหนทดนนตองมการ

แสดงขอมลอยางเปนระบบ มความสอดคลอง และขบเนนองคประกอบทสาคญมากทสดใหโดดเดน การ

จดวางองคประกอบจะออกมาดหรอไมขนกบกระบวนการนเปนสาคญ นกออกแบบสอสารตองครนครด

พจารณาเสมอเพอใหองคประกอบทกอยางสามารถแสดงบทบาทนนไดอยางเหมาะสม ซงในบทนจะ

กลาวถงการจดวางเลยเอาตในงานสอสงพมพดวยระบบกรดเพอสรางสรรคงานสอสงพมพใหม

ประสทธภาพ การใชระบบกรดและการออกแบบในสไตลทสมาเสมอจะชวยใหผอานสามารถซมซบขอมล

ไดอยางสะดวก อานไดอยางลนไหล และเขาใจในสงทผออกแบบตองการนาเสนอ การจดเลยเอาตทดมก

ขนกบระบบกรดเชนกน ซงมอยหลายรปแบบใหเลอกใชงาน

ÊÒÃÐÊÒ¤ÑޢͧÃкº¡ÃÔ

การออกแบบกราฟกในระดบเรมตนจะประกอบดวยพนฐาน 3 ขนตอนหลก ขนแรก นกออกแบบ

จะสรปงานจากขอมลของลกคา โดยปกตแลวมกจะคยกนในเรองของลกษณะงานและองคประกอบ ซงอาจ

ประกอบไปดวยขอความ, ขอมลประกอบ (เนอความหลก, พาดหว, กลองขอความ, แถบขาง หรอคา

บรรยายใตภาพ) และรปประกอบ (รปถาย, รปกราฟก, แผนท หรอแผนภม) การสรปงานควรชวยใหเขาใจ

วาผลงานสดทายควรมลกษณะหรอ “ใหความรสก” อยางไรตอกลมผชมเปาหมาย ตงคาถาม เชน เลยเอาต

ดนาเชอถอหรอไม, ควรจะใสขอมลใหละเอยดทสดหรอไม หรอควรรดขอมลใหยอเพอใหมพนทวางมากขน

หากขอสรปทไดนนยงคงคลมเครอ พยายามหาเวลาเขาคยกบลกคาเพอถามถงวตถประสงคของงานให

ชดเจน วาตองการใหผชมไดเซอรไพรส, ผอนคลาย หรอสรางรอยยมใหพวกเขา

ขนตอนทสอง จาเปนตองพจาณรารปแบบควบคกบงบประมาณทม หากมรปภาพจานวนมาก

รวมถงมขอมลประกอบจานวนมาก ยอมสงผลตอเลยเอาต ดงนนเราควรเรยงลาดบความสาคญของขอมล

ประกอบ โดยอาจจะแบงกลมเปน “A”, “B”, “C” ไปเรอยๆ หากตองการเนนยา ขอความใด เราอาจเลอกท

จะเปลยนขนาดตวอกษร. เปลยนนาหนก, เปลยนรปแบบหรอส ประเมนวาจะใชกสในงานออกแบบ ซงงาน

ออกแบบทดนนอาจมการชดสเพยงชดเดยว หรอเลอกทจะใชสอยางอสระกเปนได แตอยาลมวาจานนสท

ใชนนมผลตอคาใชจายในการผลต ดงนน จงตองประเมนกอนการออกแบบและจดพมพ กลบกนหากงาน

Page 3: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 3

ออกแบบจดแสดงออนไลน กไมจาเปนตองกงวลถงจานวนสทเลอกใช แตระวงวาสทเลอกนนตองไมเปน

อปสรรคตอการอาน

ขนตอนทสาม คอการจดการกบองคประกอบในการออกแบบเพอการพมพ ควรจะตองใชระบบ

กรดประกอบดวย ซงจะชวยใหเราสามารถเลอกวางองคประกอบทแตกตางกนไดตามชองของกรด กรดจะ

ชวยแบงเลยเอาตออกเปนคอลมน, ขอบ และพนททจะใชใสขอความหรอรป กรดทไดรบการออกแบบมา

เปนอยางด จะชวยเพมความยดหยนในการจดวางองคประกอบ และชวยใหเกดเอกภาพในทกๆ หนาของ

งานออกแบบ ซงเปนสงสาคญมากสาหรบงานสอสงพมพโดยเฉพาะการจดเลมไมวาจะเปนหนงสอ

นตยสาร วารสาร หรอหนงสอพมพ ทจะกาหนดวาองคประกอบใดจะแสดงผลในทกๆ หนา และ

องคประกอบใดจะเปลยนไปเรอยๆ ตามหนาทเปลยนไป แนนอนวาเราอาจไมสามารถคงอยในกฎเกณฑขอ

งกรดไดตลอดเวลา อาจมการแหกกฎบางหากมนใหผลลพธทดกวา แตการจะแหกกฎไดเรากควรจะฝกฝน

ตนเอง ใหเขาใจในระบบกรดใหกระจางเสยกอน

มหลกการมากมายสาหรบการออกแบบและทสาคญการจะสอสารความคดของนกออกแบบไดดก

ตองม ระบบ ระเบยบในการจดวางองคประกอบหรอเรยกอกอยางวา การจดวาง เลยเอาต ทงใหดงาย เนน

บางจดทจะสอสาร มสวนชวยในการวางองคประกอบในดานตาแหนง และขนาด 2 ประการ คอ

1. สรางความกลมกลนใหกบองคประกอบในพนท หนากระดาษ ใน 1 หนวยใหญ

2. ชวยกาหนดขนาดบนพนทหนวยใหญ โดยกาหนดการวางตาแหนงลงสหนวยยอย

ความหมายของระบบกรด

• ระบบกรด เรยกไดอกอยางหนงวา “ระบบตาราง”

• เปนเครองมอทเปนแนวทางการจดองคประกอบใชในการออกแบบกราฟก

• ใชแบงหนากระดาษออกเปนพนทยอยๆใหมขนาดเลกลงแทนทจะเปนพนทขนาดใหญเพยงอยาง

เดยว โดยการใชเสนตรงในแนวตงและเสนตรงในแนวนอนหลาย ๆ เสน ลากตดกนเปนมมฉากบน

พนทหนากระดาษ

• สามารถพลกแพลงแบบไดตลอดเวลา ไมมกฎบงคบใหองคประกอบตาง ๆ อยแตเพยงภายใน

กรอบทจดไว แตใหดผลงานสดทายเปนหลก

• การใชกรดไมใชสงใหม นกออกแบบและศลปนไดใชโครงสรางกรดกนมานานนบศตวรรษแลว

Page 4: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 4

ขอบ, กรด และโครงสราง

สาหรบงานออกแบบสงพมพใดๆ เราควรเรมตนจากการจดรปแบบทงหนาซายและหนาขวาไป

พรอมๆ กน เพราะความสมพนธระหวางทงหนาซายมอ (Verso) กบหนาขวามอ (Recto )

มความสาคญเนองจากเราตอง สรางสมดลระหวางทงสองหนาน

หนงสอหลายเลมใหคาแนะนาเกยวกบระยะขอบวา ขอบหลง ( หรอขอบทอยดานใน )

ควรจะมขนาดเพยงครงเดยวของขอบหนา (หรอขอบทอยดานนอก) และขอบลางควรมขนาดกวางกวาขอบ

บน ซงการจดระยะขอบเชนน จะเหมาะสมเมอเราใสขอความลงไปในกรดไดอยางพอด ไมมากหรอนอย

จนเกนไป อยาลมวาสายตามกไลจากหนาหนงไปยงอกหนาหนง ดงนน ชองวางหรอ Gutter

ไมควรจะกวางเกนไป

ภาพท 1 ลกษณะการใชกรดในการจดวางเลยเอาตในสงพมพ

Page 5: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 5

การตงระยะขอบควรคานงถงองคประกอบทจะนามาจดวาง, ลกคา และผอานดวย ยกตวอยางเชน

หนงสอทตองการประหยดตนทน มกตงระยะขอบใหนอยเพอใหบรรจเนอความใหไดมากทสด ลดจานวน

หนา และลดตนทนลง แตกตางจากโบรชวรหรอเอกสารโปรโมชนตางๆ ทมกมทนมากกวา ดงนนจงสามารถ

ปลอยพนทวางไดบาง

กรดจะชวยแสดงใหเหนเลยเอาตของคอลมน, ขอบ และพนท สาหรบหวขอหลก, คาอธบาย

ประกอบและรป รวมถงแสดงตาแหนงขององคประกอบทตองแสดงซาๆ เชน เลขหนา หรอหวกระดาษ

เพราะองคประกอบเหลานมกปรากฏอยทเดมในทกๆ หนาของสงพมพ

ภาพท 2 ลกษณะใชกรดในการออกแบบสงพมพทมลกษณะเปน 2 หนา

หลงจากทกาหนดหนากระดาษทงหนาซายและหนาขวาแลว ขนตอนตอไปคอการกาหนดเลยเอาต

แบบคราวๆ โดยปกตอาจเรมจากการแบงเปนสองคอลมนตอหนา หรอแยกยอยเปนกลองขอความเลกๆ

เสยกอน แลวคอยพจารณาปรบเปลยนเลยเอาต การตดสนใจเลอกเลยเอาตเปนสงสาคญมาก เพราะมน

คอการกาหนดรปแบบของสงพมพตลอดทงเลม รวมถงการจดการกบองคประกอบทงหมดดวย เราอาจใช

คอมพวเตอรชวยในการขนกรด หรอแมแตเลอกใชกรดสาเรจรป แตอยาลมวาคอมพวเตอรแมจะชวยลด

ระยะเวลาในการทางานได แตคอมพวเตอรนนไมสามารถคดแทนผใชหรอสรางไอเดยดวยตวมนเองได

แบบรางกรดทสรางขนในขนตอนนจะชวยใหนกออกแบบเหนภาพเบองตนวาจะใสไอเดยหรอองคประกอบ

เขาไปในลกษณะใดกอนจะเขาสกระบวนการผลตจรง

Page 6: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 6

ภาพท 3 ลกษณะใชกรดในการออกแบบสงพมพทมลกษณะตงแต 2 หนาขนไป

สวนประกอบตาง ๆ ของกรดในหนาออกแบบ

กรดจะชวยแบงพนทสาหรบแสดงขอมลอยางเปนสดสวน เปนตวกาหนดโครงสรางของหนาและ

ชวยใหองคประกอบทงหมดมความเปนเอกภาพ กรดทงายทสด คอกรดทมคอลมนเดยว เหมาะสาหรบใช

กบงานทประกอบไปดวยขอความจานวนมาก เชน รายงานธรกจ หรอนวนยาย มงเนนใหสามารถอานได

งายและอานไดอยางสมาเสมอสงสด สวนการจดเลยเอาตทซบซอน ซงอาจประกอบดวยขอความ, รปภาพ,

แผนภม และคาอธบายประกอบ อาจจาเปนตองใชกรดทงในแนวนอนและแนวตง ซงในบางครงอาจแบงได

ถง 6 คอลมน ในหนง หนา ยงถาเราแบงคอลมนมากขนจะชวยเพมความยดหยนใหกบการจดวาง

องคประกอบมากขน เพราะจะมพนทใหใสรายละเอยดยบยอยไดมากขนนนเอง

นอกเหนอจากการกาหนดกรดในแนวนอนแลว เราควรควบคมการออกแบบดวยกรดในแนวตง

เชนกน รวมถงกาหนดลกษณะของหวขอหลก, หวขอรอง, คาอธบายประกอบ และเลขหนาใหมลกษณะ

เดยวกนตลอดทงสงพมพ พยายามใชงานกรดอยางมอสรภาพ อยาใหกรดเปนเหมอนขอจากดในการ

ออกแบบ ดงนน หากเรมจดองคประกอบไปสก 2 ถง 3 หนา และพบวากรดทใชไม เหมาะกบงาน

กควรทจะยอนกลบไปปรบรปแบบของกรดเสยใหม ใหมความ

มาสเตอรกรด (Master Grid)

ขอบ, คอลมน หรอตวอกษรทไมมการเปลยนตาแหนง เชน เลขหนา, หวกระดาษและทายกระดาษ

สงเหลานจะถกจดอยบนมาสเตอรกรด และเปนตวกาหนดรปแบบหลกของงาน

Page 7: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 7

ภาพท 4 มาสเตอรกรด

สวนประกอบอนๆ

1. มารจน (margins)

2. โมดล (Module/Grid Units)

3. อาลลย (Alleys)

4. กตเตอร (Gutters)

5. คอลมน (Columns)

6. โรว (Rows)

7. สเปเชยลโซน (Spatial Zones)

8. โฟลวไลน/แฮงไลน/ (Flowlines/Hanglines)

9. มารคเกอร (Markers)

สวนสงสดของกรอบขอความ โดยจะตองไมมขอความใด(ยกเวนเลขหนา,

หวกระดาษและทายกระดาษ) ทจะอยสงกวาสวนน

กรดขอความนนขนกบขนาดของตวอกษร

และขนกบความสาคญของขอความทนามาจดวาง

ในฟงกชนสาเรจรปน สามารถกาหนดจานวนคอลมนตอหนา

รวมถงระยะหวางระหวางคอลมน (Gutter) ได

Page 8: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 8

ภาพท 5 สวนประกอบทงหมดของระบบกรด

1. มารจน/ชองวางรอบขอบกระดาษ (margins)

• มารจนคอชองวางทอยระหวางขอบของพนททางานซงมตวอกษรหรอภาพปรากฏอยกบขอบของ

กระดาษทงสดาน

• ความกวางจากขอบกระดาษของชองวางนไมจาเปนตองเทากนทงสดานแตควรเปนแบบแผน

เดยวกนทก ๆ หนาในเลมเพอความตอเนอง

• มารจนเปนจดพกสายตา แตสามารถใชเปนทใสเลขหนา หวเรอง คาอธบายตาง ๆ หรอบทความ

ขยายสน ๆ และอาจใชเปนทดงดดความสนใจ

2. โมดล/หนวยกรด (Module/Grid Units)

• โมดลคอชองทเกดจากการแบงหนาออกแบบดวยเสนกรดตามแนวตงและแนวนอนออกเปนสวน ๆ

• ใชเปนพนทใสตวอกษรหรอภาพ

• การแบงสวนระหวางโมดลจะมการเวนชองวางไวไมใหโมดลตดชดกน

• การใชพนทในการวางตวอกษรหรอภาพไมจาเปนตองถกจากดอยภายในแตละโมดล แตสามารถ

กนพนทหลาย โมดล

Page 9: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 9

3. อาลลย/ชองวางระหวางโมดล (Alleys)

• อาลลยคอชองวางระหวางโมดลทตดกน ชองวางดงกลาวอาจทอดยาวเปนแนวตง หรอแนวนอน

หรออาจเปนทงแนวตงและแนวนอนกได

• อาลลยแตละแนวอาจมความกวางทตางกนในหนาหนง ๆ กไดแลวแตผออกแบบ

4. กตเตอร/ชองวางระหวางหนาตามแนวพบ (Gutters)

• กตเตอร คอชองวางระหวางโมดลของหนาสองหนาทตอกนโดยมแนวพบอยตรงกลาง

• ในการออกแบบหนาหนงสอ ใหระวงอยาใหความกวางของกตเตอรแคบเกนไปจนทาใหขอความ

ตามแนวสนหนงสอขาดหายหรออานลาบาก

5. คอลมน/แถวในแนวตง (Columns)

• คอลมนคอโมดลทตอ ๆ กนในแนวตง ซงชองวางระหวางคอลมนกคออาลลย/กตเตอรนนเอง

• ในหนาออกแบบหนงหนาสามารถแบงคอลมนไดกแถวกได และความกวางของแตละคอลมนกไม

จาเปนตองเทากนแลวแตผออกแบบ

6. โรว/แถวในแนวนอน (Rows)

• โรวคอโมดลทตอ ๆ กนในแนวนอนซงตางจากคอลมนทตอกนในแนวตง และถกแบงแยกจากกน

ดวยอาลลย/กตเตอรเชนกน

7. สเปเชยลโซน/พนทครอบคลม (Spatial Zones)

• คอกลมของโมดลทตอตดกนทงแนวตงและแนวนอนทาใหเกดพนททใหญขน

• ถกนาไปใชในการแสดงขอมลโดยใสเปนขอความตวอกษร หรอภาพกได

8. โฟลวไลน/แฮงไลน/เสนขวาง (Flowlines/Hanglines)

• คอเสนแบงในแนวนอน ใชเหนยวนาสายตาจากสวนหนงไปอกสวนหนง หรอเปนตวคนเมอจบ

เรองราว/ภาพหนงและกาลงขนตนเรองราว/ภาพอกชดหนง

9. มารคเกอร/ตวชตาแหนง (Markers)

• มารคเกอรคอเครองหมายทกาหนดตาแหนงบรเวณไวสาหรบใสขอความสนๆ ทระบหมวดหม หว

เรองทเปลยนไปเรอยๆ

• มกมตาแหนงเดยวในแตละหนา

Page 10: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 10

ภาพท 6 สวนประกอบหลกๆ ในระบบกรด

สวนประกอบหลกๆ ของระบบกรดทใชในการจดวางองคประกอบ จะมอย 4 ประเภทคอ มารจน/

ชองวางรอบขอบกระดาษ ( margins) โมดล/หนวยกรด ( Module/Grid Units) อาลลย/ชองวางระหวาง

โมดล ( Alleys) และกตเตอร/ชองวางระหวางหนาตามแนวพบ ( Gutters) ไมวาจะเปนการใชกรดรปแบบ

ใดๆ จะมสวนประกอบหลกทงสนอยเสมอ

รปแบบตาง ๆ ของกรด (Grid types)

รปแบบพนฐานของกรดมอย 4 ประเภท

– เมนสครปตกรด (Manuscript Grid)

– คอลมนกรด (Column Grid)

– โมดลารกรด (Modular Grid)

– ไฮราซคลกรด (Hierarchical Grid)

รปแบบพนฐานทงสแบบนสามารถนาไปพฒนาสรางแบบทงทเรยบงายจนถงแบบทพลกแพลง

ซบซอนขน ดงมรายละเอยดตอไปน

Page 11: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 11

1. เมนสครปตกรด (Manuscript Grid)

• เปนกรดทมโครงสรางเรยบงายเปนบลอกใหญบลอกเดยวหรอคอลมนเดยว

• มชอเรยกอกชอวา บลอกกรด (Block Grid)

• ใชกบสงพมพทมแตเนอหาเปนหลก เชน หนงสอ นวนยาย ตารา จดหมายขาว ฯลฯ แตกสามารถ

นาภาพมาวางประกอบ

• เรยบงายแตกสามารถปรบแตงเลยเอาตใหดนาสนใจได และไมจาเจเมอเปดหนาตอหนา

2. คอลมนกรด (Column Grid)

Page 12: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 12

• เปนรปแบบกรดทมคอลมนมากกวาหนงคอลมนในหนงหนาของแบบ

• มกมความสงเกอบสดขอบของชนงาน

• ความกวางของแตละคอลมนไมจาเปนตองเทากน

• กรดในรปแบบนมกถกนาไปใชใน นตยสาร แคตตาลอก โบรชวร

• การวางภาพในรปแบบกรดประเภทนอาจจะจดวางใหมความกวางเทากบหนงคอลมนหรอ

มากกวากได

3. โมดลารกรด (Modular Grid)

• เปนรปแบบกรดทประกอบดวยโมดลหลาย ๆ โมดล

• เกดจากการตเสนตามแนวตงและแนวนอน คอรปแบบทเกดจากการแบงคอลมนในคอลมนกร

ดตามแนวนอนทาใหเกดเปนโมดลยอย

• โมดลารกรดเปนรปแบบทสามารถนาไปจดเลยเอาตไดหลากหลาย สามารถประสมประสานภาพ

กบขอความเปนชด ๆ จดแบงเรองราวหลาย เรองมาอยในหนาเดยวกน จดภาพประกอบพรอมคา

บรรยายหลาย ๆ ชดในหนงหนา

• จเปนรปแบบทประกอบดวยโมดลยอย ๆ มความอสระในการปรบแตงเลยเอาตไดสง มการ

นามาใชในการออกแบบหนา โบรชวร แคตตาลอก นตยสารและหนงสอประเภทตาง ๆ ดวยเชนกน

Page 13: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 13

4. ไฮราซคลกรด (Hierarchical Grid)

• เปนรปแบบกรดทมโครงสรางซบซอน

• ประกอบดวยโมดลไดทงทมขนาดเทากนหรอแตกตางกนมาจดวางในหนาเดยวกน และอาจมการ

เกยกนของโมดลบางชน

• เปนรปแบบทยากตอการใชงานในการทจะทาใหเลยเอาตทออกมาดดและลงตว

• มกใชตอเมอไมสามารถใชกรดรปแบบอน สวนหนงทเลอกใชเนองจากขององคประกอบตาง ๆ ของ

เลยเอาตมความแตกตางคอนขางมาก เชน อตราสวนของดานกวางกบดานยาวของภาพประกอบ

แตละภาพมความแตกตางกนมาก

• ขอแนะนาในการจดทารปแบบ ไฮราซคลกรด วธหนงคอ นาองคประกอบตาง ๆ ของแบบทงหมด

เชน ภาพประกอบ เนอหา หวเรอง ฯลฯ มากองไว พจารณาภาพรวม คอย ๆ ทดลองจดวางโดย

ขยบปรบขนาดแตละองคประกอบจนดแลวลงตว พอมแนวเปนหลกในการสรางกรดใชรวมกนทง

ชด/เลมของงานพมพ แลวจงลงมอทางาน

• รปแบบกรดประเภทนมใชในการออกแบบหนาหนงสอ โปสเตอร และฉลากผลตภณฑ เปนตน

Page 14: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 14

¡ÒèѴͧ¤�»ÃСͺàÅÂ�àÍÒµ�·ÕÊÑÁ¾Ñ¹ �¡ÑºÃкº¡ÃÔ´

การใชงานกรดจะชวยแบงพนทสาหรบแสดงขอมลอยางเปนสดสวน เปนตวกาหนดโครงสรางของ

หนาและชวยใหองคประกอบทงหมดมความเปนเอกภาพ กรดทงายทสดคอกรดทมคอลมนเดยว เหมาะ

สาหรบใชงานทประกอบไปดวยขอความจานวนมาก เชน รายงานธรกจหรอนวนยาย มงเนนใหสามารถ

อานไดงายและอานไดอยางสมาเสมอสงสด สวนการจดเลยเอาตทซบซอน ซงอาจประอบดวยขอความ,

รปภาพ, แผนภม และคาอธบายประกอบอาจจาเปนตองใชกรดทงแนวตงและแนวนอน ซงในบางครงอาจ

แบงไดถง 6 คอลมนในหนงหนา ยงถาเราแบงคอลมนมากขน จะชวยเพมความยดหยนใหกบการจดวาง

องคประกอบมากขน เพราะจะมพนทใหใสรายละเอยดยบยอยไดมากขนนนเอง ดงนน อยาตดสนใจรบ

เลอกใชงานกรดตามคาเรมตนของโปรแกรมคอมพวเตอร พยายามพจารณาลกษณะของกรดทเหมาะสม

ดวยตวผออกแบบเองจะดทสด

นอกเหนอจากการกาหนดกรดในแนวนอนแลว เราควรควบคมการออกแบบดวยกรดในแนวตง

เชนกน รวมถงกาหนดลกษณะของหวขอหลก, หวขอรอง, คาอธบายประกอบ และเลขหนาใหมลกษณะ

เดยวกนตลอดทงสงพมพ พยายามใชงานกรดอยางมอสรภาพ อยาใหกรดเปนเหมอนขอจากดในการ

ออกแบบ ดงนน หากเรมจดองคประกอบไปไดสก 2 ถง 3 หนา และพบวากรดทใชไมเหมาะสมกบงาน ก

ควรจะยอนกลบไปปรบรปแบบของกรดเสยใหม ใหมความยดหยนและเหมาะสมกบทกองคประกอบนนเอง

ภาพท 7 ตวอยางระบบกรดในลกษณะตางๆ

Page 15: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 15

ภาพท 8 ตวอยางระบบกรดในรปแบบวงกลม

ภาพท 9 ตวอยางระบบกรดในโปรแกรมคอมพวเตอรสาหรบจดหนาสอสงพมพ

Page 16: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 16

สงพมพทเตมไปดวยตวหนงสอยาวเหยยดนน ทาใหผอานตองใชเวลาในการอานและสรปขอมล

มากขน ทาใหตองใสใจในทกตวอกษร แตกตางกบสงพมพทมการบรณาการระหวางรปภาพ, คาอธบาย

ประกอบ, ขอความทอางองจากทอน และองคประกอบอนๆ ทมกแยงความสนใจจากผอานไดมากกวา

เพราะผอานบางครงเลอกทจะอานเนอหาแบบผานๆ แตใหความสนใจไปกบรปภาพหรอสนใจกบขอมล

บางอยางทสาคญตอตวเองเทานน การจดวางเลยเอาตทเหมาะสมโดยอาศยจงหวะและความแตกตางของ

องคประกอบทนาสนใจจะชวยใหงานออกแบบสอสงพมพนนาสนใจยงขน แตหากเปนสงพมพในรปแบบ

ดจทลจะมกลยทธทแตกตางออกไป ตวอกษรและรปภาพตองปรากฏใหเหนบนหนาจอทนท รปภาพตอง

รองรบอปกรณแสดงผลทหลากหลาย ซงในบางครงหลกการทเราเคยไดรบรมาไมอาจนามาใชไดโดยตรง

กบสงพมพดจทล เชน การเปลยนหนาเปลยนจากการพลก เปนการไถลกกลงบนเมาสเพอดเนอหาแทน

หรอแทนทจะสรางความโดดเดนใหกบตวอกษรดวยการเปลยนนาหนกหรอเปลยนตาแหนง อาจกลายเปน

ทาใหตวอกษรสามารถเคลอนทไปมาได หรอรปภาพทปรากฏในนตยสารดจทลอาจสามารถคลกและแสดง

เปนวดโอ ดงนน การออกแบบโครงสรางหรอกราฟกของนตยสารดจทลตองคานงถงฟงกชนทจะตามมา

ดวย

ภาพท 10 ตวอยางจดวางเลยเอาตในงานหนงสอ

Page 17: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 17

ภาพท 11 ตวอยางจดวางเลยเอาตในงานโปสเตอร

ความสวยงามในการออกแบบพฒนาไปพรอมๆ กบเทคโนโลยเชนกน ซงพนฐานของจงหวะและความ

ขดแยงนนยงคงประยกตใชบนกระดาษหรอบนหนาจอกได โดยมวตถประสงคเดยวกนคอความพยายามใน

การนาสายตาของผอานใหวงผานเขาวงกตแหงขอมล โดยอาศยการจดวางองคประกอบ เลยเอาต และ

ระบบกรดใหกบสงพมพ ซงลวนมประโยชนไมวางานนนจะอยในรปแบบใดๆ กตาม และนกออกแบบสอ

สงพมพกควรเรยนรและประยกตใชไดอยางเหมาะสม

Page 18: Ca321 week06 chapter5 grid system

นศ321 สอสงพมพ : ระบบกรดและการจดวางเลยเอาต (Grid System and Layout)| 18

บรรณานกรม

จนทนา ทองประยร. 2537. การออกแบบและจดหนาสงพมพ. นนทบร : โรงพมพ

มหาวทยาลยสโขทยธรรมาธราช.

ปาพจน หนนภกด. 2553. หลกการและกระบวนการออกแบบงานกราฟกดไซน . กรงเทพมหานคร :

บรษท ไอดซ พรเมยร จากด.

ปราโมทย แสงผลสทธ. 2540. การออกแบบนเทศศลป. กรงเทพมหานคร : โรงพมพ ว.เจ. พรนตง.

โสรชย นนทวชรวบลย. 2545. Be Graphic สเสนทางกราฟกดไซเนอร. กรงเทพมหานคร :บรษท เอ.อาร.

อนฟอรเมชน แอนด พบลเคชน จากด.

มหาวทยาลยสโขทยธรรมาธราช. 2552. การผลตสอสงพมพ . สาขาวชานเทศศาสตร

มหาวทยาลยสโขทยธรรมาธราช หนวยท 1-7.

อารยะ ศรกลยาณบตร. 2550. การออกแบบสงพมพ. กรงเทพมหานคร : วสคอมเซนเตอร.

David Dabner. 2558. Graphic Design School. นนทบร : ไอดซ พรเมยร จากด.

ภาพประกอบบางสวนจาก

https://www.behance.net/gallery/18289593/Minimal-Colorful-Brochure

https://www.behance.net/gallery/Visual-identity-concept-Strassenfeger/823209

https://www.pinterest.com/pin/52002570674219984

https://www.pinterest.com/pin/32440059791582388