Buton din Sticla Transparent

Photoshop - Grafica Web


1.Deschide un nou document: File - New - 400 x 400 px - OK.

2.Selecteaza unealta Paint Bucket Tool, o culoare mai deschisa, eu am folosit #67979b si schimba culoarea de fundal.


3.Adauga un nou layer : Layer - New - Layer - OK.
  Selecteaza unealta Rounded Rectangle Tool (culoarea negru, de sus selecteaza Radius: 8 px) si deseneaza dreptunghiul in care se va incadra butonul:


4.Click dreapta pe layerul nou - Blending Options - modifica Fill la 0 %:


5.Bifeaza Outer Glow si adauga setarile:


6.Bifeaza Gradient Overlay - modifica Angle la 0 grade apoi adauga urmatorul gradient:

  Pe margini - jos setezi culoarea alb. Apoi Incepi cu partea de sus, in dreptul celei din stanga setezi opacity 100 %, apoi dai click mai in dreapta pentru a adauga un noua, si setezi Opacity: 0 %, la urmatoarea, mai in dreapta, la fel, opacity: 0 %, iar la ultima, in capat - opacity: 100 %.

7.Bifeaza in final "Stroke" si adauga setarile:

  La Fill Type: selecteaza Gradient si adauga urmatoarele culori - #b1b1b1 - #000000 - #ffffff - #000000 - #b1b1b1 :

  Ok pentru a iesi.

8.Selecteaza Horizontal Type Tool ( Arial / Regular / 17 px / Strong / culoarea alb) si scrie numele butonului:


9.Click dreapta pe layerul cu textul - selecteaza Blending Options - bifeaza Drop Shadow si adauga setarile:


Acum daca vrei sa mai adaugi butoane, poti selecta cele 2 layere, tinand tasta CTRL si click pe ele, apoi click dreapta in panoul cu layere - Duplicate Layers.. - OK. Selecteaza Move Tool si muta butonul.

Imaginea finala:

Click aici pentru a creea un cont nou
Aboneaza-te prin RSS
Comentarii (15)add comment

Craciun Daniel said:

la pasul 5 cu outerglow ati pus imaginea gresita cred :-s , oricum gg pt efort .
 
Reporteaza Abuz
Displace
Apreciaza
martie 11, 2009
Voturi: +0

admin said:

Da, am gresit, pusesem link catre poza de la pasul 4. Multumim de atentionare. S-a modificat :)
 
Reporteaza Abuz
Displace
Apreciaza
martie 11, 2009 | url
Voturi: +2

j0hnny said:

dar si cum il pun pe site ? :)
 
Reporteaza Abuz
Displace
Apreciaza
martie 16, 2009 | url
Voturi: +0

j0hnny said:

nu reusesc sa fac mai multe butoane >:( >:( :'( :'(
 
Reporteaza Abuz
Displace
Apreciaza
martie 16, 2009 | url
Voturi: +1

admin said:

Pai trebuie sa inveti HTML ca sa il pui pe site.

Ca sa faci mai multe butoane, muta-te in panou Layers. Tine apasat tasta CTRL (sau SHIFT) si da click odata pe layerul cu butonul, odata pe cel cu textul, astfel incat sa le ai selectate pe amandoua, apoi click dreapta oriunde in interiorului panoului Layers si selecteaza duplicate layers. Apoi apasa tasta V si din sageti muta butonul.

Sper ca te vei descurca :)
 
Reporteaza Abuz
Displace
Apreciaza
martie 16, 2009 | url
Voturi: +1

j0hnny said:

gata ... merge .. 8) 8) 8) Multumesc !
 
Reporteaza Abuz
Displace
Apreciaza
martie 20, 2009 | url
Voturi: +0

Ina said:

Admin cred ca esti cel mai bun.Inteleg tot si am de gand sa invat html din pasiune.
 
Reporteaza Abuz
Displace
Apreciaza
mai 17, 2009
Voturi: +0

N3urON said:

Mi'a iesit si mie la fel ca al tau anyways...totorialul nu e chiar complet...a mai trebuit sa fac ceva ca sami iasa asa,knd am facut prima data dupa tutorial exact mia iesit putin marginile drepte dar dupacea miau ie sit asa ca la al tau ca am mai mesterit putin.
 
Reporteaza Abuz
Displace
Apreciaza
august 06, 2009 | url
Voturi: +0

puma78 said:

sal admin am citit mai multe comenturi si am vazut ca majoritatea intreaba cum le pui pe site si ma gandeam ca ar fi un tutorial f bun si acesta mai ales ca ai si categoria cu tutoriale html.

Asteptam Tutoriale HTML ;)
 
Reporteaza Abuz
Displace
Apreciaza
august 17, 2009
Voturi: -1

admin said:

Pai e destul de simplu, pur si simplu salvezi o imagine cu un buton apoi cu tag-ul inserezi imaginea in html dupa care o incadrezi cu tagu poza

Daca ai fi citit tutorialele html ai fi stiut. Dar probabil tu vrei un tutorial cu unealta Slice Tool - poate va urma.
 
Reporteaza Abuz
Displace
Apreciaza
august 17, 2009
Voturi: +0

puma78 said:

defapt am citit tutorialele html si am invatat din ele pt ca sunt explicate f bine dar da ma gandeam la un tutorial cu slice tool
 
Reporteaza Abuz
Displace
Apreciaza
august 17, 2009
Voturi: +0

evening dresses said:

spectrum of genres – some bordering on performance art, some vaudevillian, but if you’re
 
Reporteaza Abuz
Displace
Apreciaza
septembrie 29, 2010 | url
Voturi: +0

Coach Outlet Online said:

jhdhggsergfdHere you will find all the latest Coach Outlet coupons.
 
Reporteaza Abuz
Displace
Apreciaza
iulie 28, 2011 | url
Voturi: +0

goday said:

a mai trebuit sa fac ceva ca sami iasa asa,knd am facut prima data dupa tutorial
 
Reporteaza Abuz
Displace
Apreciaza
decembrie 03, 2011 | url
Voturi: +0

replica watches said:

white gold pendant and then the problem Replica Cartier ended, being dressed in hand put up to do with suitable dress wear.
 
Reporteaza Abuz
Displace
Apreciaza
decembrie 07, 2011 | url
Voturi: +0

Adauga un comentariu
Micsoreaza | Mareste

busy