Workshop 15 : ออกแบบหน้าเว็บเพจอื่นๆ ภายในเว็บไซท์

Workshop 15 : ออกแบบหน้าเว็บเพจอื่นๆ ภายในเว็บไซท์

Workshop 14 : ออกแบบหน้าโฮมเพจ (index.html)

Workshop 14 : ออกแบบหน้าโฮมเพจ (index.html)

Workshop 13 : ออกแบบหน้าโฮมเพจ

Workshop 13 : ออกแบบหน้าโฮมเพจ

Workshop 12 : สร้างภาพ พื้นหลังขนาดใหญ่

Workshop 12 : สร้างภาพ พื้นหลังขนาดใหญ่

มีขนาด 1024*800 Pixel

Workshop 11 : สร้างภาพ Background สำหรับพื้นที่เว็บเพจ

Workshop 11 : สร้างภาพ Background สำหรับพื้นที่เว็บเพจ

Workshop 10 : สร้างปุ่มสำหรับทำเมนูแบบ Rollover

Workshop 10 : สร้างปุ่มสำหรับทำเมนูแบบ Rollover

เมื่อคลิกปุ่มแล้วจะแตกต่างกันตรงที่สี

Workshop 9 : สร้างป้ายหัวรายการ

Workshop 9 : สร้างป้ายหัวรายการ

Workshop 8 : เทคนิคการสร้างปุ่มแบบมีมิติ

Workshop 8 : เทคนิคการสร้างปุ่มแบบมีมิติ

Workshop 7 : สร้างรูปภาพทำ List รายการ

Workshop 7 : สร้างรูปภาพทำ List รายการ

>>> เป็นตัวอย่างที่จะใช้ไปสร้างลิสต์ในเว็บเพจ

Workshop 6 : การสร้าง Navigatio Bar บนรูปภาพ

Workshop 6 : การสร้าง Navigatio Bar บนรูปภาพ

การใช้เครื่องมือ Slice ตัดแบ่งภาพให้เป็นภาพเล็กๆ หรือแยกเป็นเมนูไปได้ดังนี้

Workshop 5 : การสร้าง Navigation Bar แนวนอน

Workshop 5 การสร้าง Navigation Bar แนวนอน

Workshop 4 : สร้างปุ่ม Button กลุ่มแนวตั้ง

Workshop 4 : สร้างปุ่ม Button กลุ่มแนวตั้ง

Button กลุ่มแนวตั้ง
••••••••••••••••••••

การ Slice ปุ่ม Navigation Button โดยใช้ Slice Tool


•
•
•
•

เมื่อใช้ Slice tool ตัดแล้วจะง่ายต่อการโหลดรูปภาพ

Workshop 3 : สร้างปุ่มบนเว็บแบบง่ายๆ

• ปุ่ม Gradient สีชุด Simple •




• ปุ่ม Gradient สีชุด Style •

Workshop 2 : ออกแบบภาพส่วนหัวของเว็บเพจ

Workshop 2 : ออกแบบภาพส่วนหัวของเว็บเพจ


จะเป็นการออกแบบรูปภาพเพื่อที่จะนำมาทำเป็น Header ของหัว Blog

Workshop 1 : สร้าง TV line

การสร้าง TV line

ก่อนทำ

หลังทำ

>>> จะสังเกตุได้ว่าภาพหลังการทำ จะมีลายเส้นทีวี ซึ่งจะทำให้ภาพดูแปลกตาไป

ขนาดของไฟล์โดยลดความละเอียดให้มีขนาด 400x300 pixel

ขนาดของไฟล์โดยลดความละเอียดให้มีขนาด 400x300 pixel

ภาพขนาดต้นฉบับ Original >>> Width : 300 pixcel

Heigth : 400 pixcel

ความจุ 352 K

_________________________________________________

ภาพขนาด >>> Width : 300 pixcel
Heigth : 400 pixcel
ได้ลดความละเอียดลง จะเหลือความจุ 6.58 kb
>>>>>>จะเห็นความแตกกต่างของสองภาพนี้ คือ ภาพที่ลดความละเอียดลงภาพจะเริ่มแตกลายทำให้ภาพเบลอๆ

วิธีทำ

1. เปิดภาพที่ต้องการนำมาใช้ แล้วตั้งขนาดให้เปน 300*400 pixcel โดยไปที่ Image > Image size
2. ไปที่ flie > save for web แล้วจะมีแท็บด้สนบนให้เลือก 4 อัน original , optimized , 2-up , 4-up
3. เลือก 2-up เลือกแบบนี้เพราะจะได้เห็นความแตกต่างทั้งสองรูป คือแบบที่ยังไม่ได้ลดความละเอียดกับที่ลดความละเอียดแล้วทำให้ง่ายต่อการสังเกตุ
4. ด้านซ้ายมือจะมีให้ปรับค่า setting โดยจะมีให้เลือก jpeg low , jpeg high , jpeg medium จะเป็นค่าความละเอียดของภาพ
5. ส่วนค่าของ Qulaity เป็นค่าคุณภาพของรูปภาพโดยจะมีค่า แบ่งออกเป็น 3 ระดับ

Qulaity >>> 1-29 = low

30-59 = medium

60-79 = high

80-100 = maximun

ลดขนาดของไฟล์ให้มีขนาดไม่เกิน 100 KB โดยไม่ลดความละเอียด

ขนาดของภภาพต้นฉบับ Original Size >>> Width : 300 pixcel

Height : 400 pixcel

ความจุ 352 M

_______________________________

ภาพที่ลดขนาดของไฟล์แล้ว Origonal Size >>> Width 150 pixcel

Heigth 200 pixcel
ความจุ 87.9

การใช้ Lasso Tool ตัดภาพ


Before



After

ประโยชน์ที่ได้รับจากการเรียนวิชาคอมพิวเตอร์กราฟฟิค

ประโยชน์ที่ได้รับจากการเรียนวิชาคอมพิวเตอร์กราฟฟิค


คอมพิวเตอร์กราฟฟิค (Computer Graphics)
หมายถึง การสร้างและตกแต่งรูปภาพต่าง ๆ ด้วยคอมพิวเตอร์ ในปัจจุบันศาสตร์ด้านคอมพิวเตอร์กราฟฟิคก้าวหน้าจนสามารสร้างภาพยนตร์ด้วยคอมพิวเตอร์กราฟฟิคล้วน ๆ ได้แล้ว ภาพกราฟฟิคในทางคอมพิวเตอร์ แบ่งเป็น 2 ประเภท คือ
Bitmapped graphics ภาพแบบ บิตแมพ เป็นภาพกราฟฟิคที่สร้างขึ้นจากการนำจุดเล็ก ๆ จำนวนมากมารวมกัน จะสิ้นเปลีองเนื้อที่ในการจัดเก็บมาก และการขยายภาพให้ใหญ่ขึ้นจะปรากฏรอยหยัก
Vertor graphics ภาพแบบ เวกเตอร์ เป็นภาพกราฟฟิคที่สร้างขึ้นจากสมการทางคณิตศาสตร์แบบต่าง ๆ ทำให้ใช้เนื้อที่ในการจัดเก็บน้อย และสามารถย่อหรือขยายภาพโดยที่คุณภาพของภาพไม่เปลี่ยนแปลง ข้อเสียคือ เครื่องต้องมีการคำนวณที่ซับซ้อน จึงมีการทำงานช้ากว่าแบบบิตแมพมาก

ก่อนที่เราจะทราบได้ว่าในการเรียนคอมพิวเตอร์กราฟฟิคนั้นมีประโยชน์อย่างไรเราจะต้องมารู้จักกับโปรแกรม Dreamweaver และ photoshop ที่กำลังจะศึกษาต่อไปนี้ เสียก่อนว่าตัวโปรแกรมสามารถทำอะไรได้บ้าง

1. Dreamweaver เป็นโปรแกรมในการสร้างเว็บไซต์ ถ้านักสร้างเว็บต้องการอะไรที่หวือหวาหรือซับซ้อนมากกว่านี้ก็จำเป็นจะต้องใช้การเขียนคำสั่งด้วยภาษา HTML และ Java script เสริมเข้าไป เรียกได้ว่า เว็บไซต์สมัยก่อนจะออกไปแนวเรียบๆ เน้นการใช้งานและนำเสนอข้อมูลเป็นหลัก และต่อมาในปัจจุบัน โปรแกรมได้มีการพัตนาขึ้นช่วยในการสร้างเว็บทำได้ง่าย ในขณะที่ผลลัพธ์ออกมาดูสวยงามมีลูกเล่นมากมาย ทำให้เว็บเป็นที่น่าสนใจดึงดูดผู้ใช้งานให้เข้ามาชมและในขณะเขียนเว็บก็ไม่จำเป็นต้องใช้ตัวช่วยมากมายเข้ามาใช้เหมือนแต่ก่อน การสร้างเว็บไซต์จะเน้นความสวยงาม ทำให้ผู้เขียนเองก้มีความสุขไปด้วย
2. Photoshop เป็นโปรแกรมใช้สำหรับตกแต่งภาพ ตัดต่อภาพ เพื่อความสวยงาม ทั้งทำแบนเนอร์ ใส่เสียง ใส่ข้อความ และสามารถทำภาพใส่เว็บได้เลย ทำให้ภาพนั้นมีประสิทธิภาพยิ่งขึ้น

สรุปประโยชน์ที่ได้รับ

1. ได้ความเพลิดเพลินในการสร้างเว็บไซต์
2. ได้นำเสนอข้อมูลต่างๆ หรือเผยแพร่ข้อมูลที่เป็นประโยชน์
3. สร้างเว็บไชต์ให้มีระบบการขาย ซื้อ เช่าสินค้า
4. เพิ่มโอกาสทางธุรกิจ หาลูกค้าจากช่องทางใหม่ๆ
5. เพิ่มประสิทธิภาพ ในการติดต่อสื่อสารระหว่างผู้ซื้อ ผู้ขายและพันธมิตร ให้มีความใกล้ชิด พร้อมรับข้อมูลข่าวสารที่ถูกต้อง ทันสมัยและรวดเร็วยิ่งขึ้น ทั้งช่วยลดความผิดพลาดจากการติดต่อสื่อสารแบบเดิมได้
6. เพิ่มศักยภาพในการแข่งขัน ด้วยการนำเสนอบริการใหม่ให้แก่ลูกค้าเดิม โดยเสนอช่องทางในการติดต่อซื้อขายกับ ผู้ซื้อผ่านทางเว็บไซด์ของท่านเอง
7. ช่วยลดต้นทุนและเวลา ในทุกขั้นตอนของขบวนการซื้อขาย ไม่ว่าจะเป็นกระบวนการทางการตลาด การให้บริการ การสนับสนุนและลดค่าใช้จ่ายในเรื่องสถานที่และการติดต่อสื่อสาร
8. ทำให้รูปภาพที่ตกแต่งออกมาเหมือนจริง
9. phptoshop ช่วยทำให้ภาพเป็นจุดสนใจของผู้ใช้งาน
10. เพิ่มความสวยงามของเว็บไซต์