เปิด Photoshop และเปิดรูปภาพที่คุณต้องการแปลงเป็นแผนผังรูปภาพ คลิกเครื่องมือ "ครอบตัด" ค้างไว้เพื่อแสดงเมนูที่มีเครื่องมืออื่นๆ คลิกเครื่องมือ "Slice" เพื่อเลือก
คลิกจุดภายในรูปภาพแล้วลากเครื่องมือ Slice เพื่อวาดกรอบล้อมรอบส่วนของรูปภาพที่คุณต้องการให้คลิกได้ Photoshop วาด "auto slices" เพิ่มเติมรอบๆ ส่วนอื่นๆ ของรูปภาพ สไลซ์อัตโนมัติเหล่านี้ช่วยให้แน่ใจว่าทุกส่วนของรูปภาพรวมอยู่ในสไลซ์
คลิกขวาภายในสไลซ์ที่คุณสร้างและเลือก "แก้ไขตัวเลือกสไลซ์" เพื่อเปิดหน้าต่างตัวเลือกสไลซ์ พิมพ์ URL ที่คุณต้องการเชื่อมโยงกับสไลซ์ คุณยังสามารถแทนที่ชื่อเริ่มต้นที่ Photoshop กำหนดให้กับสไลซ์โดยพิมพ์ชื่อใหม่ในกล่องข้อความ "ชื่อ"
คลิก "ตกลง" เพื่อปิดหน้าต่างตัวเลือก Slice และกลับไปที่รูปภาพ คลิกจุดอื่นในรูปภาพแล้วลากเครื่องมือ Slice เพื่อสร้างชิ้นส่วนเพิ่มเติมตามต้องการ
เลือก "Slice Select Tool" จากแถบเครื่องมือและคลิกภายในชิ้นส่วนที่คุณต้องการย้าย
กดปุ่มซ้ายของเมาส์ค้างไว้แล้วลากชิ้นไปยังตำแหน่งใหม่
วางเคอร์เซอร์ของเมาส์ไว้เหนือขอบด้านใดด้านหนึ่งและเส้นที่มีลูกศรอยู่ที่ปลายแต่ละด้านจะปรากฏขึ้น คลิกที่บรรทัดนั้น กดปุ่มซ้ายของเมาส์ค้างไว้แล้วลากเมาส์ หากคุณต้องการทำให้สไลซ์ใหญ่ขึ้นหรือเล็กลง
คลิก "ไฟล์" ตามด้วย "บันทึกสำหรับเว็บ" เพื่อเปิดหน้าต่างบันทึกสำหรับเว็บ
คลิก "Preset" และเลือกตัวเลือกประเภทไฟล์ที่ปรากฏขึ้น ตัวเลือกต่างๆ ได้แก่ GIF 128 Dithered, JPEG High และ PNG-24
คลิก "บันทึก" เพื่อเปิดหน้าต่างที่แสดงไฟล์และโฟลเดอร์ในฮาร์ดไดรฟ์ของคุณ เรียกดูโฟลเดอร์ที่คุณต้องการบันทึกไฟล์แผนผังรูปภาพ แล้วพิมพ์ชื่อสำหรับแผนผังรูปภาพในกล่องข้อความชื่อไฟล์
คลิกเมนูแบบเลื่อนลง "รูปแบบ" และเลือก "HTML และรูปภาพ" คลิก "บันทึก" เพื่อบันทึกไฟล์ทั้งหมดไปยังโฟลเดอร์ที่คุณระบุ
Photoshop จะบันทึกแต่ละชิ้นเป็นรูปภาพแยกต่างหากในโฟลเดอร์รูปภาพ โปรแกรมยังบันทึกเอกสาร HTML ที่มีชื่อเดียวกับชื่อที่คุณพิมพ์ในกล่องข้อความ "ชื่อไฟล์" หากคุณพบไฟล์ HTML นั้นใน File Explorer และดับเบิลคลิกที่ไฟล์ เบราว์เซอร์ของคุณจะเปิดขึ้นและแสดงแผนที่รูปภาพของคุณ คลิกส่วนต่างๆ ของแผนผังรูปภาพเพื่อนำทางไปยัง URL ที่คุณกำหนดให้กับสไลซ์ ตัวอย่างเช่น หากคุณแบ่งแผนที่ของสหรัฐอเมริกาออกเป็นรัฐโดยการสร้างสไลซ์สำหรับแต่ละรัฐ คุณสามารถคลิกรัฐเพื่อไปที่ URL ที่กำหนดให้กับสไลซ์ของรัฐนั้น
ตั้งชื่อสไลซ์ที่สื่อความหมาย แล้วคุณจะพบว่ามันง่ายกว่าที่จะระบุชื่อเหล่านั้น หากคุณต้องการปรับแต่งโค้ด HTML ที่ Photoshop สร้างขึ้น ตัวอย่างเช่น หากคุณสร้างสไลซ์ที่ล้อมรอบรัฐไอโอวา คุณสามารถตั้งชื่อสไลซ์ไอโอวาได้
คุณอาจต้องการบันทึกภาพแผนที่ภาพของคุณในรูปแบบเดียวกับภาพต้นฉบับ ตัวอย่างเช่น หากเป็น JPEG ให้เลือกตัวเลือก JPEG ตัวใดตัวหนึ่งจากเมนูดรอปดาวน์พรีเซ็ตในหน้าต่างบันทึกสำหรับเว็บ ตัวอย่างเช่น เลือก “JPEG Low” และ Photoshop จะสร้างภาพ JPEG คุณภาพต่ำ ยิ่งคุณภาพของรูปภาพต่ำ ก็ยิ่งโหลดในเว็บเบราว์เซอร์ได้เร็วเท่านั้น
บทความนี้ใช้ได้กับ Adobe Photoshop CC เวอร์ชัน 2014 ข้อมูลบางอย่างอาจแตกต่างกันในซอฟต์แวร์เวอร์ชันอื่น
