Banner Basic 1 : ดูเรียบแต่หรู เอฟเฟคสลับภาพไปมา เก๋เบาๆ อ๊ะะ!

สำหรับบทความนี้ขอเปลี่ยนการสอนจากโปสเตอร์ เป็น แบนเนอร์แทนก็แล้วกัน

เพราะโปสเตอร์น่ะ หลายๆ คนก็คงทำได้กันแล้วล่ะ ..... ใช่ป้ะะะะ? 555555 #ผิดดดดดด!!

เอาเป็นว่า ถ้าใครติดตามและนั่งอ่านวิธีทำโปสเตอร์มา 2 บทความ

และลองหัดใช้ หัดทำหัดลองผิดลองถูก กับโปรแกรมอะชอปบ่อยๆ

ป้ามั่นใจเหลือเกินว่า ลูกหลานของป้าก็พอทำได้มาบ้างแล้ว (หรือไม่ได้หว่าาา?? 555555)

อย่างที่บอกไปทุกๆ บทความเลยนะ

ไม่เข้าใจ ข้องใจ งง ไม่รู้เรื่อง นี่มันอะไรฟ๊ะะะะะะ!! ก็เม้นท์มาสอบถามกันได้

ทั้งในบล็อค และในเด็กดี หรือหน้าแฟนเพจก็ได้เน้อววว์   >> Theseeker Reki <<

เอาล้ะะะะ.....มาเตรียมอุปกรณ์กันนน!!

- ไฟล์รูปภาพ นามสกุล .png 1-4 รูป ตามใจนะว่าจะกี่รูปก็ได้จ้ะ (ป้าเอามา 4 รูปเลย =w=)

- pattern (ลายไหนก็ได้ตามใจ) ในกรณีของป้าขอใช้ ลายสี่เหลี่ยมบล็อคลายเดียวจอดดด...

แนะนำว่าเป็นไฟล์ .png นะ จะได้ไม่เสียเวลาตัดต่อให้วุ่น =w=

ส่วนแพธเทิร์นของป้าใช้ลายสี่เหลี่ยมบล็อคลายเดียว จ.บ. >> โหลดได้เลยยย <<

และนี่คือผลงานสำเร็จเสร็จสมบูรณ์ของแบนเนอร์! เว้อออออ.... 55555

งานเรียบแต่หรู เอฟเฟคสลับภาพไปมา เก๋เบาๆ อ๊ะะ! //ตรงคอนเสปป้ะะะ? 555555

ลืมบอกเรื่องระดับยาก-ง่ายเลยแหะ สำหรับบทความนี้ C+-B+ ยากกว่าโปสเตอร์เฮียคริสหน่อยเดียว

ดังนั้น มันไม่ยากหรอก จริงไหมมมม #ไม่เลยยยยย!! 555555

จะยังไงก็ช่าง ถึงมันจะยาก หรือไม่ค่อยเข้าใจ และหากปล่อยให้มันผ่านไป หรือนั่งดูผ่านๆ

สุดท้าย....ก็ทำไม่ได้อยู่ดี ต่อให้มีครูมาสอนก็ตาม ถ้าไม่คิดจะหัดลองทำ ผิดๆ ถูกๆ

ก็ไม่มีวันใช้งานอะชอปเป็นหรอกนะ #พูดตรง #ทิ่มแทง #สอนให้เข้าใจ #แรงก็ขอโทษนะ

เมื่ออ่านตรงจุดนี้ให้เข้าใจแล้ว ก็มาเริ่มกันเถอะ!!

สร้างหน้ากระดาษขึ้นมาใหม่ ขนาดของแบนเนอร์ในเด็กดีคือ 250 x 70 px

อย่าลืมปรับเป็น transparent ด้วยล่ะ (background contents)

สร้างเลเยอร์ขึ้นมา 4 เลเยอร์

เลเยอร์ 1 - เทสีพื้นๆ

เลเยอร์ 2 - เทแพธเทิร์นโปร่งใส (ลายตารางที่ป้าเตรียมไว้)

เลเยอร์ 3 + 4 - ใช้ Lasso tool สร้างกรอบโซ่วิ่งได้แล้วเทสีอย่างละสี/เลเยอร์

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

จัดภาพเรียบร้อยก็ใส่ข้อความซะ

เหมือนจะจืดไปนิดนึงงงง อ่ะ! จัดให้....ละเลงการตกแต่งด้วยบรัชบ้านๆ แต่ใช้บ่อยสุด
หัวแปรงธรรมดาไม่เอาออร่าขนาด 3 px พอ กำลังสวย ขีดเขียนตามความเหมาะสม

ทำทุกอย่างครบแล้ว มาเริ่มการคัดลอกรูปภาพ
มองไปที่เลเยอร์ขวามือซะ หาเลเยอร์รูปภาพต้นฉบับที่ลาก ย่อ จัดตำแหน่งเรียบร้อยแล้ว
คลิกภาพที่จะคัดลอก แล้วกดแป้น Alt ค้างไว้ และลากเลเยอร์นั้นมาซะ
สังเกตที่หัวลูกศร จะมีเบิ้ล 2 อัน ดำทับขาว หมายถึง คัดลอกแล้วนะ

คัดลอกเสร็จแล้วสินะ ไม่ยากเนอะะะะ
มาต่อด้วยใส่เอฟเฟคให้แก่แบนเนอร์ เฉพาะภาพที่คัดลอก
ไปที่เมนู filter > blur > motion blur
ตั้งค่าความเบลอและทิศทางตามความเหมาะสม //อ่านคำอธิบายที่ภาพซะนะจ๊ะ

ทำทุกอย่างที่ผ่านมาเรียบร้อยแล้ววววว!
พักมือแป๊ปนึงแล้วมาทำความเข้าใจกับ Animation กันก่อน ต้องอ่านให้ดีๆ นะจ๊ะ

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

หลังจากนี้ขอให้อ่านก่อนทำ!!
ไปที่เลเยอร์อนิเมชั่นแรกก่อนนะ จากนั้นก็ไปมองแถบขวามมือที่เลเยอร์รูปภาพ
"ปิดตาเลเยอร์รูปภาพที่คัดลอกและต้นฉบับให้หมด"
ในเลเยอร์อนิเมชั่นทุกช่องจะไม่เห็นรูปภาพอะไรเลย เว้นสี ฟอนต์ การแต่งภาพต่างๆ
ทิ้งอนิเมชั่นช่องที่ 1 ให้โล่งไว้ก่อน เพราะหากเปิดตาในเลเยอร์รูปภาพที่อนิเมชั่นช่อง 1 ทุกรูป(หรือรูปเดียว)
รูปนั้นๆ จะแสดงผลทันที่ทุกช่องในอนิเมชั่น
//อ่านจบแล้วก็ลองทำตามดูก่อน จะได้เข้าใจ เสร็จแล้วก็กลับไปปิดตาเหมือนเดิมนะ ซนพอประมาณ//

กลับมาเข้าเรื่องกันต่อ หลังจากปิดตาเลเยอร์รูปภาพทั้งหมด
ให้เล็งที่ช่อง 4-5 ก่อนใครเพื่อน เพื่อจะเปิดตาเลเยอร์ภาพคัดลอกเบลอภาพแรก
//สังเกตไหม? ภาพในอนิเมชั่นของช่องอื่นๆ ยังไม่เห็นภาพที่เราเปิดตาเมื่อกี้ #ทันไหม?//

เสร็จจากช่อง 4-5 ไปที่ช่อง 9-10 แล้วทำการเปิดตาเลเยอร์ภาพคัดลอกเบลอภาพสอง

สุดท้ายมาที่ช่อง 14-15 ทำแบบเดียวกัน โดยการเปิดตาเลเยอร์ภาพคัดลอกเบลอภาพสุดท้าย

**ทริค!! เมื่อเราเปลี่ยนไปแต่ละช่อง(เลเยอร์)อนิเมชั่น โปรดดูที่แถบขวาเลเยอร์ของเรา
ดวงตาจะสลับเปิด-ปิดตามที่เรากำหนดในเลเยอร์อนิเมชั่น #ต้องลองเล่นเองแล้วสังเกตดูจะเข้าใจนะ

พอเปิดตาเลเยอร์รูปภาพในช่อง 4-5 / 9-10 / 14-15 ช่องที่เหลือยังโบ๋เบ๋ไม่มีภาพ
เราจะใส่ภาพต้นฉบับลงไป
ขอให้เริ่มจากช่องหลังสุดก่อน แล้วไล่มาหน้าสุด (เพื่อความปลอดภัยสำหรับเลเยอร์อนิเมชั่นช่องแรก)

**ลองเปิดตาเลเยอร์รูปภาพในเลเยอร์อนิเมชั่นช่องแรกดู
ทุกช่องจะมีภาพโผล่กันมาให้พรึบพับ!ทุกช่องทันที(อนิเมชั่น)

โอเค เข้าประเด็นใกล้เสร็จล่ะะะะ
มาช่องเลเยอร์อนิเมชั่นช่อง 13 > 11 เปิดตาเลเยอร์ภาพต้นฉบับสุดท้าย
มาช่องเลเยอร์อนิเมชั่นช่อง 8 > 6 เปิดตาเลเยอร์ภาพต้นฉบับภาพที่สอง
มาช่องเลเยอร์อนิเมชั่นช่อง 3 > 1 เปิดตาเลเยอร์ภาพต้นฉบับภาพแรก
//ทำแบบถอยหลัง เข้าใจนะ//

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

จุดไคลน์แม็กซ์เพิ่งผ่านไป หนังเราก็ใกล้จบแบบ แฮ๊ปปี้ จากดีแทค? #โดนยิงงง!
มาถึงวิธีเซฟแบบอนิเมชั่น ไม่ใช่ save as... เพราะมันมีนามสกุลแค่ .jpeg และ .png (ที่เรานิยมกัน)
ให้มาที่เมนู file > save for web & devices > save เสร็จ!!
หนังจบแล้วจ้าาาา #ผิดเรื่องครัชชชช - -*

ผลงานแบนเนอร์เคลื่อนไหวเรียบๆ แต่หรู สามารถรับจ๊อปเปิดร้านดีไซน์ในเด็กดีได้เลยนะเนี่ยยยะะ!

ลองทำบ่อยๆ ให้ชิน ปิ้งไอเดียดีไซน์อีกหน่อย คนจะหลงรักร้านดีไซน์แนวนี้แน่นอน 555555 #รึเปล่า??

ขอบคุณที่พยายามทำความเข้าใจกันนะจ๊ะ

ป้าโคตรมั่นใจอ่ะ! "กูไม่เก็ทเลยครัชชชชชช!! สอนอะไรของยัยแก่ว๊ะเนี่ยยะะ!! มึนสลัดดดด!!"

#อารมณ์นี้ชัวร์ป๊าปปปป! - -*

ยังไงก็เม้นท์มาเถอะ เชื่อว่าต้องงงเรื่องอนิเมชั่นแหง๋ๆ

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

แต่เริ่มสอบ 27 ตุลาคมนี้แล้วววว T T

//ยังไม่ได้อ่านสือสอบเพราะทำงานส่งจารย์นี่แหละ 555555 - - เยอะโหด!