1  

 

ใบความรู หนวยที่ 6 การสรางตัวอักษรดวยงานกราฟก

วิชา คอมพิวเตอรกราฟก ง20205ระดับชั้นมัธยมศึกษาปที่ 1-2

1 . เครื่องมือใสขอความ

ใชใสขอความแนวนอน

ใชใสขอความแนวตั้ง

ใชสราง Selection เปนรูปขอความแนวนอน

ใชสราง Selection เปนรูปขอความแนวตั้ง

1 . 1 วิธีการใสขอความแนวนอน

1-2 สรางไฟลงานใหม

3. เลือกเครื่องมือสรางขอความแนวตั้ง

4. พิมพขอความ

5.สังเกตวาในพาเนล LAYERS จะแสดงเลเยอรขอความปรากฎขึ้น

2  

 

1 .2 วิธีการใสขอความแนวตั้ง

1. คลิกเลือกการสรางขอความแนวนอน

2. คลิกเพื่อพิมพขอความ

3. จะปรากฎ layer

1 . 3 ออปชั่นของขอความ

1 . กลันแนวขอความ ใชเปลี่ยนขอความแนวแนนใหเปนแนวตั้ง หรือกลับกัน

2. ฟอนตและลักษณะตัวอักษร สามารถใชฟอนตภาษาตางๆ ที่ติดตั้งอยูในเครื่อง

โดยลักษณะตัวอักษรใหเลือําจะแตกตางกันไปในแตละฟอนต

3. ลักษณะตัวอักษร ตัวหนา ตัวบาง

4. ขนาดตัวอักษร ถาคาที่ตองการใชไมมีในเมนู สามารถพิมพเขาไปเองได

5. ความคมชัด คือลักษณะของขอบตัวอักษรสามารถเลือกไดตามแบบที่ชอบ ยกเวนแบบ None

ไมควรใชเพราะขอบจะเปนรอยหยัก

6. การจัดตําแหนง เปนการจัดตําแหนงใหอยูชิดซาย กึ่งกลาง หรือชิดขวา โดยเทียบกับจุดคลิกเมาสเมื่อเริ่มพิมพ

7. สีตัวอักษร คลิกเพื่อกําหนดสีขอความ ดวย Color Picker

8. บีดขอความ ประกอบดวยตัวเลือกสําหรับยิดขอความเปนรูปตางๆ

9 . เปด/ปด พาเนล

3  

 

1. 4 การบิดขอความในรูปแบบตางๆ

1. คลิกเพื่อบิดขอความ

2. เลือกรูปแบบการบิด

3. ปรับคาการบิด

4. คลิก OK

รูปบแบบการบิด

Arc Arch Lower Arc Upper

Arch Bluge Shell Lower

Shell Upper Flag Wave

Fish Rise Fisheye

Inflate Squeeze Twist

4  

 

1.5 การใสEf f e c t ตางๆดวยเครื่องมือใน Lay e r S ty l e

ตัวอักษรที่สรางขึ้นนี้ สามารถปรับแตงเติม Effect ตางๆดวยเครื่องมือใน Layer Styleโดยเปดเครื่องมือจากปุม

ที่ดานลางของ Layer Pallet

1. Bl end in g

Op t i on สามารถใชปรับความเขมของตัวอักษร และเปนทางเขาเมนูอื่นๆ ซึ่งอยูในกรอบดานซายมือ

2 . Drop

Shadow เปนเครื่องมือที่ใชสําหรับสรางเงาใหกับตัวอักษร เมื่อเปดหนาตางขึ้นมาจะมีเครื่องมือปรับแตงเงา เพิ่มเติมอีก

• Blend Mode : เปนรูปแบบของเงาที่มีใหเลือก

• Opacity : ใชปรับความเขมของเงา

• Angle : ใชปรับทิศทางของเงา เงาที่เกิดจะอยูตรงขามกับทางที่เข็มชี้ไป

• Distance : ใชปรับระยะหางระหวางเงากับขอความ

• Spread : ใชปรับความเบลอของเงา

• Size :ใชปรับขนาดของเงา

5  

 

3 . Inn e r Shadow เปนการใสเงาดานในตัวอักษร มีเครื่องมือเหมือนกับ Drop

Shadow แตเพิ่มขึ้นมาอีก 2 อยางคือ

• CouTour : เลือกรูปแบบของเงา

• Noise :ปรับการกระจายของเงา

4 . Ou t e r G l ow เปนการทําใหรอบๆดานนอกของตัวอักษร คลายกับเปลงแสงออกมา มีเครื่องมือปรับแตงคือ

• Blend Mode : ใชเลือกลักษณะของแสง

• Opacity : ใชปรับความเขมของแสง

• Tachnique : ใชเลือกลักษณะของขอบแสง

• Spread : ใชปรับระยะของการเปลงแสง

• Size : ใชปรับขนาดของแสงที่เปลงออกมา

• Coutour :ใชเลือกรูปแบบของการเปลงแสง

• Range :ใชปรับความกลมกลืนของแสง

5 . Inn e r

G l ow เปนการทําใหภายในของตัวอักษร ดูคลายมีแสงเปลงออกมา เครื่องมือที่มีใชเหมือนกันกับการทํา Outer

Glow แตเพิ่ม Source ใหเลือกวาจะใหเปลงแสงที่ตรงกลาง หรือที่ขอบตัวอักษร

6  

 

6 .B ev e l and Embo s s เปนการทําใหภาพมีลักษณะนูนในหลายๆรูปแบบ โดยมีทั้งแบบนูนขึ้นและยุบลง

7 . Sa t i n เปนการใสสีเพิ่มลงไปใหกับตัวอักษร โดยมีลักษณะเปนเหลือบเงา และมีหลายรูปแบบไวใหปรับแตง

8 . Co l o r Ov e r l ay เปนการเติมสีใหมทับลงไปในตัวอักษร เมื่อยกเลิกการใชเอฟเฟกตนี้แลว สีเก

าจะยังคงอยู

9 . G rad i en t Ov e r l ay เปนการเติมสีใหตัวอักษรในรูปแบบการไลสี ซึ่งเราสามารถกําหนดลักษณะได

7  

 

10 . Pa t t e rn Ove r l ay เปนการใสลวดลายแบบตางๆ ลงไปในตัวอักษร

11 .

S t r o k e เปนการใสเสนขอบลอมรอบใหกับตัวอักษรหรือภาพ เราสามารถกําหนดสีและความหนาของเสนขอบได

สรุปการทํางานของเครื่องมือ ใน Lay e r S ty l e

Drop Shadow-

เปนการใสเงาใหกับตัวอักษรหรือรูปภาพ โดยเราสามารถกําหนดทิศทางและปรับระดับความเขมของเงาได(ทําใหตัวอักษรเหมื

อนดูลอยขึ้น)

Inn e r Shadow - เปนการใสเงาใหกับตัวอักษรหรือรูปภาพเชนเดียวกับ Drop

Shadow แตแตกตางกันตรงที่เปนการใสเงาแบบภายในวัตถุ(ทําใหตัวอักษรดูเหมือนยุบลง)

Ou t e r G l ow - ใสสีแบบฟุงกระจายภายนอกวัตถุ ทําใหตัวอักษรดูมีลักษณะเรืองแสงออกมา

Inn e r G l ow - มีลักษณะเชนเดียวกันกับ Outer Glow แตเปนการใสสีแบบฟุงกระจายภายในวัตถุ

Bev e l and Embo s s - เปนการทําใหภาพมีลักษณะนูนในหลายๆรูปแบบ โดยมีทั้งแบบนูนขึ้นและยุบลง

Sa t i n - ใสสีเพิ่มลงไปใหกับตัวอักษร โดยมีลักษณะเปนเหลือบเงา และมีหลายรูปแบบไวใหปรับแตง

8  

 

Co l o r Ov e r l ay -

เปนการเติมสีใหมทับลงไปในตัวอักษร เมื่อเรายกเลิกการใชเอฟเฟกตนี้แลว สีเกาจะยังคงอยู

G rad i en t Ov e r l ay - เปนการเติมสีใหตัวอักษรในรูปแบบการไลสี ซึ่งเราสามารถกําหนดลักษณะได

Pa t t e rn Ove r l ay - เปนการใสลวดลายแบบตางๆ ลงไปในภาพ

S t r o k e - เปนการใสเสนขอบลอมรอบใหกับตัวอักษรหรือภาพ เราสามารถกําหนดสีและความหนาของเสน http://www.siamfreestyle.com/travel-­‐tip/Type-­‐Tool-­‐Photoshop-­‐Cs5 1. 6 เทคนิคการพิมพขอความลักษณะตางๆ

1. การพิมพยอหนา

สามารถกําหนดใหขอความ จัดเรียงตัวอักษร ตามแนวดานขวา กลาง หรือ ซายไดโดยงาย

ในขณะที่ถาไมสรางกรอบ ตัวอักษรเราจะเลื่อนไปมา ไมอยูนิ่ง และไมสามารถ กําหนดใหขอความ เรียงชิดซาย และขวาได

เพื่อใหดูเปนตรงทั้งสองดานได

9  

 

การเริ่มสรางขอความแบบกําหนดขอบเขตนี้ จะทําใหเราจัดยอหนา การเรียงของขอความ และ

ตําแหนงของขอความไดงาย และเปนระเบียบมากขึ้น ซึ่งจะมาพูดถึงรายละเอียดกันใน entry หนา

2. การพิมพขอความตามเสนพาธ

สรางขอความแบบอิสระ นอกเหนือจากรูปแบบของการบิดขอความ สามารถทําไดโดย

สรางเสนและใหขอความวางตามแนวเสน เสนที่กําลังพูดถึงนี้ เรียกวาเสนพาธ (Path)

วิธีการสรางขอความบนเสนพาธ

1. ทําการสรางเสนพาธ โดยใชเครื่องมือ Pen Tool

2. คลิกเลือกเครื่องมือ สรางแบบเสนพาธอยางเดียว

3. สรางเสนพาธตามตองการ

4. เลือกเครื่องมือ Type Tool แลวคลิกที่จุดเริ่มตนของเสนพาธ

(ใหดูตอนที่วาดวาเริ่มตรงไหน)

10  

 

5. พิมพขอความที่ตองการ โดยขอความจะไลไปตามเสนพาธ

ภาพที่เสร็จสมบูรณ จะไดดังนี้

- – - – - – - – - -

3. สรางลวดลายบนขอความรูปภาพ

1. เปดลายที่ตองการ จากนั้น คลิกที่ edit--->define pattern--->ตั้งชื่อ pattern ตามตองการ--->OK

11  

 

2. New File และกดตัว T ที่คียบอรด เพื่อพิมพขอความที่ตองการ

3. คลิกที่ Add a layer style--->Pattern overlay--->เลือกPattern

12  

 

4. ถาตองการใหตัวหนังสือดูมีมิติมากขึ้น ใหเลือกที่ Drop Shadow เพื่อสรางเงาหลังขอความ

5. ไดขอความตามที่ตองการเรียบรอยแลว

http://supermaxbomb.blogspot.com/2011/03/photoshop_05.html เทคนิคเพิ่มเติม http://www.webthaidd.com/photoshop/

2. การสรางแอนิเมช่ัน

1) เปดไฟล รูปภาพทั้งหมดที่เตรียมไวสําหรับแตละเฟรม

2) ใหคลิกหนาตางของภาพที่จะใชเปนเฟรมแรก แลวกด Ctrl+A เพื่อทําการ Select All (จะเห็นวามีเสนปะขึ้นรอบภาพ)

แลวกด Ctrl+C เพื่อทําการคัดลอก

13  

 

3) กด Ctrl+N เพื่อสรางไฟลใหม ตอบ OK ไปที่หนาตางใหม ใหกด Ctrl+V เพื่อวางภาพที่กอปมาลงไป

4) ทําเชนเดียวกันกับภาพที่ 2 คือคลิกที่หนาตางของภาพที่สอง แลวกด Ctrl+A ตามดวย Ctrl+C แลวมาคลิกหนาตาง

New ที่เราสรางมาใหม แลวกด Ctrl+V ปาบบ จะได Layer ที่สองมา (สําหรับใชเปนเฟรมที่สอง)

5) ทําแบบเดยีวกันกับ ภาพที่ 3 และภาพที่ 4 สุดทายแลวที่หนาตาง New ของจะมี 4 Layer

6) ใหเปลี่ยนสภาพแวดลอม หรือ Environment ของ PhotoShop ใหเปน Motion (CS3 - 4 จะใชคําวา Animation)

เมือปรับเสร็จจะมีแถบ ANIMATION(FRAMES) ขึ้นมา

14  

 

7) ตรงนี้ใหตั้งคาการหนวงเวลาตามตองการเลย วาอยากใหนิ่งไปนานขนาดไหนถึงจะเปลี่ยนเฟรม

จากนั้นไปที่ดูที่หนาตาง Layer ใหเอาเครื่องหมายรูปตาออกจากทุก Layer เหลือไวแค Layer 1 เทานั้น

8) เสร็จไปแลว 1 เฟรม คราวนี้มาทําเฟรมที่สอง

ใหคลิกปุม Duplicates selected frames ในแถบ Animation (Frames) ใกลๆ ถังขยะ

9) ตอนนี้จะไดเฟรมที่สองมาแลว เหมือนเฟรมที่ 1 ทุกอยาง ทําเหมือนเดิม ตั้งคาหนวงเวลาตามชอบ

แลวเอาลูกตาออกจากทุก Layer ใหเหลือไวแต Layer ที่จะแสดงในเฟรมนี้ ก็คือ Layer 2

15  

 

10) ทําซ้ําจนครบทุกเฟรม แลวลองกด Play ดูผลงานวาพอใจหรือยัง เมื่อพอใจแลวก็พรอมเซฟครับ

จากไฟลตัวอยาง ที่หนาตาง ANIMATION (FRAMES) เมื่อเสร็จจะมีหนาตาแบบนี้

11) ขั้นตอนสุดทายคือการ Save ใหทานกด Alt+Ctrl+Shift+S

จะมีหนาตาง Save for web ขึ้นมา ที่ชอง Preset: ใหเลือกเปน GIF ครับอันไหนก็ไดชอบความชัดระดับไหนก็เลือกเลย

เมื่อเลือกไดแลวกด Save เปนอันเสร็จสิ้น

16  

 

เปดไฟลชมผลงานไดเลย

( ถาเปดดวยโปรแกรม Photo Viewer ที่ติดมากับ Windows7 ภาพมันจะนิ้งไมขยับ ทางแกใหทานคลิกขวาที่ไฟลภาพ

เลือก Open With แลวเลือกเปดดวย IE หรือ Firefox ไมก็หาโปรแกรม ACDSee มาลงไวใชดูภาพ)