Hogyan készítsünk képes térképet a Photoshop segítségével
Ha rákattint egy webhely képének egy részére, és a böngészője egy másik weboldalra ugrik, valószínűleg egy képtérkép felelős ezért a műveletért. A webhelytervezők HTML-kódot írhatnak, amely kattintható hot spotokat hoz létre bármely képen. A képtérképek kézi elkészítése időigényes, mivel minden egyes hot spot pontos koordinátáit meg kell határozni. A Photoshop Szelet eszközével forró pontokat rajzolhat a képre, hogy automatikusan generálja a szükséges HTML-kódot.
Képes térkép létrehozása
1. lépés
Indítsa el a Photoshop programot, és nyissa meg a képtérképpé konvertálni kívánt képet. Kattintson és tartsa lenyomva a "Vágás" eszközt, hogy megjelenítse a többi eszközt tartalmazó menüt. Kattintson a "Szelet" eszközre a kiválasztásához.
2. lépés
Kattintson egy pontra a képen belül, és húzza a Szelet eszközt egy határolókeret rajzolásához a kép azon része köré, amelyet kattinthatóvá szeretne tenni. A Photoshop további "automatikus szeleteket" rajzol a kép más részei köré. Ezek az automatikus szeletek biztosítják, hogy a kép minden része egy szeletbe kerüljön.
3. lépés
Kattintson a jobb gombbal a létrehozott szelet belsejébe, és válassza a "Szeletbeállítások szerkesztése" lehetőséget a Szelet beállításai ablak megnyitásához. Írja be a szelethez társítani kívánt URL-t. A Photoshop által a szeletnek adott alapértelmezett nevet is lecserélheti, ha beír egy újat a „Név” szövegmezőbe.
4. lépés
Kattintson az "OK" gombra a Szelet beállításai ablak bezárásához és a képhez való visszatéréshez. Kattintson egy másik pontra a képen belül, és húzza a Szelet eszközt további szeletek létrehozásához, ha szükséges.
Képtérképszeletek beállítása
1. lépés
Válassza ki a "Szeletválasztó eszközt" az eszköztáron, és kattintson az áthelyezni kívánt szelet belsejébe.
2. lépés
Tartsa lenyomva a bal egérgombot, és húzza a szeletet egy új helyre.
3. lépés
Tartsa az egérmutatót a szelet egyik széle fölött, és megjelenik egy vonal, amelynek mindkét végén nyilak láthatók. Kattintson erre a vonalra, tartsa lenyomva a bal egérgombot, és húzza az egeret, ha nagyobbra vagy kisebbre szeretné tenni a szeletet.
Képtérkép mentése
1. lépés
Kattintson a "Fájl", majd a "Mentés webre" gombra a Mentés webre ablak megnyitásához.
2. lépés
Kattintson az "Előbeállítás" gombra, és válassza ki a megjelenő fájltípus-beállítások egyikét. A választható lehetőségek közé tartozik a GIF 128 Dithered, a JPEG High és a PNG-24.
3. lépés
Kattintson a "Mentés" gombra egy ablak megnyitásához, amely megjeleníti a merevlemez fájljait és mappáit. Keresse meg azt a mappát, ahová menteni szeretné a képtérkép fájlokat, és írja be a képtérkép nevét a Fájlnév szövegmezőbe.
4. lépés
Kattintson a "Formátum" legördülő menüre, és válassza a "HTML és képek" lehetőséget. Kattintson a "Mentés" gombra, hogy az összes fájlt a megadott mappába mentse.
Tipp
A Photoshop minden szeletet külön képként ment el egy képek mappába. A program elment egy HTML-dokumentumot is, amelynek a neve megegyezik a „Fájlnév” szövegmezőbe beírt névvel. Ha megtalálja azt a HTML-fájlt a File Explorerben, és duplán kattint a fájlra, a böngésző megnyílik, és megjeleníti a képtérképet. A képtérkép különböző részeire kattintva navigálhat a szeletekhez rendelt URL-címekhez. Ha például az Egyesült Államok térképét államokra osztotta úgy, hogy minden egyes államhoz szeletet hoz létre, rákattinthat egy államra, hogy az adott állam szeletéhez rendelt URL-címre ugorjon.
Adjon értelmes neveket a szeleteknek, és könnyebben azonosíthatja őket, ha valaha is módosítani szeretné a Photoshop által generált HTML-kódot. Például, ha létrehoz egy szeletet, amely körülveszi Iowa államot, elnevezheti a szeletet Iowa-nak.
Valószínűleg ugyanabban a formátumban szeretné menteni a képtérkép képeit, mint az eredeti képet. Ha például JPEG-ről van szó, válassza ki a JPEG-beállítások egyikét a Mentés webre ablak Előre beállított legördülő menüjéből. Válassza például a „JPEG alacsony” lehetőséget, és a Photoshop gyenge minőségű JPEG képeket generál. Minél gyengébb a kép minősége, annál gyorsabban töltődik be a webböngészőben.
Figyelmeztetés
Ez a cikk az Adobe Photoshop CC 2014-es verziójára vonatkozik. Egyes információk a szoftver más verzióiban eltérhetnek.