ต้องการ สร้างเว็บลิงก์ที่คลิกได้บน JPG ได้อย่างไร Photoshop เป็นซอฟต์แวร์แก้ไขกราฟิกอเนกประสงค์จาก Adobe Photoshop สามารถใช้ทำงานหลายอย่างนอกเหนือจากงานกราฟิกแบบดั้งเดิม คุณอาจกำลังสร้างเว็บไซต์และต้องการเพิ่มรูปภาพที่มีลิงก์อยู่ในนั้น สามารถใช้ Photoshop เพื่อเพิ่มไฮเปอร์ลิงก์ไปยังรูปภาพ JPEG เมื่อคุณ เพิ่มไฮเปอร์ลิงก์ไปยังรูปภาพโดยใช้ Photoshop Photoshop ยังจัดเตรียมโค้ด HTML เพื่อให้สามารถฝังรูปภาพลงในเว็บไซต์ของคุณได้
วิธีเพิ่มไฮเปอร์ลิงก์ไปยัง JPEG ภาพใน Photoshop
การเพิ่มไฮเปอร์ลิงก์ไปยัง JPEG ใน Photoshop สามารถทำได้ทั้งภาพหรือบางส่วนของภาพ ความสามารถในการไฮเปอร์ลิงก์รูปภาพใน Photoshop นั้นยอดเยี่ยมสำหรับการใช้เมื่อเพิ่มรูปภาพไปยังเว็บไซต์ อีคอมเมิร์ซของเว็บไซต์อื่นที่ใช้รูปภาพสามารถทำให้รูปภาพเหล่านี้คลิกได้ หน้าเว็บยังสามารถสร้างขึ้นใน Photoshop เป็นภาพเดียวแล้วเพิ่มลิงก์ วิธีนี้ทำให้หน้าเว็บสามารถออกแบบอย่างสวยงามด้วย Photoshop ขั้นตอนที่เกี่ยวข้องคือ:
เตรียม ImageAdd HyperlinkSave
1] เตรียมรูปภาพ
เปิดรูปภาพใน Photoshop โดยไปที่ ไฟล์ เปิด > หรือกด Ctrl + O คุณจะเห็นกล่องโต้ตอบ เปิด ค้นหารูปภาพ จากนั้นคลิกรูปภาพนั้นแล้วกด เปิด คุณยังสามารถเปิดภาพโดยค้นหาจากคอมพิวเตอร์ของคุณ จากนั้นคลิกขวาที่รูปภาพแล้วเลือก เปิดด้วย แล้วเลือก Adobe Photoshop อีกวิธีในการเปิดภาพใน Photoshop คือการค้นหาภาพ คลิก และลากไปยัง Photoshop
นี่คือ ภาพที่ไฮเปอร์ลิงก์จะถูกเพิ่มเข้าไป รูปภาพเป็นแบนเนอร์สำหรับเว็บไซต์ของร้านเบเกอรี่
รูปภาพที่คุณต้องการไฮเปอร์ลิงก์สามารถเป็นรูปภาพที่คุณกำลังดำเนินการอยู่ในขณะนี้ ในทั้งสองกรณี ทำให้ภาพดูน่าสนใจแต่ให้ข้อมูลเพื่อดึงดูดให้ผู้คนคลิก รูปภาพที่เปิดสามารถแก้ไขและเพิ่มคำเพื่อพูดว่า คลิกที่นี่ หรือบางอย่างเพื่อแจ้งให้ผู้ใช้คลิก
คุณสามารถเลือกที่จะทำให้ภาพทั้งหมดคลิกได้หรือเพียงบางส่วน รูปภาพ. หากคุณกำลังจะแก้ไขรูปภาพที่เปิดเพื่อให้เป็นลิงก์ คุณสามารถเขียนว่า คลิกที่นี่ หรือข้อความที่จะแจ้งให้ผู้ใช้คลิก
เมื่อคุณ การสร้างหน้าเว็บใน Photoshop ที่คุณต้องการทำให้คลิกได้ คุณจะต้องสร้างและบันทึกเป็นรูปภาพ จากนั้นคุณจะตัดสินใจว่าคุณต้องการคลิกได้ที่ใด โดยปกติจะมีปุ่ม รูปภาพ โลโก้ และส่วนอื่นๆ ของหน้าเว็บที่สามารถคลิกได้ วิธีของฉันในการเพิ่มไฮเปอร์ลิงก์ให้กับรูปภาพที่ฉันสร้างใน Photoshop คือการบันทึกไฟล์ Photoshop เป็น JPEG จากนั้นเปิด JPEG ใน Photoshop และเพิ่มลิงก์
2] เพิ่มไฮเปอร์ลิงก์
เมื่อคุณเตรียมภาพเสร็จแล้วและพอใจกับรูปลักษณ์แล้ว คุณก็สามารถทำขั้นตอนต่อไปได้ ตัดสินใจเลือกส่วนหรือส่วนของรูปภาพที่คุณต้องการให้ไฮเปอร์ลิงก์ จะเป็นความคิดที่ดีที่จะบันทึกรูปภาพหรือหน้าเว็บที่เสร็จสมบูรณ์เป็นไฟล์ Photoshop PSD ซึ่งจะทำให้สามารถเปลี่ยนแปลงรูปภาพได้หากต้องการ จากนั้นคุณสามารถบันทึกสำเนาของรูปภาพในรูปแบบไฟล์อื่นเพื่อให้คุณสามารถเพิ่มไฮเปอร์ลิงก์ได้ เนื่องจากรูปภาพจะใช้สำหรับเว็บ จะเป็นการดีที่สุดที่จะบันทึกเป็น JPEG แล้วเพิ่มไฮเปอร์ลิงก์ คุณสามารถเพิ่มปุ่ม ข้อความ ไอคอน หรืออะไรก็ได้ที่คุณต้องการเพิ่มไฮเปอร์ลิงก์
สไลซ์รูปภาพ
เมื่อคุณได้เตรียมรูปภาพและทุกอย่างเข้าที่แล้ว ได้เวลาเพิ่มไฮเปอร์ลิงก์แล้ว ก่อนที่สิ่งนี้จะสามารถทำได้ คุณจะต้องแบ่งส่วนของรูปภาพที่คุณต้องการเพิ่มไฮเปอร์ลิงก์เข้าไป
ไปที่แผงเครื่องมือด้านซ้ายและมองหาเครื่องมือสไลซ์ ซึ่งอยู่ในเมนูป๊อปอัปเดียวกันกับเครื่องมือครอบตัด หากคุณไม่เห็นเครื่องมือ Slice ให้คลิก เครื่องมือครอบตัด ค้างไว้จนกว่าคุณจะเห็นเมนูที่ปรากฏขึ้น จากนั้นคุณสามารถคลิกเพื่อเลือก เครื่องมือตัวแบ่งส่วนข้อมูล ได้ p>
เมื่อคุณเลือกเครื่องมือ Slice แล้ว คุณสามารถวาดอะไรก็ได้ในรูปภาพที่คุณต้องการให้เป็นไฮเปอร์ลิงก์
เพียงแค่วาดรอบๆ รูปภาพ ข้อความ ไอคอน ปุ่ม หรืออะไรก็ได้ที่ คุณต้องการเลือก คลิกและลากในแนวทแยงเหนือรายการ แล้วคุณจะเห็นกล่องปรากฏขึ้นพร้อมตัวเลขและบางบรรทัด แต่ละชิ้นที่ทำจะมีตัวเลข คุณสามารถย้ายส่วนที่ทำเครื่องหมายไว้รอบๆ รูปภาพเพื่อปรับโดยใช้ปุ่มทิศทางบนแป้นพิมพ์ คุณยังสามารถทำให้กล่องแบ่งส่วนรอบๆ รายการใหญ่ขึ้นหรือเล็กลงได้โดยวางเมาส์เหนือด้านข้างจนกว่าลูกศรสองหัวจะปรากฏขึ้น จากนั้นคลิกและลาก
ในบทความนี้ คลิกเพื่อดูข้อมูลเพิ่มเติมและหมวกเชฟ จะถูกไฮเปอร์ลิงก์ ขึ้นอยู่กับสิ่งที่คุณต้องการ คุณสามารถไฮเปอร์ลิงก์รายการอื่นๆ ได้ หมวกเชฟ สามารถไฮเปอร์ลิงก์ไปยังโฮมเพจ เพื่อให้ผู้ใช้ถูกนำไปที่โฮมเพจทุกครั้งที่คลิก คลิกเพื่อดูข้อมูลเพิ่มเติม สามารถเชื่อมโยงกับเพจที่มีข้อมูลเพิ่มเติมเกี่ยวกับการขายหรือข้อมูลใดๆ ที่คุณต้องการให้ผู้ใช้ค้นหา
เพื่อเพิ่มไฮเปอร์ลิงก์ไปยังตำแหน่งต่างๆ บนรูปภาพ เพียงวาด Slice Tool รอบๆ แต่ละพื้นที่ทีละส่วน คุณสามารถเพิ่ม URL เดียวกันหรือ URL ที่แตกต่างกันในแต่ละส่วนได้
นี่คือรูปภาพ กับชิ้นที่แสดง หมวกเชฟและปุ่มข้อมูลเพิ่มเติมเป็นส่วนที่มีไฮเปอร์ลิงก์ อย่างไรก็ตาม รูปภาพมีเส้นที่ทำให้ดูเหมือนถูกตัดเป็นตาราง ที่เป็นเช่นนี้เพราะว่าจริง ๆ แล้วรูปภาพถูกแบ่งส่วนและวางลงในตาราง จากนั้นโค้ด HTML จะรวมไว้ด้วยกันในหน้าเว็บ
เพิ่ม URL
เมื่อสร้างสไลซ์แล้ว ก็ถึงเวลาเพิ่ม URL ไปที่สไลซ์ คลิกขวาที่สไลซ์ที่คุณจะทำไฮเปอร์ลิงก์และเลือก แก้ไขตัวเลือกสไลซ์
หน้าต่างโต้ตอบ ตัวเลือกการแบ่งส่วน จะปรากฏขึ้นเพื่อให้คุณเพิ่มข้อมูล คุณสามารถเพิ่ม ชื่อ ของรูปภาพ และ URL ที่คุณต้องการให้ผู้ใช้ถูกนำไปเมื่อคลิก หากคุณต้องการให้ลิงก์เปิดในแท็บใหม่ ให้พิมพ์ _blank ในช่อง เป้าหมาย เพื่อให้ผู้พิการทางสายตาเข้าถึงลิงก์ได้ง่าย ให้เพิ่มข้อความอธิบายลงในฟิลด์ Alt Tag เมื่อคุณกรอกข้อมูลเสร็จแล้ว ให้กด ตกลง เพื่อยืนยันข้อมูลและปิดหน้าต่าง คุณจะทำซ้ำขั้นตอนสำหรับสไลซ์ทั้งหมด
นี่คือตัวอย่างของตัวเลือก Slice กรอกข้อมูลในกล่องโต้ตอบ
3] บันทึก
เมื่อเตรียมรูปภาพและเพิ่มไฮเปอร์ลิงก์แล้ว ก็ถึงเวลาบันทึกเพื่อนำไปใช้ในเว็บไซต์. หากต้องการบันทึก ให้ไปที่ ไฟล์ จากนั้น บันทึกสำหรับเว็บ หรือกด Alt + Shift + Ctrl + S ใน Photoshop บางเวอร์ชัน คุณจะต้องไปที่ File จากนั้น Save for Web (Legacy)
หน้าต่างโต้ตอบบันทึกสำหรับเว็บจะปรากฏขึ้น
ที่ด้านบนสุดที่มี GIF ให้คลิกลูกศรแบบเลื่อนลงและเลือก JPEG สิ่งนี้จะบันทึกผลลัพธ์เป็น JPEG JPEG เป็นรูปแบบภาพที่ดีกว่าสำหรับใช้บนเว็บเนื่องจากมีขนาดเล็ก และความจริงที่ว่า Photoshop บันทึกไฟล์เป็นภาพแรสเตอร์ ภาพแรสเตอร์เหมาะที่สุดสำหรับแสดงบนเว็บ เมื่อเสร็จสิ้น ให้คลิก บันทึก ที่ด้านล่างของกล่องโต้ตอบ บันทึกสำหรับเว็บ
การดำเนินการนี้จะเปิดบันทึกที่ปรับให้เหมาะสมเป็นหน้าต่าง ไปที่ รูปแบบ และเลือก HTML และรูปภาพ เป็นรูปแบบไฟล์ คุณจะสังเกตเห็นว่านามสกุลไฟล์ถูกเปลี่ยนเป็น.html Photoshop จะบันทึกไฟล์ HTML พร้อมไฮเปอร์ลิงก์สำหรับรูปภาพและรูปภาพด้วย คุณจะเลือกตำแหน่งที่คุณต้องการบันทึกโฟลเดอร์
เมื่อคุณบันทึกเป็น HTML แสดงว่าคุณกำลังบันทึกไฟล์และโฟลเดอร์หลายไฟล์ มีไฟล์ HTML ที่จะดูเหมือนเบราว์เซอร์เริ่มต้น จะมีโฟลเดอร์ที่มีชิ้นส่วนของภาพที่สไลซ์ ไม่ต้องกังวล โค้ด HTML จะรวมส่วนต่างๆ เข้าด้วยกันในหน้าเว็บ
เมื่อคุณบันทึกไฟล์ อย่าลืมบันทึกไฟล์ HTML และโฟลเดอร์ Images ไว้ในตำแหน่งเดียวกัน ไฟล์ HTML จะเชื่อมโยงกับไฟล์รูปภาพโดยใช้ตำแหน่งของไฟล์ คุณอาจต้องสร้างโฟลเดอร์เพื่อรวมไว้ด้วยกัน เมื่อเสร็จแล้ว ให้คลิก บันทึก
เมื่อบันทึกเสร็จแล้ว ให้ไปที่ตำแหน่งที่คุณเลือก แล้วคุณจะเห็นไฟล์ HTML และโฟลเดอร์รูปภาพ หากคุณคลิกที่หน้าเว็บ HTML คุณจะเห็นภาพเปิดขึ้นเหมือนหน้าเว็บและลิงก์จะสามารถคลิกได้ อย่างไรก็ตาม พวกเขาจะไม่นำคุณไปยังหน้าเว็บหรืออินเทอร์เน็ต พวกเขาจะบอกว่าไม่สามารถเข้าถึงไฟล์ได้ สิ่งนี้เกิดขึ้นเนื่องจากไฟล์ถูกแยกออกจากหน้าเว็บที่ใช้งานอยู่
หากต้องการดูโค้ด HTML คุณสามารถคลิกขวาที่ไฟล์ HTML แล้วเลือกเปิดด้วย Notepad, Notepad++, Adobe Dreamweaver หรืออื่นๆ แก้ไขข้อความแล้วคุณจะเห็นโค้ด HTML
โค้ด HTML ที่แสดงใน Notepad
คุณยังสามารถเปิดไฟล์ HTML เป็นหน้าเว็บ จากนั้นคลิกขวาที่หน้าและเลือก ตรวจสอบ ซึ่งจะแสดงโค้ด HTML สำหรับหน้าเว็บ
รหัสจะแสดงเมื่อ เลือกตัวเลือกการตรวจสอบแล้ว
อ่าน: วิธีทำให้ภาพถ่ายสีดูเหมือนภาพสเก็ตช์ใน Photoshop CS6
คุณสามารถเพิ่ม ไฮเปอร์ลิงก์ไปยัง JPEG ใน Photoshop หรือไม่
คุณสามารถเพิ่มไฮเปอร์ลิงก์ไปยังรูปภาพ JPEG ใน Photoshop คุณเปิดไฟล์ใน photoshop ใช้เครื่องมือสไลซ์เพื่อวาดรอบๆ รูปภาพที่คุณต้องการไฮเปอร์ลิงก์ คลิกขวาที่รูปภาพและเลือก แก้ไขตัวเลือกสไลซ์ บันทึกไฟล์เป็น HTML ซึ่งจะสร้างไฟล์ HTML และโฟลเดอร์ที่มีทรัพยากรรูปภาพของคุณ คุณสามารถเพิ่มสิ่งนี้ลงในหน้าเว็บได้
คุณสามารถไฮเปอร์ลิงก์รูปภาพใน Gmail ได้ไหม
วางรูปภาพลงในอีเมล Gmail ของคุณตามปกติ จากนั้นเลือกรูปภาพและคลิกไอคอนลิงก์ที่ด้านล่างของหน้าต่างเขียน ป้อนที่อยู่เว็บที่คุณต้องการให้รูปภาพเชื่อมโยง จากนั้นคลิกปุ่มตกลง
จะเพิ่มไฮเปอร์ลิงก์หลายรายการลงในรูปภาพใน Photoshop ได้อย่างไร
คุณสามารถเพิ่มไฮเปอร์ลิงก์หลายรายการลงใน JPEG ใน Photoshop คุณเปิดไฟล์ใน photoshop ใช้เครื่องมือสไลซ์เพื่อวาดส่วนต่างๆ ของรูปภาพที่คุณต้องการไฮเปอร์ลิงก์ คลิกขวาที่แต่ละส่วนที่คุณต้องการไฮเปอร์ลิงก์และกรอกข้อมูลในตัวเลือก Slice บันทึกไฟล์เป็น HTML ซึ่งจะสร้างไฟล์ HTML และโฟลเดอร์ที่มีทรัพยากรรูปภาพของคุณ คุณสามารถเพิ่มข้อมูลนี้ลงในหน้าเว็บและส่วนต่างๆ ที่แยกจากกันจะประกอบกลับเป็นภาพเดียวโดยมีไฮเปอร์ลิงก์แยกกันสำหรับแต่ละส่วน
