วิชากราฟิกสารสนเทศ เชื่อมโยงเว็บเพจด้วยลิงค์แบบ 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 ให้กับปุ่มเมนูทุกปุ่ม

วิชาการสร้างภาพกราฟิก ครั้งที่ 5 การสร้างรูปทรง 3 มิติแบบวนรอบและแบบแนวลึก

การสร้างรูปทรง 3 มิติแบบวนรอบ เป็นการแปลงรูปทรงให้หมุนวนรอบตัวเองเป็นวงกลม

1.เลือกออบเจ็ค     2.คลิกคำสั่ง Effect > 3D > Revolve     3.ที่ Position เลือกรูปแบบรูปทรงสำเร็จรูป หรือกำหนดค่าออปชั่นต่างๆเอง

 

ปรับองศาให้คว่ำลงหรือหงายขึ้น    ปรับองศาให้เอียงด้านซ้ายหรือขวา   ปรับหมุนออบเจ็คทั้งชิ้น

* Perspective ค่ามุมความลึกของรูปทรง

*Angle องศาของการหมุนวนรอบ โดยเทียบจากตำแหน่งเริ่มต้น เช่น กำหนดเป็น 180 จะได้รูปทรงที่หมุนวนเพียงครึ่งวง หรือถ้ากำหนดเป็น 360 จะได้รูปทรงที่หมุนรอบเป็นวงกลมพอดี

*Cap ให้คลิกเพื่อใช้สีผิวทุกด้านทำให้รูปทรงดูตัน หรือคลิกเพื่อใช้สีเฉพาะพื้นผิวด้านนอกทำให้รูปทรงเป็นรูกลวง

*Offset ขนาดวงในการวนรอบ (กำหนดเป็น 0 ขอบออบเจ็คด้านในจะสัมผัสกันพอดี)

*from เลือกทิศทางในการวนรอบจากซ้ายหรือขวา

*Surface เลือกลักษณะพื้นผิวของรูปทรง

4.คลิกปุ่ม OK

 

การสร้างรูปทรง 3 มิติแบบแนวลึก เป็นการแปลงรูปทรงด้วยการดึงรูปทรงออกไปให้มีความลึกหรือหนาขึ้น

1.เลือกออบเจ็ค     2.คลิกคำสั่ง Effect > 3D > Extrude & Bevel     3.ที่ Position เลือกรูปแบบรูปทรงสำเร็จรูป หรือกำหนดค่าออปชั่นต่างๆเอง

 

ปรับองศาให้คว่ำลงหรือหงายขึ้น    ปรับองศาให้เอียงด้านซ้ายหรือขวา   ปรับหมุนออบเจ็คทั้งชิ้น

* Perspective ค่ามุมความลึกของรูปทรง

*Extrude Depth ค่าความลึกของรูปทรง

*Cap ให้คลิกเพื่อใช้สีผิวทุกด้านทำให้รูปทรงดูตัน หรือคลิกเพื่อใช้สีเฉพาะพื้นผิวด้านนอกทำให้รูปทรงเป็นรูกลวง

*Bevel เลือกรูปแบบของแนวขอบในลักษณะต่างๆ เช่น ให้เป็นเหลี่ยมมุม หรือให้โค้งมน

*Height ความสูงของแนวขอบ Bevel

*Surface เลือกลักษณะพื้นผิวของรูปทรง

4.คลิกปุ่ม OK

งานครั้งที่ 5 ให้นักเรียนสร้าง Robot ด้วยโปรแกรม Illustrator โดยใช้ Effect 3D ลองเข้าไปดูรูปตัวอย่างที่
http://nadpapont.multiply.com/photos/album/1/Tin_Toy

ขั้นตอนการนำรูปภาพไปประกอบใน Dreamweaver

13.เปิดโปรแกรม Dreamweaver CS3 แล้วเปิดไฟล์ index ที่เป็น HTML

14.กำหนดระยะขอบของเว็บเพจ โดยคลิกเมนู Modify>Page Properties ใส่ตัวเลข 0 ที่ช่อง Left margin, Right margin,

Top margin, Bottom margin

15.เลือกเมนู File>Save เพื่อ save ไฟล์ index แล้วเลือกเมนู File>Save As..ตั้งชื่อเป็น about_us, faculty_staff, computer_graphic, design, archive, contact_us จะได้เป็นหน้าเว็บเพจ 7 หน้า เพื่อไว้ทำการลิงค์ทุกๆหน้าเข้าด้วยกัน

                                                            

16.คลิกที่ปุ่มเมนู home ที่ช่องBorder กรอกตัวเลข 0 แล้วคลิก Browse for file ทีช่องLink เลือก index คลิก OK

17.ทำตามข้อ 16 จนครบทั้ง 7 ปุ่ม เพื่อทำการลิงค์หน้าเว็บเพจทั้ง 7 หน้า เช่นคลิกปุ่มabout_usก็ให้ลิงค์กับไฟล์about_us.html

18.เลือกเมนู File>Save เพื่อ save ไฟล์ index

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

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

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

วิชากราฟิกสารสนเทศ การสร้างเว็บด้วย photoshop+dreamweaver

ขั้นตอนการออกแบบหน้าเว็บเพจด้วยโปรแกรม Photoshop

1.เลือกเมนู File>New สร้างไฟล์ภาพใหม่ขนาด Width 1024 Height 768 pixels, Resolution 72 pixels/inches ตั้งชื่อว่า silpakham

เสร็จแล้ว save งานเลือกรูปแบบเป็น psd เผื่อไว้แก้ไขในภายหลัง

2.ในเลเยอร์ Background ใส่สีในส่วนต่างๆเพื่อแบ่งพื้นที่เป็นส่วนhead, menu, body จะได้ขนาดต่างๆดังนี้

   head ขนาด 1024 x 137 pixels, menu ขนาด 1024 x 34 pixels, body ขนาด 1024 x 597 pixels ต่อจากนั้นให้นักเรียนสร้างชิ้นงาน   ต่างๆให้ครบตามขนาดที่ตั้งไว้แล้ว                                                     จะได้ชิ้นงานต่างๆทั้งหมด 9 ชิ้น

                    3.เปิดไฟล์ head ที่ทำเตรียมไว้ แล้วลากมาวางให้ตรงตำแหน่ง แล้วให้เปลี่ยนชื่อเลเยอร์เป็น head

4.เปิดไฟล์ menu ที่ทำเตรียมไว้ แล้วลากมาวางให้ตรงตำแหน่ง แล้วให้เปลี่ยนชื่อเลเยอร์เป็น menu

5.เปิดไฟล์ body ที่ทำเตรียมไว้ 7 ชิ้น แล้วลากมาวางให้ตรงตำแหน่งทีละชิ้น แล้วให้เปลี่ยนชื่อเลเยอร์เป็น home, about us, faculty staff, computer graphic, design, archive, contact us ตามลำดับ

ขั้นตอนการนำรูปภาพไปใช้งานในการทำเว็บเพจ

1.เลือก View>Rulers เพื่อเปิดไม้บรรทัดขึ้นมาแล้วใช้เมาส์ลากเส้นไกด์ที่แท็ปไม้บรรทัดออกมาเพื่อแบ่งสัดส่วนของภาพ โดยแบ่งส่วนที่เป็น head 1 ชิ้น แบ่งส่วนที่เป็น body 1 ชิ้นแบ่งส่วนที่เป็น menu 7 ชิ้น

                            

2.คลิกเปิด  เลเยอร์ head, menu, home เลเยอร์อื่นปิดให้หมด แล้วใช้เครื่องมือ Slice ตัดแบ่งภาพเป็นชิ้นๆตามเส้นไกด์ที่กำหนดไว้ จะได้ภาพเป็นชิ้นต่างๆ คือ head, body, menu 7 ชิ้น

        

3.ใช้เครื่องมือ Slice คลิกเมาส์ขวาลือก Edit Slice Option…ที่แท็ปสีน้ำเงินของส่วน head แล้วตั้งชื่อเป็น head

แล้วทำแบบเดียวกันกับทุกsliceแล้วตั้งชื่อ

*ในส่วนของเมนูตั้งชื่อเป็น home_btn , about_us_btn, faculty_staff_btn, computer_graphic_btn, design_btn, archive_btn,  contact_us_btn

*ในส่วนของbodyตั้งชื่อเป็น home_body, about us_body, faculty staff_body, computer graphic_body, design_body, archive_body, contact us_body

4.เสร็จแล้ว save งานเลือกรูปแบบเป็น psd เผื่อไว้แก้ไขในภายหลัง

5.การบันทึกรูปภาพที่สร้างจากสไลซ์ไปใช้งานทำได้โดยคลิกเมนู File>Save for Web & Devices คลิกเลือกภาพในกรอปตัวอย่าง แล้วเลือกประเภทของไฟล์เป็น .JPG หรือ.GIF แล้วแต่ความเหมาะสมของภาพที่ต้องการรายละเอียดของสีมากน้อยแค่ไหน

6.ในหน้าต่าง Save Optimized As กำหนดค่าดังนี้

*ช่อง Save in เลือกโฟลเดอร์ที่จะเก็บไฟล์เว็บเพจ และไฟล์ภาพ

*ช่อง File name ตั้งชื่อไฟล์ หากเป็นหน้าแรกของเว็บไซต์ควรตั้งชื่อเป็น index

*ช่อง Save as type เลือกเป็น HTML and Images(*.html) บันทึกเป็นไฟล์เว็บเพจพร้อมรูปภาพ โดยจะสร้างเป็นไฟล์ html ที่เป็นตาราง

 และจัดวางรูปภาพย่อยๆที่เป็นสไลซ์ลงไปในตารางให้อัตโนมัติ

7.คลิก Save สั่งบันทึกได้

8.จะได้ไฟล์ที่อยู่ในโฟลเดอร์ silpakham คือโฟลเดอร์ images ที่เก็บรูปภาพย่อยๆที่ได้จากการสไลซ์ และไฟล์ html ที่จะนำไปประกอบในโปรแกรม Dreamweaver ต่อไป

9.คลิกเปิด เลเยอร์ head, menu, about us เลเยอร์อื่นปิดให้หมด

10.ใช้เครื่องมือ Slice คลิกเมาส์ขวาลือก Edit Slice Option…ที่แท็ปสีน้ำเงินของส่วน about us แล้วตั้งชื่อเป็น about_us_body

11.คลิกเมนู File>Save for Web & Devices คลิก Save จะปรากฎหน้าต่าง Save Optimized As กำหนดค่าในช่อง Save as type เลือกเป็น Images Only และต่อจากนั้นจะปรากฎหน้าต่าง Replace Files ให้คลิกปุ่ม Replace

จะได้รูป about_us_bodyในโฟลเดอร์ images เพิ่มขึ้นมา

12.ทำตามขั้นตอนข้อ 9-11 โดยเปิด เลเยอร์ faculty staff และส่วน body อื่นๆจนครบทุก body