Luo kaksi tai useampia napsautettavaa aluetta lisäämällä uusia osia Photoshopissa.
Kuvan luotto: Kuva Adoben luvalla.
Adobe Photoshop CC: n Slice Tool -työkalun avulla voit muuttaa minkä tahansa kuvan tai kuvan osan napsautettavaksi hyperlinkiksi. Tämän ominaisuuden saalis on, että jotta hyperlinkki toimisi, sinun on tallennettava kuva HTML-tiedostona tavallisen JPG- tai PNG-tiedoston sijaan. Onneksi tämä on ominaisuus, jota kuka tahansa voi käyttää, vaikka et olisi koodauksen asiantuntija. Photoshop luo HTML-koodin puolestasi ja upottaa kuvan verkkoystävälliseen kuvamuotoon.
Vaihe 1
Valitse "Slice Tool".
Kuvan luotto: Kuva Adoben luvalla.
Avaa mikä tahansa kuva Photoshopissa. Ihannetapauksessa sen pitäisi olla tarpeeksi suuri näkyäkseen hyvin verkkoselaimessa. Valitse "Slice Tool" Toolboxista. Jos se ei ole näkyvissä, napsauta ja pidä painettuna Rajaustyökalun tai muun sen ryhmässä näkyvän työkalun oikeaa alakulmaa ja valitse sitten "Slice Tool".
Päivän video
Vaihe 2
Vedä osoitin kuvan päälle luodaksesi siivu.
Kuvan luotto: Kuva Adoben luvalla.
Vedä osoitin alueen päälle, jota haluat klikata. Voit luoda kuvaan yhden hyperlinkin vetämällä kohdistimen koko kuvan päälle.
Vaihe 3
Luo niin monta siivua kuin haluat.
Kuvan luotto: Kuva Adoben luvalla.
Vedä Slice Tool -osoitin vain kuvan osan päälle, jos haluat useamman kuin yhden hyperlinkin. Kun vapautat hiiren painikkeen, voit luoda toisen osion seuraavaa hyperlinkkiä varten. Halutessasi voit luoda tusinaa tai useampia hyperlinkkejä yhteen kuvaan.
Vaihe 4
Lisää hyperlinkki kaksoisnapsauttamalla osaa.
Kuvan luotto: Kuva Adoben luvalla.
Kaksoisnapsauta siivua Slice Tool -työkalulla avataksesi Slice Options -ikkunan. Hyperlinkin luomiseksi sinun on kirjoitettava Web-sivun osoite "URL"-kenttään. Vaikka muut kentät ovat valinnaisia, nimen käyttäminen auttaa erottamaan linkin toisesta. "_blank":n lisääminen Kohde-kenttään määrittää, että linkin tulee avautua uudella verkkoselaimen välilehdellä. Alt Tag -kenttä on teksti, joka näytetään, jos kuvasi ei näy muissa kuin graafisissa selaimissa tai kuvan latauksen aikana. Viestiteksti-kenttä on se, jonka selain näyttää tilarivillä URL-osoitteen tilalla.
Vaihe 5
Tallenna tiedosto HTML-muodossa.
Kuvan luotto: Kuva Adoben luvalla.
Valitse "Tallenna verkkoon" Tiedosto-valikosta, kun linkit ovat valmiit. Valitse esiasetukseksi joko "PNG-24" tai "JPG" ja napsauta sitten "Tallenna"-painiketta. Napsauta "Muotoile"-valikkoa ja valitse "HTML ja kuvat". Tämä muuttaa tiedostomuodon HTML: ksi. Kun napsautat "Tallenna", Photoshop luo yhden HTML-sivun käyttämällä kuvaa ja luomiasi linkkejä. Itse kuvatiedosto tallennetaan Kuvat-kansioon. Lataa sekä HTML-tiedosto että Kuvat-kansio samaan hakemistoon verkkosivustollasi käyttämällä suosikki FTP-asiakasohjelmaasi.
Kärki
Perustekstieditorilla, kuten Notepadilla, voit muokata HTML-tiedoston koodia samalla tavalla kuin mitä tahansa Web-sivua. Jos esimerkiksi haluat säilyttää verkkosivustosi kuvat eri kansiossa, voit muuttaa määritetyn "/images"-kansion mihin tahansa valitsemaasi kansioon ja siirtää kuvan sitten kyseiseen kansioon.
Sinun ei tarvitse Photoshopia lisätäksesi hyperlinkkiä kuvaan Web-sivulla tai sähköpostissa. Useimmat sähköpostiohjelmat sisältävät hyperlinkkiominaisuuden, joka on yleensä käytettävissä vain napsauttamalla kuvaa hiiren kakkospainikkeella sen jälkeen, kun se on lisätty viestiisi. Jos lataat kuvan verkkosivustollesi, voit lisätä sen klikattavana kuvana mille tahansa sivulle käyttämällä HTML5-koodia, kuten: 
