Group Blog
 
 
สิงหาคม 2551
 
 12
3456789
10111213141516
17181920212223
24252627282930
31 
 
29 สิงหาคม 2551
 
All Blogs
 

มาทำตัวอักษรกระพริบ + ปุ่ม ลิงค์กันไหมครับ

วันนี้จะมาแนะนำ เผื่อเพื่อน บางคนที่เพิ่งหัดทำ Photoshop
หรือกำลังหัดตกแต่ง บล๊อกนะครับ
ซึ่งผมได้ใช้ Photoshop เป็น CS2 นะครับ


ออกจะยาวสักหน่อยนะครับ แบบว่า อยากทำให้เข้าใจง่าย (รึเปล่า!!! ละเนี้ย คิคิ)

"มาทำปุ่มลิงค์ ตัวหนังสือกระพริบกันเถอะ"
แบบรูปนี่ครับ


เอาละ มาเริ่มกันเลยครับ
เริ่มแรก เปิดงานขึ้นมาใหม่ครับ
กำหนดขนาด ตาม Pixel เลยครับ
Width = 240 px
Height = 100 px
Resolution = 72 px
Background content = Transparent

ต่อจากนั้นก็คลิ๊ก OK ครับ ดังรูปครับ


แล้วเราจะได้ชิ้นงาน เป็นแบบนี้ครับ เป็น Layer ที่ 1 ครับ


ต่อจากนั้นเราจะมาสร้าง พื้นสีของปุ่มกำก่อนนะครับ
คลิ๊กที่เครื่องมือ Rectangular Tool ครับ
กดค้างไว้ เพื่อเลือกใช้ ตัวเครื่องมือ Round Rectangular Tool หรือ สี่เหลี่ยม ขอบมนโค้ง ครับ

1. คลิ๊กเลือกกำหนดการสร้างสี่เหลี่ยม ขอบมน ครับ
2. กำหนด ขนาดของขอบมน ในชิ้นงานนี้ ผมกำหนด ให้เป็น 5 mm. ครับ
3. กำหนด สีของชิ้นงานครับ
4. ลากเพื่อสร้างชิ้นงานครับ ให้เหลือขอบๆ ไว้นะครับ อย่าเต็ม พื้นงานซะทีเดียวนะครับ

จากนั้นเราก็มาต่อกัน ที่พิมพ์ตัวอักษรลงไปครับ


1. คลิ๊กเลือกที่เครื่องมือ Type Tool
2. กำหนด รูปแบบตัวอักษร ลักษณะ (หนา เอียง) ขนาดตัวอักษร
3. กำหนดสีตัวอักษร
4. พิมพ์ตัวอักษร
Tip: ถ้าเราคลิ๊กจะพิมพ์ ที่พื้นที่สีฟ้า หรือพื้นสี่เหลี่ยมกรอบมน ที่เราสร้างไว้
จะเป็นการสร้างตัวอักษรในกล่องสี่เหลี่ยมครับ
เพราะฉะนั้นให้เราคลิ๊กสร้างตัวอักษรนอกชิ้นงานครับ คือนอกพื้นที่ของชิ้นงานเลยครับ
มันจะมองไม่เห็นตัวหนังสือที่เราพิมพ์ไป แต่เดี่ยวเราค่อยเลื่อนขึ้นมา แล้วค่อยมาแก้ไขได้ครับ
แบบนี่ครับ


Tip: เมื่อทำการปรับขนาด ตัวหนังสือ ยืดหรือย่อ แล้วอย่าลืมกด Enter หรือเครื่องหมายถูก บน Tool Bar นะครับ
มิฉะนั้นจะไม่สามารถเลือกเครื่องมืออื่นมาใช้งานได้ครับ
Tick: เพื่อไม่ให้ขนาดของตัวอักษรผิดสัดส่วน การย่อ หรือยืด ควรกด Shift ร่วมด้วยครับ สัดส่วนจะได้ไม่เสียนะครับ

ต่อจากนั้นเราจะมาสร้าง ตัวหนังสือเพิ่ม อีกสาม Layer ครับเพื่อเปลี่ยนสีตัวอักษร
เพื่อเราจะกำหนดการเปลี่ยนสีตัวอักษรครับ

1. คลิ๊กเลือกเลยเยอร์ ตัวอักษร ครับ ลากไปที่ New Layer ครับ
2. เมื่อลากมาถึงที่ New Layer แล้วปล่อยครับ
เราจะได้Layer ใหม่ ที่ Copy มาเรียบร้อย แต่ตำแหน่งเดียวกันเลยครับ คิคิ
ลากเพื่อสร้าง Copy Layer ทั้งหมด 2 ครั้งนะครับ

Tick: สังเกตุ ตัวอักษรจะมีสีเข้มขึ้นมาก เนื่องจากLayer ที่เราสร้างมาซ้อนทับกันครับ

ต่อจากนั้นจากจะมาเปลี่ยนสีตัวอักษร ทีละ Layer นะครับ
โดย Layerแรก ที่เรากำหนดเป็นสีน้ำเงิน เราจะไม่ทำครับ (เพราะจะให้เป็นสีน้ำเงินนั้นแหละ)
แต่ก่อนนั้น เพื่อป้องกันการ "งง" เราจะมาเปลี่ยนชื่อ Layer กันครับ
Double Click ที่ Layer ครับ แล้วเปลี่ยนชื่อคับ
(ในที่นี้ผม กำหนดให้เป็น อักษร 1,2,3 ) ครับ


จากนั้น เราจะมาเริ่มเปลี่ยนสีตัวอักษรที่ "อักษร 2" กันก่อนครับ
ให้คลิ๊กที่ลูกตา ที่ Layer อักษร 1 และ อักษร 3 ตามภาพครับ


จากนั้น เลือก Layer อักษร 2
เลือกเครื่องมือ Type Tool เพื่อเปลี่ยนสีตัวอักษร ครับ


1. คลิ๊ก เลือก Layer อักษร 2 ก่อนนะครับ
2. แล้วเลือกเครื่องมือ Type Tool
3. เลือกตัวอักษรทั้งหมด
4. เลือกสีที่ต้องการ
5.อย่าลืม เลือกเครื่องหมายถูก หรือกด Enter


เมื่อคลิ๊กเลือก ดับเบิ้ลคลิ๊กที่ช่องเปลี่ยนสี จะปรากฎหน้าต่างดังภาพบน
สังเกตุสีที่เปลี่ยนไปในช่องดาวนะครับ

เมื่อเปลี่ยนสีเสร็จ ดังภาพบน ก็มาเปลี่ยนที่ Layer "อักษร 3" ต่อครับ
(ทำในลักษณะเดียวกับ Layer "อักษร 2" เลยครับ แต่ให้เลือกคนละสีนะครับ)

อะลืม บอกไปว่าผมได้ใส่ Out Glow Effect เข้าไปด้วย ทำดังนี้ครับ

เลือก Add a layer Style ด้านล่าง ของ Pallate Layer ครับ


จะมี Dialog Box ขึ้นมา เลือกไปที่ Outer Glow ครับ


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

เท่านี้ก็ได้ตัวอักษร มีการฟุ้งกระจายเป็นสีขาวรอบๆๆ ละครับ
อ้อ อย่าลืมไปทำกับ Layer ตัวอักษร1 และ 2 ด้วยนะครับ

ทีนี้มาขั้นตอนการตัดต่อรูปครับ
ไปเปิดรูปที่คุณต้องการนะครับ ในที่นี้ผม จะใช้เป็นรูปอุลตร้าแมนครับ
เปิดรูปขึ้นมาให้ โจ๊ะเด๊ะ!!!


ต่อจากนั้นเลือกเครื่องมือ Lasso Polygranon Tool
ค่อยคลิ๊กเลือกส่วนที่เราต้องการนะครับ จนครบ
(ในกระณีต้องการเพิ่ม ตำแหน่งอื่น ให้กด Shift ก่อนครับ แล้วค่อยเลือก)
Tip: เครื่องมือนี้ จะต้องค่อยเลือกจุด รอบๆๆ รูปที่เราต้องการครับ และเมื่อจะจบชิ้นงาน คือจุดที่
มีการต่อกันของเส้นที่เราเลือกไว้ จะมีลักษณะ เป็นจุดกลมๆๆ ขึ้นมา ที่ Pointer ครับ
Tick: ใครถนัดเครื่องมืออื่นก็ได้นะครับ เครื่องมือการเลือก ตัดรูป วันหลังผมจะมาสอนเพิ่มครับ


เมื่อเราทำการเลือกเสร็จแล้วเราจะได้ Selection มาเป็นที่อยู่ภายใน จุดไข่ปลา วิ่งได้นะครับ
และเรามาขั้นตอนต่อไปครับ คือการลากรูป จากรูปที่เราเลือกไว้ ไปชิ้นงานที่เราทำไว้ครับ


คลิ๊กเลือกเครื่องมือ Move Tool แล้วมาลากจากชิ้นงาน ไปอีกชิ้นนึง ดังภาพเลยครับ
จากนั้น ก็จัด ปรับ ขนาด ตำแหน่งให้เหมาะสมครับ
อ้อ!!! อย่าลืมกด Shift เวลาย่อรูปนะครับ จะได้ไม่ผิดสัดส่วน

ขั้นตอนต่อไป เราก็จะสร้าง Layer ใหม่ ให้คลิ๊ก icon New Layer ที่ด้านใต้  Pallate Layer ครับ



เมื่อเราสร้าง Layer ใหม่มาแล้ว จะเป็นLayer เปล่าครับ ที่นี้เราจะมาทำรอบตัวอุลตร้าแมนให้ฟุ้งกระจายครับ

ใช้เครื่องมือ Brush Tool ครับ



เลือกหัวแปรงให้เป็นแบบฟุ้งกระจาย ขนาดประมาณ 17 px ครับ
และอย่าลืมเปลี่ยนสีเป็นสีขาวก่อน ป้ายสีลงไปนะครับ



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


จากนั้นก็ลาก Layer บนลงมาอยู่ใต้ layer รูปอุลตร้าแมนครับ ก็จะ เป็นไปฟุ้งอยู่หลังอุลตร้าแมนละครับ



หลังจากนั้นเราก็ ปรับ ให้การมองเห็นหรือความเข้มจาง ที่ Opacity ครับประมาณสัก 70% นะครับ

เท่านี้เราก็จะได้ชิ้นงาน มาพร้อมเตรียมพร้อมที่จะทำให้มันกระพริบ หรือเป็น Animation Gif เบาๆๆ ได้ละครับ

จากนั้นเราก็ คลิ๊ก ตรงนี้ครับ คือ Edit in Image Ready


หน้าตาออกมาจะเป็นแบบนี้ ครับ โจ๊ะ เด๊ะ


สังเกตุ จะมีหน้าตาคล้ายๆ Photoshop มีหน้าต่างของ layer เหมือนที่เราทำไว้ใน photoshop
แต่ที่พิเศษเพิ่มมาคือ มี Animation อิอิ ตรงนี้แหละที่สำมะคัญ
มา ต่อ ต่อ


ให้เลือกปิดตา ตรงส่วนที่เราจะค่อยๆ แสดงนะครับ
ในที่นี้ ผมให้เลือกเปิดตาที่ พื้นหลัง ตัวอุลตร้าแมน และตัวอักษร 1
ส่วน ตัวอักษรที่เหลือ จะให้แสดงถัดไปครับ พร้อมกันเงาฟุ้งหลังอุลตร้าแมน



จากนั้นคลิ๊กเพิ่ม Frame ที่หน้าต่าง Animation ขึ้นมาอีก สองอัน
ที่เราเพิ่มแค่สองอันเพราะเรามีตัวหนังสือให้กระพริบแค่สามสี จำได้ไหมครับ



จากนั้นเราคลิ๊ก Fame ที่สองครับ แล้วไปจัดการกับ Layer โดยเลือก
ปิดตา อักษร 1 และเปิดตา อักษร 2 กับ เงาฟุ้ง ครับ

ไป Fame 3 กันต่อครับ



เฟรมที่สาม เราก็เลือกตาแค่ อักษร 3 เท่านั้น กับตัวอุลตร้าแมนครับ
ขั้นตอนต่อไปจะเป็นการกำหนดเวลาในการแสดงครับ



ให้กด Shift แล้วเลือกทั้ง 3 Frame ครับ และคลิกตรงลูกศรลงเล็กๆๆ ใต้ Frame ครับ
จะโผล่ Dialoug เวลาเป็น วินาทีมาให้เลือกครับ
ผมเลือกเป็น 0.1 วินาทีครับ



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

ต่อไปเป็นการเซฟงานละครับ จะเสร็จแล้วเย้เย้



ให้เลือกเซฟ เป็น Save Optimized As.... นะครับ

จากนั้นก็ตั้งชื่อ และเซฟ เป็นนามสกุล Gif ครับ เป็นอันเรียบร้อย คิคิ



ยากไปไหมครับ
รูปเยอะหน่อยนะครับ ไม่รู้จะทำให้เข้าใจขึ้นหรือเปล่า คิคิ ลองทำกันดูละกันนะครับ

อ้อ !!! เสร็จ แล้วก็เอาไปฝากรูป ตามเว็บ นะครับ แล้วก็เอา URL มาใช้ได้ละครับ

ที่นี้เราก็จะได้รูปที่เป็น ปุ่ม Link หรือจะเอาทำเป็นอะไรก็ได้หรือแต่เพื่อนๆๆ Apply เอานะครับ

หวังว่าคงมีประโยชน์ ไม่มากก็น้อยนะครับ




 

Create Date : 29 สิงหาคม 2551
4 comments
Last Update : 29 สิงหาคม 2551 17:46:48 น.
Counter : 5226 Pageviews.

 

ขอบคุณมากเลยค่ะ

จะลองหัดทำดูนะคะ ^_^

 

โดย: พรายน้ำฟ้า 29 สิงหาคม 2551 19:04:40 น.  

 

ทำไมเราทำแล้วไม่เห็นมี animation เลยล่ะ เกือบจะทำเสร็จอยู่แล้ว แต่ไม่มี animation ขึ้นเลย

 

โดย: nongaor-nong 12 กันยายน 2551 18:44:13 น.  

 

อ้อ..ได้แล้วค่ะ
ขอบคุณนะคะ

 

โดย: nongaor-nong 12 กันยายน 2551 19:06:23 น.  

 

เง้อพี่เต้ย..เลิกสอนถักตุ๊กตา มาสอนทำ photoshop แล้วเหรอค่ะ.....

งึม งึม..จะลองหัดทำดูน๊า บล็อกเค้าจาได้น่ารักเหมือนของพี่เต้ยบ้าง....

ขอบคุณค้าบบ

ป.ล. คิดถึงนะพี่ แล้วเจอกันตอนมีตติ้งสิ้นเดือนนี้นะค่ะ...

 

โดย: ปุ๊กปิ๊ก (Molajung ) 8 ตุลาคม 2551 21:51:27 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 


UltraToey2322
Location :
กรุงเทพฯ Thailand

[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 2 คน [?]




♥ ยินดีต้อนรับ เข้าสู่บล๊อก คนบ้างานถักตุ๊กตาครับ ทำไปเรื่อยๆ ตามอารมณ์ ศิลปินครับ ไม่อยากทำ ก็ไม่ทำ ดองงาน เหอเหอ ตอนนี้กำลังแต่งบล๊อกเรื่อยๆ ครับหาความลงตัว อิอิ มีอะไร หลังไมค์ครับพี่น้อง ♥


ส่งข้อความถึง"UltraToey"ได้ทาง
หลังไมค์
My Friend Flock
My Hi5








Friends' blogs
[Add UltraToey2322's blog to your web]
Links
 

MY VIP Friend

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.