Matawebsite Promo Lebaran 2022

Membuat Hyperlink Pada Gambar Menggunakan Photoshop

date 26 Feb 2021
date Elynna
date 5639
date Desain Grafis
Membuat Hyperlink Pada Gambar Menggunakan Photoshop

Hai guys ^^
Kali ini aku bakal share Cara Membuat Hyperlink Pada Gambar Menggunakan Photoshop

“Fungsi dari Hyperlink apa tuh?”

Fungsinya adalah misalnya teman-teman ada membuat sebuah desain yang terdapat sebuah button “Daftar Sekarang”, lalu kita ingin membuat hanya bagian “button” saja yang ketika diklik akan masuk ke situs halaman untuk mendaftar.

Sebenarnya, istilah “Hyperlink” sudah tidak asing lagi dalam dunia pemograman website, tapi kita juga bisa membuatnya menggunakan Photoshop.

 

Untuk membuatnya, yuk ikuti langkah-langkah berikut ini!

 

LANGKAH 1
Siapkan desain yang mau kamu edit.

 

LANGKAH 2
Pilih Slice Tool yang terdapat dibagian opsi Crop Tool.

 

LANGKAH 3
Kemudian, seleksi area yang ingin diberi fungsi Hyperlink. Misalnya disini aku akan memberikan fungsi Hyperlink pada button “Klik Disini!”.

 

LANGKAH 4
Kalo sudah terseleksi areanya, klik kanan pilih Edit Slide Options.

 

LANGKAH 5
Akan muncul popup seperti ini. Masukkan URL situs yang kamu inginkan untuk Hyperlink nya pada form URL seperti gambar dibawah ini :

 

Syarat agar situs Hyperlink nya valid, kamu wajib menambahkan “https://” baru setelah itu disusul dengan “www”.
Note : kalo situsnya belum ada SSL, cukup tambahkan http:// aja ya. Nggak perlu ada “s” nya.

 

LANGKAH 6
Pilih menu File > Export > Save for Web (Legacy).

 

LANGKAH 7
Akan muncul popup seperti ini, klik icon (yang aku tandain pake tanda panah) agar semua area desain bisa tersimpan. Lalu pastikan juga format Presetnya JPEG High, klik button Save.

 

LANGKAH 8
Kemudian pilih filenya mau simpan dimana. Untuk nama filenya bebas, gunakan format HTML and Images, lalu pilih Save.

 

LANGKAH 9
Nah, ini merupakan tampilan filenya setelah berhasil di save. (iconnya nggak harus Firefox seperti ini yaa, karna ini tergantung settingan default browsernya, kalo kamu settingnya Chrome, maka filenya bisa berubah jadi icon Chrome).

Dan ini hasilnya guys!
Coba buka filenya di browser dan klik area yang sudah diberikan fungsi Hyperlink, ketika button “Klik Disini” di klik, maka akan dibawa ke situs Mataweb.

 

 

Oke guys, itulah Cara Membuat Hyperlink Pada Gambar Menggunakan Photoshop
Semoga bermanfaat yaa ^^

Matawebsite Promo
elynna_michella.png

Elynna

Graphic Designer, UI UX Designer, Programmer & Social Media Expert

Hai, aku Graphic Designer, UI UX Designer, Programmer & Social Media Expert yang sudah berpengalaman lebih dari 5 tahun. Disini aku bakal share tutorial dan tips & trik seputar dunia desain. Semangat!

Artikel Populer

Halo, ada yang bisa kami bantu?
Daftar Sekarang