In acest tutorial vei invata cum sa construiesti un site profesional pentru un fotomodel, incepand de la zero, cu constructia fundalului, meniului, imaginilor si terminand cu textul si alte detalii.

1.Deschidem un nou document: File - New - 800 px x 750 x - OK.


2.Descarcam si adaugam urmatoarea textura din piatra pe care o vom aplica ca fundal:

  Click dreapta pe ea - Copy to Clipboard. Intoarce-te in Photoshop si apasa CTRL + V pentru a o lipi.

3.Image - Adjustments - Hue/Saturation sau apasand simplu CTRL + U, bifam Colorize si adaugam valorile:


4.Filter - Sharpen - Sharpen More. 
  Acum fundalul ar trebui sa fie asemanator:


5.Adaugam un nou layer ( Layer - New - Layer - OK).
  Selectam unealta Rounded Rectangle Tool - radius 10px, culoarea alb si desenam partea unde va fi adaugat continutul site-ului:


6.Urmeaza sa adaugam butoanele pentru meniu.
  Sa spunem ca vrem 4 butoane la numar. Avem nevoie ca sa stim exact in cat sa impartim acea parte din meniu astfel sa incapa 4 butoane. 
  Deci de sus : View - Show - Grid. CTRL + "+" pentru a apropia si a observa mai bine.
  Dupa cum am ilustrat in imaginea urmatoare, numarand patrate + cele 2 jumatati se pare ca avem 10 patrate. Deci 4 butoane inseamna 2.5 patrate - spatiul dintre butoane. Sa spunem 2.4 patrate per buton.


7.Adaugam un nou layer.
  Selectam unealta Rounded Rectangle Tool - radius 10 px, culoarea #2da7dd si ne apucam sa desenam cele 4 butoane:


8.Nu mai avem nevoie de acele marcatii. Apasam CTRL + H pentru a le ascunde.
  Adaugam un nou layer.
  Selectam unealta Polygonal Tool, de sus setam Slide: 3 pentru a avea un triunghi echilateral si tinand apasata tasta Shift pentru ca triunghiul sa fie orientat in jos desenam astfel:


9.Apasa CTRL +J pentru a face o copie a layerului cu triunghiul.
  Apasa tasta V pentru a selecta unealta Move Tool si tinand tasta SHIFT muta triunghiul la butonul al II-lea. 
  Apasa din nou CTRL + J si repeta si pentru celelalte 2 butoane.


10.Am folosit pentru textul butoanelor fontul Arista.
  Click aici pentru a descarca fontul.
  Selecteaza culoarea alb, marimea 21 px / Smooth si adauga numele butoanelor:


11.Apoi intr-un nou layer, cu acelasi font dar de marime 31 px numeroteaza butoanele. Apoi modifica Opacitatea layerului la 25%:


12.Urmeaza sa adaugam o imaginea in partea stanga.

Comentarii (30)

Subscribe to this comment's feed

bebebobo said:

	Si dupa ce il creezi cum faci sa il pui in dreamweaver sau in orice alt program pentru al putea publica ??? nu stiu si imi trebuie URGENT PLSS!
	Reporteaza Abuz Displace Apreciaza

aprilie 25, 2009 | url
Voturi: +1

$erginho said:

	Asta ma intrebam si eu :-?
	Reporteaza Abuz Displace Apreciaza

aprilie 25, 2009 | url
Voturi: +1

admin said:

	Este ceva mai complicat, se poate folosi unealta SliceTool, dar trebuie invatat si ceva html pentru a finaliza un site. Dar eu va recomand sa va perfectionati pentru Photoshop doar, apoi daca mai avansati sa le treceti in html.
	Reporteaza Abuz Displace Apreciaza

aprilie 25, 2009 | url
Voturi: +1

bebebobo said:

	As putea sa creez un subiect in forum si sa intreb ??
	Reporteaza Abuz Displace Apreciaza

aprilie 26, 2009
Voturi: +0

admin said:

	Sigur dar nu cred ca este cineva care sa-ti raspunda :(
	Reporteaza Abuz Displace Apreciaza

aprilie 26, 2009 | url
Voturi: +1

Radu said:

	Dasa nu ai reusit te pot ajuta eu sa codezi un site :) Sa-mi scrii pe mess pe adresa popradu2002
	Reporteaza Abuz Displace Apreciaza

aprilie 28, 2009 | url
Voturi: +0

alexe poldi said:

	:o Vrei sa stii cum sa faci pagini web folosind NUMAI photoshop-ul? Foarte simplu. Tasteaza in browser www.google.com, apoi cauta dupa "create web page using photoshop". Tutorialele cu adevarat utile se fac numai in limba engleza. Cioace d-astea cu layere fac de obicei copii.
	Reporteaza Abuz Displace Apreciaza

mai 05, 2009 | url
Voturi: +0

admin said:

	Grija mare sa nu induci in eroare - orice layout este facut pe layere (straturi), altfel nu ai cum sa lucrezi. Poate ca nu este un layout atat de avansat si profesionist, dar iti ofera o idee cam cum se porneste la drum.
	Reporteaza Abuz Displace Apreciaza

mai 05, 2009 | url
Voturi: +0

dragos-test said:

	Stimata Domn admin dar video tutorial nu merge Aici de pus? Ca daca este numai tutoriale cu poze nu este destul de bine scuze dar sti si tu asta mai bine decat mine. pai eu vreau sa pun aici tutorialele care urmeaza sa le fac dar nu merge. Stima
	Reporteaza Abuz Displace Apreciaza

mai 11, 2009
Voturi: -1

admin said:

	Nu prea inteleg ce vrei sa zici ? Te rog scrie in limba romana. Aici este un site de tutoriale, pot fi si video si normale, eu am preferat sa le fac normale - poate mi-ar fi mai usor video.
	Reporteaza Abuz Displace Apreciaza

mai 11, 2009 | url
Voturi: +1

Mare-estegradina-lui-admin said:

	Tu esti Admin? uite ce ai scri tu deci te contazici singurel......... Replied Comment: Nu prea inteleg ce vrei sa zici ? Te rog scrie in limba romana. Aici este un site de tutoriale, pot fi si video si normale, eu am preferat sa le fac normale - poate mi-ar fi mai usor video. ------------------------------------ dragos-test;Zice daca nu Scrieam in Romana cum mai inteles pe jumate? Sa fi sanatos.
	Reporteaza Abuz Displace Apreciaza

mai 11, 2009
Voturi: -1

admin said:

	Cum m-am contrazis ? Ca m-am chinuit sa pun semnele de punctuatie, sa inteleg o propozitie ? Nu te mai da asa istet, ca mi-e greu sa cred ca esti.
	Reporteaza Abuz Displace Apreciaza

mai 11, 2009 | url
Voturi: +2

cosminel4u said:

	Cel de deasupra de admin ... uita-te la scrisul tau ... nu inteleg o boaba .. si mai comentez ?? =)) Cred ca nu ai nici macar 10 ani =)) 8)
	Reporteaza Abuz Displace Apreciaza

mai 11, 2009
Voturi: +0

cosmiyin said:

	dar cu ce extensie salvam...adik e una sa se potriveasca cu cea de flash ? :D
	Reporteaza Abuz Displace Apreciaza

iulie 01, 2009
Voturi: +1

DarkPoint Graphics said:

	frumos tutorial dar c-am simplu pune si tu mai multe tutoriale de layout-uri felicitari pentru tutorialele realizate pana acum admine!
	Reporteaza Abuz Displace Apreciaza

decembrie 12, 2009 | url
Voturi: +2

Shuberan said:

	ma scuzati ca scriu aici, dar nu pot sa imi fac cont pe siteul vostru, si as vrea sa vorbesc cu un admin... daca e disponibil...pe mess... numai ca nu am nici un id al vrunui admin :D ... pls ajutativa In legatura cu tutorialul ... sooper tare dar si destul de greu pt mine
	Reporteaza Abuz Displace Apreciaza

ianuarie 05, 2010
Voturi: +1

admin said:

	Te rog da mai multe detalii, eventual creeaza un Topic pe forum si spune-ne exact de ce nu iti poti crea cont. Ai primit mailul de activare? Ti-ai activat contul ?
	Reporteaza Abuz Displace Apreciaza

ianuarie 05, 2010
Voturi: +0

Shuberan said:

	Am reusti , dar cu alta adresa . Oricum ms . As vrea si eu id tau (admin) pentru ca , cred ca am multe de invatat de la tine daca esti amabil.
	Reporteaza Abuz Displace Apreciaza

ianuarie 06, 2010
Voturi: +0

methala said:

	Foarte fain tutorialul! Explicativ, simplu, tot ce vrei pt un incepator! Sper ca forumul ajuta la fel de mult, si aici fac aluzie la ..."fiintele" alea care te ajuta la misto trantindu-ti un "cauta pe google" ca raspuns la intrebarea ta. Dezgustatoare fiinte. Numai bine! :)
	Reporteaza Abuz Displace Apreciaza

februarie 05, 2010
Voturi: +0

Razvan Zamfir said:

	Rezultatul arată bine şi explicaţiile sunt clare. 8) Totuşi, nu pot să nu remarc faptul că tutorialul seamănă prea mult cu "http://smashingpoint.com/model-portfolio-layout.html" (care e mai vechi).
	Reporteaza Abuz Displace Apreciaza

februarie 24, 2010
Voturi: +0

amaru said:

	Super tare. Cand veniti cu un tutorial pt Joomla?
	Reporteaza Abuz Displace Apreciaza

aprilie 04, 2010
Voturi: +0

Dj KLaus said:

	Foarte frumos si bine explikat tutorialu , dar am o intrb cum pot sa scriu cu html nu din photoshop??
	Reporteaza Abuz Displace Apreciaza

aprilie 06, 2010 | url
Voturi: +0

hirjoi said:

	poti sa ma ajuti si pe mine? stiu cum sa fac prima pagina pentru un seit foto dar nu am gasit inca cum sa fac urmatoarele: -atunci cand vrei sa intri la sectiunea galerie cum trebuie facut ca sa iti intri fotografiile(format mic) si apoi sa poti trece de la una la alta.(fotografia fiind pe tot ecranul)
	Reporteaza Abuz Displace Apreciaza

aprilie 11, 2010
Voturi: +0

admin said:

	Sa pui link pe imaginea mica direct catre imaginea mare.
	Reporteaza Abuz Displace Apreciaza

aprilie 12, 2010
Voturi: +1

cezar666 said:

	mi-a mers tot inafara de pasul al 12-lea mai exact Click dreapta pe nou layer - Create Clipping Mask pentru a se incadra in continut. imi poate spune cineva ce am gresit ? sunt la inceput :)
	Reporteaza Abuz Displace Apreciaza

iulie 08, 2010
Voturi: +0

nsessq said:

	salut am si eu o mica mare problema, incerc sa fac un mic design in PS, si incerc sa folosesc tehnica data de tine mai sus cu inseararea unei imagini copy apoi ctrl v si pe urma clipping mask, dar dupa ce dau ultima comanda imaginea respectiva imi dispare, vizual no mai vad, dar ea k si layer exista, ce pot face pls
	Reporteaza Abuz Displace Apreciaza

noiembrie 05, 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: +0

bobodesign said:

	@bebebobo trebuie sa creezi foaia de stil (CSS) atata tot ... vezi tutorialu asta, sper sa iti fie de folos http://1stoptutorials.com/Crea...plate.html Bafta!
	Reporteaza Abuz Displace Apreciaza

iulie 25, 2011
Voturi: +0

dorel said:

	este interesant cati analfabeti vor sa-si faca site-uri....(lol)
	Reporteaza Abuz Displace Apreciaza

noiembrie 07, 2011
Voturi: +0

goday said:

	nu am gasit inca cum sa fac urmatoarele: -atunci cand vrei sa intri la sectiunea galerie cum trebuie facut ca sa iti intri
	Reporteaza Abuz Displace Apreciaza

decembrie 03, 2011 | url
Voturi: +0