Stvorite dva ili više područja na koja se može kliknuti dodavanjem novih kriški u Photoshopu.
Zasluga slike: Slika ljubaznošću Adobea.
Korištenjem alata Slice Tool u Adobe Photoshopu CC možete pretvoriti bilo koju sliku ili dio slike u hipervezu na koju se može kliknuti. Kvaka ove značajke je da kako bi hiperveza funkcionirala, morate spremiti sliku kao HTML datoteku, a ne kao obični JPG ili PNG. Srećom, ovo je značajka koju svatko može koristiti, čak i ako niste stručnjak za kodiranje. Photoshop stvara HTML kod za vas i ugrađuje sliku u format slike prilagođen webu.
Korak 1
Odaberite "Slice Tool".
Zasluga slike: Slika ljubaznošću Adobea.
Otvorite bilo koju sliku u Photoshopu. U idealnom slučaju, to bi trebalo biti nešto dovoljno veliko da se dobro prikazuje u web pregledniku. Odaberite "Slice Tool" iz okvira s alatima. Ako nije vidljiv, kliknite i držite donji desni kut alata za izrezivanje ili drugog alata u njegovoj grupi koji je vidljiv, a zatim odaberite "Alat za izrezivanje".
Video dana
Korak 2
Povucite pokazivač preko slike da biste stvorili krišku.
Zasluga slike: Slika ljubaznošću Adobea.
Povucite pokazivač preko područja na koje želite da se može kliknuti. Da biste stvorili jednu hipervezu na slici, možete povući pokazivač preko cijele slike.
Korak 3
Napravite onoliko kriški koliko želite.
Zasluga slike: Slika ljubaznošću Adobea.
Povucite pokazivač Slice Tool samo na dio slike ako želite više od jedne hiperveze. Nakon što otpustite tipku miša, možete stvoriti drugu krišku za sljedeću hipervezu. Ako želite, možete stvoriti desetak ili više hiperveza na jednoj slici.
4. korak
Dvaput kliknite na isječak da biste dodali hipervezu.
Zasluga slike: Slika ljubaznošću Adobea.
Dvaput kliknite na krišku pomoću alata za izrezivanje da biste otvorili prozor Mogućnosti rezanja. Da biste stvorili hipervezu, morate upisati adresu web stranice u polje "URL". Dok su druga polja neobavezna, korištenje imena pomoći će razlikovati jednu vezu od druge. Dodavanje "_blank" u polje Cilj navodi da se veza treba otvoriti u novoj kartici web preglednika. Polje Alt Tag je tekst koji se prikazuje ako vaša slika nije vidljiva u preglednicima koji nisu grafički ili dok se slika učitava. Polje Tekst poruke ono je što preglednik prikazuje umjesto URL-a u statusnoj traci.
Korak 5
Spremite datoteku u HTML formatu.
Zasluga slike: Slika ljubaznošću Adobea.
Odaberite "Spremi za web" iz izbornika Datoteka nakon što su vaše veze dovršene. Odaberite "PNG-24" ili "JPG" kao unaprijed postavljenu, a zatim kliknite gumb "Spremi". Kliknite izbornik "Format" i odaberite "HTML i slike". Time se mijenja format datoteke u HTML. Nakon što kliknete "Spremi", Photoshop stvara jednu HTML stranicu koristeći sliku i veze koje ste stvorili. Sama slikovna datoteka sprema se u mapu Slike. Prenesite i HTML datoteku i mapu Slike u isti direktorij na svojoj web stranici koristeći svoj omiljeni FTP klijent.
Savjet
S osnovnim uređivačem teksta kao što je Notepad, možete uređivati kôd HTML datoteke kao i na bilo kojoj web stranici. Na primjer, ako više volite zadržati slike svoje web stranice u drugoj mapi, možete promijeniti navedenu mapu "/images" u bilo koju mapu koju odaberete, a zatim premjestiti sliku u tu mapu.
Ne trebate Photoshop za dodavanje hiperveze na sliku unutar web stranice ili e-pošte. Većina programa za e-poštu uključuje značajku hiperveze, koja je obično dostupna samo desnim klikom na sliku nakon što je umetnete u poruku. Ako prenesete sliku na svoju web stranicu, možete je dodati kao sliku na koju se može kliknuti na bilo koju stranicu pomoću HTML5 koda kao što je: