Typography Design ใน Project handwritten

วัตถุประสงค์

1. เพื่อพัฒนาฟอนต์ AAA-Watin-new เพิ่มเติม

2. เพื่อออกแบบสร้างสรรค์ฟ้อนต์ใหม่ ด้วยลายมือของตนเอง

3. เพื่อสร้างทักษะในการออกแบบและดัดแปลงฟ้อนต์ให้สวยงาม

4. นำฟ้อนต์ที่เสร็จสมบูรณ์ไปใช้ในการเรียงพิมพ์ตัวอักษรได้จริง

6. เพื่อเรียนรู้วิธีการสร้างฟ้อนต์อย่างละเอียด และสามารถทำได้จริง

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

Goal ( เป้าหมาย )

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

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

- เทมเพลตเส้น Grid สำหรับเขียนฟอนต์ลายมือ

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

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

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

- โปรแกรม High-Logic Font Creator

- โปรแกรม Adobe Photoshop

Do Did Done

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

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

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

ภาพที่ 1 แสดงตารางเทมเพลตสำหรับปริ๊น เพื่อนนำมาเขียนตัวอักษร

ที่มา https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWF

pbnxhcnRpMjMwNXxneDo0OTM5MDAzZWFlNTAxMjc

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

ภาพที่ 2 แสดงภาพเทมเพลดตัวอักษรที่แสกนแล้ว

ที่มา น.ส.ชลธิชา อุปลี ,2556

ขั้นตอนที่ 3 เปิดไฟล์สแกนในโปรแกรม Photoshop เลือกเครื่องมือ Crop Tool เพื่อครอบตัดตัวอักษรที่ต้องการ ไปที่ Select > Color Range เลือกพื้นที่สีขาวกด OK แล้วกด Ctrl + Shift + I แล้วกด Ctrl + x เพื่อตัดโครงสร้างตัวอักษรออกมา

ภาพที่ 3 แสดงวิธีการครอบตัดเทมเพจตัวอักษร

ที่มา น.ส.ชลธิชา อุปลี,2556

ขั้นตอนที่ 4 นำไปวางในโปรแกรม Font Creator ที่เลือกเปิดไฟล์ที่เราต้องการจะแก้ไขไว้ซึ่งก็คือฟอนต์ AAA-Watin-new แล้วดัดแปลง ย่อ-ขยายให้ตัวอักษรได้ตามขนาด และรูปแบบที่ต้องการ ทำจนครบทุกตัวอักษรตามตารางรหัสรูปอักขระมาตรฐานยูนิโค้ดประจำตัวอักษรภาษาไทย และภาษาอังกฤษ ดังนี้

	notdef
	space
#	numbersigh
$	dollar
%	pencent
&	ampersand
'	quotesingle
(	parenleft
)	parenright
*	asterisk
+	plus
,	comma

-	hyphen
.	period
/	slash
0	zero
1	one
2	two
3	three
4	four
5	five
6	six
7	seven
8	eight
9	nine
:	colon
;	semicolon
<	less
=	equal
>	greater
?	question
@	at
A	A
B	B
C	C
D	D
E	E
F	F
G	G
H	H
I	I

J	J
K	K
L	L
M	M
N	N
O	O
P	P
Q	Q
R	R
S	S
T	T
U	U
V	V
W	W
X	X
Y	Y
Z	Z
[	bracketleft
\	backslash
]	bracketright
^	asciicircum
_	underscore
`	grave
a	a
b	b
c	c
d	d
e	e
f	f
g	g
h	h
i	i
j	j
k	k
l	l
m	m
n	n
o	o
p	p
q	q
r	r
s	s
t	t
u	u
v	v
w	w
x	x
y	y
z	z
{	braceleft
}	braceright
~	asciitilde
“	quotedbl
!	exclam
¿	questiondown
‘	quoteleft
’	quoteright
“	quotedblleft
”	quotedblright
	diresis
©	copyright
®	registered
™	trademark
•	bullet
–	endash
—	emdash
‚	quotesinglbase
„	quotedblbase
	uni007F
	NULL
	nonmarkingreturn
ำ	uni0E33
ก๎	uni0E4E.alt1
¼	onequarter
½	oneharf
¾	threequarters
	uni0E00
ก	uni0E01
ข	uni0E02
ฃ	uni0E03
ค	uni0E04
ฅ	uni0E05
ฆ	uni0E06
ง	uni0E07
จ	uni0E08
ฉ	uni0E09
ช	uni0E0A
ซ	uni0E0B
ฌ	uni0E0C
ญ	uni0E0D
ฎ	uni0E0E
ฏ	uni0E0F
ฐ	uni0E10
ฑ	uni0E11
ฒ	uni0E12
ณ	uni0E13
ด	uni0E14
ต	uni0E15
ถ	uni0E16
ท	uni0E17
ธ	uni0E18
น	uni0E19
บ	uni0E1A
ป	uni0E1B
ผ	uni0E1C
ฝ	uni0E1D
พ	uni0E1E
ฟ	uni0E1F
ภ	uni0E20
ม	uni0E21
ย	uni0E22
ร	uni0E23
ฤ	uni0E24
ล	uni0E25
ฦ	uni0E26
ว	uni0E27
ศ	uni0E28
ษ	uni0E29
ส	uni0E2A
ห	uni0E2B
ฬ	uni0E2C
อ	uni0E2D
ฮ	uni0E2E
ฯ	uni0E2F
ะ	uni0E30
กั	uni0E31
า	uni0E32
ำ	uni0E33
กิ	uni0E34
กี	uni0E35
กึ	uni0E36
กื	uni0E37
กุ	uni0E38
กู	uni0E39
กฺ	uni0E3A
฿	uni0E3F
เ	uni0E40
แ	uni0E41
โ	uni0E42
ใ	uni0E43
ไ	uni0E44
ๅ	uni0E45
ๆ	uni0E46
ก็	uni0E47
ก่	uni0E48
ก้	uni0E49
ก๊	uni0E4A
ก๋	uni0E4B
ก์	uni0E4C
กํ	uni0E4D
ก๎	uni0E4E
๏	uni0E4F
๐	uni0E50
๑	uni0E51
๒	uni0E52
๓	uni0E53
๔	uni0E54
๕	uni0E55
๖	uni0E56
๗	uni0E57
๘	uni0E58
๙	uni0E59
๚	uni0E5A
๛	uni0E5B
	zerowidthnonjoiner
	uni0E10.alt1
กิ	uni0E34.alt1
กี	uni0E35.alt1
กึ	uni0E36.alt1
กื	uni0E37.alt1
ก่	uni0E48.alt1
ก้	uni0E49.alt1
ก๊	uni0E4A.alt1
ก๋	uni0E4B.alt1
ก์	uni0E4C.alt1
ก่	uni0E48.alt2
ก้	uni0E49.alt2
ก๊	uni0E4A.alt2
ก๋	uni0E4B.alt2
ก์	uni0E4C.alt2
	uni0E0D.alt1
กั	uni0E31.alt1
กํ	uni0E4D.alt1
ก็	uni0E47.alt1
ก่	uni0E48.alt3
ก้	uni0E49.alt3
ก๊	uni0E4A.alt3
ก๋	uni0E4B.alt3
ก์	uni0E4C.alt3
กุ	uni0E38.alt1
กู	uni0E39.alt1
กฺ	uni0E3A.alt1
ฎ	uni0E0E.alt1
ฏ	uni0E0F.alt1
ฬ	uni0E2C.alt1
	uni0E4F.liga
ฤา	uni0E24.liga
ฤา	uni0E26.liga
	.notdef
	AAA_Logo
	.notdef
€	Euro
÷	divide
X	multiply
¥	yen
|	bar
fi	fi
fl	fl

ภาพที่ 4 แสดงการวางตัวอักษรหลังจากมีการตัดออกมาจาโปรแกรม Photoshop

ที่มา น.ส.ชลธิชา อุปลี ,2556

ภาพที่ 5 แสดงตัวอักษรที่ดัดเรียบร้อยสมบูรณ์

ที่มา น.ส.ชลธิชา อุปลี,2556

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

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

ที่มา น.ส.ชลธิชา อุปลี ,2556

ภาพที่ 7 แสดงการเรียงพิมพ์ตัวอักษรที่ดัดเสร็จแล้ว ด้วยอักษรขนาด 16

ที่มา น.ส.ชลธิชา อุปลี,2556

ภาพที่ 8 แสดงการเรียงพิมพ์ตัวอักษรภาษาไทยที่ดัดเสร็จแล้ว ด้วยอักษรขนาด 75

ที่มา น.ส.ชลธิชา อุปลี,2556

ภาพที่ 9 แสดงการเรียงพิมพ์ตัวอักษรภาษาอังกฤษที่ดัดเสร็จแล้ว ด้วยอักษรขนาด 75

ที่มา น.ส.ชลธิชา อุปลี ,2556

ภาพที่ 10 ซึ่งจากรูปภาพข้างต้น จะเห็นได้ว่าตัวอักษรต่างๆทั้งภาษาอังกฤษและภาษาไทยนั้น ยังมีความหนาและบางไม่เท่ากัน จึงต้องทำการปรับแก้ให้ตักอักษรมีความถูกต้อง โดยการเลือกฟอนต์ตัวที่เราต้องการไปที่เครื่องมือ Tool > Glyph Transformer จากนั้นกดเลือกที่Metrich > Bearings กดปุ่มลูกศรเพื่อ Add feature to script แล้วปรับตั้งค่าตามความเหมาะสม

ที่มา น.ส.ชลธิชา อุปลี,2556

ภาพที่ 11 แสดงหน้าต่าง Transform wrizard ที่มา น.ส.ชลธิชา อุปลี,2556

ภาพที่ 12 เป็นการปรับความห่่างของตัวอักษรแบบง่ายๆโดยการปรับเส้นแดงข้างหลัง Right Bearing ตามความเหมาะสม

ที่มา นางสาว ชลธิชา อุปลี,2556

ภาพที่ 13เป็นการแสดงการจัดเรียงตัวอักษรที่ได้ทำการปรับปรุงแล้วจะเห็นว่าตัวอักษรเรียงกันเรียบร้อยที่มา

นางสาว ชลธิชา อุปลี,2556

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

ภาพที่14 แสดงข้อมูลต่างๆก่อนการเปลี่ยนแปลงที่มาน.ส.ชลธิชา อุปลี,2556

ภาพที่ 15 แสดงข้อมูลต่างๆหลังการการเปลี่ยนแปลง ที่มา น.ส.ชลธิชา อุปลี,2556

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

ที่มา น.ส.ชลธิชา อุปลี,2556

ภาพที่17 แสดงตัวอักษรCRU-conticha-Hand-Written

ที่มา น.ส.ชลธิชา อุปลี,2556

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

จะได้ฟอนต์ลายมือภาษาไทยและภาษาอังกฤษของเราเอง

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

ภาพที่18แสดงโฟลเดอร์ที่จะติดตั้งฟอนต์ลายมือลงในเครื่อง

ที่มา น.ส.ชลธิชา อุปลี,2556

ภาพที่ 19แสดงการนำฟอนต์ที่ทำเสร็จแล้วไปเรียงพิมพ์ในโปรแกรม

ที่มา น.ส.ชลธิชา อุปลี,2556

ข้อมูลแบบตัวพิมพ์ (Font Information)

ชื่อแบบตัวพิมพ์ (Typeface/Font Name)

ชื่อ CRU-Chonticha

ประเภทของไฟล์ตัวพิมพ์ OpenType Layout, TrueType Outlines

ออกแบบโดย นางสาว ชลธิชา อุปลี  รหัสนักศึกษา

5411301632

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

สาขาวิชาศิลปกรรม มหาวิทยาลัยราชภัฏจันทรเกษม กรุงเทพมหานคร

เมื่อวันที่13เดือน มกราคม พศ. 2556

ตัวอย่างรูปแบบตัวอักขระภาษาลาติน (Latin Characters)

ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789

abcdefghijklmnopqrstuvwxyz!@#%^&*()_+|{}[]:"<>?;'",./\*-.=;'

ตัวอย่างรูปแบบตัวอักขระภาษาไทย (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.

     ในทางวงการพิมพ์นั้นกล่าวถึงฟ้อนต์โดยทั่วไปว่า หมายถึงตัวอักษรที่ใช้เป็นแบบตัวเรียงพิมพ์เนื้อหาที่มีขนาดและรูปแบบเป็นชุดเดียวกันยกตัวอย่างเช่นแบบตัวอักษรที่ใช้ในการเรียงพิมพ์เนื้อหาที่ท่านกำลังอ่านอยู่นี้ มีชื่อแบบตัวอักษรชุดนี้ว่า บางพูด(Bangpood) ที่ประกอบด้วยรูปอักขระ(Glyphs) ของตัวพยัญชนะ (Consonants) สระ(Vowels) วรรณยุกต์ (Tones) เครื่องหมายสัญลักษณ์(Signs and Symbols) วรรคตอน(Punctuation) อักษรภาษาไทย ภาษาอังกฤษ

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

เขามักใช้คำกลอนนี้ ให้นักศึกษาคัดลอกไปวาง

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

คำกลอนตรวจสอบแบบตัวอักษร ตำแหน่งพิมพ์ผสมคำไทย

"เป็นมนุษย์สุดประเสริฐเลิศคุณค่า

กว่าบรรดาฝูงสัตว์เดรัจฉาน

จงฝ่าฟันพัฒนาวิชาการ

อย่าล้างผลาญ ฤๅเข่นฆ่าบีฑาใคร

ไม่ถือโทษโกรธแช่งซัด ฮึดฮัดด่า

หัดอภัยเหมือนกีฬา อัชฌาสัย

ปฏิบัติประพฤติกฎ กำหนดใจ

พูดจาให้จ๊ะๆจ๋า น่าฟังเอยฯ"

คำที่ควรนำมาทดสอบคือ วิญูชน ภูปเตมี กตัญญู เกลื่อน เกลื้อน โหมโรง กระโปรง น้ำใจ

ตัวแสดงลักษณะต่างๆของตัวอักษร

ลายมือ     Bold

ลายมือ     Italic

ลายมือ     Bold Italic

ลายมือ     regula

 อ้างอิง

    - https://docs.google.com/viewer?a=v&pid=sites&srcid=ZGVmYXVsdGRvbWFpbnxhcnRpMj

MwNXxneDo0OTM5MDAzZWFlNTAxMjc

    - http://thaifont.info/?p=71

    - http://en.wikipedia.org/wiki/ASCII