การสร้างชุดฟอนต์ตระกูล : CRU-Suttinee

CRU-FONT FAMILY : ฟอนต์ตระกูลซีอาร์ยู

FONT MAME : CRU-SUTTINEE ชื่อฟอนต์ : ซีอาร์ยู-ศุทธินี

TYPE DESIGNER : MS.SUTTINEE SAETANG

                    กระบวนการทำงาน

        Goal (เป้าหมาย)

พัฒนาอักษรชุด CRU-Suttinee ต่อจากเดิมโดยทำให้เป็นฟอนต์ลายมือของตนเอง

           Tools (เครื่องมือหลัก)

- ปากกาหมึกดำ

- เครื่องคอมพิวเตอร์

- เครื่องกราดภาพ

- โปรแกรม High-Logic FontCreator

- โปรแกรม Adobe Photoshop

      Do Did Done

Do : มีขั้นตอนและหลักฐานแสดง

ขั้นตอนการออกแบบฟอนต์ลายมือ ทั้งภาษาไทย - อังกฤษ และทำด้วยโปรแกรม

High-Logic FontCreator

ขั้นตอนที่ 1 ดาวน์โหลดเทมเพลตที่เป็น Grid สำหรับเขียนฟ้อนต์ลายมือปริ๊นและ

เขียนตัวอักษรในตาราง

ขั้นตอนที่ 2 สแกนภาพที่เขียนลงในคอมพิวเตอร์

ภาพที่ 1 แสดงภาพเทมเพลดตัวอักษรที่เสร็จและแสกนไว้แล้ว

ที่มา น.ส.ศุทธินี แซ่ตั้ง,2556

ขั้นตอนที่ 3  เปิดไฟล์สแกนในโปรแกรม Photoshop  เพื่อครอบตัดตัวอักษรที่ต้องการ

ขั้นตอนที่ 4  ดัดตัวอักษรในโปรแกรม FontCreator ให้ได้สันส่วนตามความเหมาะสม

 

ภาพที่ 2 แสดงการดัดตัวอักษร

ที่มา น.ส.ศุทธินี แซ่ตั้ง,2556

ขั้นตอนที่ 5  เมื่อทำการดัดตัวอักษรครบทุกตัว

ภาพที่ 3 แสดงภาพตัวอักษรต่างๆ ที่ดัดแล้วในโปรแกรม FontCerater

ที่มา น.ส. ศุทธินี แซ่ตั้ง 2556

ขั้นตอนที่ 6  การจัดวางช่องไฟ ตำแหน่งระยะห่าง หน้า-หลัง ความสูง และกำหนดเส้นโครงสร้าง Guidelines ของตัวอักษร โดยคลิกขวา  Properties

- Cap height คือ ความสูงของตัวอักษรพิมพ์ใหญ่

- Median คือ ความสูงของตัวอักษรพิมพ์เล็ก

- X-height คือ ระยะห่างระหว่างเส้นฐานจนถึงเส้น Median ซึ่งเป็นช่วงของตัวพิมพ์เล็ก

- Baseline คือ เส้นฐาน

                                                  ภาพที่ 4 การปรับระยะห่าง

                                               ที่มา น.ส. ศุทธินี แซ่ตั้ง,2556

ขั้นตอนที่ 7 เมื่อจัดวางช่องไฟ ตำแหน่งระยะห่าง หน้า - หลัง ความสูง ของตัวอักษรครบทุกตัวแล้วให้คลิกไปที่  Font > Test เพื่อทดสอบการพิมพ์ ตรวจสอบระยะช่องไฟของแต่ละอักษร หากยังไม่สมบูรณ์ ให้แก้ไขตามขั้นตอนที่ 6

 ภาพที่ 5 แสดงการเรียงพิมพ์ระยะช่องไฟ ด้วยอักษรขนาด 40

                                               ที่มา น.ส. ศุทธินี แซ่ตั้ง,2556

ขั้นตอนที่ 8 ปรับความหนา/เอนของตัวอักษรโดยไปที่เครื่องมือTool > Glyph Transformer จากนั้นกดเลือกที่ Metrich > Bearings กดปุ่มลูกศรเพื่อ Add feature to script แล้วปรับตั้งค่าตามความเหมาะสม

ภาพที่ 6 แสดงหน้าต่าง Transform wrizard

ที่มา น.ส. ศุทธินี แซ่ตั้ง 2556

ขั้นตอนที่ 9 เมื่อได้ฟอนต์ที่เสร็จสมบูรณ์แบบแล้ว ให้ไปที่ Format > Naming เพื่อแก้ไขข้อมูลต่างๆ โดยเพิ่มชื่อเรา ทั้งเพลตฟอร์มแบบ Windows Uincode Unicode BMP (UCS-2) และ Macintosh Roman

ภาพที่ 7 แสดงข้อมูลต่างๆ หลังการการเปลี่ยนแปลง

ที่มา น.ส. ศุทธินี แซ่ตั้ง,2556

                         Did : ผลที่ได้รับ

ฟ้อนต์ลายมือ ภาษาไทย - อังกฤษ จากโปรแกรม FontCreator  ฟ้อนต์ชื่อ CRU-Suttinee

CRU-Suttinee-Regular

CRU-Suttinee-Italic 

CRU-Suttinee-Bold

CRU-Suttinee-Bold Italic

                Done  ได้นำไปทดสอบ-สร้าง-ประยุกต์-ใช้ประโยชน์ คือ นำมาติดตั้งเพื่อใช้เป็นแบบพิมพ์ในรายงานของวิชาออกแบบตัวอักษรเพื่อการพิมพ์

การนำมาติดตั้งไดรฟ์ C > WINDOWS > Fonts เพื่อใช้เป็นแบบพิมพ์ในรายงานของวิชาการออกแบบตัวอักษรเพื่อการพิมพ์ในโปรแกรมสร้างเอกสารต่างๆ เช่น Microsoft Word

ภาพที่ 8 แสดงฟอนต์ที่ติดตั้งลงในเครื่องแล้ว

ทีมา น.ส. ศุทธินี แซ่ตั้ง,2556

การนำฟอนต์ที่ติดตั้งแล้วมานำเสนอโดยดูตัวอย่างจาก การนำเสนอฟอนต์ของ 

ผศ.ประชิด ทิณบุตร แล้วนำมาปรับเปลี่ยนฟอนต์ใหป็นฟอนต์ของเรา 

 ภาพที่ 9 แสดงการ ShowFont ในแบบตัวอักษรชุด CRU-Suttinee

การนำ Font ไป uploadไว้ใน http://www.fontspace.com/ เพื่อแรกเปลี่ยนผลงานกัน

สามารถดาวน์โหลดฟอนต์ได้ที่ : http://www.fontspace.com/suttinee/cru-suttinee

  

การออกแบบโลโก้เครือข่ายประกันคุณภาพการศึกษา 9 สถาบัน

แนวคิดในการออกแบบตราสัญลักษณ์เครือข่ายประกันคุณภาพการศึกษา 9 สถาบัน

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

ภาพที่ 2 แสดงผลงานโลโก้เครือข่ายประกันคุณภาพการศึกษา

ที่มา : ศุทธินี  แซ่ตั้ง

 

 

ภาพที่ 2 แสดงการออกแบบโลโก้เครือข่ายประกันคุณภาพการศึกษา (ฺBlack-White)

ที่มา : ศุทธินี  แซ่ตั้ง

 

 

ภาพที่ 3  แสดงผลงานโลโก้เครือข่ายประกันคุณภาพการศึกษา (Color)

ที่มา : ศุทธินี  แซ่ตั้ง

 

 

 

โครงการประกวดการออกแบบสื่อสัญลักษณ์ (Mascot)

โครงการประกวดสื่อสัญลักษณ์

ส่งเสริมการใช้แก้วน้ำประจำตัว

ดื่มน้ำสะอาดปลอดภัยจากตู้บริการน้ำดื่มในมหาวิทยาลัย

            Mascot : น้องหยดน้ำ

เป็นที่รู้จักกันดีทุกคนสำหรับคำว่า " น้ำ "  น้ำดื่มเป็นน้ำที่สะอาดมีความปลอดภัย

ปราศจากเชื้อโรค เป็นน้ำที่มีต่อสุขภาพอนามันและมีความคัญต่อการดำรงชีวิต ดังนั้น การดื่มน้ำดื่มมีส่วนสำคัญมากและ  " แก้วน้ำ "  จึงมีส่วนสำคัญมากในการดื่นน้ำเพื่อสุขภาพของทุกคน

ทั้งที่ได้ออกแบบ Mascot น้องหยดน้ำช่วยรณรงค์ให้ใช้แก้วน้ำในการดื่มอีกทั้งยังช่วยให้

รู้จักสำนึกคิดในการใช้แก้วในการดื่มน้ำทุกครั้ง

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

            โทนสี : ได้ใช้สีฟ้า เพื่อแสดงถึงความสะอาดและการอนุรักษ์น้ำและความปลอดภัย

ของการใช้น้ำ

ภาพที่ 1 แสดงผลงานในการออกแบบ Mascot

ที่มา : ศุทธินี  แซ่ตั้ง

ภาพที่ 2 แสดงผลงานในการออกแบบ Mascot (ฺBlack-White)

ที่มา : ศุทธินี  แซ่ตั้ง

ภาพที่ 3 แสดงผลงานในการออกแบบ Mascot  (Color)

ที่มา : ศุทธินี  แซ่ตั้ง

Showfont CRU-Suttinee

 ภาพที่ 1 แสดงการ ShowFont ในแบบตัวอักษรชุด CRU-Suttinee

 

ภาพที่ 2 แสดงการ ShowFont ในแบบตัวอักษรชุด CRU-Suttinee

 

การนำเสนอฟอนต์ของ ศุทธินี  แซ่ตั้ง 5411301905

 วิชาออกแบบตัวอักษรเพื่อการพิมพ์ARTD2304 กลุ่ม102

05/01/56

วัน อังคาร ที่ 5 กุมภาพันธ์ 2556

         QA โลโก้ ส่งวันที่ 19 ก.พ.56 ( QA โลโก้ คือ การออกแบบโลโก้กลุ่มแบบอัตลักษณ์)
         * 19 ก.พ.56 พร้อมสอบออนไลน์ (20 คะแนน) ข้อสอบอยู่ในที่ๆทำมาทั้งหมด
         งาน  Mascot (เป็นแบบตัวการ์ตูนในหัวข้อ ดื่มน้ำโดยการใช้แก้วน้ำ)
         ส่งอาจารย์วันที่ 9 หรือก่อนวันที่ 10 ส่งที่ห้องประชาสัมพันธ์
         แทมเพรต ขนาด 31*43 นิ้ว โปสเตอร์โดยใช้ฟอนต์เราเอง
         ISSUU ต้องเสร็จภายในวันที่ 19 ก.พ. 56 
         ตรวจรายงาน-ส่งรายงาน วันที่ 19 ก.พ. 56
         สมุดเช็ึคชื่อ-พร้อมบัตรฟ้าเก็บไว้
         งาน Gift เริ่มวันที่ 11-13 ตรวจงานวันที่ 12 ก.พ.56 เวลา 11.30 น.
         www.fontspace.com

           

        

การจัดช่องไฟของตัวอักษร และการใช้ KERNING

By Layiji 

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

การจัดช่องไฟเริ่มแรกที่ Glyph metrics
          

      
การจัดช่องไฟของตัวอักษรแต่ละตัว  ต้องมีระยะหน้าและระยะหลัง  หลายคนจะประสบปัญหาอักษรแต่ละตัวเจอกันแล้วห่างไป ชิดไป มีวิธีจัดช่องไฟอย่างง่ายๆมาให้

อ่าน Glyph ให้ออก

ปัญหา ช่องไปจะเกิดกับภาษาไทยมากกว่าภาษาอังกฤษเนื่องจากว่า ภาษาไทยมีหัวมีหางมีตัวมัวนแพรวพราว ดังนั้นการจัดช่องไฟก็จะยากขึ้นตามความสวยของตัวอักษร
แต่จะจัดยังไงก็ไม่ยากเกินถ้าเราอ่าน Glyph

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

บางตัวอักษรไม่ต้องมีช่องไฟ
เช่น สระ อิ อี อึ อือ 

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

สระมันจะห่างออกไป ดั้งนั้นจึงตัดช่องไฟออกให้อักษรอยู่หน้าช่องไฟซะเวลาพิมพ์มันจะได้เป็นปกติ

ตัวอักษรหัวอยู่ใน(ด้านซ้าย)
ผ ฝ ย อ ฮ ล ส เ แ

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

ฉ ณ น หนู คืออักษรที่เป็นเคสสตั๊ดดี้ที่คลาสสิคที่สุด ในเรื่องความเจ้าปัญหา การจัดช่องไฟของตัวอักษรประเภทนี้จะยากมาก โดยเฉพาะเมื่อมันมาเจอกับ สระบนทั้งหลาย

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

เมื่อเป็นอย่างนี้แล้ว เลยเป็นข้อจำกัดทางการออกแบบประการหนึ่งคือ "อักษรม้วนหางไม่ควรมีหางใหญ่เวอร์เกินไป" มิฉะนั้นแล้วต้องทำ สร้าง opentype ส่วนตัวขึ้นมา ซึ่งบางโปรแกรมไม่รองรับ และการ kerning บางโปรแกรมก็ไม่รองรับเหมือนกัน ดังนั้น --- เราควรออกแบบช่องไฟให้ดีไว้ก่อน

ตัวอย่างการมอง Glyph

ปริมาตรของตัวอักษรที่อยู่ใกล้เส้นช่องไฟ
เทียบกับสั่ดส่วนความสูงทั้งหมดเป็นเปอร์เซ็น ประมาณที่อยู่ใกล้เส้นที่สุด

แต่สูตรนี้ก็ไม่ตายตัว บางตัวก็ต้องจัดเอง หรือการออกแบบตัวอักษรบางจำพวกก็ต้องจัดพิเศษเองเหมือนกัน

การใช้ kerning ด้วย metric window

เมื่อเราจัดช่องไฟระหว่างตัวอักษรดีแล้ว ปัญหาที่ตามมาคือ ข่องไฟของแต่ละตัวเวลาเจอกันจะไม่เท่ากัน ยกตัวอย่างง่ายๆ เช่น A V ติดกัน จะเกิดปัญหาอย่างในรูป

ดังนั้นการแก้ปัญหานี้ต้องใช้ความสามารถของ opentype เข้ามาช่วย ซึ่งเรียกว่าการใช้ kerning

** Kerning คือการกำหนดช่องว่างพิเศษของ คู่ ตัวอักษรต่างๆ ซึ่งสามารถกำหนดให้ห่าง หรือชิดกันได้ *เป็นคู่ๆไป*  นั่นหมายความว่า เฉพาะตอนที่ A เจอ V เท่านั้นถึงจะมีการกำหนดให้ชิดกันได้ แต่ถ้า A เจอตัวอื่น ก็ไม่ต้องทำอะไร

เอาล่ะ ทำยังไงล่ะทีนี้  มันมีขั้นตอนง่ายๆ 

เปิดหน้าต่าง metric window

จะได้หน้าต่างแบบนี้ เราก็ทำการพิมพ์ตัวอักษรที่ต้องการ

ทำการ kerning เฉพาะคู เช่น  AV  VA  หรืออักษรไทย เช่น  สระเอ กับ ตัวมีหัวหันออก (ท บ ป ...)

* ขอย้ำว่าการทำ kern บางโปรแกรมไม่รองรับ ดังนั้นควรกำหนดช่องไฟให้สวยงามแต่แรกจะดีที่สุด พยายามพึ่งพิงการจัด kerning ให้น้อยที่สุด *

สุดท้ายนี้ขอบคุณข้อมูลดีๆจาก
ref : http://www.f0nt.com/forum/index.php/topic,6310.0

29/01/56

วัน อังคาร ที่ 29 มกราคม 2556

       ตอบแบบสอบถามใน http://art.chandra.ac.th/survey/
       ทำแบบการประเมิน http://humannet.chandra.ac.th/
    
- Dropbox สร้างโฟเดอร์เพื่อใส่งานเกี่ยวกับรายวิชา
- การทำหน้าปกโดยใช้อักษรออกแบบและงานต้องมีการปรับปรุงแก้ไขทั้งหมด
- ทำพีเซ็นและนำเสนอขั้นตอนงานต่างๆ งาน Gift
- ทำ Mascot ส่งก่อนวันที่ 10 นี้ *งานบังคับ ส่งประกวดที่  http://water.chandra.ac.th/
โดยศึกษาวิธีการทำ Mascot ปริ๊นมาขนาด A3   ตัวอย่าง http://logosociety.blogspot.com/
- ทำรายงานการออกแบบ