Home Webboard ArticlesKnowledges  

ผู้เขียน หัวข้อ: Logo Animation....By Photoshop  (อ่าน 10825 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ กฤติยา

  • You Are Just Member
  • ******
  • กระทู้: 757
  • เห็นด้วย&ขอบคุณ: 193
  • หวงเหมือนไล่ ให้เหมือนเรียก
Logo Animation....By Photoshop
« เมื่อ: 15, สิงหาคม 2008, 10:56:11 PM »


1. File > New > 100x100 pixels พื้นใส

2. ใส่สีตามต้องการ

3. ขยายพื้นที่ทำงานออกข้างละ 10 ซม
(Edit>Canvas size =10x10 cm)

4. Edit>Free Transform หรือ Ctrl+T
หมุน 45 องศา ตามรูป





5. เลือกสีให้ตัดกัน ระหว่างพื้นหลังกับสัญญลักษณ์
แล้วเลือกรูปผู้หญิงหรือรูปอะไรก็ได้ตามต้องการ
ที่ Custom Shape Tool คลิกตามลูกศรในรูป




6. ลากเมาส์ในสี่เหลี่ยม ก็จะเกิดรูปตามที่เลือกไว้ขึ้นมา
เสร็จแล้วรวมเลเยอร์เข้าด้วยกัน (Merge Down)

7. ใช้เครื่องมือ Crop Tool ตัดส่วนเกินของรูปให้เหลือขนาดตามรูป

8. Duplicate Layer หรือ Ctrl+J

9. Edit>Free Transform หรือ Ctrl+T
จะปิดตาเลเยอร์แรกก็ได้ แต่ไม่ปิดจะดีกว่า
เพราะเวลาลดข้างจะให้รูปล่างและบนเท่าักัน

จะดูว่าเวลาลดข้างรูปล่างรูปบนเท่ากันไหม
ให้สังเกตุตรงยอดปลายแหลมข้างบนของรูป

10. ใช้เม้าส์กดสี่เหลี่ยมตรงลูกศร
ลากข้าง 2 ข้างเข้ามาข้างในให้เท่ากัน

พูดง่ายๆคือค่อยๆลดขนาดของรูปนั่นเอง
แต่ลดเพียงด้านข้างๆไม่ลดด้านบนและด้านล่างของรูป




11. นี่คือผลงานเลเยอร์ที่ 7 (เลเยอร์สุดท้าย)




  12. ต่อไปปิด-เปิดตา ตามรูป แล้วกระโดดไปที่ ImageReady  หรือ window animaition ใน cs ขึ้นไป





13 เพิ่มเฟรม ปิดตาเลเยอร์แรก เปิดตาเลเยอร์ต่อไป




 14 เพิ่มเฟรม แล้วทำเหมือนวิธีทำข้อ 13
จนครบถึงเลเยอร์ก๊อปปี้ที่ 7 ได้ทั้งหมด 8 เฟรมตามรูป




15 ต่อไปเฟรมที่ 9 ปิดตาเลเยอร์ก๊อปปี้ที่ 7
เปิดตาเลเยอร์ก๊อปปี้ที่ 6 ตามรูป






16. เฟรมที่ 10 ปิดตาเลเยอร์ก๊อปปี้ที่ 6
เปิดตาเลเยอร์ก๊อปปี้ที่ 5

ทำวิธีเดียวกันนี้ต่อไปจนถึงเลเยอร์เริ่มแรกคือเลเยอร์ที่ 1
แล้วคลิกเพลดูผลงาน เมื่อพอใจเซฟ.......



« แก้ไขครั้งสุดท้าย: 25, กรกฎาคม 2014, 05:08:45 PM โดย กฤติยา »



kaikimao

  • บุคคลทั่วไป
Re: Logo Animation....By Photoshop
« ตอบกลับ #1 เมื่อ: 15, สิงหาคม 2008, 11:25:04 PM »
:cry: ใช้ Photoshop CS3 ไม่มี Image Ready น่ะ

อย่าตกใจไป บน photoshop CS3 ได้รวมเอาความสามารถของ Image Ready มาไว้แล้ว

โดยสามารถใ้ช้งานความสามารถที่ว่า ได้จาก เมนู Windows -> Animation


ส่วนเวลานำไฟล์ไปใช้ ก็ใช้ด้วยเมนู
Save for Web & Devices... เลือกบันทึกให้เป็น GIF ก็นำไปใช้ได้แล้ว

แต่ว่า.... Photoshop CS3 ไม่สามารถแก้ไข GIF ที่ทำไปแล้วนี่ซิ... :undecided: ไม่มีทางแก้เลย   :cry:

ออฟไลน์ Chanchai

  • Ju
  • *
  • กระทู้: 13
  • เห็นด้วย&ขอบคุณ: 2
  • For me
Re: Logo Animation....By Photoshop
« ตอบกลับ #2 เมื่อ: 16, สิงหาคม 2008, 03:04:56 AM »
ขอบคุญครับ ความรู้ดีดี ผมลองใช่แล้ว ถือว่าใช่ได้ แต่ถ้าผมอยากจะให้มันเป็นกล่องสี่เหลียม จะต้องทำอย่างไร? ช่วยบอกด้ยครับ แพราะว่าผมอยากจะนำไปใช่ ในVDO ที่ผมตัดต่่อไว่ จะใช่เป็นโลโ้ก้สวนตัวครับ ช่วยแนะนำหน่อยครับ ขอบคุญครับ


แบบนี้ครับ
[nofollow]

ออฟไลน์ กฤติยา

  • You Are Just Member
  • ******
  • กระทู้: 757
  • เห็นด้วย&ขอบคุณ: 193
  • หวงเหมือนไล่ ให้เหมือนเรียก
Re: Logo Animation....By Photoshop
« ตอบกลับ #3 เมื่อ: 16, สิงหาคม 2008, 09:25:57 AM »
:cry: ใช้ Photoshop CS3 ไม่มี Image Ready น่ะ

แต่ว่า.... Photoshop CS3 ไม่สามารถแก้ไข GIF ที่ทำไปแล้วนี่ซิ... :undecided: ไม่มีทางแก้เลย   :cry:


แก้ได้จิ  แก้ได้เหมือนกัแหละใช้การเหมือนเดิมเดี๋ยว cs 3   จะแยก เฟรมให้เอง  เหอๆๆๆๆๆๆๆๆๆๆ

kaikimao

  • บุคคลทั่วไป
Re: Logo Animation....By Photoshop
« ตอบกลับ #4 เมื่อ: 16, สิงหาคม 2008, 12:00:38 PM »
บอกว่าไม่ได้ ก็ไม่ได้สิ  :boxing:



Adobe รุ่นใหม่ๆ เค้าพยายามหาแนวโน้มให้ผู้ใช้ ไปใช้ Flash แทนล่ะมั้ง  :undecided:

เพราะว่ามันรองรับกับอุปกรณ์รุ่นใหม่ๆ (และ Adobe จะได้ขายสินค้าของตัวเอง :cheesy: )

และ GIF ไม่ได้เป็นมาตรฐานที่ Adobe เ็ป็นคนทำขึ้นมา

อ้างอิง: (อันที่จริงต้องบอกว่าให้ไปอ่านเอง)
http://www.w3.org/Graphics/GIF/spec-gif89a.txt

ออฟไลน์ naidb

  • Ju
  • *
  • กระทู้: 173
  • เห็นด้วย&ขอบคุณ: 7
Re: Logo Animation....By Photoshop
« ตอบกลับ #5 เมื่อ: 16, สิงหาคม 2008, 02:48:51 PM »
ขอบคุณอีกครั้งครับแต่ผมทำไม่เป็นเลยสักอย่างเศร้าใจจิง :huh:

ออฟไลน์ กฤติยา

  • You Are Just Member
  • ******
  • กระทู้: 757
  • เห็นด้วย&ขอบคุณ: 193
  • หวงเหมือนไล่ ให้เหมือนเรียก
Re: Logo Animation....By Photoshop
« ตอบกลับ #6 เมื่อ: 25, กรกฎาคม 2014, 05:09:37 PM »

นี่คือผลลัพธ์ โลโก้ภาคนี้







  หากว่าทำโลโก้ภาคแรกได้ ภาคนี้ก็สบาย
เพราะอะไรดูที่รูป ที่กระทู้นี้จะอธิบายคร่าวๆ
เพราะรายละเอียดอยู่ที่กระทู้ข้างบนหมดแล้ว

วิธีทำ..

1. เมื่อทำเลเยอร์ที่ 1 เสร็จก็ทำเลเยอร์ที่ 2ต่อเลย

2. พักเลเยอร์ที่ 2 ไว้ เริ่มทำเลเยอร์ 1 ก๊อปปี้ต่อไป
เหมือนกับ Logo Animation ภาค1 กระทู้ล่างนั่น
ตามลิงค์ข้างบนไปดู

3. เมื่อเลเยอร์ที่1 เสร็จก็ทำเลเยอร์2 ก๊อปปี้ต่อไป
เมื่อเสร็จแล้วจะได้เลเยอร์เหมือนดังรูป
ปิดตาดังรูปแล้วกระโดดไปที่ ImageReady or window animation on cs up





 4. เิ่พิ่มเลเยอร์เปิดตาปิดเหมือนในรูป
สังเกตุเฟรมตามรูป



 5. สังเกตุเฟรมที่ 9 กับตาเลเยอร์ 2 ก๊อปปี้ 6...







6. สังเกตุเฟรมและดวงตาที่เลเยอร์เวลาทำ
จะเห็นว่าใช้เฟรมทั้งหมด 30 เฟรม






ผลลัพธ์อยู่ข้างบนค่ะ

วิธีทำมีเพียงเท่านี้ค่ะ ถ้าใครมีไอเดียที่ดีกว่านี้
เอามาแบ่งปันกันบ้างนะค่ะ

 

Sitemap 1 2 3 4 5 6 7 8 9 10 
Back to top