Hand Written Font Project
1
2 Hand Written Font Project
Hand-Written font project
CRU-Ploynapat สรุปขั้นตอนวิธีการทำ�ฟอนต์ลายมือจาก โปรแกรม Font Creator
ข้อมูลแบบตัวพิมพ์(Font Information) ชื่อแบบตัวพิมพ์ (Typeface/Font Name )ชื่อ ซีอาร์ยู-พลายนภัส (CRU-Ploynapat)หรือชุดตัวอักษรทั้งหมดในไฟล์นี้ชื่อชุดว่าซีอาร์ยู-พลายนภัส เวอร์ชั่น 1.000 ประเภทของไฟล์ตัวพิมพ์ OpenType Layout, TrueType Outlines ออกแบบโดย นางสาวพลอยนภัส เรืองศิริโท สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม กรุงเทพมหานคร เมื่อวันที่ 26 เดือนมกราคม พศ.2555
Hand Written Font Project
3
ขั้นตอนการออกแบบฟอนต์ลายมือ ภาษาไทย-อังกฤษ จากโปรแกรม Font creator ขั้นตอนที่ 1 ดาวน์โหลดเทมเพลตที่เป็น Grid สำ�หรับเขียนฟอนต์ลายมือ
ขั้นตอนที่ 2 สแกนภาพที่เขียนลงในคอมพิวเตอร์ทำ�การปรับตกแต่งภาพให้เกิดความคมชัด หากภาพที่เราสแกนไม่ชัด สามารถไปปรับแต่งเพิ่มเติมได้ในโปรแกรม Photoshop ด้วยวิธีง่ายแค่เปิดโปรแกรม Photoshop ขึ้นมาแล้วเลือกไฟล์ เทมเพลตที่เราสแกนไว้แล้วเปิดขึ้นมา คลิกที่Image>Adjustments>Brightness/Contrast
4 Hand Written Font Project ขั้นตอนที่ 3 เปิดโปรแกรม Font creator แล้วคลิกที่ไฟล์ เลือก Open >Font file เลือกเทมเพลตฟอนต์ ในการ ออกแบบฟอนต์ลายมือครั้งนี้ ใช้เทมเพลต CRU-Pilasluck.ttf เทมเพลตนี้เป็นเทมเพลตฟอนต์ที่ออกแบบโดย ผศ.ประชิด ทิณบุตร อาจารย์ผู้สอน
ภาพแสดงหน้าการเปิดไฟล์โปรแกรม Font Creator ที่มา : นางสาวพลอยนภัส เรืองศิริโท,2555
ภาพแสดงหน้าการเลือกไฟล์ฟอนต์ ที่มา : นางสาวพลอยนภัส เรืองศิริโท,2555
Hand Written Font Project
5
ขั้นตอนที่ 4 จากนั้นจะปรากฏเป็นตาราง Grid จำ�นวนมาก ซึ่งแต่ละช่องนั้นเป็นฟอนต์ที่ออกแบบไว้แล้ว ในที่นี่เรา ต้องการที่จะทำ�การออกแบบฟอนต์ที่เป็นลายมือของเรา โดยดับเบิ้ลคลิกที่ช่องที่มีตัวอักษรพยัญชนะหรือสระนั้นแล้ว ทำ�การแก้ไขให้เป็นฟอนต์ของเรา
ภาพแสดงหน้าของโปรแกรม Font Creator
เมื่อนำ�ไฟล์ฟอนต์มาปรับแต่งหรือออกแบบ ที่มา : นางสาวพลอยนภัส เรืองศิริโท,2555
ภาพแสดงหน้าการเปิดไฟล์ฟอนต์ตัวอักษร B ที่มา : นางสาวพลอยนภัส เรืองศิริโท,2555
6 Hand Written Font Project ขั้นตอนที่ 5 วิธีการนำ�ฟอนต์ลายมือของเรามาลงในโปรแกรม High-Logic Font Creator นั้นทำ�ได้โดยการ Copy ฟอนต์ทีละตัวจากโปรแกรมแต่งภาพ ปรับภาพแล้วนำ�ไป Past (ก่อน past ควรดับเบิ้ลคลิกที่ฟอนต์นั้นก่อนแล้ว ทำ�การ past) ลงแทนฟอนต์ต้นฉบับใน High-Logic Font Creator ทีละตัว
ภาพแสดงหน้าการ Copy ภาพจากโปรแกรม PS ที่มา : นางส่าวพลอยนภัส เรืองศิริโท,2555
ภาพแสดงหน้าของโปรแกรม FontCreator ที่มา : นางส่าวพลอยนภัส เรืองศิริโท,2555
Hand Written Font Project
7
ขั้นตอนที่ 6 ปรับขนาดและสัดส่วนของฟอนต์ให้ถูกต้อง การจัดวางช่องไฟ ตำ�แหน่งระยะห่าง หน้า-หลัง ความสูง - Cap height คือ ความสูงของตัวอักษรพิมพ์ใหญ่ - Median คือ ความสูงของตัวอักษรพิมพ์เล็ก - X-height คือ ระยะห่างระหว่างเส้นฐานจนถึงเส้น median ซึ่งเป็นช่วงของตัวพิพม์เล็ก - Baseline คือ เส้นฐาน
ภาพแสดงหน้าของโปรแกรม FontCreator การดัดตัวอักษร ที่มา : นางส่าวพลอยนภัส เรืองศิริโท,2555
ขั้นตอนที่ 7 ในขณะทำ�การ past ฟอนต์ลงในโปรแกรมหรืออาจรอจน past เสร็จ ควรกด test หรือ F8 เพื่อทำ�การ ตรวจระยะห่าง ช่องไฟ ความสูง โดยเราควรตรวจให้ครบถ้วนอย่างละเอียดนะค่ะ โดยเฉพาะ สระและพยัญชนะใน ภาษาไทย
ภาพแสดงหน้าของโปรแกรม FontCreator การตรวจสอบระยะห่าง ของช่องไฟ ที่มา : นางส่าวพลอยนภัส เรืองศิริโท,2555
8 Hand Written Font Project ขั้นตอนที่ 8 ทำ�การเปลี่ยนชื่อฟอนต์และข้อมูลผู้ออกแบบ รวมทั้งข้อมูลที่เกี่ยวกับฟอนต์
Hand Written Font Project ขั้นตอนที่ 9 Save ไฟล์ไว้โดยตั้งชื่อตามที่ต้องการ แต่ในที่นี้ดิฉันจะตั้งชื่อที่ขึ้นต้นด้วย CRU เพราะเป็นชื่อที่อาจารย์ ให้ใช้เวลาส่งผลงาน CRU คือ ชื่อย่อของมหาวิทยาลัยราชภัฎจันทรเกษม สถาบันที่ศึกษาอยู่แล้วตามด้วยชื่อ เช่น CRU-Ploynapat
ภาพแสดงหน้าการ Save ไฟล์ฟอนต์ ที่มา : นางส่าวพลอยนภัส เรืองศิริโท,2555
9
10 Hand Written Font Project
Hand Written Font Project
11
ข้อมูลแบบตัวพิมพ์(Font Information) ชื่อแบบตัวพิมพ์ (Typeface/Font Name )ชื่อ ซีอาร์ยู-พลอยนภัส (CRU-Ploynapay) หรือชุดตัวอักษรทั้งหมดในไฟล์นี้ชื่อชุดว่า ซีอาร์ยู-พลอยนภัส เวอร์ชั่น 1.000 ประเภทของไฟล์ตัวพิมพ์ OpenType Layout, TrueType Outlines ออกแบบโดย นางสาวพลอยนภัส เรืองศิริโท สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม กรุงเทพมหานคร เมื่อวันที่ 26 เดือนมกราคม พศ.2555 ตัวอย่างรูปแบบตัวอักขระภาษาลาติน(Latin Characters) ได้แก่ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 abcdefghijklmnopqrstuvwx!@#%^&*()_+|{}[]:”<>?;’”,./\*-.=;’ ตัวอย่างรูปแบบตัวอักขระภาษาไทย(Thai Characters) ได้แก่ กขฃคฅฆงจฉชซฌญฎฏฐฒณดถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮ๐๑๒๓๔๕๖๗๘๙ ๆๅ฿อะอาอุึอูอิอีอึอือ่อ้อ๊อ๋อ์อำ�เแโใไ? ข้อความสำ�หรับการทดสอบการพิมพ์รับคำ�สั่งพิมพ์ และเพื่อแสดงตำ�แหน่งการพิมพ์รูปอักขระที่ออกแบบ-จัดช่องว่าง ช่องไฟระหว่าง รูปอักขระและระหว่างคำ� ทั้งชุดคือภาษาอังกฤษกับภาษาไทย In typography, a font is traditionally defined as a quantity of sorts composing a complete character set of a single size and style of a particular typeface. For example, the complete set of all the characters for “9-point Bulmer” is called a font, and the “10-point Bulmer” would be another separate font, but part of the same font family, whereas “9-point Bulmer boldface” would be another font in a different font family of the same typeface. One individual font character might be referred to as a “piece of font” or a “piece of type”.Font nowadays is frequently used synonymously with the term typeface, although they had clearly understood different meanings before the advent of digital typography and desktop publishing. ในทางวงการพิมพ์นั้นกล่าวถึงฟ้อนต์โดยทั่วไปว่า หมายถึงตัวอักษรที่ใช้เป็นแบบตัวเรียงพิมพ์เนื้อหา ที่มีขนาดและรูปแบบเป็นชุด เดียวกัน ยกตัวอย่างเช่นแบบตัวอักษรที่ใช้ในการเรียงพิมพ์เนื้อหาที่ท่านกำ�ลังอ่านอยู่นี้ มีชื่อแบบตัวอักษรชุดนี้ว่า ซีอาร์ยู-พลอย นภัส (CRU-Ploynapay) ที่ประกอบด้วยรูปอักขระ(Glyphs) ของตัวพยัญชนะ (Consonants) สระ(Vowels) วรรณยุกต์ (Tones) เครื่องหมายสัญลักษณ์(Signs and Symbols) วรรคตอน(Punctuation) อักษรภาษาไทย ภาษาอังกฤษ ความเข้าใจในคำ�ศัพท์เทคนิคต่างๆที่เกี่ยวข้องกับการออกแบบทางการพิมพ์นั้น มีผู้รู้กล่าวไว้มากมาย ดังที่จำ�นำ�มาอ้างอิง-แปลสรุป ความหมายไว้ให้เข้าใจเป็นความรู้พื้นฐานไว้ร่วมกันในที่นี้คือ. ความหมายภาษาไทยของคำ�ว่า Typography นั้นยังไม่มีการบัญญัติศัพท์คำ�ไทย โดยราชบัณฑิตยสถานไว้โดยตรง (2554) ส่วน ใหญ่มักแปลและใช้คำ�ว่า การพิมพ์ ดังเช่นเป็นคำ�แปลไว้ในพจนานุกรมอิเล็กทรอนิกส์ไทย-อังกฤษ Lexitron ของ Nectec เป็นต้น Kyrnin,Jenifer,2011 ได้ให้ความหมายเกี่ยวกับ Typograpy เอาไว้ว่าหมายถึงการออกแบบและการใช้งานตัวอักษรเพื่อการ สื่อสาร ซึ่งมีจุดเิ่ริ่มต้นมานับแต่ที่กูเตนเบิร์กได้เริ่มใช้ในงานการพิมพ์ในระบบเลตเตอร์เพรสมาก่อน แต่งานไทโพกราฟี่นั้น มีรากฐาน การพัฒนามาจากงานเขียนตัวอักษรแบบคัดลายมือเป็นรูปอักขระ ดังนั้นขอบข่ายของงานและความหมายจึงมีความครอบคลุมไปถึง ทุกสิ่งทุกอย่าง นับแต่การเขียนรูปอักขระด้วยมือหรือการออกแบบตัวอักษร ไปจนถึงงานการพิมพ์ด้วยระบบดิจิตัลในหน้าเว็บไซต์อีก ด้วย อีกทั้งยังครอบคลุมไปถึงภาระงานของนักออกแบบที่เป็นผู้ออกแบบสร้างสรรค์ตัวอักษร การจัดตัวอักษรทุกรูปแบบทุกส่วนที่
12 Hand Written Font Project เกี่ยวข้องในงา่นที่ออกแบบด้วยนั่นเอง Typography จึงเป็นการจัดวางแบบตัวพิมพ์(Typefaces)ให้เหมาะสมกับพื้นที่และองค์ประกอบทางการพิมพ์ที่ใช้ในงาน ออกแบบทั้งหมดนั่นเอง(Kyrnin,Jenifer,2011) การกำ�หนดลักษณะข้อความในเอกสาร HTML จากในบทที่ 2 เรื่องโครงสร้างภาษา HTML เราได้ทำ�การใส่ ข้อความลงในโฮมเพจแล้ว ในส่วนระหว่างแท็ก <body> ....</ body> ซึ่งจะสังเกตได้ว่าข้อความที่เราได้เขียนไปเมื่อทดสอบ ผ่านเว็บบราวเซอร์ จะเป็นข้อความสีดำ� และจากบทที่ 3 หาก เราเพิ่มเติมโค้ด เพิ่ม Attribute ของแท็ก <body> เข้าไปโดย ระบุให้พื้นหลังของโฮมเพจเป็นสีแดง จะทำ�ให้สีข้อความดูไม่ เข้ากันกับสีพื้นหลัง และทำ�ให้ข้อความอ่านยาก นอกจากนี้ ข้อความก็ดูไม่เป็นมาตรฐาน เหมือนเว็บทั่ว ๆ ไป อันนี้เพราะ ว่าเรายังไม่ได้ทำ�การกำ�หนดลักษณะของข้อความ สำ�หรับการกำ�หนดลักษณะข้อความนั้น จะใส่เพิ่มในส่วนของ แท็กเปิด ของแท็ก <font> เพราะคำ�สั่งนี้เป็นส่วนขยายที่เรียก ว่า Attribute ของแท็ก <font> นั้นเอง โดยจะมี Attribute ต่าง ๆ ดังนี้ 1. การกำ�หนดชื่อฟอนต์ Face = “ชื่อฟอนต์” 2. การกำ�หนดขนาดของข้อความ Size = “ขนาด ของข้อความ” 3. การกำ�หนดสีของข้อความ color= “ชื่อสี” หรือ color = “#รหัสสี” รูปแบบการกำ�หนดชื่อฟอนต์ การกำ�หนดฟอนต์ ก็เหมือน ๆ กับตอนที่เราพิมพ์งานใน word นั้นละค่ะ ซึ่งเราจะสามารถเลือกได้ว่าเราจะใช้ฟอนต์แบบไหน ซึ่งอาจจะเป็น Arial หรือ Angsana New เป็นต้น ในการ เขียน HTML เราก็สามารถกำ�หนดได้ค่ะ ว่าจะให้ข้อความของ เราแสดงผลด้วยรูปแบบของฟอนต์แบบไหน แต่ในการเขียน เว็บเพจนั้น ฟอนต์ที่เป็นที่นิยมจะมีด้วยกัน 2 ชนิดคือ MS Sans Serif และ Tahoma โดยฟอนต์แบบ MS Sans Serif จะนิยมใช้กับเว็บที่มีการแสดงผลข้อความเป็นภาษาไทย และ Tahoma มักใช้การแสดงผลข้อความเป็นภาษาอังกฤษ แต่ก็ สามารถใช้กับข้อความภาษาไทยได้เหมือนกัน (อย่าง Nextstepdev ก็ใช้ฟอนต์แบบ Tahoma) รูปแบบการกำ�หนดชื่อ ฟอนต์ ก็เป็นตามตัวอย่างด้านล่างค่ะ
<html> <head><title> ....การกำ�หนดรูปแบบฟอนต์ของ ข้อความ....</title></head> <body> <font face = “MS Sans Serif”> ข้อความนี้ กำ�หนดฟอนต์แบบ MS Sans Serif </font> <br> <font face = “Tahoma”> ข้อความนี้กำ�หนด ฟอนต์แบบ Tahoma </font> <br> </body> </html> เหตุผลที่เรามักใช้ฟอนต์แบบ MS Sans Serif หรือ Tahoma เนื่องจากฟอนต์สองตัวนี้เป็นฟอนต์ มาตรฐานของวินโดวน์ ไม่ ว่าเครื่องไหน ๆ ก็มีฟอนต์สองแบบนี้ อีกทั้งฟอนต์ทั้งสองแบบ นี้ สามารถแสดงผลเป็นภาษาไทยได้ด้วย ด้วยลักษณะเฉพาะนี้ นั้นเอง ดังนั้นเมื่อมีผู้เข้าเยี่ยมชมเว็บที่ใช้ฟอนต์ 2 แบบนี้ การ แสดงผลของข้อความก็จะยังสามารถแสดงผลได้เหมือนปกติ หากเรากำ�หนดการแสดงผลด้วยฟอนต์ที่ไม่เป็นมาตรฐาน เมื่อ ถูกแสดงผลที่เครื่องบางเครื่อง ซึ่งเครื่องนั้น ๆ ไม่มีฟอนต์ที่เรา เลือกใช้ จะทำ�ให้ผู้ดูเว็บอ่านข้อความของเว็บเราไม่ได้ ซึ่งจะส่ง ผลเสียกับการเข้าเยี่ยมชมเว็บไซต์ของเราได้ รูปแบบการกำ�หนดขนาดข้อความ การกำ�หนดขนาดของข้อความสามารถกำ�หนดได้โดยใช้ตัวเลข เป็นตัวกำ�หนด ซึ่งสามารถกำ�หนดได้ 7 ระดับ รูปแบบการใส่ มีด้วยกัน 3 แบบ คือ แบบแรกการกำ�หนดโดยใช้ตัวเลข 1-7 สองการกำ�หนดตัวเลขโดยใส่เครื่องหมาย + คือตั้งแต่ +1 - +7 และ การใส่แบบใส่เป็นค่าแบบ - ตั้งแต่ -1 - -7 ซึ่งรูปแบบการ ใส่มีดังนี้ <html> <head><title> ....การกำ�หนดรูปแบบขนาดข้อความ....</ title></head> <body> <font size = “2”> ข้อความนี้กำ�หนดขนาด เท่ากับ 2</font> <br>
Hand Written Font Project <font size = “+2”> ข้อความนี้กำ�หนดขนาด เท่ากับ +2</font> <br> <font size = “-2”> ข้อความนี้กำ�หนดขนาด เท่ากับ -2</font> <br> </body> </html> การใส่ขนาดข้อความที่นิยมคือแบบแรก และปกติแล้วข้อความ ของเนื้อหาโดยทั่ว ๆ ไปจะอยู่ที่ขนาด 2 หรือ 3 ซึ่งต้องขึ้นอยู่ กับชนิดของฟอนต์ที่ใช้ด้วย เพราะขนาดของฟอนต์แต่ละชนิด จะไม่เท่ากัน รูปแบบการกำ�หนดสีข้อความ การกำ�หนดสีสันของข้อความเป็นเรื่องสำ�คัญอยู่ในลำ�ดับต้น ๆ ของการทำ�เว็บเลยทีเดียว เพราะสีสันข้อความสามารถดึงดูด สายตาของผู้เยี่ยมชม หากข้อความของเว็บใช้สีที่อ่านยาก เพราะว่าสีกลืนกันไปหมดกับพื้นหลัง ความสำ�คัญของการ สื่อความหมายของข้อความนั้น ๆ อาจอ่อนด้อยลง ดังนั้นการ พิจารณาเลือกใช้สีควรเลือกให้เหมาะกับโทนสีทั้งหมดของเว็บ ไม่ควรอ่อนด้อยเกินไป หรือโดดเด่นเกินไป (สำ�หรับข้อความ เล็ก ๆ ต้องการเน้นอาจทำ�ได้) ซึ่งรูปแบบการใส่สีให้ข้อความ ในเว็บมีดังนี้ <html> <head><title> ....การกำ�หนดรูปแบบสีข้อความ....</title></ head> <body> <font color = “red”> ข้อความนี้กำ�หนดให้เป็น สีแดง</font> <br> <font color = “#0000ff”> ข้อความนี้กำ�หนด ให้เป็นสีน้ำ�เงิน </font> <br> </body> </html> Tip HTML การกำ�หนดลักษณะข้อความในแท็กเดียว ในการกำ�หนดลักษณะข้อความสามารถกำ�หนดได้ในแท็กเดียว โดยการเพิ่ม Attribute ของแท็ก <font> โดยใช้ Space หรือ
13
ช่องว่างเป็นตัวแบ่งระหว่างแต่ละ Attribute โดยเขียนโค้ด ตามตัวอย่างดังนี้ <font face = “ชื่อฟอนต์” size = “ขนาดข้อความ” color = “สี”>.... </font> แท็ก <br> คงสังเกตเห็นแล้วนะค่ะ ว่ามีแท็กเพิ่มมาอีกแท็ก ในบทความนี้ คือ <br> แท็ก <br> เป็นแท็กสำ�หรับขึ้นบรรทัดใหม่ค่ะ ** หมายเหตุ นอกจากแท็ก <br> แล้ว ยังมีแท็กสำ�หรับขึ้น บรรทัดใหม่อีกหนึ่งแท็กคือ <p> หรือ <p>....</p> แต่แตกต่าง กันที่ <br> เป็นการขึ้นบรรทัดใหม่ของย่อหน้าเดียวกัน แต่ <p> จะเป็นการขึ้นบรรทัดย่อหน้า ดังนั้น ช่องว่างของการขึ้นบรรทัด ใหม่ของ <p> จะมีความสูงมากกว่า <br>
14 Hand Written Font Project