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 Html. 

Comentarii (34)

Subscribe to this comment's feed

Pataricu said:

	Pai si cum la fiecare , de exemplu la acasa : cand dau click sa imi apara (nu stiu ce)?
	Reporteaza Abuz Displace Apreciaza

februarie 03, 2010
Voturi: +0

admin said:

	Nu inteleg exact ce vrei sa spui. Trebuie sa faci o pagina html denumita dupa acel link care poate contine ce vrei tu.
	Reporteaza Abuz Displace Apreciaza

februarie 03, 2010
Voturi: +2

methala said:

tutorialul e foarte bun! multumim!!! am cautat mult timp asa ceva si nu gaseam,plus nimeni nu-mi explica(concret). acum am inteles cum e cu slice-urile in PS. totusi mai am o nelamurire: cum ma ajuta sa creez o pagina web? se genereaza un html, dar e nestilizat, pozitionat aiurea, etc. si spre exemplu, vreau sa adaug un background in spatele layout-ului creat in PS. cum fac asta? ca practic exista deja un background (layout-ul in sine) daca nu ma insel. Sper ca s-a inteles ceva. Revin, in orice caz! :) Mersi frumos!

Reporteaza Abuz Displace Apreciaza

februarie 04, 2010
Voturi: +0

methala said:

	Multumesc! M-am lamurit inca de ieri cu backgroundul, dar mi-au ramas alte neclaritati. Sper sa le pot da de cap :D SI ar fi Suuuuuper sa faceti un tutorial pt creare pagini web folosind PS si HTML CSS. Pt astia mai mici! :D Sanatate maxima va doresc! MAXIM am spus! :)
	Reporteaza Abuz Displace Apreciaza

februarie 05, 2010
Voturi: +0

superBROOKLYN said:

	wooow mersi chiar avem nevoie de asa ceva :D 8)
	Reporteaza Abuz Displace Apreciaza

februarie 07, 2010
Voturi: +0

cristy21steaua said:

	Am si eu o intrebare/nelamurire: Am facut meniul cu link-uri, dar cum il adaug in site?
	Reporteaza Abuz Displace Apreciaza

februarie 12, 2010
Voturi: +0

admin said:

	Pai o data ce ai un site ar trebui sa stii. Trebuie sa copii codul generat de pagina html dintre tagurile in pagina ta. Trebuie sa ai si imaginile in acelasi director
	Reporteaza Abuz Displace Apreciaza

februarie 12, 2010
Voturi: +0

cristy21steaua said:

	Acuma lucrez la un site. Sunt incepator. Imi puteti lasa o adresa de mail sau un id de mess.?
	Reporteaza Abuz Displace Apreciaza

februarie 12, 2010
Voturi: +0

cristy21steaua said:

	ce trebuie sa copii pentru a-l avea in site?*
	Reporteaza Abuz Displace Apreciaza

februarie 12, 2010
Voturi: +0

zebek911 said:

	Buna ziua as avea si eu o problema daca as face si eu ceva asemanator cum as putea sa-l pun pe forum? adica sa nu mai am meniu acela de home..portal.. etc doar sa le includ in logo m-ar putea ajuta cineva?
	Reporteaza Abuz Displace Apreciaza

februarie 21, 2010 | url
Voturi: +0

admin said:

	Trebuie sa copiati codul sursa - invatati intai ceva HTML si apoi faceti aceste tutoriale daca vreti sa creati un site - nu doar un meniu. PS: Scrieti corect. Comentariile care contin greseli gramaticale vor fi sterse.
	Reporteaza Abuz Displace Apreciaza

februarie 22, 2010
Voturi: +1

GeO said:

	Unealta Slice Tool unde o gasesc? Folosesc Ps Cs4 pe 64 bites
	Reporteaza Abuz Displace Apreciaza

martie 03, 2010
Voturi: +0

admin said:

	Pai imaginea de la pasul 3 pentru ce e?
	Reporteaza Abuz Displace Apreciaza

martie 04, 2010
Voturi: +0

nuckleu said:

	foarte interesant nu am ştiut că se poate realiza mia ieşit şi mie dar nu ştiu cum să-l integrez într-un blog blogspot, ma puteţi ajuta cu un sfat ? Dealtfel foarte interesante tutorialele dumneavoastră, felicitari .
	Reporteaza Abuz Displace Apreciaza

martie 04, 2010 | url
Voturi: +2

admin said:

	Este ceva mai complicat integrarea pe care vrei tu sa o faci. Trebuie sa inveti ceva HTML CSS, apoi ti se va parea usor.
	Reporteaza Abuz Displace Apreciaza

martie 04, 2010
Voturi: +1

nuckleu said:

	ce este mai rău, este ca întâmpină anumite dificultaţi când se deschide fisierul html cu un browser prin faptul ca apar mesaje de gen popup şi in unele cayuri nu se deschide pagina .
	Reporteaza Abuz Displace Apreciaza

martie 04, 2010 | url
Voturi: +0

Filme si carti said:

	Naspa. In primul rand e facut cu tabele ceea ce imi poate dauna structurii html. FITI si voi web2.0 !!
	Reporteaza Abuz Displace Apreciaza

martie 05, 2010 | url
Voturi: +0

admin said:

	Ce reprezinta pentru tine Web 2.0 ? Div-uri ? Photoshop-ul nu stie sa faca Div-uri ci doar tabele. Este o metoda de baza de a face un site si dupa cum stiu eu, intai inveti in html tagurile de baza, apoi tabelele apoi incerci sa faci site-uri cu css divuri.
	Reporteaza Abuz Displace Apreciaza

martie 05, 2010
Voturi: +2

Dj KLaus said:

	eo am fkt tot ce scrie dar cu o imagine de a mea , nu un meniu ... dupa ce am salvat meniu.html in pk lam uploadat pe site si numi arata imaginile dar cand il deschid in fire fox de pe desktop imi apare , dc oare?
	Reporteaza Abuz Displace Apreciaza

aprilie 06, 2010 | url
Voturi: +0

Adrian-ps said:

	Da... dar cand trec cu cursorul peste anumita intrare de ex. "Acasa" nu ar trebuii sa imi clipeasca sau cv de genu?.. gen "a href" in html? sau se poate face asa cva in ps?
	Reporteaza Abuz Displace Apreciaza

aprilie 06, 2010
Voturi: +0

AURELIAN said:

	SUNTETI SUUPER TARI FARTILOR MERITA SACRIFICIU SPAR CA SI PRODUCETI BANI DACA AVETI PS INVATAT PAS CU PAS. TINET-O TOT ASA MULTUMESC
	Reporteaza Abuz Displace Apreciaza

aprilie 30, 2010
Voturi: +1

admin said:

	Mai simplu pentru cei ce cunosc css.
	Reporteaza Abuz Displace Apreciaza

mai 06, 2010
Voturi: +0

bughy said:

	am cs4 si nu am sau nu gasesc slice tool trebuie sa imi iau cs3?
	Reporteaza Abuz Displace Apreciaza

iunie 15, 2010
Voturi: +0

cristi said:

	chestia asta poate fi facut direct din html cu maps, cred ca e mai usor. Am sa incerc si din photoshop.
	Reporteaza Abuz Displace Apreciaza

iunie 19, 2010
Voturi: +0

varcolac1000 said:

	asta este calea cea mai usoara dar nu cea mai placuta , daca doriti sa editati meniul stati sa faceti toata chestia asta din tutorial mere , incercati cu html si css, e foarte usor de lucrat :)
	Reporteaza Abuz Displace Apreciaza

iunie 22, 2010 | url
Voturi: +0

Junio said:

	Foarte bun tutorialul 8) 8) Bravo ! Dar asi avea o intrebare. Cum as putea sa fac si o animatie cand dau cu mous-ul pe o casuta ? Un exemplu aici : http://www.starmedia-team.com/ Scuze nu vreau sa fac publicitate dar nu stiu cum pot sal iau separat :
	Reporteaza Abuz Displace Apreciaza

iulie 04, 2010 | url
Voturi: +0

amazingweb said:

	ar fi foarte bine daca ati face niste tutoriale despre cum se fac logo-uri , bannere si layout-uri in ps.
	Reporteaza Abuz Displace Apreciaza

august 01, 2010 | url
Voturi: +0

vladutzul007 said:

	nush daca e corecta parerea mea dar eu cred ca sa intelegi bine si sa faci chestia asta trebuie prima data sa stii cat de cat cum e treaba cu HTML ;) ;) ;)
	Reporteaza Abuz Displace Apreciaza

septembrie 27, 2010
Voturi: +0

tiffany jewelry said:

	Acum am inteles baaaaaaaah la 7 nu ai mentionat ca atunci cand bifam stimulate sa fie selectat BRUSH nu PENCIL !!!!! asta era fratilor acuma o sa va mearga
	Reporteaza Abuz Displace Apreciaza

noiembrie 26, 2010 | url
Voturi: -1

gaby2312231 said:

	am facut tot dar cum o pun pe un forum gratuit?
	Reporteaza Abuz Displace Apreciaza

septembrie 14, 2011
Voturi: +1

wedding dresses said:

	the groom sacrifices (or arranges for the sacrifice of) an animal such as a sheep, that part of the meat is given to the poor, and that the groom hosts a party to celebrate and advertise the fact that the marriage has taken place.
	Reporteaza Abuz Displace Apreciaza

octombrie 31, 2011 | url
Voturi: +0

ugg tall boots said:

	All boots will have soft foam insole of sheep rind with light weight.
	Reporteaza Abuz Displace Apreciaza

noiembrie 11, 2011 | url
Voturi: +0

The North face coupons said:

	This is an appreciative letter to thank the people who provided pin-point and professional UK dissertation writing help at the time when I was totally disappointed..
	Reporteaza Abuz Displace Apreciaza

noiembrie 23, 2011 | url
Voturi: +0

Discount North face said:

	All that we are is the consequence of what we have estimation. Wait… Has anyone exhorted dissertation to you. Keep the articles progressing !
	Reporteaza Abuz Displace Apreciaza

noiembrie 23, 2011 | url
Voturi: +0