Advertisement
  1. Web Design
  2. Kids
Webdesign

การทำเว็บไซต์สำหรับเด็ก - รูปภาพ

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: CSS Layout
Web Design for Kids: Design Basics

Thai (ภาษาไทย) translation by Porrapat Petchdamrongskul (you can also view the original English article)

ยินดีต้อนรับสู่บทเรียนที่เจ็ดของซีรีย์การทำเว็บไซต์สำหรับเด็กของเรา วันนี้เราจะเรียนรู้เกี่ยวกับรูปภาพสำหรับเว็บทั้งหมด!

เราได้เพิ่มรูปภาพจำนวนหนึ่งให้กับเว็บไซต์เมืองในฝันของเรา แต่เรายังไม่ได้คุยเกี่ยวกับรูปภาพแบบเจาะลึกกันเลย ในบทเรียนนี้เราจะได้รู้จักชนิดรูปภาพต่างๆที่ใช้ในเว็บ และเทคนิคการตกแต่งภาพแบบง่ายๆ อีกด้วย

ระหว่างเดินทาง อย่าลืมถามคำถามที่กล่องคอมเม้นท์ด้านล่างละกัน

รูปภาพที่ใช้สำหรับเว็บ

เราไม่ใช่คนแปลกหน้าที่มาใช้รูปภาพสำหรับเว็บได้ สำหรับเว็บไซต์เมืองในฝันของเราจะใช้สี่ภาพหลักนี้ เราสามารถเพิ่มรูปภาพเหล่านี้ไปที่ HTML ของเราจากนั้นทำการปรับขนาดและตำแหน่งด้วย CSS

มันมีหลายสิ่งที่ต้องคิดเกี่ยวกับการใช้รูปภาพสำหรับเว็บ อย่างเช่นว่า format ไหนดีที่สุด ที่ไหนที่เราสามารถหารูปมาใช้ได้ (โดยไม่ผิดลิขสิทธิ์) และจะใส่มันในเว็บเราได้ไหม ด้วยวิธีการอย่างไร?

ระหว่างบทเรียนนี้ เราจะทำการใส่เอฟเฟ็กต์ให้กับรูปภาพ อย่างเช่นภาพแผนที่เมืองในฝันของเรา

แผนที่เมืองในฝัน

ชนิดของรูปภาพ

ชนิดของรูปภาพที่ถูกใช้มากที่สุดบนเว็บคือ JPEG, PNG และ SVG ลองมาคุยกันอย่างละเอียดเกี่ยวกับพวกมันดู

JPEG

ชนิด JPEG ก็เช่นไฟล์รูปที่ลงท้ายด้วยนามสกุล .jpeg หรือ .jpg รูปภาพเหล่านี้คือสิ่งที่เรานำมาใช้ประกอบเว็บกันเป็นส่วนมาก

พวกมันยอดเยี่ยมในการทำให้รูปถ่าย (photo) นั้นมีขนาดไฟล์ที่เล็กลง และง่ายต่อการใช้บนเว็บและส่งอีเมล์ เพียงแต่ว่าการลดขนาดไฟล์นี้ หมายถึงคุณจะทำให้ภาพนั้นมีคุณภาพที่ลดลงไปด้วย

PNG

ชนิด PNG นั้นจะมีนามสกุลต่อท้ายว่า ".png" ขณะที่ไฟล์ JPEG จะทำให้สูญเสียคุณภาพของภาพบ้างเล็กน้อย แต่ PNG นั้นจะไม่ ไฟล์เหล่านี้จะทำให้ภาพมีขอบตรงและแหลมเหมือนกับไฟล์ต้นฉบับ แต่ในขณะเดียวกันคุณภาพนี้ก็ทำให้ขนาดของไฟล์นั้นใหญ่กว่า .jpeg

PNG นั้นเป็นตัวเลือกที่ดีสำหรับรูปลายเส้น ตัวอักษร ไอคอนกราฟิกที่มันมีไฟล์ที่ขนาดเล็กอยู่แล้ว มันยังเป็นไปได้ที่จะมีแบ็คกราวน์แบบใส (transparent) ด้วย PNG ซึ่งมันทำไม่ได้ใน JPEG

SVG

SVG (Scalable Vector Graphics) คือรูปภาพที่สามารถย่อหรือขยายได้เท่าที่เราต้องการโดยไม่ทำให้ภาพนั้นแตก ไม่เหมือนกับที่ JPEG หรือ PNG เป็น รูปภาพเหล่านี้จะถูกบันทึกไว้ด้วยนามสกุล .svg และมันเหมาะมากกับพวกภาพลายเส้นและโลโก้ต่างๆ ของบริษัท

รูปภาพที่เราใช้ในเว็บเมืองในฝันของเราเป็น SVG ทั้งหมด! ถ้าเรากลับไปที่ไฟล์ CSS ของเราและเปลี่ยนค่า width ของรูปใดๆ ก็ตามเป็น 1000px มันจะใหญ่ขึ้นมากแต่ยังให้ความคมชัดเช่นเดิม

SVG คือภาพด้านขวา มันชัดกว่ามาก!

จะหารูปภาพได้จากที่ไหนบ้าง

มีที่ๆ เราจะสามารถหารูปฟรีได้ง่ายๆ บนเว็บ

ขณะที่บางรูปเราเอามาใช้ได้โดยไม่เสียค่าใช้จ่าย พวกเขาอาจให้เราทำตามกฏต่างๆ เช่นใส่ชื่อคนถ่ายภาพไปด้วยเมื่อไรก็ตามที่เราใช้มัน รูปอื่นๆ ก็ฟรีที่จะใช้ในงานส่วนตัวและไม่สามารถใช้ได้ในเชิงธุรกิจ

ให้แน่ใจเสมอว่าได้เช็ค licensing (หรือขออนุญาตแล้ว) เมื่อคุณไม่แน่ใจ แต่สำหรับขณะนี้เรามีตัวเลือกต่างๆ มาให้ทั้งฟรีทุกกรณี และ ฟรีสำหรับการใช้งานเท่านั้น

  • Cupcake นั้นมีข้อเสนอหลากหลายสำหรับรูปถ่ายต่างๆ เมื่อคุณเจอภาพบางอันที่คุณชื่นชอบ คุณสามารถคลิกที่ลิ้งค์ Download High Res มันจะให้ชื่อไฟล์และเซฟมันลงที่คอมพิวเตอร์ของคุณ
  • FancyCrave นั้นคืออีกเว็บไซต์สำหรับรูปถ่ายที่ฟรีเต็มที่สำหรับการใช้งาน และมันมีตัวเลือกมากมายให้เลือก เราสามารถใช้สิ่งเหล่านี้ด้วยการคลิกปุ่ม Download และบันทึกไปที่โฟลเดอร์งานของเรา
  • สำหรับไอคอน SVG ทั้งหลาย IcoMoon นั้นมีกราฟิกฟรีจำนวนมากให้ได้เลือก ตั้งแต่การไฮไลท์ icon ที่เราต้องการโดยการคลิกพวกมัน เราสามารถเลือก Generate SVG ... ที่ใต้รูปภาพจากนั้นคลิก Download ได้เลย

การแก้ไขรูปภาพ

นักออกแบบเว็บจำนวนมากใช้โปรแกรมแก้ไขรูปภาพ เช่น Photoshop เพื่อให้ภาพนั้นเกิดการเปลี่ยนแปลงก่อนที่จะเอาขึ้นบนเว็บไซต์ การเปลี่ยนแปลงเหล่านี้ มีหลากอย่างเช่นเปลี่ยนสี เอาแสงเงาออก หรือ การ Crop รูปภาพ

ระบบปฏิบัติการส่วนมากมักจะมีโปรแกรมที่สามารถแก้ไขภาพได้ง่ายๆ ให้เราอยู่แล้ว "Preview" นั้นคือโปรแกรมที่เป็นตัวเลือกของคุณถ้าคุณมีเครื่อง Mac ที่ซึ่งช่วยให้คุณปรับขนาด ทำการ crop หรือบันทึกไฟล์รูปภาพเป็น format อื่นๆ การเปิดโปรแกรม Preview คุณสามารถพิมพ์คำสั่ง search บนคอมพิวเตอร์ของคุณ (รูปสัญลักษณ์แว่นขยายที่อยู่มุมบนขวาของจอนั่นแหละ!) หรือ เปิดรูปภาพด้วยการดับเบิ้ลคลิกมัน เหมือนกับว่ามันเป็นโปรแกรม default ที่ใช้ในการเปิดรูปภาพอยู่แล้ว

สำหรับเครื่องที่ใช้ Windows โปรแกรม "Windows Photo Viewer" หรือ "Paint" จะเป็นโปรแกรม default ที่เราสามารถใช้งานได้ อีกครั้ง มันทำได้แค่การแก้ไขภาพง่ายๆ เท่านั้นนะ

การ Crop รูปภาพ (Cropping)

เมื่อเราได้คุยเกี่ยวกับการ crop นั้นหมายถึงการเอาส่วนที่ไม่ต้องการของรูปภาพออก

การ crop สามารถใช้ได้ดีเมื่อเราต้องการแค่บางส่วนของรูปภาพขนาดใหญ่ รู้ไหมว่าบางทีเราก็สามารถ Crop เป็นรูปอื่นๆ ได้เช่นวงกลมเป็นต้น!

แก้ไขมันด้วย CSS

เหมือนกับการเปลี่ยนขนาดของรูปภาพด้วย CSS เรามี filter เพื่อสร้างเอฟเฟ็กต์อีกหลายชนิดให้เราได้ใช้ อย่างเช่นการสร้างรูปภาพสีขาวดำ รูปภาพพื้นหลังโปร่งแสง หรือ ใช้ปรับความเข้มแสงบนรูปภาพ

ภาพขาวดำ (Grayscale)

เราสามารถแปลงรูปภาพให้มีแค่สีขาวกับดำที่ CSS ได้โดยใช้พร้อพเพอร์ตี้ filter

ภายในพร้อพเพอร์ตี้นี้ เราจะใส่ grayscale และจากนั้นค่าเปอร์เซ็นต์ภายในวงเล็บ

นี่คือวิธีที่รวดเร็วเพื่อดู CSS ซึ่งจะสร้างภาพขาวดำอย่างสมบูรณ์แบบเลยทีเดียว

ค่าความทึบแสง (Opacity)

Opacity นั้นเกี่ยวกับการทำให้ภาพนั้นโปร่งแสง หรือ มองทะลุผ่านได้ พร้อพเพอร์ตี้ opacity นั้นจะใช้ค่าจาก .0 ถึง 1 ด้วย .0 นั้นเราจะสามารถมองทะลุได้ (ล่องหน) และ 1 นั้นจะทึบ ไม่สามารถมองทะลุได้ ค่าทั้งหมดนั้นจะอยู่ระหว่างการให้ค่าความเข้มของการโปร่งแสง

ยกตัวอย่าง ถ้าเราตั้งค่า opacity: .5; ในวงกลมเหล่านี้ที่ไฟล์ CSS ผลลัพธ์นั้นก็จะได้แบบที่เห็นนี้

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

ค่าความเบลอ (Blur)

เรานั้นสามารถทำให้รูปภาพนั้นเบลอโดยใช้ CSS filter ภายในพร้อพเพอร์ตี้ filter เราต้องการใช้ blur ตามด้วยค่าความเบลอเป็น pixel ภายในวงเล็บ

ยิ่งค่า pixel มีค่ามาก ความเบลอของรูปภาพก็จะยิ่งมากขึ้นตามไปด้วย

หมายเหตุ สำหรับรายการ CSS filter ทั้งหมด สามารถดูได้จากที่นี่เลย เพียงแค่คลิกบน CSS tab ของ demo ใดๆ ก็ตามที่เห็นเพื่อดูผลลัพธ์

สรุป

ในบทเรียนนี้ เราต้องเจาะลึกเกี่ยวกับรูปแบบไฟล์ภาพที่เป็นที่นิยมโดยทั่วไปบนเว็บ และก็เอฟเฟ็กต์ต่างๆที่สามารถนำมาใส่เข้ากับรูปภาพได้ ทำให้รูปภาพเรานั้นพร้อมสำหรับเว็บไซต์นั้นเป็นงานเปลี่ยนผันไปตามเครื่องมือที่มี ไปจนถึงเครื่องมือแก้ไขภาพที่ซับซ้อนที่ต้องอาศัยเครื่องมือทรงพลังอื่นๆ เข้ามา

ถัดไปเราจะได้พูดคุยเกี่ยวกับพื้นฐานการออกแบบ ที่ๆ เราจะคุยว่าทำอย่างไรเราจึงจะจัดเรียงสิ่งต่างๆ บนหน้าเพจได้ลงตัวเหมาะสม

แล้วเจอกันรอบเมืองเช่นเดิม

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.