Hozzon létre két vagy több kattintható területet új szeletek hozzáadásával a Photoshopban.
Kép jóváírása: A kép az Adobe jóvoltából.
Az Adobe Photoshop CC Szelet eszközének használatával bármilyen képet vagy képrészletet kattintható hiperhivatkozássá alakíthat. Ennek a funkciónak az a rejtélye, hogy a hiperhivatkozás működéséhez a képet HTML-fájlként kell menteni, nem pedig egyszerű JPG vagy PNG formátumban. Szerencsére ezt a funkciót bárki használhatja, még akkor is, ha nem vagy szakértő a kódolásban. A Photoshop elkészíti a HTML-kódot, és beágyazza a képet egy webbarát képformátumba.
1. lépés
Válassza a "Szelet eszközt".
Kép jóváírása: A kép az Adobe jóvoltából.
Nyissa meg bármelyik képet a Photoshopban. Ideális esetben elég nagynak kell lennie ahhoz, hogy jól megjelenjen a webböngészőben. Válassza ki a "Slice Tool"-t az Eszköztárból. Ha nem látható, kattintson és tartsa lenyomva a Vágóeszköz jobb alsó sarkát vagy a csoportjában lévő más látható eszközt, majd válassza ki a "Szelet eszközt".
A nap videója
2. lépés
Szelet létrehozásához húzza a kurzort a kép fölé.
Kép jóváírása: A kép az Adobe jóvoltából.
Húzza a kurzort arra a területre, amelyre kattintani szeretne. Ha egyetlen hiperhivatkozást szeretne létrehozni egy képen, húzza a kurzort a teljes kép fölé.
3. lépés
Hozzon létre annyi szeletet, amennyit csak szeretne.
Kép jóváírása: A kép az Adobe jóvoltából.
Húzza a Szelet eszköz kurzort csak a kép egy részére, ha egynél több hiperhivatkozást szeretne. Miután felengedte az egérgombot, létrehozhat egy második szeletet a következő hivatkozáshoz. Ha szükséges, egy képen tucatnyi vagy több hiperhivatkozást is létrehozhat.
4. lépés
Hiperhivatkozás hozzáadásához kattintson duplán egy szeletre.
Kép jóváírása: A kép az Adobe jóvoltából.
Kattintson duplán egy szeletre a Szelet eszközzel a Szelet beállításai ablak megnyitásához. Hiperhivatkozás létrehozásához be kell írnia a weboldal címét az „URL” mezőbe. Míg a többi mező nem kötelező, a név használata segít megkülönböztetni az egyik hivatkozást a másiktól. A „_blank” karakter hozzáadása a Cél mezőhöz azt jelenti, hogy a hivatkozásnak egy új webböngésző lapon kell megnyílnia. Az Alt Tag mező az a szöveg, amely akkor jelenik meg, ha a kép nem látható nem grafikus böngészőben, vagy a kép betöltése közben. Az Üzenet szövege mezőt jeleníti meg a böngésző az URL helyén az állapotsorban.
5. lépés
Mentse el a fájlt HTML formátumban.
Kép jóváírása: A kép az Adobe jóvoltából.
Válassza a "Mentés webre" lehetőséget a Fájl menüből, miután a hivatkozások elkészültek. Válassza a "PNG-24" vagy a "JPG" lehetőséget előre beállított értékként, majd kattintson a "Mentés" gombra. Kattintson a "Formátum" menüre, és válassza a "HTML és képek" lehetőséget. Ez megváltoztatja a fájl formátumát HTML-re. Miután a „Mentés” gombra kattintott, a Photoshop egyetlen HTML-oldalt hoz létre a kép és a létrehozott hivatkozások felhasználásával. Maga a képfájl egy Képek mappába kerül mentésre. Töltse fel a HTML-fájlt és a Képek mappát is webhelye ugyanabba a könyvtárába kedvenc FTP-kliensével.
Tipp
Egy egyszerű szövegszerkesztővel, például a Jegyzettömbbel, úgy szerkesztheti a HTML-fájl kódját, mint bármely weboldal esetében. Ha például a webhely képeit egy másik mappában szeretné tartani, a megadott „/images” mappát bármelyik kiválasztott mappára módosíthatja, majd áthelyezheti a képet ebbe a mappába.
Nem szükséges a Photoshop ahhoz, hogy egy weboldalon vagy e-mailben lévő képhez hiperhivatkozást adjon. A legtöbb levelezőprogram tartalmaz hiperhivatkozási funkciót, amely általában csak a képre való jobb gombbal kattintva érhető el, miután beszúrta azt az üzenetbe. Ha feltölti a képet a webhelyére, bármelyik oldalra kattintható képként hozzáadhatja HTML5 kód használatával, például: 
