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 (31)

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: +1

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

admin said:

	Poate in viitor o sa facem si un tutorial de acesta. Aceasta tehnica, cu Slice Tool nu cred ca se poate folosi pentru un site intreg. Trebuie combinata cu HTML-ul propriu zis pentru a crea un site. Pentru fundal trebuie sa incluzi in tagul body , atributul background:
	Reporteaza Abuz Displace Apreciaza

februarie 05, 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 SI ar fi Suuuuuper sa faceti un tutorial pt creare pagini web folosind PS si HTML CSS. Pt astia mai mici! 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
	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: +0

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: +1

gigik said:

	Posteaza gratuit anuntul tau pe http://AnunturiCL.ro
	Reporteaza Abuz Displace Apreciaza

martie 06, 2010
Voturi: -1

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

gopo said:

de ce asa si nu varianta mai simpla ? un slice de 1px latime si de lungimea meniului .... iar logou se poate cu un background transparent salvata .png ... iar style.css se poate face in felul urmator .. mult mai smplu de altfel #header { background:url(poza_de_fundal_a_headerului) no-repeat; } #logo p{ background:url(logo.png) no-repeat; } #meniu { background: url(bg_meniu.jpg) repeat-x; color: white sau #fff ; } #menu ul li { font-family: fontul care l-ati folosit; font-size: X px; margin:auto; padding:X px; /* aici se ia cu ruleta in photoshop*/ } #meniu a { text-decoration: none; } #meniu a:hover { text-decoration: underline; color: culoarea fontului dorita; etc } si html: logoul tau

Reporteaza Abuz Displace Apreciaza

mai 06, 2010 | url
Voturi: +0

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

cristi said:

	@Junio nu prea am inteles ce vrei tu... tu vrei cand ai sageata de la mouse pe o imagine , aceasta sa ruleze ? daca da poti incerca asa:[sa fie si hyperlink] {asta nu stiu sigur daca va merge} mai poti incerca cu javascript cu function onMouseOver , dar nu stiu sigur cum se foloseste. daca nu te-am ajutat , imi pare rau.
	Reporteaza Abuz Displace Apreciaza

iulie 05, 2010
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

Nume

Email

Website

Comentariu

Micsoreaza | Mareste

Aboneazate pe email (doar utilizatorii inregistrati)

Adauga comentariu