วิธีเพิ่มไฮเปอร์ลิงก์ใน Adobe Illustrator หรือ Photoshop

สำหรับโครงการหรือการนำเสนอทุกประเภท การใส่ลิงก์ไปยังแหล่งข้อมูลหรือข้อมูลอ้างอิงมักจะเป็นประโยชน์ การทำเช่นนี้เป็นเรื่องง่ายด้วย Microsoft Powerpoint หรือ Word เป็นต้น แต่แล้วโปรแกรมแก้ไขภาพที่เราชื่นชอบล่ะ?

การรวมไฮเปอร์ลิงก์ภายใน Adobe Photoshop และ Illustrator ต้องใช้ขั้นตอนที่ซับซ้อนมากกว่าการเลือกข้อความหรือคลิกรูปภาพโดยใช้ปุ่มเมาส์ขวา อย่างไรก็ตาม ผู้ใช้สามารถใช้ฟีเจอร์ในตัวของ Adobe เพื่อให้บรรลุงานนี้ได้ สำหรับผู้ที่ต้องการแนบไฮเปอร์ลิงก์ไปยังคำ รูปภาพ หรือองค์ประกอบอื่นใดในโปรแกรมเหล่านี้ พวกเขาต้องใช้ความคิดสร้างสรรค์

วิธีเพิ่มไฮเปอร์ลิงก์ใน Photoshop

หากต้องการรวมไฮเปอร์ลิงก์ภายในรูปภาพโดยใช้ Adobe Photoshop เราสามารถใช้ประโยชน์จากเครื่องมือ Slice ซึ่งช่วยให้สามารถกำหนด URL เฉพาะให้กับส่วนใดส่วนหนึ่งของกราฟิก แทนที่จะใช้ลิงก์แบบข้อความทั่วไป สิ่งสำคัญที่ควรทราบคือหลังจากสร้างลิงก์แล้ว องค์ประกอบผลลัพธ์จะต้องถูกบันทึกและแจกจ่ายเป็นไฟล์ HTML เนื่องจากไม่รองรับการแชร์เอกสารที่ลิงก์เป็นไฟล์ PDF โดยตรง

ขั้นตอนที่ 1: เปิดไฟล์ Photoshop ของคุณ

ใน Adobe Photoshop ให้เปิดไฟล์ที่ต้องการและเลือกตำแหน่งที่เหมาะสมสำหรับการรวมไฮเปอร์ลิงก์ ขอแนะนำให้วางลิงก์ไว้เหนือองค์ประกอบข้อความหรือกราฟิก เช่น “จองเลย” หรือสัญลักษณ์โซเชียลมีเดีย วิธีการนี้ใช้ไม่ว่าภาพทั้งหมดจะประกอบด้วยองค์ประกอบแบบเรียบๆ หรือใช้การซ้อนชั้นภายในองค์ประกอบภาพก็ตาม

ขั้นตอนที่ 2: ใช้เครื่องมือ Slice

หากต้องการเข้าถึงเครื่องมือ Slice ใน Adobe Photoshop ก่อนอื่นต้องเลือกและรักษาแรงกดดันต่อเครื่องมือครอบตัดที่อยู่บนแถบเครื่องมือ การดำเนินการนี้จะเปิดเผยเครื่องมือเพิ่มเติม รวมถึงเครื่องมือ Slice ที่แสดงด้วยไอคอนมีด อีกทางหนึ่ง ผู้ใช้อาจใช้แป้นพิมพ์ลัดที่กำหนด (C ตามด้วยจุด) เพื่อค้นหาเครื่องมือ Slice ภายในซอฟต์แวร์อย่างรวดเร็ว

ขั้นแรก ร่างขอบเขตที่ต้องการภายในรูปภาพโดยสร้างขอบเขตสี่เหลี่ยมโดยใช้เคอร์เซอร์ตัวชี้ ประการที่สอง ปล่อยปุ่มเมาส์และสร้างจุดยึดสำหรับลิงก์ในตำแหน่งที่เลือก สุดท้ายลากจุดยึดไปยังปลายทางที่ต้องการโดยกดปุ่มซ้ายของเมาส์ค้างไว้จนกว่าจะถึงตำแหน่งสุดท้าย สิ่งสำคัญคือต้องแม่นยำเมื่อวาดกรอบขอบเขตเพื่อให้แน่ใจว่าเฉพาะส่วนที่ตั้งใจของภาพเท่านั้นที่จะเชื่อมโยงกัน

ขั้นตอนที่ 3: เพิ่ม URL ของคุณ

แก้ไขคำแนะนำในการแก้ไขกราฟิกที่แทรกใหม่ดังต่อไปนี้:1. คลิกขวาที่รูปภาพที่แทรกใหม่และเลือก"แก้ไขตัวเลือกชิ้น"จากเมนูบริบท กล่องโต้ตอบจะปรากฏขึ้นพร้อมการตั้งค่าการกำหนดค่าต่างๆ2. ภายในกล่องโต้ตอบนี้ ให้ค้นหาฟิลด์ URL และป้อนไฮเปอร์ลิงก์ที่ต้องการในนั้น หากต้องการให้เนื้อหาที่เชื่อมโยงแสดงในแท็บเบราว์เซอร์แยกต่างหากแทนที่จะแทนที่หน้าปัจจุบัน ให้ป้อน"\_blank"ภายในฟิลด์เป้าหมาย3. เพื่อเพิ่มความชัดเจนและการเข้าถึง ให้ระบุคำอธิบายข้อมูลของรูปภาพในช่อง Alt Tag หลังจากนั้นคลิก “OK” เพื่อบันทึกการเปลี่ยนแปลงใดๆ ที่เกิดขึ้น สิ่งสำคัญคือต้องรวมข้อความแสดงแทนเพื่อปรับปรุงการใช้งานองค์ประกอบภาพโดยผู้ทุพพลภาพหรือใช้เทคโนโลยีช่วยเหลือ

ขั้นตอนที่ 4: บันทึกไฟล์ของคุณ

ขั้นแรก คลิกที่"ไฟล์"จากแถบเมนูด้านบน จากนั้นไปที่"ส่งออก"จากนั้นเลือก"บันทึกสำหรับเว็บ (ดั้งเดิม)“จากรายการแบบเลื่อนลง กล่องโต้ตอบจะปรากฏขึ้น ตรวจสอบให้แน่ใจว่าการตั้งค่าอื่นๆ ทั้งหมดได้รับการตั้งค่าเป็นค่าเริ่มต้น แต่เปลี่ยนตัวเลือกที่กำหนดไว้ล่วงหน้าเป็น JPG หรือ PNG โดยเลือกตัวเลือกใดตัวเลือกหนึ่งที่มีอยู่ สุดท้ายคลิก"บันทึก"เพื่อเสร็จสิ้นกระบวนการ

โปรดป้อนชื่อไฟล์ เลือก"HTML และรูปภาพ"จากเมนูแบบเลื่อนลงรูปแบบ จากนั้นคลิกที่"บันทึก"สิ่งนี้จะสร้างไฟล์รูปภาพ HTML พร้อมกับรูปภาพชิ้นที่เกี่ยวข้อง คุณสามารถดูไฟล์เหล่านี้ได้ในภายหลังโดยใช้ซอฟต์แวร์ที่เหมาะสม เช่น เว็บเบราว์เซอร์

แม้ว่าจะใช้วัตถุประสงค์อื่นเมื่อเปรียบเทียบกับไฮเปอร์ลิงก์ เราอาจใช้กลยุทธ์เชิงสร้างสรรค์ภายในโปรเจ็กต์ Photoshop เพื่อรวมโค้ด QR ไว้ด้วย

วิธีเพิ่มไฮเปอร์ลิงก์ใน Illustrator

Adobe Illustrator มีเครื่องมือ Slice ที่ซ่อนอยู่ภายในแถบเครื่องมือ อย่างไรก็ตาม ขั้นตอนการตัดใน Illustrator นั้นแตกต่างไปจาก Photoshop และไม่อนุญาตให้บันทึกกราฟิกที่แบ่งส่วนเป็นไฟล์ HTML ด้วยเหตุนี้ การรวมลิงก์ไว้ในสไลซ์จึงจำเป็นต้องมีการเขียนโค้ดด้วยตนเองในระหว่างขั้นตอนการพัฒนาเว็บครั้งต่อไป

น่าชื่นชมที่การผสมผสานการโต้ตอบภายในเอกสาร PDF ผ่าน Adobe Illustrator นั้นทำได้อย่างง่ายดาย ด้วยการใช้วิธีการสร้างสรรค์ที่เรียกว่า’การมาสก์’ทำให้สามารถปกปิดไฮเปอร์ลิงก์ภายในอาร์ตเวิร์คของคนๆ หนึ่งได้ เมื่อคลิกที่องค์ประกอบที่กำหนดของการออกแบบ ลิงก์ที่ซ่อนไว้นี้จะเปิดใช้งานและใช้งานได้

ขั้นตอนที่ 1: เปิดหรือออกแบบไฟล์ Illustrator

หากต้องการรวมไฮเปอร์ลิงก์ไว้ใน Adobe Illustrator จะต้องสร้างเลย์เอาต์ที่ต้องการภายในตัวโปรแกรมก่อน ควรสังเกตว่าแนวทางนี้จะสร้าง PDF แบบไดนามิกที่มีความสามารถเชิงโต้ตอบ ซึ่งอาจไม่จำเป็นต้องรองรับทุกสถานการณ์การออกแบบ

กำหนดองค์ประกอบเฉพาะที่คุณต้องการสร้างการเชื่อมต่อ ซึ่งอาจรวมถึงโลโก้ รายละเอียดการติดต่อ หรือเส้นทางการนำทางไปยังเว็บไซต์ที่เกี่ยวข้อง

ขั้นตอนที่ 2: เพิ่ม URL

เพื่อให้แน่ใจว่าองค์ประกอบการออกแบบบางอย่างยังคงไม่เปลี่ยนแปลงในระหว่างการแก้ไข คุณสามารถใช้ฟังก์ชันการล็อกเลเยอร์ใน Adobe XD ได้ โดยการเลือกสัญลักษณ์รูปแม่กุญแจที่ตั้งอยู่ใกล้กับไอคอนรูปดวงตาบนแผงเลเยอร์ คุณอาจรักษาเลเยอร์การออกแบบที่คุณกำหนดไว้ได้ นอกจากนี้ หากต้องการ คุณสามารถเพิ่มเลเยอร์พิเศษเหนือเลเยอร์ที่มีอยู่ได้ด้วยการคลิกเครื่องหมาย”+“บนแผงเลเยอร์ วัตถุประสงค์ของขั้นตอนนี้คือเพื่ออำนวยความสะดวกในการจัดองค์กรและส่งเสริมความชัดเจนภายในลำดับชั้นของโครงการของคุณ

หากต้องการสร้างออบเจ็กต์ข้อความโดยใช้เครื่องมือข้อความใน Adobe XD เพียงเลือกเครื่องมือจากแถบเครื่องมือแล้วคลิกที่ใดก็ได้บนอาร์ตบอร์ดโดยไม่ต้องลากเคอร์เซอร์ สิ่งนี้จะสร้างตัวยึดตำแหน่งสำหรับข้อความโดยอัตโนมัติ หากต้องการแทนที่ตัวยึดตำแหน่งนี้ด้วยเนื้อหาจริง ให้วาง URL ที่สมบูรณ์ซึ่งรวมถึง “ http:// ” และกรอกข้อมูลเพิ่มเติม เช่น ปลายทางของลิงก์หรือคำอธิบาย คุณสามารถเพิ่มหลายลิงก์ภายในกล่องข้อความเดียวกันได้หากต้องการ

ขั้นตอนที่ 3: ปรับขนาดข้อความไฮเปอร์ลิงก์

หากต้องการปกปิดไฮเปอร์ลิงก์ไม่ให้มองเห็น ให้ขยายหรือแก้ไขเนื้อหาข้อความให้ครอบคลุมพื้นที่ที่ลิงก์อยู่ ซึ่งอาจเกี่ยวข้องกับการเปลี่ยนสีข้อความเพื่อให้มองเห็นตำแหน่งได้ง่ายขึ้น แม้ว่าวิธีนี้จะไม่ได้ใช้กันโดยทั่วไปในการปรับแต่งการพิมพ์ใน Adobe Illustrator เนื่องจากมีลักษณะที่ไม่สวยงามเมื่อเปิดออก แต่ก็ถือว่ายอมรับได้เนื่องจากข้อความที่ถูกดัดแปลงจะยังคงถูกปกปิดอยู่

ใช้เครื่องมือการเลือก (V) เพื่อปรับขนาดข้อความของคุณ โดยจะขยายขอบเขตทั้งหมดที่ผู้ใช้มักจะโต้ตอบกับไฮเปอร์ลิงก์

ขั้นตอนที่ 4: ซ่อนไฮเปอร์ลิงก์

มีสองวิธีในการปกปิดไฮเปอร์ลิงก์ ซึ่งแต่ละวิธีให้ผลลัพธ์ที่เทียบเคียงได้

ด้วยการวางตำแหน่งเลเยอร์ไฮเปอร์ลิงก์เหนือเลเยอร์การออกแบบและปรับความทึบให้เป็นศูนย์หลังจากองค์ประกอบทั้งหมดเข้าที่แล้ว คุณจะได้เอฟเฟกต์ภาพที่ต้องการ เพื่อให้บรรลุเป้าหมายนี้ เพียงเลือกรายการทั้งหมดภายในเลเยอร์ในขณะที่ล็อกเลเยอร์การออกแบบไว้ จากนั้นกด Command + A (สำหรับ Mac) หรือ Control + A (สำหรับ Windows) เพื่อสลับความทึบของเลเยอร์ให้เป็นศูนย์เปอร์เซ็นต์

เพื่อให้ได้พื้นหลังที่โปร่งใสสำหรับเนื้อหาบนหน้าเว็บนี้ โปรดทำตามขั้นตอนเหล่านี้:1. ไปที่เมนู"หน้าต่าง"ที่ด้านบนของหน้าจอ2. เลือกตัวเลือกที่มีข้อความ “คุณสมบัติ“3. ปรับแถบเลื่อนความทึบที่อยู่ภายในหน้าต่างที่ปรากฏเป็นค่าศูนย์เปอร์เซ็นต์ (0%) ซึ่งจะทำให้ไฮเปอร์ลิงก์ใด ๆ มองไม่เห็นในขณะที่ยังคงความสมบูรณ์ของกล่องข้อความที่อยู่ด้านล่าง

อีกวิธีหนึ่งคือการวางตำแหน่งไฮเปอร์ลิงก์ไว้ใต้องค์ประกอบภาพภายในองค์ประกอบ เมื่อวางพวกมันไว้ในแต่ละเลเยอร์ เราจะมีความยืดหยุ่นในการปรับเปลี่ยนการจัดเรียงในแผงเลเยอร์ การลดระดับไฮเปอร์ลิงก์ไปยังชั้นฐานช่วยให้ไฮเปอร์ลิงก์ยังคงอยู่ในขณะที่ซ่อนอยู่ใต้คุณลักษณะการออกแบบอื่นๆ ที่อาจบดบังไม่ให้เห็นในภายหลัง

หากคุณไม่ได้จัดสรรเลเยอร์เฉพาะสำหรับไฮเปอร์ลิงก์ของคุณ การจัดเรียงไฮเปอร์ลิงก์ให้วางไว้ด้านหลังองค์ประกอบอื่นๆ นั้นจะตรงไปตรงมา เพื่อให้บรรลุเป้าหมายนี้ เพียงคลิกขวาที่ไฮเปอร์ลิงก์ที่ต้องการ และเลือก"จัดเรียง"จากเมนูบริบท จากนั้นเลือก"ส่งไปด้านหลัง”

ขั้นตอนที่ 5: บันทึกไฟล์ของคุณ

โปรดไปที่เมนู"ไฟล์"จากนั้นคลิกที่ตัวเลือก"บันทึกเป็น"หน้าต่างใหม่จะปรากฏขึ้นโดยคุณสามารถระบุชื่อไฟล์ที่เหมาะสมสำหรับเอกสารของคุณได้ จำเป็นอย่างยิ่งที่คุณจะต้องเลือกรูปแบบ PDF โดยเลือก"PDF"เป็นรูปแบบไฟล์ ตรวจสอบให้แน่ใจว่านี่ไม่ใช่ PDF พร้อมพิมพ์ แต่เป็นเวอร์ชันอเนกประสงค์แทน

คุณมีตัวเลือกในการส่งออกไฟล์ Adobe Illustrator ในรูปแบบต่างๆ นอกเหนือจาก.pdf แม้ว่าจะไม่แนะนำสำหรับการสร้างไฮเปอร์ลิงก์เชิงโต้ตอบก็ตาม เพื่อให้เกิดการโต้ตอบกับลิงก์ภายในไฟล์ pdf จะต้องแปลงเป็นรูปแบบดิจิทัลก่อน เมื่อบันทึกเสร็จแล้ว เพียงเลื่อนดูเอกสารโดยคลิกที่ไฮเปอร์ลิงก์ที่ฝังอยู่

หากคุณต้องการพิมพ์การออกแบบของคุณ ขอแนะนำให้คุณสร้างโค้ด QR โดยใช้ซอฟต์แวร์ Adobe InDesign และ Illustrator

เพิ่มไฮเปอร์ลิงก์ไปยังโครงการของคุณได้อย่างง่ายดาย

การรวมไฮเปอร์ลิงก์ภายใน Illustrator และ Photoshop สามารถปรับปรุงคุณภาพโดยรวมของโปรเจ็กต์มัลติมีเดีย เช่น การออกแบบเว็บไซต์ จดหมายข่าวดิจิทัล และการนำเสนอได้อย่างมาก โดยมอบประสบการณ์เชิงโต้ตอบให้กับผู้ใช้ ลิงก์เหล่านี้ช่วยให้การนำทางไปยังจุดหมายปลายทางต่างๆ ได้อย่างราบรื่น ไม่ว่าจะเป็นทัวร์เสมือนจริงที่น่าดึงดูดใจ หรือแหล่งข้อมูลที่เกี่ยวข้อง เช่น รายการ Wikipedia ซึ่งท้ายที่สุดแล้วจะทำให้ผู้ดูรับชมเนื้อหาได้ดียิ่งขึ้น