Dupa ce ati realizat un meniu in Photoshop, de multe ori aveti nevoie sa puneti link-uri pe acesta pentru a-l folosi in cadrul unui site. Pentru lucruri de baza nu este nevoie sa cunoasteti limbajul HTML ci doar sa stiti sa folositi unealta Slice Tool din Photoshop.

Pentru a putea converti un meniu in HTML avem nevoie intai sa realizam acel meniu.
Am folosit meniul din tutorialul - Meniu Stil Vista .

Sa incepem !

1. Deschidem urmatoarea imagine in Photoshop daca nu o avem inca deschisa:

Click dreapta - Copy to Clipboard. Apoi din Photoshop : File - New - OK si CTRL + V.

2.Identificam partile pe care urmeaza sa punem linkuri. Sa zicem ca avem cele 5 butoane si link catre site-ul principal pe logo.


3.Apoi selectam din partea stanga unealta Slice Tool:


4.Cu aceasta unealta vom desena dreptunghiuri in locul unde vrem sa avem un link.
Incepem pentru logo. Incercam sa incadram logo-ul intr-un patrat. Putem apasa tasta SPATIU in timp ce desenam pentru a muta patratul.


5.Acum urmeaza a doua parte - Sa punem un link pe logo.
Dam click dreapta in interiorul patratului si selectam - Edit Slice Options


6.De aici avem diferite optiuni din care cea mai importanta ar fi "URL" unde vom scrie adresa paginii pe care vom fi directionati odata ce am dat click.
Asadar completam doar campul URL cu adresa unui site extern de ex:
URL : http://www.tutorialul.ro
Puteti completa si campul Target care controleaza in ce mod se deschide linkul:
_blank - intr-o noua fereastra
_parent - in aceeasi fereastra (Default)

Apasam OK si trecem la urmatorul link.

7.Urmam din nou pasul 4 si desenam un patrat care sa incadreze butonul acasa:


8.La fel dam click dreapta pe el - Edit Slice Options.
Completam campurile doar ca acum vom pune link catre o pagina interioara, iar acesta va fi de forma: acasa.html

Apasam OK si trecem la butoanele urmatoare.

9. De aici totul se face ca la primul buton - Desenam patratul - click dreapta - Edit Slice Options si adaugam linkul.


10.In caz ca am gresit suprafata unui link putem selecta din stanga Slice Select Tool (din submeniul de la pasul 3).
Apoi selectam un slice si vedem ca putem modifica dimensiunile acestuia, tragand de margini.


11.Acum urmeaza ultimul pas- salvarea pentru HTML.
De sus : File - Save for Web & Devices.. ( ALTR + CTRL + SHIFT + S).
Selectam din dreapta formatul JPEG

Apoi apasam Save, ii dam un nume (meniu.html) si selectam din partea de jos pentru Save as type : HTML and Images.


12. Apasam Save pentru a termina.
Cautam in folderul unde am salvat fisierul : meniu.html si il deschidem cu un Browser ( Firefox, Internet Explorer, Opera etc) si putem observa ca putem da click pe fiecare.


O demonstratie o gasiti aici - Demonstratie Meniu Htm