-
การเตรียมรูป มาใช้งานบนเว็บ ควรปรับ ให้ได้ขนาด ที่เหมาะสม ตาม spec ที่แต่ละระบบ กำหนดเอาไว้ ซึ่งนอกจาก จะช่วยให้ หน้าเว็บ ดูสวยงาม ยังแสดงผล ได้รวดเร็ว อีกด้วย ซึ่งคุณ สามารถ จัดเตรียมรูปภาพ ตามขนาด ที่ต้องการ ได้เอง ผ่านโปรแกรม Photoshop เพียง 4 ขั้นตอน ง่ายๆ ซึ่งแต่ละขั้นตอน จะมีรายละเอียด อย่างไรบ้าง ติดตามอ่าน ในบทความ ได้เลย!สำหรับบทความนี้ ทีมงาน 8columns จะมาแนะนำ วิธีเตรียมรูป ผ่านโปรแกรม Photoshop CS6 สำหรับใคร ที่ใช้ Photoshop เวอร์ชั่นอื่นๆ ก็ทำตามได้ เช่นกัน เพียงแต่ เมนูบางส่วน อาจแต่งต่างกันบ้าง เล็กน้อย แต่ concept หลักๆ ยังคงเหมือนกัน
เลือก New -> File เพื่อสร้างไฟล์ใหม่
ให้เปิดโปรแกรม Photoshop ขึ้นมา แล้วไปที่เมนู เลือก New -> File
กำหนดขนาดที่ต้องการ
ในหน้าจอ ที่แสดงขึ้นมา ให้กำหนดขนาดรูป ที่ต้องการ ลงไป โดยอย่าลืมเปลี่ยน หน่วย เป็น Pixels ก่อน ในช่อง Resolution ให้กำหนดไว้ที่ 72 Pexels / Inche ซึ่งเป็นความละเอียด ที่เหมาะสม สำหรับการแสดงรูป บนจอ Monitor ในช่อง Color Mode ให้เลือก RGB Color และ ในช่อง Color Profile ให้เลือก sRGB ซึ่งเป็น Profile ที่เหมาะสำหรับ การแสดงสี บน Web Browser ทั่วไปเมื่อกำหนดค่า เสร็จเรียบร้อย ให้คลิ้กปุ่ม OK จะได้ไฟล์ใหม่ พร้อมพื้นที่ว่าง ตามขนาดที่กำหนด ซึ่งในตัวอย่าง กำหนดขนาดไว้ที่ 280 x 280 px ซึ่งการใช้งานจริง ให้กำหนด ขนาดของคุณ ลงไปแทนวางรูปที่ต้องการ ด้วยเมนู File -> Place
ขั้นตอนถัดมา เราจะวางไฟล์รูป ที่จัดเตรียมไว้ แล้วปรับขนาด ให้เหมาะสม โดยเลือกไปที่เมนู File -> Placeจะปรากฎหน้าจอ "เลือกรูป" ขึ้นมา ให้คุณ browse ไปยัง folder ที่เก็บรูปไว้จากนั้น เมื่อเลือกรูป ที่ต้องการ ได้แล้ว ให้คลิ้กปุ่ม Place เพื่อวางปรับขนาด ให้เหมาะสม
เนื่องจาก รูปภาพ "เครื่องซักผ้า" ในหน้าจอ ด้านบน มีขนาด "ใหญ่กว่า" พื้นที่ ที่กำหนด โปรแกรม Photoshop จึงปรับให้ พอดี กับขนาดหน้าจอ โดยอัตโนมัติภาพด้านบน จะสังเกตุว่า ภาพเครื่องซักผ้า อยู่ชิดขอบจอ มากเกินไป ทำให้รู้สึก "อึดอัด" ซึ่งแก้ปัญหาได้ โดยปรับขนาด ให้เล็กลง โดยคลิ้กที่ จุดสี่เหลี่ยม เล็กๆ ที่อยู่ตามมุมภาพ แล้ว ลาก เพื่อ ย่อ โดยขั้นตอนนี้ แนะนำว่า ควรกดปุ่ม shift ค้างไว้ด้วย ซึ่งจะเป็นการ ย่อขนาด โดยรักษา อัตราส่วนเดิม ของรูปภาพเพียง 4 ขั้นตอน ง่ายๆ คุณก็จะได้ภาพ ตามขนาด ที่ต้องการ ส่วนที่เหลือ จะเป็นการ save ไฟล์ เพื่อนำไปใช้งาน ซึ่งในกรณีนี้ เนื่องจาก เป็นการใช้งาน บนเว็บไซต์ ดังนั้น ทีมงาน 8columns แนะนำให้คุณ บันทึกภาพ ผ่านเมนู File -> Save for Web ซึ่งจะช่วยให้คุณ ได้ไฟล์ ที่มีขนาดเล็กลง ซึ่งจะช่วยให้ หน้าเว็บของคุณ แสดงผล ได้เร็วขึ้น ส่วนวิธีการ Save for Web จะมีรายละเอียด อย่างไร ? ขอยกยอด ไปเขียนอธิบาย ในบทความหน้า แล้วกันนะครับ สำหรับวันนี้ ทีมงาน 8columns ขอจบบทความ เพียงเท่านี้ก่อน แล้วพบกันใหม่ ในบทความหน้า สวัสดีครับ :)บทความที่เกี่ยวข้อง
