Thaigraph

 

   

ค้นหา
Thaigraph หน้าย่อย Photoshop [Ps]17. วิธีทำแบนเนอร์ Animation ด้ ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 6096|ตอบ: 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, 21-2-2017 07:38 , Processed in 0.032967 second(s), 21 queries .

Powered by Discuz! X1.5

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