(23 พฤศจิกายน 2552)
สิ่งที่ได้เรียนรู้
กิจกรรมแรกคือการนำเสนอผลงานของตนเองที่ออกแบบและนำเสนอผ่านโปรแกรมเพาเวอร์พอยท์ ซึ่งทำให้ผมได้เห็นแนวคิดและแบบอย่างการออกแบบของเพื่อนแต่ละคน ว่ามีมุมมองและแนวคิด รวมไปถึงจินตนาการมากน้อยเพียงใด อีกทั้งยังได้เห็นถึงตัวอย่างที่ดีที่สุด ตัวอย่างที่ถูกต้อง และควรนำไปปฏิบัติตามอีกด้วย Site structure : ควรลงรายละเอียดให้เห็นจริง สีที่ใช้ก็ต้องมีความเหมาะสมกับกลุ่มเป้าหมายกิจกรรมที่ทำนั้น ต้องชัดเจน มี Feedback ด้วยจะดีมาก ทำให้ได้รับประโยชน์เป็นอย่างมาก ในการออกแบบงานของตัวเองใหม่ ในฐานะของงานคู่ครับ
ทั้งนี้กลุ่มของผม มีนายอวิรุทธิ์ กลั่นสุวรรณ ซึ่งคิดในเรื่องของ ระบบสุริยะ ส่วนของผมเองทำเรื่อง Photoshop ซึ่งก็ได้ตกลงกันว่า จะทำ เรื่องของ Photoshop ครับ
ต่อมาในส่วนของการเรียนผ่านระบบเครือข่าย
หัวข้อที่ 1 การใช้ Slice ในการสร้างงานเว็บ
· เปิดไฟล์ที่เตรียมไว้ให้ ชื่อ Mangrove.png
· เรียกไม้บรรทัดขึ้นมา โดยเลือกเมนู View เลือกคำสั่ง Rulers แถบไม้บรรทัดจะปรากฏ
· จากนั้น ดึงเส้น Guides โดยใช้เครื่องมือ Move tool เพื่อทำให้ทำงาน Slice ได้ง่ายขึ้น
· จากนั้น เลือกเครื่องมือ Slice tool เพื่อทำการ Slice จากนั้นก็ Slice ภาพออกเป็นส่วนตามต้องการ
· เลือกเมนู File แล้วเลือก Save as… โดยเลือกนามสกุลไฟล์ .PSD เพื่อจะแก้ไขได้ในภายหลัง
· ถ้าต้องการซ้อน เส้น Guides ให้เลือกเมนู View เลือกคำสั่ง Show เลือก Guides
· คลิกขวาที่ Slice ที่ต้องการการเชื่อมโยง เลือกคำสั่ง Edit Slice Options…
· ระบุที่อยู่เว็บที่ต้องการเชื่อมโยง ที่ช่อง URL เช่น home.html
· ระบุรูปแบบการเชื่องโยง ที่ช่อง Target เช่น _self
· ระบุข้อความที่แสดงเมื่อเมาส์อยู่เหนือในช่อง Message Text เช่น หน้าหลัก
· ระบุข้อความกำกับภาพในช่อง Alt Tag จากนั้นคลิก OK
หัวข้อที่ 2 วิธีการกำหนดการเชื่อมโยงให้กับ Slice
· คลิกขวาที่ Slice ที่ต้องการการเชื่อมโยง เลือกคำสั่ง Edit Slice Options…
· ระบุที่อยู่เว็บที่ต้องการเชื่อมโยง ที่ช่อง URL เช่น home.html
· ระบุรูปแบบการเชื่องโยง ที่ช่อง Target เช่น _self
· ระบุข้อความที่แสดงเมื่อเมาส์อยู่เหนือในช่อง Message Text เช่น หน้าหลัก
· ระบุข้อความกำกับภาพในช่อง Alt Tag จากนั้นคลิก OK
หัวข้อที่ 3 การบันทึก Slice เป็นเว็บเพจ
· เลือกเมนู File เลือกคำสั่ง Save for web จากนั้นกดปุ่ม Save
· เลือกคำสั่งไฟล์เป็น HTML and Images ไฟล์ที่ได้จะเป็นไฟล์ .html จากนั้นกดปุ่ม Save
· ตรวจสอบไฟล์ จากนั้นลองไปเปิด Folder สังเกตว่าไฟล์ภาพจะมีการแบ่งเป็นหลายภาพ
· เมื่อลองดูผลลัพธ์ใน Web Browser ภาพยังคงเป็นภาพเหมือนก่อนที่ถูกตัดแบ่ง และบริเวณที่ถูกเชื่องโยงไว้ ก็สามารถกดได้
นอกจากนี้ การที่ได้ทำการ Workshop ยังทำให้เราสามารถทำจริง ได้เอง และยังทำให้จดจำวิธีการได้ดียิ่งขึ้นครับ
สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า
๑. ออกแบบเว็บใหม่ในฐานะของงานคู่ โดยทำตามตัวอย่างที่ถูกต้องและน่าสนใจจากที่ดูของเพื่อนๆ และจัดทำในรูปแบบเพาเวอร์พอยท์ โพสขึ้นเว็บภายในวันอาทิตย์ก่อน 18.00 น.
๒. ศึกษาเรื่อง การสร้าง Animation อย่างง่ายโดย Image Ready ล่วงหน้าครับ
๓. ศึกษากระบวนการทำเว็บเควสที่ถูกวิธี จากงานของเพื่อน และสื่ออื่นๆที่เผยแพร่ทางอินเตอร์เน็ต เพื่อเพิ่มความเข้าใจ และสามารถออกแบบงานของตนเองได้ดียิ่งขึ้น
ข้อคิดเห็นอื่นๆ
๑. ในส่วนของการรายงานหน้าชั้นของเพื่อน ผมว่า ตัวอย่างของอันที่ดี ยังเห็นไม่ชัดมาก อยากให้อาจารย์ยกตัวอย่างให้ดู เพื่อจะได้มีหลักเกณฑ์ที่ถูกต้อง และสมบูรณ์ที่สุดครับ
๒. งานชิ้นนี้เป็นงานยากครับอาจารย์ ในการออกแบบครั้งแรก ที่นำเสนอในวันนี้ ยังไม่อยากให้คิดเป็นคะแนนครับ เพราะว่า ยังไม่ค่อยเข้าใจเท่าไหร่ ถึงสิ่งที่ต้องการเสนอและรูปแบบด้วย อยากให้คะแนนครั้งนี้เก็บไปรวมกับงานที่จะออกแบบใหม่ เพื่อจะได้เป็นคะแนนที่ยุติธรรมครับ
เขียนละเอียดดีมากๆ^^
ตอบลบ