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
มันจะใหญ่ขึ้นมากแต่ยังให้ความคมชัดเช่นเดิม
จะหารูปภาพได้จากที่ไหนบ้าง
มีที่ๆ เราจะสามารถหารูปฟรีได้ง่ายๆ บนเว็บ
ขณะที่บางรูปเราเอามาใช้ได้โดยไม่เสียค่าใช้จ่าย พวกเขาอาจให้เราทำตามกฏต่างๆ เช่นใส่ชื่อคนถ่ายภาพไปด้วยเมื่อไรก็ตามที่เราใช้มัน รูปอื่นๆ ก็ฟรีที่จะใช้ในงานส่วนตัวและไม่สามารถใช้ได้ในเชิงธุรกิจ
ให้แน่ใจเสมอว่าได้เช็ค 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 ซึ่งจะสร้างภาพขาวดำอย่างสมบูรณ์แบบเลยทีเดียว
img { filter: grayscale(100%); }
ค่าความทึบแสง (Opacity)
Opacity นั้นเกี่ยวกับการทำให้ภาพนั้นโปร่งแสง หรือ มองทะลุผ่านได้ พร้อพเพอร์ตี้ opacity
นั้นจะใช้ค่าจาก .0
ถึง 1
ด้วย .0
นั้นเราจะสามารถมองทะลุได้ (ล่องหน) และ 1
นั้นจะทึบ ไม่สามารถมองทะลุได้ ค่าทั้งหมดนั้นจะอยู่ระหว่างการให้ค่าความเข้มของการโปร่งแสง
ยกตัวอย่าง ถ้าเราตั้งค่า opacity: .5;
ในวงกลมเหล่านี้ที่ไฟล์ CSS ผลลัพธ์นั้นก็จะได้แบบที่เห็นนี้
ชนิดของเอฟเฟ็กต์บนรูปภาพเหล่านี้นั้นเหมาะถ้าเรากำลังมองหาทางที่จะทำให้รูปภาพนั้นไม่เป็นที่สังเกตบนหน้าเพจ มันจะช่วยให้ข้อความนั้นดูโดดเด่นขึ้นมา
ค่าความเบลอ (Blur)
เรานั้นสามารถทำให้รูปภาพนั้นเบลอโดยใช้ CSS filter ภายในพร้อพเพอร์ตี้ filter เราต้องการใช้ blur
ตามด้วยค่าความเบลอเป็น pixel ภายในวงเล็บ
img { filter: blur(5px); }
ยิ่งค่า pixel มีค่ามาก ความเบลอของรูปภาพก็จะยิ่งมากขึ้นตามไปด้วย
หมายเหตุ สำหรับรายการ CSS filter ทั้งหมด สามารถดูได้จากที่นี่เลย เพียงแค่คลิกบน CSS tab ของ demo ใดๆ ก็ตามที่เห็นเพื่อดูผลลัพธ์
สรุป
ในบทเรียนนี้ เราต้องเจาะลึกเกี่ยวกับรูปแบบไฟล์ภาพที่เป็นที่นิยมโดยทั่วไปบนเว็บ และก็เอฟเฟ็กต์ต่างๆที่สามารถนำมาใส่เข้ากับรูปภาพได้ ทำให้รูปภาพเรานั้นพร้อมสำหรับเว็บไซต์นั้นเป็นงานเปลี่ยนผันไปตามเครื่องมือที่มี ไปจนถึงเครื่องมือแก้ไขภาพที่ซับซ้อนที่ต้องอาศัยเครื่องมือทรงพลังอื่นๆ เข้ามา
ถัดไปเราจะได้พูดคุยเกี่ยวกับพื้นฐานการออกแบบ ที่ๆ เราจะคุยว่าทำอย่างไรเราจึงจะจัดเรียงสิ่งต่างๆ บนหน้าเพจได้ลงตัวเหมาะสม
แล้วเจอกันรอบเมืองเช่นเดิม
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post