วันพุธที่ 20 กุมภาพันธ์ พ.ศ. 2556

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 แสดงตารางเทมเพลตสำหรับปริ๊น เพื่อนนำมาเขียนตัวอักษร
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
























ไม่มีความคิดเห็น:

แสดงความคิดเห็น