วิชากราฟิกสารสนเทศ เชื่อมโยงเว็บเพจด้วยลิงค์แบบ Rollover และสร้างภาพเคลื่อนไหวด้วย GIF

เชื่อมโยงเว็บเพจด้วยลิงค์แบบ Rollover 
1.ใน Photoshop เปิดไฟล์ที่เป็นปุ่มเมนูชื่อ computer_graphic_btn [เพราะจำนวนตัวหนังสือมากที่สุด จะได้กำหนดขนาด font ให้เท่ากันทุกปุ่ม] ถ้าไฟล์นั้นเป็นชนิด Index Color ให้เปลี่ยนเป็น RGB Color ก่อน
 

2.ดับเบิ้ลคลิกที่เลเยอร์ Background เป็น Layer 0

3.เลือก window>Styles เลือก Web Style คลิกเลือกชุดสีแดง

4.copy เลเยอร์ [ Ctrl+J ]เลือก Web Style คลิกเลือกชุดสีเขียว

5.พิมพ์ข้อความ computer graphic

6.คลิกซ่อนเลเยอร์สีเขียว แล้ว save for web ตั้งชื่อ computer_graphic1

7.คลิกซ่อนเลเยอร์สีแดงเปิดเลเยอร์สีเขียว แล้ว save for web ตั้งชื่อ computer_graphic2

8.ทำตามขั้นตอนที่ 1-7 ให้ครบทุกปุ่มจะได้ปุ่มดังนี้

 

ขั้นตอนการสร้างปุ่ม Rollover ทั้ง 7 ปุ่ม ในโปรแกรม Dreamweaver

1.เปิดไฟล์ index.html แล้วคลิกปุ่มเมนู home กด Delete ที่แท็บ Image เลือก Rollover Image จะขึ้นหน้าต่าง Insert Rollover Image [ *ภาพปุ่มที่สร้างขึ้นใหม่ต้องอยู่ในโฟลเดอร์ images เรียบร้อยแล้ว ]

ช่องOriginal image เลือก home_btn1

ช่อง Rollover image เลือก home_btn2

ช่อง When clicked, Go to URL: เลือก index.html   คลิก OK

 

2.ทำแบบเดียวกันนี้กับทุกปุ่มจนครบทั้ง 7 ปุ่มเมนู เสร็จแล้ว File>Save

3.คลิกเลือกรูป home_body กดปุ่ม Delete แล้วคลิกที่แท็บ Common คลิกปุ่ม Image เลือกภาพ about_us_body คลิก OK จากนั้นเลือกเมนู File>Save As..ตั้งชื่อเป็น about_us เพื่อ saveทับไฟล์เดิมที่มีการสั่งลิงค์Rolloverแล้ว

4. ทำเช่นเดียวกันโดยการเปลี่ยนรูปเป็นหน้า faculty_staff, computer_graphic, design, archive, contact_us แล้ว saveทับไฟล์เดิมที่มีการสั่งลิงค์แล้ว

5.หลังจากทำการเซฟหน้าเว็บเพจเรียบร้อยแล้วก็มาถึงขั้นตอนการทดสอบแสดงผลเว็บเพจผ่านโปรแกรม Internet Explorer โดยกดปุ่ม <F12> หรือเลือกคำสั่ง Preview in IExplore

ขั้นตอนการสร้างภาพเคลื่อนไหวด้วย GIF

1.เปิดโปรแกรม Photoshop เปิดไฟล์ head เพื่อสร้างงานทับเพื่อจะได้ขนาดงานใหม่เท่างานเดิมพอดี

2.ออกแบบพื้นหลังใหม่ ออกแบบตัวหนังสือ เพื่อดูองค์ประกอบทั้งหมดก่อน เพื่อจะได้วางแผนการเคลื่อนไหวต่อไป

 

 

3.เลือกเมนู Window>Animation เพื่อเปิดพาเล็ตสำหรับทำภาพเคลื่อนไหวขึ้นมา แล้วเปิดเลเยอร์ที่ต้องการเห็นในเฟรมแรก

4.กำหนดเวลาที่จะให้แสดงภาพในแต่ละเฟรม

5.กำหนดจำนวนรอบที่ต้องการให้แสดงภาพเคลื่อนไหว

Once :แสดงรอบเดียวแล้วหยุด   Forever : แสดงวนรอบไปเรื่อยๆจนกว่าจะปิด

6.คลิกปุ่มปุ่ม Duplicates selected frames ที่หน้าต่าง Animation แล้วเปลี่ยนภาพเป็นอีกเฟรมโดยเปิดเลเยอร์ที่ต้องการเห็นในเฟรมนี้

7.คลิกปุ่มปุ่ม Duplicates selected frames แล้วเปลี่ยนภาพเป็นอีกเฟรมทำซ้ำขั้นตอนไปจนครบการเคลื่อนไหวที่ต้องการ

8.เลือก File>Save for Web & Devices เลือกบันทึกเป็นไฟล์ GIF เท่านั้น แล้วนำไฟล์ที่ได้ไปแทนที่ไฟล์ head ที่ทำไว้ในโฟลเดอร์ Images

  คลิกดูตัวอย่าง

ใบงาน   สร้างลิงค์แบบ Rollover และสร้างภาพเคลื่อนไหวด้วย .GIF ในเว็บเพจแผนกศิลปกรรม โดยสร้างภาพเคลื่อนไหวในส่วนของ Head แทนแบบเดิมที่ทำไว้ และสร้างลิงค์แบบ Rollover ให้กับปุ่มเมนูทุกปุ่ม