วันจันทร์ที่ 11 กรกฎาคม พ.ศ. 2554

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

วันศุกร์ที่ 8 กรกฎาคม พ.ศ. 2554

วิชาการสร้างภาพกราฟิก ครั้งที่ 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