-->

วันศุกร์ที่ 24 ตุลาคม พ.ศ. 2557

Banner Basic 2 : ภาพเคลื่อนไหววิ่งสนั่นในแบนเนอร์ เหมือนจะยากแต่ก็ง่าย?








หนูอยากด๊ายยยยย....อยากได้อ่ะ!!!
แบนเนอร์ที่มีภาพ .gif วิ่งว่อนในแบนเนอร์ เหยยยย.....มันใช่เลยอ่ะะะ!! อยากได้อ่ะะะ!!


เอาแบบนี้อ่ะะะ แบบนี้เลยยยย ......



ย่อมได้! งั้นป้าจัดให้เลยยยยย =w=+
ระดับความยาก-ง่าย อยู่ในระดับ B-B+ (เริ่มยากขึ้นล่ะ)



มาเตรียมเครื่องมือกันเถอะจ้ะะะ

- ไฟล์รูป .gif 1 รูป (ขอเลยว่า ถ้าเพิ่งหัดทำ อย่าเลือกรูปเคลื่อนไหวเยอะๆ แล้วจะหนาววว)
- ไฟล์รูป .png 1-2 รูป ตามแต่อยากจะใช้
- pattern ลายทางแนวตั้งถี่กลางๆ



พรีเซ็นเตอร์ที่หลายคนรักและห่วงใย...เพราะป้าคิดถึงนะ เลยขอเชิญมาเป็นแบบน่ะ #ยิ้มมมม
//แหมมม....หยั่งกับเราอายุ 30 - -* ช่างเถอะ เรียกติดปากซะและะ 55555



จริงๆ จัดว่าภาพเคลื่อนไหวเยอะโหดนะเนี่ยยยะะะะ 55555



แพธเทิร์นตัวเองใช่ดิบใช้ดีอ่ะะะะ ชอบบบบ! //เป็นแพธเทิร์นโปร่งใส มันเริ่ดนะ อยากจะบอกกก


สำหรับ CS4 ภาพเคลื่อนไหวเราต้องแตกไฟล์ภาพเคลื่อนไหวทีละภาพเอง
ของ CS6 น่าจะอัตโนมัติเลยมั้งงง?? //ไม่แน่ใจนะ

เอาล้ะะะ....เรามีตัวช่วยในการแตกแยกไฟล์รูป .gif ด้วยโปรแกรม GIFSplitter < โหลดเลยยย
เราต้องสร้าง folder 1 ครั้งต่อการแตกไฟล์ภาพดคลื่อนไหว 1 ภาพ


วิธีใช้ไม่ยากกกกกกก แป๊ปเดียวเสร็จ!!





ผลงานแบนเนอร์เคลื่อนไหว พี่ลู่ก็อลังการไม่แพ้เฮียเลยล้ะะะะ 555555





มาเริ่มกันเลยก็แล้วกันนน!!



สร้างหน้ากระดาษขนาด 250 x 70 ตั้งค่า background content เป็น transparent




เปิดไฟล์ภาพทั้งหมด (รวมถาพเคลื่อนไหวที่แยกไฟล์เรียบร้อยแล้วด้วยนะ)
จัดระเบียบาพนิ่งให้เรียบร้อย ส่วนภาพเคลื่อนไหวที่ลากมาทั้งหมด (ของป้ามี 20 ภาพ)
ให้ทำการจัดระเบียบตำแหน่งให้ตรงกันทุกรูป ไม่งั้นตอนสั่งเคลื่อนไหว ได้มีแก้งานปวดเฮดแน่ๆ




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




มาถึงเวลาลบล้างส่วนเกินนอกกรอบรูปกัน โดยใช้ Magic wand tool คลิกเดียวก็จบ
คลิกนอกกรอบรูปที่เราวาดเสร็จ แล้วไปเลือกเลเยอร์รูปภาพที่เกินกรอบรูป(ภาพเคลื่อนไหว)
ลบมันให้ครบทุกภาพ แต่อย่าเผลอลบผิดเลเยอร์นะจ๊ะ!!




ต่อมาก็ตกแต่งพื้นหลังให้มีราศีความสวยด้วยการเพิ่มเลเยอร์
กรณีพื้นหลัง จำไว้ว่า เลเยอร์ต้องอยู่ล่างๆ หลังรูปภาพทั้งหมด!
แล้วใช้ Lasso tool ขีดวาดลากเละ(??) และเทสีลงไป + เทแพธเทิร์นลายทางด้วย จะได้ไม่จืดชืด




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




 แล้วเราก็ใส่ข้อความหลังประดับความมุ้งมิ้งเสร็จ




มาถึงเวลาลำบากขึ้นมาอีกนิดดดด อาจจะงงจนไม่เข้าใจ
แต่ถ้าลองทำตาม ลองผิด ลองถูก มั่วไป มั่วมา แล้วจะแตกฉานได้เองอย่างแท้จริง #ศัพท์สูงจริงงง!!

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

กรณีนี้ ภาพเคลื่อนไหวที่ป้าแตกมา มี 20 ภาพ และเริ่มใน layer 2 - 21 (นับได้ 20 ภาพนะ)
//layer 1 คือสีพื้นนะจ๊ะ//
จึงต้องเพิ่มเลเยอร์อนิเมชั่นให้ได้ 20 เลเยอร์ พอดีกับภาพเคลื่อนไหวที่เตรียมไว้

มาจุดที่หลายคนไม่เข้าใจกันมากกกกกกก
เอาล่ะ ขอแยกประเภทก่อน
เลเยอร์ = เลเยอร์ของรูปภาพ / เลเยอร์อนิเมชั่น = เลเยอร์ของ Animation

ส่วนที่ปิดตาเลเยอร์นั้น เราปิดตาได้เฉพาะเลเยอร์ของรูปภาพ (แถบที่อยู่ทางขวามือ) อย่างเดียว

ตอนนี้ให้ไปที่ช่องเลเยอร์อนิเมชั่นช่องที่ 1 และทำการปิดตาเลเยอร์รูปภาพเคลื่อนไหวทั้งหมด!

**เวลาเรียงภาพอนิเมชั่น แนะนำควรลากภาพเคลื่อนไหวที่แยกไฟล์แล้วแบบถอยหลัง
เช่น มี 20 ภาพ ให้นำภาพที่ 20 ลากมาไว้ในงานของเราจนถึงภาพที่ 1
เมื่อเวลาไล่เปิดตาเลเยอร์รูปภาพจะง่ายมากขึ้น ไม่ต้องมาไล่ปิดให้สับสน

ตอนนี้ในช่องของอนิเมชั่นทุกช่องไม่มีรูปภาพเคลื่อนไหวเลย

ให้เปิดตาภาพแรก เรียงไปถึงภาพสุดท้าย
ใครเรียงภาพแบบหลังมาหน้า สามารถทำตามที่บอกได้เลย

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

ทำให้ครบ 20 เลเยอร์อนิเมชั่น *ต้องตรงกับเลเยอร์ภาพเคลื่อนไหวของเราด้วย

เสร็จแล้วก็ลองเทสด้วยการเคะา space bar 1 ครั้ง เพื่อเช็คกว่ามันวิ่งเคลื่อนไหวถูกหรือไม่
ถ้าไม่ก็กด space bar อีกครั้งให้หยุดแล้วไปแก้งานซะนะ

#ใครไม่เข้าใจเม้นท์มาโล๊ดดดดดดด!! #ยังไม่มีโอกาสสอนในยุทูปเลยยย T T




วิธีเซฟไม่ยากเลยยยยยย
ไปที่เมนู file > save for web & devices > save จ.บ. ได้ไฟล์ .gif แล้วจ้ะะะะ




ภาพเคลื่อนไหววิ่งสนั่นในแบนเนอร์ เหมือนจะยากแต่ก็ง่าย? #อันนี้จริงนะ #เหมือนจะยากแต่ก็ง่าย


ขอขอบคุณที่หลายคนอดท๊น อดทน นั่งอ่าน นั่งทำตาม
ถึงมันจะออกมาไม่ใช่ ไม่เหมือนที่อธิบายเลยซักกะติ๊ดดดดด!!
แต่ยังอุตส่าห์พยายามที่จะฝึกฝน ทำความเข้าใจในตัวอะชอป อันนี้ขอนับถืออย่างแรง!
และขอบคุณที่พยายามถาม พยายามอ่าน พยายามเรียนรู้ และมั่วผิดถูกกับอะชอป

ป้าจะพยายามสร้างบทความที่ดีกว่านี้ขึ้นมาเรื่อยๆ นะ
ปอลอ. บทความ 5 บทความ (โดยเฉพาะอิโปสเตอร์อันแรกแสนกากเผานรกนั่น! - -*)
มันเผือกเละเทะมากโคตรเลยอ่าาาาา แบบ....ใกล้สอบไม่พอนะ ดันมีงานการบ้านก่อนสอบถึง 9 ชิ้นอ่ะ!
คือสั่งมาไม่ดูเลยนะว่าคนจะสอบแล้วอ่ะะะะ = =" แต่ก็ปั่นจนเกือบครบ ข้ามบ้างบางงาน
เพราะสังขารไม่ไหวแล้ว แดหลับ อดนอน โต้รุ่ง จนแม่นั่งด่าทุกคืน 555555
ก็เพื่อนั่งปั่นงานมหาโหดกินนี่แหละ - - ต้องผ่านทุกวิชา แม้จะยังไม่ได้อ่านซักแอะ -0-
อีก 2 วันสอบจริงไฟนอล ทำไมเหมือนโดนไฟรนตูดเลยอ่ะ =w="

#นี่ป้ากำลังระบายใช่ไหมมมมมม 55555555