Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Photoshop [Ps]17. วิธีทำแบนเนอร์ Animation ด้ ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 8530|ตอบ: 0
go

[Ps]17. วิธีทำแบนเนอร์ Animation ด้วย Photoshop CC

Rank: 7Rank: 7Rank: 7

โพสต์เมื่อ 3-10-2015 04:22 |แสดงโพสต์ทั้งหมด
[Ps]17. วิธีทำแบนเนอร์ Animation ด้วย Photoshop CC

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

1. สร้างไฟล์ใหม่ขึ้นมา โดยไปที่คำสั่ง File > New...


- กำหนดค่าความกว้าง * สูง ของภาพ แล้วกดปุ่ม "OK"


2. เปิดแฟ้มที่เก็บภาพที่จะใช้ แล้วให้แดรกเม้าส์เลือกภาพทั้งหมดลากลงมาปล่อยทิ้งยังพื้นที่วางที่ไฟล์ภาพใหม่ที่เพิ่งสร้าง


- ภาพไฟล์ที่ลากลงมาปล่อย จะมีสัญลักษณ์ "กากบาท" (ดังภาพล่าง) ให้กดปุ่ม "Enter" ให้ครบทุกภาพที่ลากลงมา


3. จากนั้นให้ไปที่คำสั่ง Window > Timeline


-  พาแนล "Timeline" จะถูกเปิดขึ้นมา ถ้าปุ่มตรงกลางยังแสดงคำว่า "Create Video Timeline" อยู่ก็ให้คลิกที่ลูกศรข้างๆ เลือกเป็นคำว่า "Create Frame Animation" แทน


- แล้วให้คลิกที่ปุ่ม "Create Frame Animation"  1 ครั้ง


- เฟรมแรกจะแสดงขึ้นดังภาพล่างค่ะ


4. เราจะเริ่มจะกำหนดภาพเฟรมที่จะเล่นขึ้นมาก่อน โดยให้คลิกปิดตาซ่อนเลเยอร์ทั้งหมด เหลือแค่เลเยอร์ที่เราต้องการให้แสดงเป็นภาพแรก


- คลิกที่ปุ่มลูกศรเล็กๆด้านล่างช่องแสดงภาพ เพื่อกำหนดเวลาหน่วงที่จะแสดงภาพนั้นๆ ที่ 0.5 - 1.0 ถือว่าความเร็วกำลังดีค่ะ แต่ถ้าในภาพมีข้อความตัวอักษรอยู่ด้วยมาก ก็ต้องเพิ่มเวลาหน่วงขึ้นอีกหน่อยเพื่อให้คนมองภาพ อ่านตามทัน


5. สร้างเฟรมที่ 2  ต่อเลยค่ะ โดยให้คลิกที่ปุ่ม "Duplicates selected frames"  (ดูตามภาพล่าง)


- แล้วเปิดตาเลเยอร์เฉพาะที่คุณต้องการให้แสดงเป็นภาพต่อไป


- กำหนดเวลาหน่วงที่ด้านล่างของเฟรมภาพที่ 2 ให้เรียบร้อย (ถ้าคุณไม่ได้กำหนด โปรแกรมจะยึดค่าหน่วงตามเฟรมก่อนหน้าที่คุณกำหนดไว้แทน)- คลิกที่ปุ่มลูกศร เพื่อเลือกให้การเป็นภาพเป็นแบบ "Forever" คือสั่งเล่นวนซ้ำๆไปเรื่อยๆไม่ต้องหยุด (Once คือเล่นครั้งเดียวหยุด / 3 times คือ เล่น 3 ครั้งหยุด )


6. บันทึกไฟล์โดยให้ไปที่คำสั่ง  File > Save for Web...


- เลือกประเภทของภาพให้เป็นชนิด "GIF" แล้วคลิกที่ปุ่ม "Save..."


- ใส่ชื่อภาพ และกดปุ่ม "Save"


เสร็จแล้วค่ะ เมื่อเปิดภาพขึ้นมาดูก็จะแสดงเป็น animation เปลี่ยนไปมาอย่างที่เห็นค่ะ



โค๊ด HTML สำหรับทำให้ภาพที่บนเว็บกลายเป็นปุ่มคลิก เพื่อเรียกหน้าเว็บไซต์อื่นขึ้นมา คือ
  1. <a href="url ที่จะถูกเรียกขึ้นมาเมื่อถูกคลิก"  target="ใส่อะไรก็ได้"><img border="0" src="Url ที่เก็บภาพ" /></a>
คัดลอกไปที่คลิปบอร์ด

ที่ target="ใส่อะไรก็ได้" เป็นคำสั่งให้เรียกหน้าเว็บอื่นขึ้นมาโดยการเปิดที่หน้าใหม่ เช่น target="555" ถ้าไม่ใส่จะเป็นการกำหนดให้เรียกหน้าเว็บใหม่ขึ้นมาแทนที่หน้าเดิมที่เปิดอยู่แล้วค่ะ

ตัวอย่าง
  1. <a href="http://www.omsin.net" ><img border="0" src="http://www.omsin.net/image/banner_220x102_service.gif" /></a>
คัดลอกไปที่คลิปบอร์ด



แล้วพบกันใหม่บทความหน้านะคะ  

บทความโดย NOOKFUFU2
(!!!ขอสงวนสิทธิ์ให้เผยแพร่เฉพาะในเว็บไทยกราฟเท่านั้น)
ไฟล์แนบ: คุณจำเป็นต้องเข้าสู่ระบบก่อนจึงจะสามารถดูและดาวน์โหลดไฟล์แนบได้ หากยังไม่มีแอคเคานต์หรือยังไม่ได้เป็นสมาชิก กรุณาสมัครสมาชิก
บางบทความคุณจำเป็นต้องสมัครสมาชิกแบบ VIP และ SUPERVIP ถึงจะเข้าอ่านบทความได้

Thaigraph

GMT+7, 20-9-2017 03:38 , Processed in 0.112413 second(s), 21 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books