• วิธีเตรียมรูปภาพ ตามขนาดที่ต้องการ ใน Photoshop


    29/01/2018 10:56

    จำนวนครั้งที่เปิดอ่าน : 754

  • การเตรียมรูป มาใช้งานบนเว็บ ควรปรับ ให้ได้ขนาด ที่เหมาะสม ตาม spec ที่แต่ละระบบ กำหนดเอาไว้ ซึ่งนอกจาก จะช่วยให้ หน้าเว็บ ดูสวยงาม ยังแสดงผล ได้รวดเร็ว อีกด้วย ซึ่งคุณ สามารถ จัดเตรียมรูปภาพ ตามขนาด ที่ต้องการ ได้เอง ผ่านโปรแกรม Photoshop เพียง 4 ขั้นตอน ง่ายๆ ซึ่งแต่ละขั้นตอน จะมีรายละเอียด อย่างไรบ้าง ติดตามอ่าน ในบทความ ได้เลย!
    สำหรับบทความนี้ ทีมงาน 8columns จะมาแนะนำ วิธีเตรียมรูป ผ่านโปรแกรม Photoshop CS6 สำหรับใคร ที่ใช้ Photoshop เวอร์ชั่นอื่นๆ ก็ทำตามได้ เช่นกัน เพียงแต่ เมนูบางส่วน อาจแต่งต่างกันบ้าง เล็กน้อย แต่ concept หลักๆ ยังคงเหมือนกัน

    เลือก New -> File เพื่อสร้างไฟล์ใหม่

    ให้เปิดโปรแกรม Photoshop ขึ้นมา แล้วไปที่เมนู เลือก New -> File
    สร้างไฟล์ใหม่ ผ่านเมนู New -> File

    กำหนดขนาดที่ต้องการ

    ในหน้าจอ ที่แสดงขึ้นมา ให้กำหนดขนาดรูป ที่ต้องการ ลงไป โดยอย่าลืมเปลี่ยน หน่วย เป็น Pixels ก่อน ในช่อง Resolution ให้กำหนดไว้ที่ 72 Pexels / Inche ซึ่งเป็นความละเอียด ที่เหมาะสม สำหรับการแสดงรูป บนจอ Monitor ในช่อง Color Mode ให้เลือก RGB Color และ ในช่อง Color Profile ให้เลือก sRGB ซึ่งเป็น Profile ที่เหมาะสำหรับ การแสดงสี บน Web Browser ทั่วไป
    image
    เมื่อกำหนดค่า เสร็จเรียบร้อย ให้คลิ้กปุ่ม OK จะได้ไฟล์ใหม่ พร้อมพื้นที่ว่าง ตามขนาดที่กำหนด ซึ่งในตัวอย่าง กำหนดขนาดไว้ที่ 280 x 280 px ซึ่งการใช้งานจริง ให้กำหนด ขนาดของคุณ ลงไปแทน
    ได้ไฟล์ใหม่ โดยมีขนาดพื้นที่ ตามที่กำหนด

    วางรูปที่ต้องการ ด้วยเมนู File -> Place

    ขั้นตอนถัดมา เราจะวางไฟล์รูป ที่จัดเตรียมไว้ แล้วปรับขนาด ให้เหมาะสม โดยเลือกไปที่เมนู File -> Place
    วางรูปที่จัดเตรียมไว้ ด้วยเมนู File -> Place
    จะปรากฎหน้าจอ "เลือกรูป" ขึ้นมา ให้คุณ browse ไปยัง folder ที่เก็บรูปไว้
    เลือกรูป ที่จัดเตรียมไว้ใน computer
    จากนั้น เมื่อเลือกรูป ที่ต้องการ ได้แล้ว ให้คลิ้กปุ่ม Place เพื่อวาง

    ปรับขนาด ให้เหมาะสม

    เนื่องจาก รูปภาพ "เครื่องซักผ้า" ในหน้าจอ ด้านบน มีขนาด "ใหญ่กว่า" พื้นที่ ที่กำหนด โปรแกรม Photoshop จึงปรับให้ พอดี กับขนาดหน้าจอ โดยอัตโนมัติ
    รูปภาพ เมื่อวางผ่านเมนู Place
    ภาพด้านบน จะสังเกตุว่า ภาพเครื่องซักผ้า อยู่ชิดขอบจอ มากเกินไป ทำให้รู้สึก "อึดอัด" ซึ่งแก้ปัญหาได้ โดยปรับขนาด ให้เล็กลง โดยคลิ้กที่ จุดสี่เหลี่ยม เล็กๆ ที่อยู่ตามมุมภาพ แล้ว ลาก เพื่อ ย่อ โดยขั้นตอนนี้ แนะนำว่า ควรกดปุ่ม shift ค้างไว้ด้วย ซึ่งจะเป็นการ ย่อขนาด โดยรักษา อัตราส่วนเดิม ของรูปภาพ
    รูปภาพ เมื่อปรับขนาด เรียบร้อยแล้ว
    เพียง 4 ขั้นตอน ง่ายๆ คุณก็จะได้ภาพ ตามขนาด ที่ต้องการ ส่วนที่เหลือ จะเป็นการ save ไฟล์ เพื่อนำไปใช้งาน ซึ่งในกรณีนี้ เนื่องจาก เป็นการใช้งาน บนเว็บไซต์ ดังนั้น ทีมงาน 8columns แนะนำให้คุณ บันทึกภาพ ผ่านเมนู File -> Save for Web ซึ่งจะช่วยให้คุณ ได้ไฟล์ ที่มีขนาดเล็กลง ซึ่งจะช่วยให้ หน้าเว็บของคุณ แสดงผล ได้เร็วขึ้น ส่วนวิธีการ Save for Web จะมีรายละเอียด อย่างไร ? ขอยกยอด ไปเขียนอธิบาย ในบทความหน้า แล้วกันนะครับ สำหรับวันนี้ ทีมงาน 8columns ขอจบบทความ เพียงเท่านี้ก่อน แล้วพบกันใหม่ ในบทความหน้า สวัสดีครับ :)

    บทความที่เกี่ยวข้อง


8columns ให้บริการ เว็บไซต์ แบบ Responsive พร้อม ระบบแก้ไขข้อมูล ที่ใช้งานง่าย แก้ไขได้จริง! เหมาะสำหรับ บริษัท และ ธุรกิจทั่วไป ที่ต้องการเว็บไซต์ ขนาดเล็ก แบบ Custom Made ที่ดูน่าเชื่อถือ, มีคุณภาพ และ ราคา ไม่แพง สอบถาม เพิ่มเติม หรือ ขอรับการสาธิต ฟรี! ผ่านอินเตอร์เน็ต ไม่ต้องเดินทาง ใช้เวลาเพียง 20 นาที โทร. 080-597-9990 LINE: 8columns