4. การออกแบบ Header เว็บไซต์ ด้วย Photoshop

การทำภาพ Animation ด้วยโปรแกรม Adobe Photoshop CS3

    1.  เปิดเอกสารใหม่ขึ้นมา โดยไปที่เมนู File > new ใส่ขนาดที่ต้องการ ในที่นี้คือ Width 400 x Height 100


    2.  เปลี่ยนสีพื้น Background ใหม่เป็นสีดำ โดยการเลือกสีโฟกราวน์เป็นสีดำ แล้วกดปุ่ม Alt + Backspace บนคีย์บอร์ดเพื่อเทสีลงไป

3.  จากนั้นพิมพ์ข้อความที่ต้องการลงไป โดยการกดเครื่องมือรูป T (Type tool) ในที่นี้พิมพ์ว่า “อยากได้ยินว่า รักกัน” จะได้ Layer ข้อความเพิ่มมา 1 เลเยอร์

4.  Copy Layer ข้อความเพิ่มเป็น 3 Layer และใส่สีตัวหนังสือที่แตกต่างกันลงไป


5.  มาถึงขั้นตอนการทำให้ตัวหนังสือเคลื่อนไหวได้ ไปที่ เมนู Windows > Animation


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

7.  ไปที่ Animation Frames คลิกไอคอนรูปกระดาษ  เพื่อเพิ่มเป็น Frame ที่ 2 จากนั้นคลิกเปิดตา Layer  อยากได้ยินว่า รักกัน สีเหลือง และปิดตา Layer ที่ยังไม่ต้องการแสดง

8.  ไปที่ Animation Frames คลิกไอคอนรูปกระดาษ  เพื่อเพิ่มเป็น Frame ที่ 3 คลิกเปิดตา Layer อยากได้ยินว่า รักกัน สีเขียว จากนั้นปิดตา Layer ที่ไม่ต้องการแสดง

9.  ต่อไปตั้งค่าเวลาการเล่นของแต่ละ Frame ในที่นี้ตั้งให้เท่ากันทุก Frameคือ 0.2 ลองกดเล่นดู

10.  มาถึงขั้นตอนการ Save ไฟล์ ไปที่ File > Save for Web & Devices ตั้งค่าตามตัวอย่างในรูป


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



Comments