คานา รายงานเล่มนี้เป็นส่วนหนึ่งของรายวิชา เทคโนโลยีเพื่อการออกแบบนิเทศศิลป์ ARTI 3319 รายงานเล่มนี้เป็นจัดทาเพื่อบอกถึงเรื่องราวถึงประวัติความเป็นมาของ font บอกถึงการใช้ font บอกถึงชนิด ของ font และเพื่ออธิบายถึงขั้นตอนในการออกแบบ font ใน fontstruct .com เพื่อให้รู้ถึงวิธีในกาออกแบบ font และยังในมาใช้ในงานนิเทศศิลป์ ใช้ในชีวิตประจาวันได้อีกด้วยแล้วยังเป็นสื่อในการบอกต่อให้รุ่นหลัก สืบค้นข้อมูลและเรียนรู้ต่อไปแล้วยังให้ผู้สนใจในงานออกแบบนี้นาไปต่อยอดพัฒนาแนวความคิดต่อๆไป นาย นนทวัฒน์ บุตรนัย 5121302706
สารบัญ เรื่อง
หน้า
ประวัติความเป็นมา……………………………………………………………….………………………………1 ส่วนประกอบของตัวอักษร (font anatomy)……………………………………………………..……………….2 ประเภทของ font………………………………………………………………………………….……………...4 ลักษณะของ font (type face)…………………………………………………………………………………….6 ลักษณะของตัวอักษรไทย…………………………………………………………………...……………………6 การจัดวางตัวอักษร(spacing)………………………………………………………….…………………………7 การจัดวางหน้ากระดาษ(arranging)……………………………………………………………………………..7 ประวัติตัวอย่างการออกแบบตัวอักษร…………………………………..………….…………………………….7 ทฤษฎีการออกแบบ………………………………………………………………………………………………9 การออกแบบตัวอักษรเพื่อการพิมพ์โดยใช้ Fontstuct.com………………………………….………………….13 -เครื่องมือในการออกแบบ……………………………………………………………….……………13 ชื่อ font ในการออกแบบ……………………………………………………..………………………13 ตัวอย่างที่ 1 font nonthawat 001…………………………………………………………13 -แนวความคิดการออกแบบ Font nonthawat 001…………………..…………………14 -ตัวอย่างที่ 2 font nonthawat 000…………………………………………………………15 -แนวความคิดการออกแบบ Font nonthawat 000………………….…………………16 ขั้นตอนในการทดลอง Font ใน Fontstruct…………………………………………………….………………17 -วิธีที่ 1 การทดลอง Font ใน Fontstruct……………………………………………………..………17 -วิธีที่ 2 การ Download ติดตั้ง font ลงเครื่อง…………………………...……………………………18 วัตถุประสงค์…………………………………………………………………………………...……………….20 สรุปการออกแบบ ……………………………………………………………………………………..………20 ที่อยูของ Font ……………………………………………………………………...…………………………20 ปัญหาที่พบ …………………………………………………………………………………………….………20
ประวัติความเป็นมา ประวัติความเป็นมาของสิ่งพิมพ์เริ่มขึ้นจากการประดิษฐ์แท่นพิมพ์โลหะ โดย Johannes Gutenberg ในปีค.ศ. 1440 ทาให้เกิดระบบการพิมพ์เป็นจานวนมาก การออกแบบตัวอักษรจึงเริ่มขึ้น ตั้งแต่นั้นมา1
แท่นพิมพ์ออกแบบโดย Johannes Gutenberg ที่มา: http://pressproject.mtsu.edu
ตัวอักษรโลหะที่ใช้เป็นแม่พิมพ์ ที่มา: http://www.aisleone.net
ส่วนประกอบของตัวอักษร (font anatomy) ปัจจุบันมีองค์กรที่เรียกว่า the international standard organization (ISO) ตั้งที่ Geneva ,Switzerland มีหน้าที่ กาหนดมาตรฐานของตัวอักษรที่ใช้ในงานสิ่งพิมพ์ ทั้งขนาด ลักษณะของตัวอักษรที่สามารถอ่านได้ง่าย ความสูง รายละเอียดต่างๆ
ตัวอักษรภายใต้ ISO เน้นประโยชน์ใช้สอยสามารถอ่านง่ายและใช้งานได้หลากหลาย ที่มา : Matthew Woolman.type detective story(Switzerland:Rotovision SA). 1997. p.13 ตัวอักษรยังมีส่วนประกอบต่างมีชื่อเรียกเฉพาะให้เป็นที่เข้าใจกันในกลุ่มนักออกแบบ
ส่วนประกอบต่างๆของตัวอักษร ที่มา: Ibid., p. 18
การออกแบบ font ต้องคานึงถึงระยะต่างๆที่มีส่วนเกี่ยวข้องกับการใช้งาน ซึ่งจะมีผลต่อการอ่าน และ ลักษณะเฉพาะของตัวอักษรนั้น ระยะที่ใช้ในการออกแบบ font มีหน่วยการวัดเป็น dpi(dot per inch) หมายถึงให้ แบ่งย่อยระยะ 1 นิ้วออกเป็นช่องเล็กๆ ซึ่งถูกกาหนดว่า 72 dpi = 1 นิ้ว ซึ่งพัฒนาเป็นขนาดในการแสดงผลบน computer display และ web page ในเวลาต่อมา
ลักษณะการแบ่งระยะออกเป็นช่องย่อยๆจานวน 72 ช่องต่อระยะ 1 นิ้ว ที่มา: Ibid., p. 55 นอกจากนี้ตัวอักษรยังมีระยะมาตรฐานต่างๆที่ต้องคานึงในการออกแบบ 4 ระยะ ได้แก่ x- height, capline, topline, base line และ beardline
ระยะต่างๆในการออกแบบตัวอักษร ที่มา : Ibid., p. 35
ความสูงโดยรวมของ font จะวัดจากเส้น beardline จนถึงเส้น top line ไม่ใช่ความสูงเฉพาะ base line ถึง mean line ตามที่เข้าใจกันยกตัวอย่างเช่น font ขนาด 72 dpi จะมีความสูงระยะ beardline จนถึง top line เป็นระยะ 1 นิ้ว
ประเภทของ font 1.serif เป็น font ที่มีลักษณะทางการ พัฒนามาจากรูปแบบตัวอักษรที่เขียนด้วยมือ ลักษณะเด่นอยู่ที่หาง(serif)
ที่มา : http://www.identifont.com 2. san serif พัฒนาจาก serif ให้มีการลดทอนตัดส่วน serif ออกจนดูทันสมัย เรียบง่าย
ที่มา : http://wikis.lib.ncsu.edu
3. script ตัวอักษรที่มีลักษณะเหมือนเขียนด้วยมือ เป็นลายมือลักษณะต่างๆกันไป ส่วนมากนิยมออกแบบให้ ตัวอักษรมีลักษณะเอียงเล็กน้อย
ที่มา : http://www.suitcasetype.com 4. display ตัวอักษรที่ออกแบบเฉพาะให้มีลักษณะแปลกตาเพื่อใช้ในการสร้างหัวโฆษณา ประกาศ ไม่เน้นนาไปใช้ ในการพิมพ์บทความ หรือเนื้อหาจานวนมาก
ที่มา : http://stylecrave.com
ลักษณะของ font (type face) 1. normal/regular ประเภทตัวธรรมดา 2. bold ประเภทตัวหนา 3. italic ประเภทตัวเอียง 4. extra ประเภทตัวหนาพิเศษ 5. light ประเภทตัวบางพิเศษ 6. extended ประเภทตัวกว้างพิเศษ 7 narrow ประเภทตัวแคบพิเศษ 8. outline ประเภทตัวอักษรแบบมีขอบ 9. allcaps ประเภทตัวอักษรตัวใหญ่หมด
ลักษณะของตัวอักษรไทย 1. แบบดั้งเดิม หรือแบบมีหัว เป็นเอกลักษณ์ของภาษาไทย แสดงความเป็นทางการ คล้าย serif ใช้ได้กับทั้งส่วน หัวเรื่องและเนื้อเรื่อง 2. แบบหัวตัด คล้าย sanserif ดูเรียบง่ายใช้กับงานที่ดูทันสมัย 3. แบบลายมือ เลียนแบบตัวอักษรที่เขียนด้วยมือ เป็นอิสระ สนุกสนาน ไร้กฎเกณฑ์ เทียบได้กับตัวอักษรแบบ script 4. แบบคัดลายมือ เกิดจากการคัดลายมือด้วยตัวอักษรแบบโบราณที่มีหัวแหลม รู้สึกทางการ พิธีรีตรองแบบดั้งเดิม อนุรักษ์นิยม 5. แบบประดิษฐ์ คล้ายตักอักษรแบบ display ในภาษาอังกฤษ เป็นตัวอักษรใช้ในงานต่างๆ เพื่อเรียกร้องความ สนใจ ให้ความรู้สึกหลากหลาย
การจัดวางตัวอักษร(spacing) 1. letter spacing ระยะห่างระหว่างตัวอักษร 2. word spacing ระยะห่างระหว่างคา 3. leading ระยะระหว่างบรรทัด
การจัดวางหน้ากระดาษ(arranging) 1. flush left วางตัวอักษรเสมอซ้าย 2. flush right วางตัวอักษรเสมอขวา 3. centered วางตัวอักษรตรงกลาง 4. justified วางตัวอักษรเสมอซ้ายและขวา 5. contour วางตัวอักษรให้สอดคล้องลักษณะของภาพ 6. concrete วางตัวอักษรเป็นรูปร่างตามต้องการ 7. direction วางตัวอักษรแบบมีทิศทาง
ประวัติตัวอย่างการออกแบบตัวอักษร ตัวอักษรมีผลต่องานกราฟฟิกโดยรวม งานออกแบบที่ดีจึงต้องมีตัวอักษรที่เหมาะสมด้วย การออกแบบขึ้นกับประโยชน์ ใช้สอย บางครั้งนักออกแบบต้องการตัวอักษรที่อ่านง่าย เหมาะกับงานพิมพ์ ตัวอักษรที่น่าสนใจ ตัวอักษรที่เหมาะกับการ แสดงผลบนคอมพิวเตอร์ เป็นต้น งานออกแบบ the wire magazine headline font ออกแบบโดย non-format ปี ค.ศ. 2004 เป็นงานออกแบบสาหรับหัวหนังสือ จึงมีการคานึงถึงการอ่านเป็นรอง แต่เน้นที่ความน่าสนใจของตัวอักษร จัดเป็นตัวอักษรแบบ display แนวความคิดการออกแบบนักออกแบบใช้ลักษณะเรขาคณิต สามเหลี่ยม สี่เหลี่ยม วงกลม เป็นพื้นฐานในการสร้างตัวอักษร เพื่อแสดงแนวคิด constructivism หรือโครงสร้างนิยม ตามแบบกลุ่ม modernism ในช่วง ปี ค.ศ. 1920 การออกแบบไม่จากัดระยะ x - height ตามแบบมาตรฐาน ทาให้เกิดความหลากหลายของส่วนสูงตัวอักษร
ที่มา: Charlotte Rivers. Type Specific:designing custom fonts for function and identity (Switzerland:Rotovision SA). 2005.p.20
งานออกแบบ Dazed & confused magazine headline font ออกแบบโดย Suzy Wood and Peter Stitson ปี 2004 แนวคิดการอออกแบบสร้างลักษณะเด่นของตัวอักษรโดยทดลองลักษณะต่างๆกับส่วน eye และ counter ตัวอักษรที่ได้มีลักษณะเด่น แต่ใช้งานได้หลากหลาย และสามารถใช้ได้ทั้งขนาดเล็กและใหญ่ เกิดจากการแก้ไขเพียง เล็กน้อยกับส่วนประกอบตัวอักษร
ที่มา : Ibid., pp. 24-25 งานออกแบบ Wood in-store design and identity ออกแบบโดย Kai and Sunny ปี 2004 ออกแบบตัวอักษรสาหรับร้าน ขายเสื้อผ้าชาย แนวคิดเริ่มต้นจากชื่อร้านทาให้ได้ลักษณะกลมแทนความหมาย รูปร่างของตัวอักษรนามาเชื่อมกันแบบ inter-locking สัญลักษณ์กิ่งไม้ใช้เพื่อเติมความหมายของตัวอักษรให้ชัดเจนยิ่งขึ้น การออกแบบลักษณะนี้ไม่จาเป็นต้อง ออกแบบตัวอักษรทั้งหมด เนื่องจากมีการใช้เฉพาะคาเพื่อเป็นสัญลักษณ์ของร้านค้า
ที่มา : Ibid., p. 31
ทฤษฎีการออกแบบ emphasis หมายถึงการเน้นจุดสนใจของภาพ ทั้งงานออกแบบที่เป็น 2 มิติ และสามมิติ เพื่อให้ภาพนั้นเกิดการ สื่อสารเรืองราวเรื่องใดเรื่องหนึ่งเป็นสาคัญ การเน้นสามารถทาได้หลายวิธีได้แก่ รูปร่าง(shape) ขนาด(size) สี(color) ผิวสัมผัส(texture) และทิศทาง(direction)unity หมายถึงการสร้างความกลมกลืนให้แก่ภาพ เมื่อมีการเน้นจุดสนใจ (emphasis) จุดหนึ่งแล้ว องค์ประกอบในส่วนที่เหลือก็ไม่ควรรบกวน จึงต้องสร้างความกลมกลืนให้กับภาพการสร้าง emphasis โดยการจัดวางองค์ประกอบ(composition) ในการจัดวางองค์ประกอบยังสามารถสร้าง เน้นจุดสนใจด้วย หลากหลายวิธี ในที่นี้จะยกตัวอย่างที่สาคัญสองวิธี 1.isolation คือการจัดวางโดยใช้ระยะห่างที่ไม่เท่ากัน วัตถุที่เป็นจุดเด่น จะถูกทิ้งห่างจากวัตถุอื่นๆ
printer's catalogue designed by Piet Zwart, 1929and reprinted in Typhographica(issue7, 1963) ที่มา : Teal Triggs. the typographic experiment: radical innovation in contemporary type design (London: Thames and Hudson).2003. p.11
2. contrast คือการสร้างความต่างในภาพ โดยการใช้ 2.1 รูปทรง
Studio Blue. Literacy objects: Flaubert(1998) ใช้ความแตกต่างระหว่างรูปทรงสี่เหลี่ยม ของกระดาษกับทรงกลมของกลุ่มข้อความเพื่อสร้างความน่าสนใจในชิ้นงาน ที่มา: Ibid., p. 179 2.2 ขนาด
Avital Ronell. the telephone book: technology, Schizophrenia, Electric Speech, 1989 ใช้ตัวอักษรขนาดใหญ่สร้างจุดสนใจโดยขัดแย้งกับตัวอักษรอื่นๆที่มีขนาดเล็ก ที่มา: Ibid., p. 148
2.3 สี
studio mini โดย Anna Hadwick สร้างจุดสนใจในงานโดย การใช้สายไฟสีแดงแตกต่างจากสีขาวของโคมและสีของเนื้อไม้ ที่มา : www.dezeen.com 2.4 พื้นผิว
oster advertising DEAF(Dublin electronic art festival, 2002) designed by Niall Sweeney ใช้ลักษณะความแตกต่างของพื้นผิว แทนการแบ่งพื้นที่เกิดประโยชน์ในการอ่านที่เป็นขั้นตอนมากขึ้น ที่มา : Teal Triggs. the typographic experiment: radical innovation in contemporary type design (London: Thames and Hudson).2003. p.17
2.5 ทิศทาง
Stuart Bailey. 'CHANCE pamphlet ทิศทางของหัวหนังสือแตกต่างจากตัวหนังสือทั่วไปในภาพ ที่มา: Ibid., p. 165
การออกแบบตัวอักษรเพื่อการพิมพ์โดยใช้ Fontstuct.com เครื่องมือในการออกแบบ ออกแบบตัวอักษรภาษอังกฤษตัวเลขและตัวสัญลักษณ์ตามแบบร่างโดยใช้ Fontsuct:ซึ่งเป้นเว็บไซต์เพื่ออกแบบ ตัวอักษรในหน้าที่ในการออกแบบตัวอักษรประกอบไปด้วยกับชุดคาสั่งต่างๆมีส่วนสาคัญได้แก่ Tools และ Bricks รูปแบบ ต่างๆโดยให้นามาใช้ในการออกแบบใน Fontstuct ชื่อ font ในการออกแบบ Font ที่ได้ออกแบบคือ font nonthawat 001 และ font nonthawat 000 ตัวอย่างดังภาพต่อไปนี้และมี แนวความคิดดังภาพตัวอย่างที่ 1 และ 2 นี้ดังภาพต่อไปนี้ ขั้นตอนการออกแบบ ตัวอย่างที่ 1 font nonthawat 001 เริ่มต้นจากการ Sketchdesign รูปแบบของ font ตาราง Grid เพื่อดูแบบตัวอักษรว่าแบบไหนที่จะพอทาบน Fontstruct.com แบบร่างที่ 1 ชื่อ Font-Cru-nonthawat-font001
http://fontstruct.com/fontstructions/show/270217
จากนั้นทาการออกแบบใน โปรแกรม Fontstruct.com ก็จะได้ Font ที่เราออกแบบร่างไว้ดังภาพ
แนวความคิดการออกแบบ Font nonthawat 001 การออกแบบ Font nonthawat 001 ซึ่งได้มาจากการออกแบบตารางออกแบบซึ่งเป็นเอกลักษณ์ส่วนตัวของมันเอง โดยได้ไอเดียมาจาก การเห็นตัวหนังสือภาษาไทย ที่มีลักษณะหัวมนตัวเกี่ยว แต่ตัวอักษรภาษาอังกฤษชื่อ nonthawat 001 มันมีลักษณะหัวออกไทยๆหางเป็นไทยซึ่งมีลักษณะโค้งมนและมีปลายแหลมเล็กน้อยส่วนลาตัวมีลักษณะอวบเล็กน้อยซึ่ง เป็นการออกแบบโดยให้ตัวอักษรภาษาอังกฤษออกแนวเป็นไทยๆโดยผสมผสานกันโดยไม่สูงเกินไปไม่เตี้ยเกินไปสัดส่วน ออกแนวน่ารักมากกว่าซึ่งแต่ละตัวจะมีจุดเด่นของทุกตัวเช่นส่วนหัวโค้งกลางลาตัวจะมีจุดเด่นอยู่
ขั้นตอนการออกแบบ ตัวอย่างที่ 2 font nonthawat 000 เริ่มต้นจากการ Sketchdesign รูปแบบของ font ตาราง Grid เพื่อดูแบบตัวอักษรว่าแบบไหนที่จะพอทาบน Fontstruct.com แบบร่างที่ 2 ชื่อ Font Cru-nonthawat-font000
http://fontstruct.com/fontstructions/show/509727
จากนั้นทาการออกแบบใน โปรแกรม Fontstruct.com ก็จะได้ Font ที่เราออกแบบร่างไว้ดังภาพ
แนวความคิดการออกแบบ Font nonthawat000 การออกแบบ Font nonthawat 000 ได้มาจากการสังเกตุจากสัดส่วนของคนอ้วนที่มีลักษณะตัวใหญ่ เช่น ตัว ใหญ่ แขนใหญ่ ขา ใหญ่ และผสมผสานกับการออกแบบเป็นไทยๆเล็กน้อย เช่น ฐานของตัวอักษรบางตัวเป็นมนๆและมีเหลี่ยม เล็กน้อยโดยอยากให้ตัวอักษรภาษาอังกฤษออกเป็นแนวผสมผสานกันระหว่างคนอ้วนความเป็นเอกลักษณ์เล็กน้อยและ ตัวอักษรภาษาอังกฤษให้เป็นหนึ่งเดียวในตัวอักษรตัวเดียว
ขั้นตอนในการทดลอง Font ใน Fontstruct การทดสอบการพิมพ์การประกอบตัวอักษรดังตัวเลขและตัวสัญลักษณ์ตามการพิมพ์ตามรูป แบบการจัดวางข้อมูลโดยการคลิ๊กที่คาสั่ง Preview จะนาไปสู่หน้าทดลองในการพิมพ์ วิธีที่ 1 การทดลอง Font ใน Fontstruct โดยเข้าไปที่คาสั่ง Preview จากหน้าที่เราได้สร้าง font ตัวอย่างดังภาพ
เพื่อทาการทดลองพิมพ์ font ที่เราได้สร้างไว้เมื่อเข้า Preview ก็จะได้ตัวอย่างดังภาพ
วิธีที่ 2 การ Download ติดตั้ง font ลงเครื่อง โดย ทาการ Download จาก font Fontstruct ให้เข้าไปที่หน้าเราได้สร้าง font ไว้ดังภาพ
จากนั้นให้ไปที่ Download เพื่อทาการ Download font ที่เราได้สร้างไว้ โดยให้เราติดตั้งลงในเครื่องของตัวเองพอ ติดตั้งเรียบร้อยแล้วให้ไปที่ settings เพื่อทาการค้นหา font ที่เราได้ ติดตั้งไว้แล้ว จากนั้นให้ไปที่คาสั่ง Control Panel แล้วจะ ได้หน้าต่างดังภาพ
จากนั้นให้ไปที่ Appearance and Themes แล้วจะได้หน้าต่างดังภาพ
จากนั้นให้ไปที่คาสั่ง fonts ที่อยู่ซ้ายมือของเรา โดยให้ทาการค้นหา font ที่เราได้ติดตั้งไว้แล้ว จะได้หน้าต่างดังภาพ
ให้คลิกขวาที่มีชื่อ font ของเราแล้วไปที่ Print จะได้หน้าต่างดังภาพ
วัตถุประสงค์ เพื่อศึกษาเทคนิคการออกแบบ Font เพื่อใช้ศึกษาขั้นตอนการออกแบบ เพื่อให้ผู้อื่นได้ศึกษาหรือใช้ประโยชน์จากการออกแบบ Font ในรายงานเล่มนี้ เพื่อนา Font ไปใช้ในชีวิตประจาวันและงานออกแบบนิเทศศิลปต่างๆ สรุปการออกแบบ การออกแบบนี้ทาให้เกิดความรู้ความเข้าใจในการใช้ Font และสามารถนาไปปประยุกต์ในการใช้งานร่วมกับ ซอฟแวร์อื่นๆและเป็นการต่อยอดในความคิดทางการออกกแบบไปใช้ในชีวิตประจาวันได้อีกแล้วยังสร้างประโยชน์แก่คน อื่นๆต่อไปด้วย ที่อยูของ Font ชื่อ font cru-nonthawat-font000 http://fontstruct.com/fontstructions/show/509727 ชื่อ font cru-nonthawat-font001 http://fontstruct.com/fontstructions/show/270217 ปัญหาที่พบ ผู้จัดทารายงานเล่มนี้ยังออกแบบ Font ที่ยังไม่สวยงามมากนักและยังไม่ได้มาตราฐานเพียงพอเพราะผู้จัดทายังขาด ประสบการณ์จากการออกแบบ Font ท หากผิดพลาดประการใดขอ อภัยไว้ ณ ที่นี้ด้วย