Ako vytvoríte mapu obrázkov v Adobe Illustrator?

Interaktívnu mapu obrázkov nemôžete vytvoriť priamo v Adobe Illustrator. Obrazové mapy sa používajú na definovanie oblastí, ktoré je možné kliknúť v rámci obrázka, zvyčajne na navigáciu na webovej stránke, a na fungovanie vyžadujú backend jazyk, ako je HTML a JavaScript.

Môžete však pripraviť obrázok a definovať oblasti, ktoré je možné kliknúť V ilustrátorovi, ktorý potom môžete použiť vo svojom webovom kóde:

1. Pripravte si svoj obrázok v ilustrátore:

* Otvorte svoj obrázok v ilustrátore.

* Uistite sa, že je na požadovanej veľkosti a rozlíšení pre váš web.

* Vektorujte obrázok: Vďaka tomu je škálovateľné bez straty kvality. Môžete to urobiť pomocou funkcie obrázka Trace (Window> Trace Image).

* Skupina Všetky prvky: Vyberte všetky prvky vo vašom obrázku a zoskupte ich (Object> Group), aby ste ich udržali pohromade.

2. Definujte oblasti, ktoré je možné kliknúť:

* Použite nástroj na pero (p) alebo tvarové nástroje: Vytvorenie presných tvarov pre vaše oblasti, ktoré je možné kliknúť.

* Vytvorte novú vrstvu: To pomáha organizovať prvky vašej obrazovej mapy.

* Nakreslite tvary na vrch svojho obrázka: Uistite sa, že tvary sú jasne definované a zodpovedajú oblastiam, ktoré chcete urobiť kliknutím.

* Pomenujte svoje tvary: Toto bude užitočné pri písaní kódu HTML. Používajte zmysluplné mená, ktoré opisujú oblasť, napr. „Product-1“, „About-US“, „Kontaktné formy“ atď.

3. Exportovať obrázok a tvary:

* Exportovať obrázok ako png alebo jpg: Toto bude váš hlavný obrázok na vašom webe.

* Exportovať tvary ako súbor SVG: Bude to obsahovať informácie o vašich oblastiach, ktoré je možné kliknúť.

4. Vytvorte kód HTML a JavaScript:

* Do svojho súboru HTML pridajte značku obrázka pre exportovaný obrázok.

* Pomocou značiek `Map` a` Area` na definovanie oblastí, ktoré je možné kliknúť. Atribút `Shape` definuje typ tvaru (rect, kruh, poly) a atribút` Coords 'definuje súradnice vášho tvaru (pre tieto hodnoty pozri súbor SVG). Atribút `Href` spája oblasť s konkrétnou adresou URL.

* Ak potrebujete zložitejšie interakcie, možno budete musieť použiť JavaScript na spracovanie kliknutí na mape obrázkov.

Príklad html:

`` `html

`` `

Pamätajte: Presný kód bude závisieť od vašich konkrétnych potrieb a webového rámca, ktorý používate. Existujú tiež rôzne nástroje online obrazovej mapy, ktoré môžu tento proces zjednodušiť.

Tento proces vám umožňuje vytvoriť mapu obrázkov v ilustrátore, ktorú potom môžete použiť vo svojom webovom kóde, vďaka čomu sú vaše obrázky interaktívne pre návštevníkov vašich webových stránok.

• Predchádzajúca strana: Existuje bezplatné stiahnutie pre Adobe Illustrator? 
• Ďalšia strana: Potrebujete Adobe Premier, aby ste mohli pracovať po účinkoch?