วิธีการ จัดวางสองรูปข้างกัน

ดาวน์โหลดบทความ
ร่วมเขียน โดย Andrea Enger

ดาวน์โหลดบทความ

การจัดวางรูปภาพ 2 รูปเคียงข้างกัน เป็นวิธีที่เหมาะจะใช้นำเสนอรูปก่อน-หลัง (before and after) ใช้เปรียบเทียบรูป หรือทำภาพตัดแปะ (คอลลาจ) ในบล็อกหรือเว็บไซต์ คุณใช้เว็บแต่งรูปฟรีอย่าง PhotoJoiner และ Picisto หรือจะเขียนโค้ด HTML สำหรับจัดวาง 2 รูปข้างกัน ในเว็บอย่าง WordPress และ Blogger ก็ได้

วิธีการ 1
วิธีการ 1 ของ 3:

ใช้ PhotoJoiner

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/38\/Place-Two-Pictures-Side-by-Side-Step-1.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/38\/Place-Two-Pictures-Side-by-Side-Step-1.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เข้าเว็บ PhotoJoiner ที่ http://www.photojoiner.net/ .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6a\/Place-Two-Pictures-Side-by-Side-Step-2.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6a\/Place-Two-Pictures-Side-by-Side-Step-2.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    รูปจะแสดงในหน้าจอ ใน PhotoJoiner
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/52\/Place-Two-Pictures-Side-by-Side-Step-3.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/52\/Place-Two-Pictures-Side-by-Side-Step-3.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    รูปนี้จะขึ้นทางขวาของรูปแรก
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d4\/Place-Two-Pictures-Side-by-Side-Step-4.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d4\/Place-Two-Pictures-Side-by-Side-Step-4.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เป็นฟีเจอร์เพิ่มขอบ (margin) แบ่ง 2 รูปออกจากกัน
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/30\/Place-Two-Pictures-Side-by-Side-Step-5.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/30\/Place-Two-Pictures-Side-by-Side-Step-5.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ทั้ง 2 รูปจะรวมกันเป็นรูปเดียว
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/25\/Place-Two-Pictures-Side-by-Side-Step-6.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/25\/Place-Two-Pictures-Side-by-Side-Step-6.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4e\/Place-Two-Pictures-Side-by-Side-Step-7.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4e\/Place-Two-Pictures-Side-by-Side-Step-7.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เพื่อเซฟรูปที่จัดวางข้างกันแล้ว
    โฆษณา
วิธีการ 2
วิธีการ 2 ของ 3:

ใช้ Picisto

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/4a\/Place-Two-Pictures-Side-by-Side-Step-8.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/4a\/Place-Two-Pictures-Side-by-Side-Step-8.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เข้าเว็บ Picisto ที่ http://www.picisto.com/ .
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6c\/Place-Two-Pictures-Side-by-Side-Step-9.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6c\/Place-Two-Pictures-Side-by-Side-Step-9.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คลิก “Signup” มุมขวาบน แล้วสร้างบัญชีฟรีตามขั้นตอนที่ปรากฏ. ต้องลงทะเบียน Picisto ก่อน ถึงจะรวมรูปในเว็บนี้ได้
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/Place-Two-Pictures-Side-by-Side-Step-10.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/Place-Two-Pictures-Side-by-Side-Step-10.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/33\/Place-Two-Pictures-Side-by-Side-Step-11.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/33\/Place-Two-Pictures-Side-by-Side-Step-11.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คลิก “Upload / Choose Photo” แล้วคลิก “Browse” เพื่อเลือกรูปแรกที่จะใช้. รูปจะอัพโหลดแล้วขึ้นในเว็บ Picisto
    • หรือเลือกอัพโหลดรูปจาก Facebook, Instagram, URL และ webcam แทน
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1c\/Place-Two-Pictures-Side-by-Side-Step-12.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1c\/Place-Two-Pictures-Side-by-Side-Step-12.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คลิก “Upload / Choose Photo” อีกรอบ แล้วคลิก “Browse” เพื่อเลือกรูปที่ 2. รูปนี้จะขึ้นทางขวาของรูปแรก
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/Place-Two-Pictures-Side-by-Side-Step-13.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-13.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/Place-Two-Pictures-Side-by-Side-Step-13.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เลื่อนลงไปทางด้านล่างของรูป แล้วคลิก “Finish and Save Photo”. Picisto จะขึ้นข้อความว่าเซฟรูปแล้วเรียบร้อย
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Place-Two-Pictures-Side-by-Side-Step-14.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Place-Two-Pictures-Side-by-Side-Step-14.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/52\/Place-Two-Pictures-Side-by-Side-Step-15.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-15.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/52\/Place-Two-Pictures-Side-by-Side-Step-15.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-15.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เท่านี้รูปก็ประกอบร่างกัน เซฟรวมเป็นรูปเดียว
    โฆษณา
วิธีการ 3
วิธีการ 3 ของ 3:

ใช้ HTML

ดาวน์โหลดบทความ
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/53\/Place-Two-Pictures-Side-by-Side-Step-16.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-16.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/53\/Place-Two-Pictures-Side-by-Side-Step-16.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-16.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    แก้ไขโพสต์ในบล็อกหรือหน้าเว็บ ที่อยากให้มี 2 รูปข้างกัน.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a8\/Place-Two-Pictures-Side-by-Side-Step-17.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-17.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Place-Two-Pictures-Side-by-Side-Step-17.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-17.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    หลังจากนี้ให้คลิกแล้วลากรูปไปยังส่วนต่างๆ ในโพสต์ของบล็อก เพื่อจัดวางไว้ข้างกัน
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/Place-Two-Pictures-Side-by-Side-Step-18.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-18.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/Place-Two-Pictures-Side-by-Side-Step-18.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-18.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ตรงนี้ให้ paste โค้ดสำหรับทำให้ 2 รูปอยู่ข้างกัน
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b6\/Place-Two-Pictures-Side-by-Side-Step-19.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-19.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b6\/Place-Two-Pictures-Side-by-Side-Step-19.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-19.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คลิกเคอร์เซอร์ตรงที่จะให้รูปขึ้นข้างกัน แล้ว paste โค้ด. <table><tbody><tr><td>photo 1-1</td><td>photo 1-2</td></tr></tbody></table>
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/25\/Place-Two-Pictures-Side-by-Side-Step-20.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-20.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/25\/Place-Two-Pictures-Side-by-Side-Step-20.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-20.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    จะเห็นกล่องสีเทา 2 กล่องข้างกัน เขียนว่า “photo 1-1” และ “photo1-2”
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/91\/Place-Two-Pictures-Side-by-Side-Step-21.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-21.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/91\/Place-Two-Pictures-Side-by-Side-Step-21.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-21.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คลิกแล้วลากรูปแรกไปที่กล่องสีเทาที่เขียนว่า “photo 1-1”.
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/9f\/Place-Two-Pictures-Side-by-Side-Step-22.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-22.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/9f\/Place-Two-Pictures-Side-by-Side-Step-22.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-22.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    คลิกแล้วลากรูปที่ 2 ไปที่กล่องสีเทาที่เขียนว่า “photo 1-2”.
    • ถ้าคลิกแล้วลากรูปไปที่กล่องสีเทาไม่ได้ หรือติดขัดตรงไหน ให้คลิกกลับไปที่ tab HTML แล้วสลับ “photo 1-1” กับ “photo 1-2” ด้วยโค้ด <img border=”0″ src=”INSERT YOUR IMAGE URL” width=”300” /> ค่าความกว้าง (width) จะเปลี่ยนไปตาม preference ที่เลือก
  8. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5e\/Place-Two-Pictures-Side-by-Side-Step-23.jpg\/v4-460px-Place-Two-Pictures-Side-by-Side-Step-23.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5e\/Place-Two-Pictures-Side-by-Side-Step-23.jpg\/v4-728px-Place-Two-Pictures-Side-by-Side-Step-23.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    เท่านี้รูปก็จะอยู่ข้างกันในโพสต์
    โฆษณา

เคล็ดลับ

  • ให้เข้า app store ในมือถือหรือแท็บเล็ต แล้วหาแอพ third-party ที่จัดวางรูปข้างกันได้ สำหรับใช้ใน iOS, Android, Windows Phone หรือ Blackberry แอพรวมรูปดังๆ ที่ดาวน์โหลดมาใช้กันได้ก็เช่น Photo Grid, Pic Stitch, Photo Joiner และ Pic Jointer
โฆษณา

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

วิธีการ
ใช้ Print Screen (แคปหน้าจอ)
วิธีการ
สร้างไฟล์ Zip
วิธีการ
เปลี่ยนขนาด Artboard ของ Adobe Illustrator
วิธีการ
Crop รูปด้วยโปรแกรม Illustrator
วิธีการ
เพิ่มฟอนต์ใน Illustrator
วิธีการ
บีบอัดไฟล์ให้ขนาดเล็กลงมากด้วย 7zip
วิธีการ
ใส่ภาพพื้นหลังใน Word
วิธีการ
ปรับขนาดรูปเป็นหน่วย KB
วิธีการ
เพิ่มฟอนต์ใน Photoshop
วิธีการ
เปิดไฟล์ RAR
วิธีการ
ดู Source Code
วิธีการ
พิมพ์ตัวอักษรโค้งใน Photoshop
วิธีการ
ลบพื้นหลังรูปด้วย Adobe Illustrator
วิธีการ
พริ้นท์เอกสารหลายหน้าในกระดาษแผ่นเดียวด้วย Adobe Reader
โฆษณา

เกี่ยวกับวิกิฮาวนี้

ในภาษาอื่น
มีการเข้าถึงหน้านี้ 1,573 ครั้ง

บทความนี้เป็นประโยชน์กับคุณไหม

โฆษณา